openvidu-components: Refactored dynamic components loader

openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts

@@ -5,7 +5,6 @@ import { ParticipantAbstractModel } from '../../models/participant.model';
 import { LayoutService } from '../../services/layout/layout.service';
 import { LibraryComponents } from '../../config/lib.config';
 import { LibraryConfigService } from '../../services/library-config/library-config.service';
-import { StreamComponent } from '../stream/stream.component';
 
 @Component({
 	selector: 'ov-layout',
@@ -13,9 +12,7 @@ import { StreamComponent } from '../stream/stream.component';
 	styleUrls: ['./layout.component.css']
 })
 export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
-	_localStream: ViewContainerRef;
 	_localStreamComponent: Type<any>;
-	_remoteStream: ViewContainerRef;
 	_remoteStreamComponent: Type<any>;
 
 	localParticipant: ParticipantAbstractModel;
@@ -33,16 +30,11 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	@ViewChild('localStream', { static: false, read: ViewContainerRef })
 	set stream(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._localStream = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
-			if (this._localStream) {
+				//reference.clear();
-				let component = StreamComponent;
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.STREAM)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.STREAM);
-				}
-				// this._stream?.clear();
 				this._localStreamComponent = component;
-				// this._stream.createComponent(component);
+				// reference.createComponent(component);
 			}
 		}, 0);
 	}
@@ -50,16 +42,12 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	@ViewChild('remoteStream', { static: false, read: ViewContainerRef })
 	set remoteStream(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._remoteStream = reference;
+			if (reference) {
 
-			if (this._remoteStream) {
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM);
-				let component = StreamComponent;
+				// reference.clear();
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.STREAM)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.STREAM);
-				}
-				// this.remoteStream?.clear();
 				this._remoteStreamComponent = component;
-				// this._stream.createComponent(component);
+				// reference.createComponent(component);
 			}
 		}, 0);
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts

@@ -4,8 +4,6 @@ import { LibraryComponents } from '../../config/lib.config';
 import { MenuType } from '../../models/menu.model';
 import { LibraryConfigService } from '../../services/library-config/library-config.service';
 import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
-import { ChatPanelComponent } from './chat-panel/chat-panel.component';
-import { ParticipantsPanelComponent } from './participants-panel/participants-panel/participants-panel.component';
 
 @Component({
 	selector: 'ov-panel',
@@ -15,22 +13,15 @@ import { ParticipantsPanelComponent } from './participants-panel/participants-pa
 export class PanelComponent implements OnInit, OnDestroy {
 	isParticipantsPanelOpened: boolean;
 	isChatPanelOpened: boolean;
-	_chat: ViewContainerRef;
-	_participants: ViewContainerRef;
 	menuSubscription: Subscription;
 
 	@ViewChild('chat', { static: false, read: ViewContainerRef })
 	set chat(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._chat = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.CHAT_PANEL);
-			if (this._chat) {
+				reference.clear();
-				let component = ChatPanelComponent;
+				reference.createComponent(component);
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.CHAT_PANEL)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.CHAT_PANEL);
-				}
-				this._chat?.clear();
-				this._chat.createComponent(component);
 			}
 		}, 0);
 	}
@@ -38,15 +29,10 @@ export class PanelComponent implements OnInit, OnDestroy {
 	@ViewChild('participants', { static: false, read: ViewContainerRef })
 	set participants(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._participants = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.PARTICIPANTS_PANEL);
-			if (this._participants) {
+				reference.clear();
-				let component = ParticipantsPanelComponent;
+				reference.createComponent(component);
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.PARTICIPANTS_PANEL)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.PARTICIPANTS_PANEL);
-				}
-				this._participants?.clear();
-				this._participants.createComponent(component);
 			}
 		}, 0);
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html

@@ -10,46 +10,15 @@
 			fixedTopGap="0"
 			fixedBottomGap="0"
 		>
-			<!-- Custom menu content -->
-			<!-- <ng-container *ngIf="customPanelContentTemplate; else defaultPanelContent"> -->
-				<!-- <ng-container *ngTemplateOutlet="customPanelContentTemplate"></ng-container> -->
-			<!-- </ng-container> -->
-
-			<!-- Default menu content if custom menu content is not injected -->
-			<!-- <ng-template #defaultPanelContent>
-				<ov-chat-panel *ngIf="isChatPanelOpened"></ov-chat-panel>
-				<ov-participants-panel *ngIf="isParticipantsPanelOpened"></ov-participants-panel>
-			</ng-template> -->
 			<ng-template #panel></ng-template>
-
-
-
 		</mat-sidenav>
 
 		<!-- OPENVIDU LAYOUT -->
 		<mat-sidenav-content class="sidenav-main">
-			<!-- <div id="layout-container">
+			<!-- Dynamic layout injection -->
-				<ng-content select="[layout]"></ng-content>
-			</div> -->
-
 			<ng-template #layout></ng-template>
-
-
 		</mat-sidenav-content>
 	</mat-sidenav-container>
 
-	<!-- Custom toolbar -->
-	<!-- <ng-container *ngIf="toolbarTemplate">
-		<div  id="toolbar-container">
-			<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
-		</div>
-	</ng-container> -->
-
-	<!-- <ng-container *ngIf="toolbarTemplate">
-		<div id="footer-container">
-			<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
-		</div>
-	</ng-container> -->
-
 	<ng-template #toolbar></ng-template>
 </div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts

