ov-components: Refactored and improved config

OpenVidu · Sep 4, 2024 · bd6ba55 · bd6ba55
1 parent 724fbd9
commit bd6ba55
Show file tree

Hide file tree

Showing 15 changed files with 199 additions and 71 deletions.
diff --git a/...ngular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts b/...ngular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts
@@ -11,14 +11,16 @@ import {
 	ViewChild,
 	ViewContainerRef
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { combineLatest, map, Subscription } from 'rxjs';
 import { StreamDirective } from '../../directives/template/openvidu-components-angular.directive';
 import { ParticipantTrackPublication, ParticipantModel } from '../../models/participant.model';
 import { LayoutService } from '../../services/layout/layout.service';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { PanelService } from '../../services/panel/panel.service';
 import { GlobalConfigService } from '../../services/config/global-config.service';
+import { ServiceConfigService } from '../../services/config/service-config.service';
+import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
 /**
  *
@@ -78,24 +80,29 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	private resizeTimeout: NodeJS.Timeout;
 	private videoIsAtRight: boolean = false;
 	private lastLayoutWidth: number = 0;
+	private layoutService: LayoutService;
 
 	/**
 	 * @ignore
 	 */
 	constructor(
-		private layoutService: LayoutService,
+		private serviceConfig: ServiceConfigService,
 		private panelService: PanelService,
 		private participantService: ParticipantService,
 		private globalService: GlobalConfigService,
+		private directiveService: OpenViduComponentsConfigService,
 		private cd: ChangeDetectorRef
-	) {}
+	) {
+		this.layoutService = this.serviceConfig.getLayoutService();
+	}
 
 	ngOnInit(): void {
 		this.subscribeToParticipants();
 		this.subscribeToCaptions();
 	}
 
 	ngAfterViewInit() {
+		console.log('LayoutComponent.ngAfterViewInit');
 		this.layoutService.initialize(this.layoutContainer.element.nativeElement);
 		this.lastLayoutWidth = this.layoutContainer.element.nativeElement.getBoundingClientRect().width;
 		this.listenToResizeLayout();
@@ -142,11 +149,20 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 			}
 		});
 
