Skip to content

Commit

Permalink
openvidu-components: Refactored dynamic components loader
Browse files Browse the repository at this point in the history
  • Loading branch information
@CSantosM
CSantosM committed Feb 1, 2022
1 parent 5f0ffb4 commit 93d6796
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 114 deletions.
28 changes: 8 additions & 20 deletions ...omponents-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@ 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',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
_localStream: ViewContainerRef;
_localStreamComponent: Type<any>;
_remoteStream: ViewContainerRef;
_remoteStreamComponent: Type<any>;

localParticipant: ParticipantAbstractModel;
Expand All @@ -33,33 +30,24 @@ 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);
}

@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);
}
Expand Down
30 changes: 8 additions & 22 deletions ...-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -15,38 +13,26 @@ 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);
}

@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);
}
Expand Down
33 changes: 1 addition & 32 deletions ...nents-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 12 additions & 38 deletions ...ponents-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand All @@ -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,
Expand All @@ -86,33 +78,21 @@ 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);
}

@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);
Expand All @@ -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);
}
Expand Down
63 changes: 61 additions & 2 deletions ...gular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

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

0 comments on commit 93d6796

Please sign in to comment.