@@ -40,10 +40,6 @@ import { LibraryComponents } from '../../config/lib.config';
 	styleUrls: ['./session.component.css']
 })
 export class SessionComponent implements OnInit {
-	// @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
-	@ContentChild('customPanelContent', { read: TemplateRef }) customPanelContentTemplate: TemplateRef<any>;
-	@ContentChild('customLayoutElement', { read: TemplateRef }) customLayoutElementTemplate: TemplateRef<any>;
-
 	@Input() tokens: { webcam: string; screen: string };
 	// @Output() _session = new EventEmitter<any>();
 	// @Output() _publisher = new EventEmitter<any>();
@@ -65,10 +61,6 @@ export class SessionComponent implements OnInit {
 
 	protected log: ILogger;
 
-	_toolbar: ViewContainerRef;
-	_layout: ViewContainerRef;
-	_panel: ViewContainerRef;
-
 	constructor(
 		protected actionService: ActionService,
 		protected webrtcService: WebrtcService,
@@ -86,16 +78,10 @@ export class SessionComponent implements OnInit {
 	@ViewChild('toolbar', { static: false, read: ViewContainerRef })
 	set toolbar(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._toolbar = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.TOOLBAR);
-			if (this._toolbar) {
+				reference.clear();
-				let component = ToolbarComponent;
+				reference.createComponent(component);
-				// Inject the custom component if exists
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.TOOLBAR)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.TOOLBAR);
-				}
-				this._toolbar?.clear();
-				this._toolbar.createComponent(component);
 			}
 		}, 0);
 	}
@@ -103,16 +89,10 @@ export class SessionComponent implements OnInit {
 	@ViewChild('layout', { static: false, read: ViewContainerRef })
 	set layout(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._layout = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.LAYOUT);
-			if (this._layout) {
+				reference.clear();
-				let component = LayoutComponent;
+				reference.createComponent(component);
-				// Inject the custom component if exists
-				if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.LAYOUT)) {
-					component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.LAYOUT);
-				}
-				this._layout?.clear();
-				this._layout.createComponent(component);
 				this.layoutService.initialize();
 			}
 		}, 0);
@@ -121,16 +101,10 @@ export class SessionComponent implements OnInit {
 	@ViewChild('panel', { static: false, read: ViewContainerRef })
 	set panel(reference: ViewContainerRef) {
 		setTimeout(() => {
-			this._panel = reference;
+			if (reference) {
-
+				const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.PANEL);
-			if (this._panel) {
+				reference.clear();
-				let component = PanelComponent;
+				reference.createComponent(component);
-				// Inject the custom component if exists
-				// if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.PANEL)) {
-				// 	component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.PANEL);
-				// }
-				this._panel?.clear();
-				this._panel.createComponent(component);
 			}
 		}, 0);
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts

@@ -1,5 +1,11 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, Type } from '@angular/core';
-import { LibConfig } from '../../config/lib.config';
+import { LayoutComponent } from '../../components/layout/layout.component';
+import { ChatPanelComponent } from '../../components/panel/chat-panel/chat-panel.component';
+import { PanelComponent } from '../../components/panel/panel.component';
+import { ParticipantsPanelComponent } from '../../components/panel/participants-panel/participants-panel/participants-panel.component';
+import { StreamComponent } from '../../components/stream/stream.component';
+import { ToolbarComponent } from '../../components/toolbar/toolbar.component';
+import { LibConfig, LibraryComponents } from '../../config/lib.config';
 
 // import { version } from '../../../../package.json';
 
@@ -22,6 +28,59 @@ export class LibraryConfigService {
 		return this.configuration?.environment?.production;
 	}
 
+	getDynamicComponent(name: LibraryComponents) {
+		let component: Type<any>;
+
+		switch (name) {
+			case LibraryComponents.LAYOUT:
+				component = LayoutComponent;
+				if (this.isCustomComponentDefined(LibraryComponents.LAYOUT)) {
+					component = this.getCustomComponent(LibraryComponents.LAYOUT);
+				}
+				return component;
+
+			case LibraryComponents.TOOLBAR:
+
+				component = ToolbarComponent;
+				if (this.isCustomComponentDefined(LibraryComponents.TOOLBAR)) {
+					component = this.getCustomComponent(LibraryComponents.TOOLBAR);
+				}
+				return component;
+
+			case LibraryComponents.PANEL:
+
+				component = PanelComponent;
+				// Full custom panel
+				// if (this.isCustomComponentDefined(LibraryComponents.PANEL)) {
+				// 	component = this.getCustomComponent(LibraryComponents.PANEL);
+				// }
+				return component;
+
+			case LibraryComponents.CHAT_PANEL:
+
+				component = ChatPanelComponent;
+				if (this.isCustomComponentDefined(LibraryComponents.CHAT_PANEL)) {
+					component = this.getCustomComponent(LibraryComponents.CHAT_PANEL);
+				}
+				return component;
+
+			case LibraryComponents.PARTICIPANTS_PANEL:
+				component = ParticipantsPanelComponent;
+				if (this.isCustomComponentDefined(LibraryComponents.PARTICIPANTS_PANEL)) {
+					component = this.getCustomComponent(LibraryComponents.PARTICIPANTS_PANEL);
+				}
+				return component;
+
+			case LibraryComponents.STREAM:
+				component = StreamComponent;
+				if (this.isCustomComponentDefined(LibraryComponents.STREAM)) {
+					component = this.getCustomComponent(LibraryComponents.STREAM);
+				}
+				return component;
+		}
+
+	}
+
 	isCustomComponentDefined(component: string): boolean {
 		return !!this.configuration?.environment?.customComponents && !!this.configuration.environment.customComponents[component];
 	}