openvidu-components: Improved components cutomization

Custom structural directives have been added for improving the components customization. 
These improvements now allow add custom child components inside of a custom parent component.
 Besides, the conditional logic has been moved from view to model for improving maintainability

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

@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { ParticipantAbstractModel } from '../../models/participant.model';
 import { LayoutService } from '../../services/layout/layout.service';
+import { StreamDirective } from '../../directives/openvidu-angular.directive';
 
 @Component({
 	selector: 'ov-layout',
@@ -12,6 +13,15 @@ import { LayoutService } from '../../services/layout/layout.service';
 export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	@ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef<any>;
 
+	@ContentChild(StreamDirective)
+	set externalStream (externalStream: StreamDirective) {
+		// This directive will has value only when STREAM component tagget with '*ovStream' directive
+		// is inside of the layout component tagged with '*ovLayout' directive
+		if(externalStream) {
+			this.streamTemplate = externalStream.template;
+		}
+	}
+
 	localParticipant: ParticipantAbstractModel;
 	remoteParticipants: ParticipantAbstractModel[] = [];
 	protected localParticipantSubs: Subscription;

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

@@ -1,6 +1,12 @@
 <!-- CHAT panel -->
-<ng-content select="[chatPanel]" *ngIf="isChatPanelOpened"></ng-content>
+<ng-container *ngIf="isChatPanelOpened">
+	<ng-container *ngTemplateOutlet="chatPanelTemplate"></ng-container>
+</ng-container>
+
 
 <!-- PARTICIPANTS panel -->
-<ng-content select="[participantsPanel]"  *ngIf="isParticipantsPanelOpened"></ng-content>
+<ng-container *ngIf="isParticipantsPanelOpened">
+	<ng-container *ngTemplateOutlet="participantsPanelTemplate"></ng-container>
+</ng-container>
+
 

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

@@ -1,5 +1,6 @@
 import { Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
 import { skip, Subscription } from 'rxjs';
+import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive';
 import { MenuType } from '../../models/menu.model';
 import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
 
@@ -12,6 +13,24 @@ export class PanelComponent implements OnInit {
 	@ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef<any>;
 	@ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef<any>;
 
+	@ContentChild(ParticipantsPanelDirective)
+	set externalParticipantPanel(externalParticipantsPanel: ParticipantsPanelDirective) {
+		// This directive will has value only when PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel'
+		// is inside of the PANEL component tagged with '*ovPanel'
+		if (externalParticipantsPanel) {
+			this.participantsPanelTemplate = externalParticipantsPanel.template;
+		}
+	}
+
+	@ContentChild(ChatPanelDirective)
+	set externalChatPanel(externalChatPanel: ChatPanelDirective) {
+		// This directive will has value only when CHAT PANEL component tagged with '*ovChatPanel'
+		// is inside of the PANEL component tagged with '*ovPanel'
+		if (externalChatPanel) {
+			this.chatPanelTemplate = externalChatPanel.template;
+		}
+	}
+
 	isParticipantsPanelOpened: boolean;
 	isChatPanelOpened: boolean;
 	menuSubscription: Subscription;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html

@@ -1,11 +1,10 @@
 <mat-list>
 	<mat-list-item>
 		<mat-icon matListAvatar class="participant-avatar">person</mat-icon>
-		<h3 matLine class="participant-nickname">{{ participant | nickname }}</h3>
+		<h3 matLine class="participant-nickname">{{ _participant | nickname }}</h3>
-		<p matLine class="participant-subtitle">{{ participant | streamsEnabled }}</p>
+		<p matLine class="participant-subtitle">{{ _participant | streamsEnabled }}</p>
 		<!-- <p matLine>
 			<span class="participant-subtitle"></span>
 		</p> -->
 	</mat-list-item>
-	<mat-divider *ngIf="showDividerLine"></mat-divider>
 </mat-list>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ParticipantAbstractModel } from '../../../../models/participant.model';
 
 @Component({
@@ -6,11 +6,13 @@ import { ParticipantAbstractModel } from '../../../../models/participant.model';
 	templateUrl: './participant-panel-item.component.html',
 	styleUrls: ['./participant-panel-item.component.css']
 })
-export class ParticipantPanelItemComponent implements OnInit {
+export class ParticipantPanelItemComponent {
-	@Input() participant: ParticipantAbstractModel;
-	@Input() showDividerLine: boolean;
 
+	@Input()
+	set participant( p: ParticipantAbstractModel) {
+		this._participant = p;
+	}
+	_participant: ParticipantAbstractModel;
 	constructor() {}
 
-	ngOnInit(): void {}
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html

@@ -9,18 +9,15 @@
 	<div class="scrollable">
 
 		<div class="local-participant-container">
-			<ov-participant-panel-item
+			<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: localParticipant }"></ng-container>
-				[participant]="localParticipant"
+			<mat-divider *ngIf="true"></mat-divider>
-				[showDividerLine]="true"
-			></ov-participant-panel-item>
 		</div>
 
 		<div class="remote-participants-container" *ngIf="remoteParticipants.length > 0">
-			<ov-participant-panel-item
+
-				*ngFor="let participant of remoteParticipants; let lastItem = last"
+			<div *ngFor="let participant of remoteParticipants; let lastItem = last">
-				[participant]="participant"
+				<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
-				[showDividerLine]="!lastItem"
+			</div>
-			></ov-participant-panel-item>
 		</div>
 
 	</div>

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

@@ -1,7 +1,8 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
 import { ParticipantAbstractModel, ParticipantModel } from '../../../../models/participant.model';
 import { ParticipantService } from '../../../../services/participant/participant.service';
 import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service';
+import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-angular.directive';
 
 @Component({
 	selector: 'ov-participants-panel',
@@ -11,8 +12,22 @@ import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-m
 export class ParticipantsPanelComponent implements OnInit {
 	localParticipant: any;
 	remoteParticipants: ParticipantAbstractModel[] = [];
+	@ContentChild('participantPanelItem', { read: TemplateRef }) participantPanelItemTemplate: TemplateRef<any>;
 
-	constructor(protected participantService: ParticipantService, protected menuService: SidenavMenuService, private cd: ChangeDetectorRef) {}
+	@ContentChild(ParticipantPanelItemDirective)
+	set externalParticipantPanelItem(externalParticipantPanelItem: ParticipantPanelItemDirective) {
+		// This directive will has value only when PARTICIPANT PANEL ITEM component tagged with '*ovParticipantPanelItem'
+		// is inside of the PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel'
+		if (externalParticipantPanelItem) {
+			this.participantPanelItemTemplate = externalParticipantPanelItem.template;
+		}
+	}
+
+	constructor(
+		protected participantService: ParticipantService,
+		protected menuService: SidenavMenuService,
+		private cd: ChangeDetectorRef
+	) {}
 
 	ngOnInit(): void {
 		this.participantService.localParticipantObs.subscribe((p: ParticipantModel) => {

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

@@ -9,30 +9,17 @@
 			fixedTopGap="0"
 			fixedBottomGap="0"
 		>
-
+			<ng-container *ngTemplateOutlet="panelTemplate"></ng-container>
-			<!-- OPENVIDU PANEL -->
-			<ng-content select="[panel]"></ng-content>
-
 		</mat-sidenav>
 
 		<mat-sidenav-content class="sidenav-main">
-			<!-- OPENVIDU LAYOUT -->
-			<ng-container *ngIf="layoutTemplate">
 			<div id="layout-container">
 				<ng-container *ngTemplateOutlet="layoutTemplate"></ng-container>
 			</div>
-			</ng-container>
 		</mat-sidenav-content>
 	</mat-sidenav-container>
 
-	<!-- OPENVIDU TOOLBAR -->
 	<div id="footer-container">
-		<span #toolbarRef>
+		<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
-			<!-- Custom toolbar -->
-			<ng-content select="[toolbar]"></ng-content>
-		</span>
-
-		<!-- Default toolbar if custom toolbar is not injected -->
-		<ov-toolbar *ngIf="toolbarRef.childNodes.length === 0"></ov-toolbar>
 	</div>
 </div>

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

@@ -24,6 +24,8 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
 	styleUrls: ['./session.component.css']
 })
 export class SessionComponent implements OnInit, AfterViewInit {
+	@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any>;
+	@ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef<any>;
 	@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef<any>;
 
 	@Input() tokens: { webcam: string; screen: string };

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

@@ -15,54 +15,69 @@
 
 	<div id="session-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
 		<ov-session [tokens]="_tokens">
-			<ng-content select="[toolbar]" toolbar></ng-content>
+			<ng-template #toolbar>
+				<ng-container *ngIf="openviduAngularToolbarTemplate">
+					<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
+				</ng-container>
+			</ng-template>
 
-			<!-- OPENVIDU PANEL -->
+			<ng-template #panel>
-			<span #panelRef panel>
+				<ng-container *ngIf="openviduAngularPanelTemplate">
-				<!-- Custom panel -->
+					<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container>
-				<ng-content select="[panel]"></ng-content>
+				</ng-container>
-			</span>
+			</ng-template>
-
-			<!-- Default panel if the custom one is not injected -->
-			<ov-panel *ngIf="panelRef.childNodes.length === 0" panel>
-				<span #chatPanelRef chatPanel>
-					<!-- Custom CHAT panel -->
-					<ng-content select="[chatPanel]"></ng-content>
-				</span>
-
-				<!-- Default CHAT PANEL if the custom one is not injected -->
-				<ov-chat-panel *ngIf="chatPanelRef.childNodes.length === 0" chatPanel></ov-chat-panel>
-
-				<span #participantsPanelRef participantsPanel>
-					<!-- Custom PARTICIPANTS panel -->
-					<ng-content select="[participantsPanel]"></ng-content>
-				</span>
-
-				<!-- Default PARTICIPANTS PANEL if the custom one is not injected -->
-				<ov-participants-panel *ngIf="participantsPanelRef.childNodes.length === 0" participantsPanel></ov-participants-panel>
-			</ov-panel>
 
 			<ng-template #layout>
-				<!-- Custom layout -->
+				<ng-container *ngIf="openviduAngularLayoutTemplate">
-				<span #layoutRef layout>
+					<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container>
-					<ng-content select="[layout]"></ng-content>
-				</span>
-
-				<!-- Default layout if custom layout is not injected -->
-				<ov-layout *ngIf="layoutRef.childNodes.length === 0" layout>
-					<ng-template #stream let-stream>
-						<!-- Custom stream component -->
-						<ng-container *ngIf="streamTemplate; else defaultStream">
-							<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"> </ng-container>
 				</ng-container>
-
-						<!-- Default stream component if custom one is not injected -->
-						<ng-template #defaultStream>
-							<ov-stream [stream]="stream"></ov-stream>
-						</ng-template>
-					</ng-template>
-				</ov-layout>
 			</ng-template>
 		</ov-session>
 	</div>
 </div>
+
+<ng-template #defaultToolbar>
+	<ov-toolbar></ov-toolbar>
+</ng-template>
+
+<ng-template #defaultPanel>
+	<ov-panel>
+		<ng-template #chatPanel>
+			<ng-container *ngTemplateOutlet="openviduAngularChatPanelTemplate"></ng-container>
+		</ng-template>
+
+		<ng-template #participantsPanel>
+			<ng-container *ngTemplateOutlet="openviduAngularParticipantsPanelTemplate"></ng-container>
+		</ng-template>
+	</ov-panel>
+</ng-template>
+
+<ng-template #defaultChatPanel>
+	<ov-chat-panel></ov-chat-panel>
+</ng-template>
+
+<ng-template #defaultParticipantsPanel>
+	<ov-participants-panel>
+		<ng-template #participantPanelItem let-participant>
+			<ng-container
+				*ngTemplateOutlet="openviduAngularParticipantPanelItemTemplate; context: { $implicit: participant }"
+			></ng-container>
+		</ng-template>
+	</ov-participants-panel>
+</ng-template>
+
+<ng-template #defaultParticipantPanelItem let-participant>
+	<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
+</ng-template>
+
+<ng-template #defaultLayout>
+	<ov-layout>
+		<ng-template #stream let-stream>
+			<ng-container *ngTemplateOutlet="openviduAngularStreamTemplate; context: { $implicit: stream }"> </ng-container>
+		</ng-template>
+	</ov-layout>
+</ng-template>
+
+<ng-template #defaultStream let-stream>
+	<ov-stream [stream]="stream"></ov-stream>
+</ng-template>

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

@@ -1,20 +1,47 @@
-import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { StreamDirective } from '../../directives/stream/stream.directive';
+import {
+	ChatPanelDirective,
+	LayoutDirective,
+	PanelDirective,
+	ParticipantPanelItemDirective,
+	ParticipantsPanelDirective,
+	StreamDirective,
+	ToolbarDirective
+} from '../../directives/openvidu-angular.directive';
+import { ILogger } from '../../models/logger.model';
+import { LoggerService } from '../../services/logger/logger.service';
 
 @Component({
 	selector: 'ov-videoconference',
 	templateUrl: './videoconference.component.html',
 	styleUrls: ['./videoconference.component.css']
 })
-export class VideoconferenceComponent implements OnInit {
+export class VideoconferenceComponent implements OnInit, AfterViewInit {
-	streamTemplate: TemplateRef<any>;
+	//Toolbar
+	@ContentChild(ToolbarDirective) externalToolbar: ToolbarDirective;
+	// Panels
+	@ContentChild(PanelDirective) externalPanel: PanelDirective;
+	@ContentChild(ChatPanelDirective) externalChatPanel: ChatPanelDirective;
+	@ContentChild(ParticipantsPanelDirective) externalParticipantsPanel: ParticipantsPanelDirective;
+	@ContentChild(ParticipantPanelItemDirective) externalParticipantPanelItem: ParticipantPanelItemDirective;
+	@ContentChild(LayoutDirective) externalLayout: LayoutDirective;
+	@ContentChild(StreamDirective) externalStream: StreamDirective;
 
-	@ContentChild(StreamDirective)
+	@ViewChild('defaultToolbar', { static: false, read: TemplateRef }) defaultToolbarTemplate: TemplateRef<any>;
-	set customStream(customStream: StreamDirective) {
+	@ViewChild('defaultPanel', { static: false, read: TemplateRef }) defaultPanelTemplate: TemplateRef<any>;
-		if (customStream) {
+	@ViewChild('defaultChatPanel', { static: false, read: TemplateRef }) defaultChatPanelTemplate: TemplateRef<any>;
-			this.streamTemplate = customStream.template;
+	@ViewChild('defaultParticipantsPanel', { static: false, read: TemplateRef }) defaultParticipantsPanelTemplate: TemplateRef<any>;
-		}
+	@ViewChild('defaultParticipantPanelItem', { static: false, read: TemplateRef }) defaultParticipantPanelItemTemplate: TemplateRef<any>;
-	}
+	@ViewChild('defaultLayout', { static: false, read: TemplateRef }) defaultLayoutTemplate: TemplateRef<any>;
+	@ViewChild('defaultStream', { static: false, read: TemplateRef }) defaultStreamTemplate: TemplateRef<any>;
+
+	openviduAngularToolbarTemplate: TemplateRef<any>;
+	openviduAngularPanelTemplate: TemplateRef<any>;
+	openviduAngularChatPanelTemplate: TemplateRef<any>;
+	openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
+	openviduAngularParticipantPanelItemTemplate: TemplateRef<any>;
+	openviduAngularLayoutTemplate: TemplateRef<any>;
+	openviduAngularStreamTemplate: TemplateRef<any>;
 
 	@Input() sessionName: string;
 	@Input() userName: string;
@@ -24,7 +51,7 @@ export class VideoconferenceComponent implements OnInit {
 		if (!tokens || (!tokens.webcam && !tokens.screen)) {
 			//No tokens received
 			// throw new Error('No tokens received');
-			console.warn('No tokens received');
+			this.log.w('No tokens received');
 		} else {
 			if (tokens.webcam || tokens.screen) {
 				this._tokens = {
@@ -37,9 +64,6 @@ export class VideoconferenceComponent implements OnInit {
 		}
 	}
 
-	// @Input() openviduServerUrl: string;
-	// @Input() openviduSecret: string;
-
 	@Output() onJoinClicked = new EventEmitter<any>();
 	@Output() onCloseClicked = new EventEmitter<any>();
 
@@ -50,7 +74,68 @@ export class VideoconferenceComponent implements OnInit {
 	error: boolean = false;
 	errorMessage: string = '';
 
-	constructor() {}
+	private log: ILogger;
+
+	constructor(private loggerSrv: LoggerService) {
+		this.log = this.loggerSrv.get('VideoconferenceComponent');
+	}
+
+	ngAfterViewInit() {
+		if (this.externalToolbar) {
+			this.openviduAngularToolbarTemplate = this.externalToolbar.template;
+			this.log.d('Setting EXTERNAL TOOLBAR');
+		} else {
+			this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate;
+			this.log.d('Setting  DEFAULT TOOLBAR');
+		}
+
+		if (this.externalPanel) {
+			this.openviduAngularPanelTemplate = this.externalPanel.template;
+			this.log.d('Setting EXTERNAL PANEL');
+		} else {
+			this.log.d('Setting DEFAULT PANEL');
+
+			if (this.externalParticipantsPanel) {
+				this.openviduAngularParticipantsPanelTemplate = this.externalParticipantsPanel.template;
+				this.log.d('Setting EXTERNAL PARTICIPANTS PANEL');
+			} else {
+				this.log.d('Setting DEFAULT PARTICIPANTS PANEL');
+				if (this.externalParticipantPanelItem) {
+					this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template;
+					this.log.d('Setting EXTERNAL P ITEM');
+				} else {
+					this.openviduAngularParticipantPanelItemTemplate = this.defaultParticipantPanelItemTemplate;
+					this.log.d('Setting DEFAULT P ITEM');
+				}
+				this.openviduAngularParticipantsPanelTemplate = this.defaultParticipantsPanelTemplate;
+			}
+
+			if (this.externalChatPanel) {
+				this.openviduAngularChatPanelTemplate = this.externalChatPanel.template;
+				this.log.d('Setting EXTERNAL CHAT PANEL');
+			} else {
+				this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate;
+				this.log.d('Setting DEFAULT CHAT PANEL');
+			}
+			this.openviduAngularPanelTemplate = this.defaultPanelTemplate;
+		}
+
+		if (this.externalLayout) {
+			this.openviduAngularLayoutTemplate = this.externalLayout.template;
+			this.log.d('Setting EXTERNAL LAYOUT');
+		} else {
+			this.log.d('Setting DEAFULT LAYOUT');
+
+			if (this.externalStream) {
+				this.openviduAngularStreamTemplate = this.externalStream.template;
+				this.log.d('Setting EXTERNAL STREAM');
+			} else {
+				this.openviduAngularStreamTemplate = this.defaultStreamTemplate;
+				this.log.d('Setting DEFAULT STREAM');
+			}
+			this.openviduAngularLayoutTemplate = this.defaultLayoutTemplate;
+		}
+	}
 
 	ngOnInit() {}
 
@@ -61,12 +146,4 @@ export class VideoconferenceComponent implements OnInit {
 		this.isSessionAlive = false;
 		this.closeClicked = true;
 	}
-
-	onMicClicked() {}
-
-	onCamClicked() {}
-
-	onScreenShareClicked() {}
-
-	onSpeakerLayoutClicked() {}
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.spec.ts

@@ -0,0 +1,8 @@
+import { OpenviduAngularDirective } from './openvidu-angular.directive';
+
+describe('OpenviduAngularDirective', () => {
+  it('should create an instance', () => {
+    const directive = new OpenviduAngularDirective();
+    expect(directive).toBeTruthy();
+  });
+});

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive({
+	selector: '[ovToolbar]'
+})
+export class ToolbarDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovPanel]'
+})
+export class PanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovChatPanel]'
+})
+export class ChatPanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovParticipantsPanel]'
+})
+export class ParticipantsPanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovParticipantPanelItem]'
+})
+export class ParticipantPanelItemDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovLayout]'
+})
+export class LayoutDirective {
+	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovStream]'
+})
+export class StreamDirective {
+	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
+}

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts

