diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts index c27ed0b6c2..d6c5e21545 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts +++ b/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; - _remoteStream: ViewContainerRef; _remoteStreamComponent: Type; 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 (this._localStream) { - let component = StreamComponent; - if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.STREAM)) { - component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.STREAM); - } - // this._stream?.clear(); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM); + //reference.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) { - let component = StreamComponent; - if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.STREAM)) { - component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.STREAM); - } - // this.remoteStream?.clear(); + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.STREAM); + // reference.clear(); this._remoteStreamComponent = component; - // this._stream.createComponent(component); + // reference.createComponent(component); } }, 0); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts index af3393f6be..a54aee9457 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts +++ b/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 (this._chat) { - let component = ChatPanelComponent; - if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.CHAT_PANEL)) { - component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.CHAT_PANEL); - } - this._chat?.clear(); - this._chat.createComponent(component); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.CHAT_PANEL); + reference.clear(); + reference.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 (this._participants) { - let component = ParticipantsPanelComponent; - if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.PARTICIPANTS_PANEL)) { - component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.PARTICIPANTS_PANEL); - } - this._participants?.clear(); - this._participants.createComponent(component); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.PARTICIPANTS_PANEL); + reference.clear(); + reference.createComponent(component); } }, 0); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html index d27b1a4307..a4ac6ce4e3 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html @@ -10,46 +10,15 @@ fixedTopGap="0" fixedBottomGap="0" > - - - - - - - - - - - - + - - - - - - - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index aced0154e6..ebe4f2427c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/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; - @ContentChild('customPanelContent', { read: TemplateRef }) customPanelContentTemplate: TemplateRef; - @ContentChild('customLayoutElement', { read: TemplateRef }) customLayoutElementTemplate: TemplateRef; - @Input() tokens: { webcam: string; screen: string }; // @Output() _session = new EventEmitter(); // @Output() _publisher = new EventEmitter(); @@ -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 (this._toolbar) { - let component = ToolbarComponent; - // 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); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.TOOLBAR); + reference.clear(); + reference.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 (this._layout) { - let component = LayoutComponent; - // 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); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.LAYOUT); + reference.clear(); + reference.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 (this._panel) { - let component = PanelComponent; - // 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); + if (reference) { + const component = this.libraryConfigSrv.getDynamicComponent(LibraryComponents.PANEL); + reference.clear(); + reference.createComponent(component); } }, 0); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts index d6b81faef8..b9c8ef70ea 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts +++ b/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 { LibConfig } from '../../config/lib.config'; +import { Inject, Injectable, Type } from '@angular/core'; +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; + + 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]; }