From 5edb36670b3fd1d732f3a56d163cd1c6aaba8d15 Mon Sep 17 00:00:00 2001 From: CSantosM <4a.santos@gmail.com> Date: Tue, 27 Jan 2026 15:39:09 +0100 Subject: [PATCH] ov-components: standardize device service usage and improve component styles --- .../audio-devices/audio-devices.component.scss | 1 + .../audio-devices/audio-devices.component.ts | 6 +++--- .../lib/components/settings/selector-shared.scss | 7 ++++--- .../video-devices/video-devices.component.scss | 1 + .../video-devices/video-devices.component.ts | 6 +++--- .../src/lib/components/toolbar/toolbar.component.ts | 6 +++--- .../lib/openvidu-components-angular-ui.module.ts | 10 +++++----- .../src/lib/openvidu-components-angular.module.ts | 13 ++++++------- .../src/lib/services/e2ee/e2ee.service.ts | 5 +++-- 9 files changed, 29 insertions(+), 26 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss index f04cdee58..c4425650a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss @@ -3,6 +3,7 @@ :host { display: flex; align-items: center; + height: 100%; .audio-device-selector { @include shared.device-selector-base(); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts index 4673c49dc..5eb1639b5 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts @@ -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 diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss index 3eb313176..17c36a6bc 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss @@ -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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss index 798e878cc..eb81d85c1 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss @@ -3,6 +3,7 @@ :host { display: flex; align-items: center; + height: 100%; .video-device-selector { @include shared.device-selector-base(); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts index 8a56ba64e..a6f051f1c 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts @@ -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 diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts index 10b850a00..758d50fb6 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts @@ -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(); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts index fd41024e5..a8ec0b01a 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts @@ -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, diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts index f43f57c4e..1f180b24b 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts @@ -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], diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/e2ee/e2ee.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/e2ee/e2ee.service.ts index 3f14173b0..0fad22e82 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/e2ee/e2ee.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/e2ee/e2ee.service.ts @@ -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',