@@ -1,8 +0,0 @@
-import { StreamDirective } from './stream.directive';
-
-describe('StreamDirective', () => {
-  it('should create an instance', () => {
-    const directive = new StreamDirective();
-    expect(directive).toBeTruthy();
-  });
-});

openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts

@@ -1,10 +0,0 @@
-import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
-
-@Directive({
-	selector: '[ovStream]'
-})
-export class StreamDirective implements OnInit {
-	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
-
-	ngOnInit() {}
-}

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

@@ -36,7 +36,6 @@ import { StreamComponent } from './components/stream/stream.component';
 import { DialogTemplateComponent } from './components/material/dialog.component';
 
 import { LinkifyPipe } from './pipes/linkify.pipe';
-import { TooltipListPipe } from './pipes/tooltip-list.pipe';
 import { StreamsEnabledPipe, NicknamePipe, ParticipantStreamsPipe } from './pipes/participant.pipe';
 
 import { OpenViduAngularConfig } from './config/openvidu-angular.config';
@@ -58,12 +57,12 @@ import { ParticipantPanelItemComponent } from './components/panel/participants-p
 import { ParticipantsPanelComponent } from './components/panel/participants-panel/participants-panel/participants-panel.component';
 import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
 import { PanelComponent } from './components/panel/panel.component';