-		this.remoteParticipantsSubs = this.participantService.remoteParticipants$.subscribe((participants) => {
+		this.remoteParticipantsSubs = combineLatest([
+			this.participantService.remoteParticipants$,
+			this.directiveService.layoutRemoteParticipants$
+		  ])
+		  .pipe(
+			map(([serviceParticipants, directiveParticipants]) =>
+			  directiveParticipants !== undefined ? directiveParticipants : serviceParticipants
+			)
+		  )
+		  .subscribe((participants) => {
 			this.remoteParticipants = participants;
 			this.layoutService.update();
 			this.cd.markForCheck();
-		});
+		  });
 	}
 
 	private listenToResizeLayout() {

diff --git a/...ar/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/...ar/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -3,7 +3,6 @@ import { Subscription } from 'rxjs';
 import { ILogger } from '../../models/logger.model';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
-import { LayoutService } from '../../services/layout/layout.service';
 import { LoggerService } from '../../services/logger/logger.service';
 import { OpenViduService } from '../../services/openvidu/openvidu.service';
 import { TranslateService } from '../../services/translate/translate.service';
@@ -55,11 +54,9 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	@HostListener('window:resize')
 	sizeChange() {
 		this.windowSize = window.innerWidth;
-		this.layoutService.update();
 	}
 
 	constructor(
-		private layoutService: LayoutService,
 		private loggerSrv: LoggerService,
 		private libService: OpenViduComponentsConfigService,
 		private cdkSrv: CdkOverlayService,

diff --git a/...ular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts b/...ular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
@@ -47,6 +47,7 @@ import {
 	Track
 } from 'livekit-client';
 import { ParticipantModel } from '../../models/participant.model';
+import { ServiceConfigService } from '../../services/config/service-config.service';
 
 /**
  * @internal
@@ -88,15 +89,16 @@ export class SessionComponent implements OnInit, OnDestroy {
 	private updateLayoutInterval: NodeJS.Timeout;
 	private captionLanguageSubscription: Subscription;
 	private log: ILogger;
+	private layoutService: LayoutService;
 
 	constructor(
+		private serviceConfig: ServiceConfigService,
 		private actionService: ActionService,
 		private openviduService: OpenViduService,
 		private participantService: ParticipantService,
 		private loggerSrv: LoggerService,
 		private chatService: ChatService,
 		private libService: OpenViduComponentsConfigService,
-		private layoutService: LayoutService,
 		private panelService: PanelService,
 		private recordingService: RecordingService,
 		private broadcastingService: BroadcastingService,
@@ -106,6 +108,7 @@ export class SessionComponent implements OnInit, OnDestroy {
 		private cd: ChangeDetectorRef
 	) {
 		this.log = this.loggerSrv.get('SessionComponent');
+		this.layoutService = this.serviceConfig.getLayoutService();
 	}
 
 	@HostListener('window:beforeunload')
@@ -205,7 +208,7 @@ export class SessionComponent implements OnInit, OnDestroy {
 	}
 
 	async ngOnDestroy() {
-		if(this.shouldDisconnectRoomWhenComponentIsDestroyed) {
+		if (this.shouldDisconnectRoomWhenComponentIsDestroyed) {
 			await this.disconnectRoom();
 		}
 		this.room.removeAllListeners();

diff --git a/...ts/openvidu-components-angular/src/lib/components/settings/captions/captions.component.ts b/...ts/openvidu-components-angular/src/lib/components/settings/captions/captions.component.ts
@@ -4,6 +4,7 @@ import { CaptionsLangOption } from '../../../models/caption.model';
 import { CaptionService } from '../../../services/caption/caption.service';
 import { LayoutService } from '../../../services/layout/layout.service';
 import { OpenViduService } from '../../../services/openvidu/openvidu.service';
+import { ServiceConfigService } from '../../../services/config/service-config.service';
 
 /**
  * @internal
@@ -22,8 +23,11 @@ export class CaptionsSettingComponent implements OnInit, OnDestroy {
 	private captionsStatusSubs: Subscription;
 	private sttStatusSubs: Subscription;
 
+	private layoutService: LayoutService;
 
-	constructor(private layoutService: LayoutService, private captionService: CaptionService, private openviduService: OpenViduService) {}
+	constructor(private serviceConfig: ServiceConfigService, private captionService: CaptionService, private openviduService: OpenViduService) {
+		this.layoutService = this.serviceConfig.getLayoutService();
+	}
 
 	ngOnInit(): void {
 		// this.isOpenViduPro = this.openviduService.isOpenViduPro();

diff --git a/...ngular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts b/...ngular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
@@ -4,11 +4,10 @@ import { Subscription } from 'rxjs';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 import { LayoutService } from '../../services/layout/layout.service';
-import { OpenViduService } from '../../services/openvidu/openvidu.service';
 import { ParticipantService } from '../../services/participant/participant.service';
-import { StorageService } from '../../services/storage/storage.service';
 import { Track } from 'livekit-client';
 import { ParticipantTrackPublication } from '../../models/participant.model';
+import { ServiceConfigService } from '../../services/config/service-config.service';
 
 /**
  * The **StreamComponent** is hosted inside of the {@link LayoutComponent}.
@@ -99,17 +98,18 @@ export class StreamComponent implements OnInit, OnDestroy {
 	private videoControlsSub: Subscription;
 	private readonly HOVER_TIMEOUT = 3000;
 
+	private layoutService: LayoutService;
 	/**
 	 * @ignore
 	 */
 	constructor(
-		private openviduService: OpenViduService,
-		private layoutService: LayoutService,
+		private serviceConfig: ServiceConfigService,
 		private participantService: ParticipantService,
-		private storageService: StorageService,
 		private cdkSrv: CdkOverlayService,
 		private libService: OpenViduComponentsConfigService
-	) {}
+	) {
+		this.layoutService = this.serviceConfig.getLayoutService();
+	}
 
 	ngOnInit() {
 		this.subscribeToStreamDirectives();

diff --git a/...ular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/...ular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -49,6 +49,7 @@ import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.servic
 import { ParticipantModel } from '../../models/participant.model';
 import { Room, RoomEvent } from 'livekit-client';
 import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
+import { ServiceConfigService } from '../../services/config/service-config.service';
 
 /**
  * The **ToolbarComponent** is hosted inside of the {@link VideoconferenceComponent}.
@@ -342,11 +343,13 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	private additionalButtonsPositionSub: Subscription;
 	private fullscreenChangeSubscription: Subscription;
 	private currentWindowHeight = window.innerHeight;
+	private layoutService: LayoutService;
 
 	/**
 	 * @ignore
 	 */
 	constructor(
+		private serviceConfig: ServiceConfigService,
 		private documentService: DocumentService,
 		private chatService: ChatService,
 		private panelService: PanelService,
@@ -355,7 +358,6 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 		private oVDevicesService: DeviceService,
 		private actionService: ActionService,
 		private loggerSrv: LoggerService,
-		private layoutService: LayoutService,
 		private cd: ChangeDetectorRef,
 		private libService: OpenViduComponentsConfigService,
 		private platformService: PlatformService,
@@ -366,6 +368,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 		private cdkOverlayService: CdkOverlayService
 	) {
 		this.log = this.loggerSrv.get('ToolbarComponent');
+		this.layoutService = this.serviceConfig.getLayoutService();
 	}
 	/**
 	 * @ignore

diff --git a/...projects/openvidu-components-angular/src/lib/config/openvidu-components-angular.config.ts b/...projects/openvidu-components-angular/src/lib/config/openvidu-components-angular.config.ts
@@ -1,8 +1,9 @@
 import { ParticipantProperties } from '../models/participant.model';
 
 export interface OpenViduComponentsConfig {
-	production?: boolean,
-	participantFactory?: ParticipantFactoryFunction,
+	production?: boolean;
+	participantFactory?: ParticipantFactoryFunction;
+	services?: any;
 }
 
-export type ParticipantFactoryFunction = (props: ParticipantProperties) => any;
+export type ParticipantFactoryFunction = (props: ParticipantProperties) => any;
diff --git a/...gular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts b/...gular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
 import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective } from './admin.directive';
-import { LogoDirective } from './internals.directive';
+import { LayoutRemoteParticipantsDirective, LogoDirective } from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
 	StreamDisplayAudioDetectionDirective,
@@ -76,7 +76,8 @@ import {
 		ActivitiesPanelRecordingActivityDirective,
 		ActivitiesPanelBroadcastingActivityDirective,
 		AdminDashboardRecordingsListDirective,
-		AdminLoginErrorDirective
+		AdminLoginErrorDirective,
+		LayoutRemoteParticipantsDirective
 	],
 	exports: [
 		LivekitUrlDirective,
@@ -113,7 +114,8 @@ import {
 		ActivitiesPanelRecordingActivityDirective,
 		ActivitiesPanelBroadcastingActivityDirective,
 		AdminDashboardRecordingsListDirective,
-		AdminLoginErrorDirective
+		AdminLoginErrorDirective,
+		LayoutRemoteParticipantsDirective
 	]
 })
 export class ApiDirectiveModule {}
diff --git a/...ngular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts b/...ngular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts
@@ -1,6 +1,8 @@
-// * Private directives *
+// * Internal directives *
 
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+import { ParticipantModel } from '../../models/participant.model';
+import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 
 /**
  * Load default OpenVidu logo if custom one is not exist
@@ -21,3 +23,35 @@ export class LogoDirective {
 		element.src = this.ovLogo || this.defaultLogo;
 	}
 }
+
+/**
+ * @internal
+ */
+@Directive({
+	selector: 'ov-layout[ovRemoteParticipants]'
+})
+export class LayoutRemoteParticipantsDirective {
+	@Input() set ovRemoteParticipants(value: ParticipantModel[] | undefined) {
+		this.update(value);
+	}
+	constructor(
+		public elementRef: ElementRef,
+		private directiveService: OpenViduComponentsConfigService
+	) {}
+
+	ngOnDestroy(): void {
+		this.clear();
+	}
+
+	ngAfterViewInit() {
+		this.update(this.ovRemoteParticipants);
+	}
+
+	update(value: ParticipantModel[] | undefined) {
+		this.directiveService.setLayoutRemoteParticipants(value);
+	}
+
+	clear() {
+		this.update(undefined);
+	}
+}
diff --git a/...ngular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts b/...ngular/projects/openvidu-components-angular/src/lib/openvidu-components-angular.module.ts
@@ -1,7 +1,7 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { DeleteDialogComponent } from './components/dialogs/delete-recording.component';
@@ -25,7 +25,6 @@ import { CdkOverlayContainer } from './config/custom-cdk-overlay';
 import { OpenViduComponentsConfig } from './config/openvidu-components-angular.config';
 import { ActionService } from './services/action/action.service';
 import { ChatService } from './services/chat/chat.service';
-import { OpenViduComponentsConfigService } from './services/config/directive-config.service';
 import { DeviceService } from './services/device/device.service';
 import { DocumentService } from './services/document/document.service';
 import { LayoutService } from './services/layout/layout.service';
@@ -65,6 +64,8 @@ import { AppMaterialModule } from './openvidu-components-angular.material.module
 import { VirtualBackgroundService } from './services/virtual-background/virtual-background.service';
 import { BroadcastingService } from './services/broadcasting/broadcasting.service';
 import { TranslateService } from './services/translate/translate.service';
+import { GlobalConfigService } from './services/config/global-config.service';
+import { OpenViduComponentsConfigService } from './services/config/directive-config.service';
 
 const publicComponents = [
 	AdminDashboardComponent,
@@ -131,6 +132,8 @@ const privateComponents = [
 		DragDropModule
 	],
 	providers: [
+		GlobalConfigService,
+		OpenViduComponentsConfigService,
 		ActionService,
 		BroadcastingService,
 		// CaptionService,
@@ -139,7 +142,7 @@ const privateComponents = [
 		ChatService,
 		DeviceService,
 		DocumentService,
-		LayoutService,
+		// LayoutService,
 		LoggerService,
 		OpenViduService,
 		PanelService,
@@ -153,12 +156,12 @@ const privateComponents = [
 	]
 })
 export class OpenViduComponentsModule {
-	static forRoot(config): ModuleWithProviders<OpenViduComponentsModule> {
-		// console.log(`${library.name} config: ${environment}`);
-		const libConfig: OpenViduComponentsConfig = config;
+	static forRoot(config: OpenViduComponentsConfig): ModuleWithProviders<OpenViduComponentsModule> {
+		const providers: Provider[] = [{ provide: 'OPENVIDU_COMPONENTS_CONFIG', useValue: config }];
+
 		return {
 			ngModule: OpenViduComponentsModule,
-			providers: [OpenViduComponentsConfigService, { provide: 'OPENVIDU_COMPONENTS_CONFIG', useValue: libConfig }]
+			providers
 		};
 	}
 }