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

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();

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

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);
+		background: var(--ov-primary-action-color);
-		border: 1px solid rgba(255, 193, 7, 0.3);
+		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;

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();

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

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.hasVideoDevices = this.deviceService.hasVideoDeviceAvailable();
-		this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
+		this.hasAudioDevices = this.deviceService.hasAudioDeviceAvailable();
 
 		this.setupTemplates();
 		this.subscribeToToolbarDirectives();

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,

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],

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',