ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: standardize device service usage and improve component styles

master
CSantosM 2026-01-27 15:39:09 +01:00
parent 7208cb3a65
commit 5edb36670b
9 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
View File

@ -3,6 +3,7 @@
:host {
display: flex;
align-items: center;
height: 100%;
.audio-device-selector {
@include shared.device-selector-base();

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts
View File

@ -1,12 +1,12 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { CustomDevice } from '../../../models/device.model';
import { ILogger } from '../../../models/logger.model';
import { ParticipantModel } from '../../../models/participant.model';
import { DeviceService } from '../../../services/device/device.service';
import { LoggerService } from '../../../services/logger/logger.service';
import { ParticipantService } from '../../../services/participant/participant.service';
import { StorageService } from '../../../services/storage/storage.service';
import { ParticipantModel } from '../../../models/participant.model';
import { LoggerService } from '../../../services/logger/logger.service';
import { ILogger } from '../../../models/logger.model';
/**
* @internal

7
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss
View File

@ -179,13 +179,14 @@
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
background: var(--ov-primary-action-color);
border: 1px solid var(--ov-warning-color, #ff9800);
border-radius: 8px;
color: var(--ov-warning-color, #ff9800);
font-size: 12px;
color: var(--ov-text-primary-color);
.warning-icon {
color: var(--ov-warning-color, #ff9800);
font-size: 16px;
width: 16px;
height: 16px;

1
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
View File

@ -3,6 +3,7 @@
:host {
display: flex;
align-items: center;
height: 100%;
.video-device-selector {
@include shared.device-selector-base();

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts
View File

@ -1,12 +1,12 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subscription } from 'rxjs';
import { CustomDevice } from '../../../models/device.model';
import { ILogger } from '../../../models/logger.model';
import { ParticipantModel } from '../../../models/participant.model';
import { DeviceService } from '../../../services/device/device.service';
import { LoggerService } from '../../../services/logger/logger.service';
import { ParticipantService } from '../../../services/participant/participant.service';
import { StorageService } from '../../../services/storage/storage.service';
import { ParticipantModel } from '../../../models/participant.model';
import { LoggerService } from '../../../services/logger/logger.service';
import { ILogger } from '../../../models/logger.model';
/**
* @internal

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -436,7 +436,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
private panelService: PanelService,
private participantService: ParticipantService,
private openviduService: OpenViduService,
private oVDevicesService: DeviceService,
private deviceService: DeviceService,
private actionService: ActionService,
private loggerSrv: LoggerService,
private cd: ChangeDetectorRef,
@ -517,8 +517,8 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
this.room = this.openviduService.getRoom();
this.evalAndSetRoomName(this.libService.getRoomName());
this.hasVideoDevices = this.oVDevicesService.hasVideoDeviceAvailable();
this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
this.hasVideoDevices = this.deviceService.hasVideoDeviceAvailable();
this.hasAudioDevices = this.deviceService.hasAudioDeviceAvailable();
this.setupTemplates();
this.subscribeToToolbarDirectives();

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts
View File

@ -6,13 +6,13 @@ import { DeleteDialogComponent } from './components/dialogs/delete-recording.com
import { DialogTemplateComponent } from './components/dialogs/dialog.component';
import { RecordingDialogComponent } from './components/dialogs/recording-dialog.component';
import { LayoutComponent } from './components/layout/layout.component';
import { MediaElementComponent } from './components/media-element/media-element.component';
import { ChatPanelComponent } from './components/panel/chat-panel/chat-panel.component';
import { SessionComponent } from './components/session/session.component';
import { StreamComponent } from './components/stream/stream.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { ToolbarMediaButtonsComponent } from './components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component';
import { ToolbarPanelButtonsComponent } from './components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component';
import { MediaElementComponent } from './components/media-element/media-element.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { LinkifyPipe } from './pipes/linkify.pipe';
import { RemoteParticipantTracksPipe, TrackPublishedTypesPipe } from './pipes/participant.pipe';
@ -39,15 +39,15 @@ import { BackgroundEffectsPanelComponent } from './components/panel/background-e
import { SettingsPanelComponent } from './components/panel/settings-panel/settings-panel.component';
import { AudioDevicesComponent } from './components/settings/audio-devices/audio-devices.component';
// import { CaptionsSettingComponent } from './components/settings/captions/captions.component';
import { LandscapeWarningComponent } from './components/landscape-warning/landscape-warning.component';
import { LangSelectorComponent } from './components/settings/lang-selector/lang-selector.component';
import { ParticipantNameInputComponent } from './components/settings/participant-name-input/participant-name-input.component';
import { ThemeSelectorComponent } from './components/settings/theme-selector/theme-selector.component';
import { VideoDevicesComponent } from './components/settings/video-devices/video-devices.component';
import { VideoPosterComponent } from './components/video-poster/video-poster.component';
import { ApiDirectiveModule } from './directives/api/api.directive.module';
import { OpenViduComponentsDirectiveModule } from './directives/template/openvidu-components-angular.directive.module';
import { AppMaterialModule } from './openvidu-components-angular.material.module';
import { ThemeSelectorComponent } from './components/settings/theme-selector/theme-selector.component';
import { LandscapeWarningComponent } from './components/landscape-warning/landscape-warning.component';
import { VideoPosterComponent } from './components/video-poster/video-poster.component';
const publicComponents = [
AdminDashboardComponent,

13
openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts
View File

@ -1,6 +1,6 @@
import { OverlayContainer } from '@angular/cdk/overlay';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { ModuleWithProviders, NgModule, Provider, EnvironmentProviders } from '@angular/core';
import { EnvironmentProviders, ModuleWithProviders, NgModule, Provider } from '@angular/core';
import { CdkOverlayContainer } from './config/custom-cdk-overlay';
import { OpenViduComponentsConfig } from './config/openvidu-components-angular.config';
@ -8,7 +8,6 @@ import { ActionService } from './services/action/action.service';
import { ChatService } from './services/chat/chat.service';
import { DeviceService } from './services/device/device.service';
import { DocumentService } from './services/document/document.service';
import { LayoutService } from './services/layout/layout.service';
import { LoggerService } from './services/logger/logger.service';
import { OpenViduService } from './services/openvidu/openvidu.service';
import { PanelService } from './services/panel/panel.service';
@ -17,13 +16,13 @@ import { PlatformService } from './services/platform/platform.service';
import { RecordingService } from './services/recording/recording.service';
import { StorageService } from './services/storage/storage.service';
import { VirtualBackgroundService } from './services/virtual-background/virtual-background.service';
import { BroadcastingService } from './services/broadcasting/broadcasting.service';
import { GlobalConfigService } from './services/config/global-config.service';
import { OpenViduComponentsConfigService } from './services/config/directive-config.service';
import { OpenViduComponentsUiModule } from './openvidu-components-angular-ui.module';
import { ViewportService } from './services/viewport/viewport.service';
import { BroadcastingService } from './services/broadcasting/broadcasting.service';
import { OpenViduComponentsConfigService } from './services/config/directive-config.service';
import { GlobalConfigService } from './services/config/global-config.service';
import { E2eeService } from './services/e2ee/e2ee.service';
import { ViewportService } from './services/viewport/viewport.service';
import { VirtualBackgroundService } from './services/virtual-background/virtual-background.service';
@NgModule({
imports: [OpenViduComponentsUiModule],

5
openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/e2ee/e2ee.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { OpenViduComponentsConfigService } from '../config/directive-config.service';
import { Subject, takeUntil } from 'rxjs';
import { createKeyMaterialFromString, deriveKeys } from 'livekit-client';
import { Subject, takeUntil } from 'rxjs';
import { OpenViduComponentsConfigService } from '../config/directive-config.service';
/**
* Independent E2EE Service for encrypting and decrypting text-based content
@ -12,6 +12,7 @@ import { createKeyMaterialFromString, deriveKeys } from 'livekit-client';
* - Uses deriveKeys from livekit-client for key derivation (HKDF)
* - Uses Web Crypto API (AES-GCM) for actual encryption/decryption
* - Generates random IV for each encryption operation
* @internal
*/
@Injectable({
providedIn: 'root',