-import { StreamDirective } from './directives/stream/stream.directive';
 import { AudioWaveComponent } from './components/audio-wave/audio-wave.component';
 
+import { ChatPanelDirective, LayoutDirective, PanelDirective, ParticipantPanelItemDirective, ParticipantsPanelDirective, StreamDirective, ToolbarDirective } from './directives/openvidu-angular.directive';
+
 @NgModule({
 	declarations: [
-		StreamDirective,
 		UserSettingsComponent,
 		VideoComponent,
 		ToolbarComponent,
@@ -73,7 +72,6 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
 		StreamComponent,
 		DialogTemplateComponent,
 		LinkifyPipe,
-		TooltipListPipe,
 		ParticipantStreamsPipe,
 		StreamsEnabledPipe,
 		NicknamePipe,
@@ -82,6 +80,13 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
 		VideoconferenceComponent,
   		AudioWaveComponent,
 		PanelComponent,
+		ToolbarDirective,
+		PanelDirective,
+		ChatPanelDirective,
+		ParticipantsPanelDirective,
+		ParticipantPanelItemDirective,
+		LayoutDirective,
+		StreamDirective
 	],
 	imports: [
 		CommonModule,
@@ -130,6 +135,9 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
 		VideoconferenceComponent,
 		UserSettingsComponent,
 		ToolbarComponent,
+		PanelComponent,
+		ParticipantsPanelComponent,
+		ParticipantPanelItemComponent,
 		ChatPanelComponent,
 		SessionComponent,
 		LayoutComponent,
@@ -137,7 +145,15 @@ import { AudioWaveComponent } from './components/audio-wave/audio-wave.component
 		VideoComponent,
 		AudioWaveComponent,
 		ParticipantStreamsPipe,
+		StreamsEnabledPipe,
+		NicknamePipe,
 		CommonModule,
+		ToolbarDirective,
+		PanelDirective,
+		ChatPanelDirective,
+		ParticipantsPanelDirective,
+		ParticipantPanelItemDirective,
+		LayoutDirective,
 		StreamDirective
 	],
 	entryComponents: [DialogTemplateComponent]

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/participant.pipe.ts

@@ -23,7 +23,7 @@ export class StreamsEnabledPipe implements PipeTransform {
 	constructor() {}
 
 	transform(participant: ParticipantAbstractModel): string {
-		return `(${participant.getConnectionTypesEnabled().toString().replace(',', ', ')})`;
+		return `(${participant?.getConnectionTypesEnabled().toString().replace(',', ', ')})`;
 	}
 }
 
@@ -31,6 +31,6 @@ export class StreamsEnabledPipe implements PipeTransform {
 export class NicknamePipe implements PipeTransform {
 	constructor() {}
 	transform(participant: ParticipantAbstractModel): string {
-		return participant.getCameraNickname();
+		return participant?.getCameraNickname();
 	}
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/settings.pipe.ts

@@ -1,82 +0,0 @@
-// import { Pipe, PipeTransform } from '@angular/core';
-// import { SettingsModel } from '../models/settings.model';
-
-// @Pipe({ name: 'hasChat', pure: true })
-// export class HasChatPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasChat();
-// 	}
-// }
-
-// @Pipe({ name: 'hasAudio', pure: true })
-// export class HasAudioPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasAudio();
-// 	}
-// }
-
-// @Pipe({ name: 'hasVideo', pure: true })
-// export class HasVideoPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasVideo();
-// 	}
-// }
-
-// @Pipe({ name: 'isAutoPublish', pure: true })
-// export class IsAutoPublishPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.isAutoPublish();
-// 	}
-// }
-
-// @Pipe({ name: 'hasScreenSharing', pure: true })
-// export class HasScreenSharingPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasScreenSharing();
-// 	}
-// }
-
-// @Pipe({ name: 'hasFullscreen', pure: true })
-// export class HasFullscreenPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasFullscreen();
-// 	}
-// }
-
-// @Pipe({ name: 'hasLayoutSpeaking', pure: true })
-// export class HasLayoutSpeakingPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasLayoutSpeaking();
-// 	}
-// }
-
-// @Pipe({ name: 'hasExit', pure: true })
-// export class HasExitPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasExit();
-// 	}
-// }
-
-// @Pipe({ name: 'hasToolbar', pure: true })
-// export class HasToolbarPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasToolbar();
-// 	}
-// }
-
-// @Pipe({ name: 'hasFooter', pure: true })
-// export class HasFooterPipe implements PipeTransform {
-// 	constructor() {}
-// 	transform(ovSettings: SettingsModel): boolean {
-// 		return !ovSettings || ovSettings.hasFooter();
-// 	}
-// }

openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/tooltip-list.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'tooltipList', pure: true })
-export class TooltipListPipe implements PipeTransform {
-	transform(lines: string[]): string {
-		let list = '';
-		lines.forEach((line) => {
-			list += '• ' + line + '\n';
-		});
-
-		return list;
-	}
-}

openvidu-components-angular/projects/openvidu-angular/src/public-api.ts

@@ -24,8 +24,10 @@ export * from './lib/services/storage/storage.service';
 export * from './lib/components/videoconference/videoconference.component';
 export * from './lib/components/user-settings/user-settings.component';
 export * from './lib/components/toolbar/toolbar.component';
+export * from './lib/components/panel/panel.component';
 export * from './lib/components/panel/chat-panel/chat-panel.component';
 export * from './lib/components/panel/participants-panel/participants-panel/participants-panel.component';
+export * from './lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component';
 export * from './lib/components/session/session.component';
 export * from './lib/components/layout/layout.component';
 export * from './lib/components/stream/stream.component';
@@ -43,4 +45,4 @@ export * from './lib/models/notification-options.model';
 export * from './lib/pipes/participant.pipe';
 
 // Directives
-export * from './lib/directives/stream/stream.directive';
+export * from './lib/directives/openvidu-angular.directive';