From 115e9131d0d6012b5c859e5877b437cae3b384e5 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Thu, 10 Mar 2022 11:42:48 +0100
Subject: [PATCH] openvidu-components: Added toolbar additional buttons
 directive

Allowed added additional buttons in toolbar component without redefine it
---
 .../lib/components/toolbar/toolbar.component.css    |  6 +++++-
 .../lib/components/toolbar/toolbar.component.html   |  6 ++++--
 .../src/lib/components/toolbar/toolbar.component.ts | 13 ++++++++++++-
 .../videoconference/videoconference.component.html  |  8 +++++++-
 .../videoconference/videoconference.component.ts    |  7 +++++++
 .../template/openvidu-angular.directive.module.ts   |  7 +++++--
 .../template/openvidu-angular.directive.ts          |  7 +++++++
 7 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index cc09e664..a8b12fc1 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -18,7 +18,11 @@
 	max-height: 100% !important;
 }
 
-#media-buttons-container > *, ::ng-deep #media-buttons-container > * {
+#media-buttons-container > button,
+::ng-deep #media-buttons-container > button,
+#media-buttons-container:not(#media-buttons-container > button) button,
+/* Applying css for external additional buttons*/
+::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
 	width: 40px;
 	height: 40px;
 	background-color: var(--ov-secondary-color);
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
index fb8c806f..2c0907ad 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
@@ -55,8 +55,10 @@
 			<mat-icon *ngIf="!isFullscreenActive" matTooltip="Fullscreen">fullscreen</mat-icon>
 		</button>
 
-		<!-- Custom toolbar buttons -->
-		<ng-content select="[toolbar-btn]"></ng-content>
+		<!-- External additional buttons  -->
+		<ng-container *ngIf="toolbarAdditionalButtonsTemplate">
+			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate"></ng-container>
+		</ng-container>
 
 		<!-- Leave session button -->
 		<button mat-icon-button *ngIf="showLeaveButton" (click)="leaveSession()" id="leave-btn">
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index 27e2534a..992e6b5d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -27,6 +27,7 @@ import { ChatMessage } from '../../models/chat.model';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { MenuType } from '../../models/menu.model';
 import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { ToolbarAdditionalButtonsDirective } from '../../directives/template/openvidu-angular.directive';
 
 @Component({
 	selector: 'ov-toolbar',
@@ -35,7 +36,17 @@ import { OpenViduAngularConfigService } from '../../services/config/openvidu-ang
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToolbarComponent implements OnInit, OnDestroy {
-	@ContentChild('centeredButtons', { read: TemplateRef }) centeredButtonsTemplate: TemplateRef<any>;
+	@ContentChild('toolbarAdditionalButtons', { read: TemplateRef }) toolbarAdditionalButtonsTemplate: TemplateRef<any>;
+
+	@ContentChild(ToolbarAdditionalButtonsDirective)
+	set externalAdditionalButtons(externalAdditionalButtons: ToolbarAdditionalButtonsDirective) {
+		// This directive will has value only when ADDITIONAL BUTTONS component tagget with '*ovToolbarAdditionalButtons' directive
+		// is inside of the TOOLBAR component tagged with '*ovToolbar' directive
+		if (externalAdditionalButtons) {
+			this.toolbarAdditionalButtonsTemplate = externalAdditionalButtons.template;
+		}
+	}
+
 	@Output() onLeaveButtonClicked = new EventEmitter<any>();
 	@Output() onCameraButtonClicked = new EventEmitter<any>();
 	@Output() onMicrophoneButtonClicked = new EventEmitter<any>();
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index bedae661..62860180 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -46,7 +46,13 @@
 		(onFullscreenButtonClicked)="onFullscreenButtonClicked()"
 		(onParticipantsPanelButtonClicked)="onParticipantsPanelButtonClicked()"
 		(onChatPanelButtonClicked)="onChatPanelButtonClicked()"
-	></ov-toolbar>
+	>
+
+	<ng-template #toolbarAdditionalButtons>
+		<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
+	</ng-template>
+
+</ov-toolbar>
 </ng-template>
 
 <ng-template #defaultPanel>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
index 32e5db4e..73536158 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
@@ -6,6 +6,7 @@ import {
 	ParticipantPanelItemDirective,
 	ParticipantsPanelDirective,
 	StreamDirective,
+	ToolbarAdditionalButtonsDirective,
 	ToolbarDirective
 } from '../../directives/template/openvidu-angular.directive';
 import { ILogger } from '../../models/logger.model';
@@ -19,6 +20,7 @@ import { LoggerService } from '../../services/logger/logger.service';
 export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	// *** Toolbar ***
 	@ContentChild(ToolbarDirective) externalToolbar: ToolbarDirective;
+	@ContentChild(ToolbarAdditionalButtonsDirective) externalToolbarAdditionalButtons: ToolbarAdditionalButtonsDirective;
 
 	// *** Panels ***
 	@ContentChild(PanelDirective) externalPanel: PanelDirective;
@@ -39,6 +41,7 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	@ViewChild('defaultStream', { static: false, read: TemplateRef }) defaultStreamTemplate: TemplateRef<any>;
 
 	openviduAngularToolbarTemplate: TemplateRef<any>;
+	openviduAngularToolbarAdditionalButtonsTemplate: TemplateRef<any>;
 	openviduAngularPanelTemplate: TemplateRef<any>;
 	openviduAngularChatPanelTemplate: TemplateRef<any>;
 	openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
@@ -106,6 +109,10 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 			this.openviduAngularToolbarTemplate = this.externalToolbar.template;
 			this.log.d('Setting EXTERNAL TOOLBAR');
 		} else {
+			if (this.externalToolbarAdditionalButtons) {
+				this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL BUTTONS', this.externalToolbarAdditionalButtons.template);
+				this.openviduAngularToolbarAdditionalButtonsTemplate = this.externalToolbarAdditionalButtons.template;
+			}
 			this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate;
 			this.log.d('Setting  DEFAULT TOOLBAR');
 		}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
index e62b6a91..ecb5507c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
@@ -6,6 +6,7 @@ import {
 	ParticipantPanelItemDirective,
 	ParticipantsPanelDirective,
 	StreamDirective,
+	ToolbarAdditionalButtonsDirective,
 	ToolbarDirective
 } from './openvidu-angular.directive';
 
@@ -17,7 +18,8 @@ import {
 		ParticipantPanelItemDirective,
 		ParticipantsPanelDirective,
 		StreamDirective,
-		ToolbarDirective
+		ToolbarDirective,
+		ToolbarAdditionalButtonsDirective
 	],
 	exports: [
 		ChatPanelDirective,
@@ -26,7 +28,8 @@ import {
 		ParticipantPanelItemDirective,
 		ParticipantsPanelDirective,
 		StreamDirective,
-		ToolbarDirective
+		ToolbarDirective,
+		ToolbarAdditionalButtonsDirective
 	]
 })
 export class OpenViduAngularDirectiveModule {}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
index f29d1cf8..dc20ac24 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
@@ -7,6 +7,13 @@ export class ToolbarDirective {
 	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
 }
 
+@Directive({
+	selector: '[ovToolbarAdditionalButtons]'
+})
+export class ToolbarAdditionalButtonsDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
 @Directive({
 	selector: '[ovPanel]'
 })