ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Refactored dynamic components loader

pull/690/head
csantosm 2022-02-01 12:59:39 +01:00
parent 5f0ffb4b3a
commit 93d6796fb3
5 changed files with 90 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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);
}

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

@ -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">
<ng-content select="[layout]"></ng-content>
</div> -->
<!-- Dynamic layout injection -->
<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>

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

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

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

@ -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<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];
}