From e11af2ebd7d4754762d56940e58a5eb79c78cf12 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 9 Mar 2022 15:31:21 +0100
Subject: [PATCH] openvidu-components: Added component events

---
 .../components/pre-join/pre-join.component.ts |  4 +-
 .../components/toolbar/toolbar.component.html |  4 +-
 .../components/toolbar/toolbar.component.ts   | 33 ++++++++------
 .../videoconference.component.html            | 13 ++++--
 .../videoconference.component.ts              | 45 +++++++++++++++----
 5 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
index b25785c1..9ffdb0b6 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -19,7 +19,7 @@ import { StorageService } from '../../services/storage/storage.service';
 	styleUrls: ['./pre-join.component.css']
 })
 export class PreJoinComponent implements OnInit, OnDestroy {
-	@Output() onJoinClicked = new EventEmitter<any>();
+	@Output() onJoinButtonClicked = new EventEmitter<any>();
 	cameras: CustomDevice[];
 	microphones: CustomDevice[];
 	cameraSelected: CustomDevice;
@@ -207,7 +207,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	}
 
 	joinSession() {
-		this.onJoinClicked.emit();
+		this.onJoinButtonClicked.emit();
 	}
 
 	private setDevicesInfo() {
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 52c8475f..fb8c806f 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
@@ -69,7 +69,7 @@
 			mat-icon-button
 			*ngIf="!isMinimal && showParticipantsPanelButton"
 			matTooltip="Show articipants"
-			(click)="toggleMenu('participants')"
+			(click)="toggleParticipantsPanel()"
 			[disabled]="isConnectionLost"
 			[class.active-btn]="isParticipantsOpened"
 		>
@@ -80,7 +80,7 @@
 		<button
 			mat-icon-button
 			*ngIf="!isMinimal && showChatPanelButton"
-			(click)="toggleMenu('chat')"
+			(click)="toggleChatPanel()"
 			[disabled]="isConnectionLost"
 			[class.active-btn]="isChatOpened"
 		>
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 ca854a70..27e2534a 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
@@ -36,12 +36,13 @@ import { OpenViduAngularConfigService } from '../../services/config/openvidu-ang
 })
 export class ToolbarComponent implements OnInit, OnDestroy {
 	@ContentChild('centeredButtons', { read: TemplateRef }) centeredButtonsTemplate: TemplateRef<any>;
-
-	@Output() onMicClicked = new EventEmitter<any>();
-	@Output() onCamClicked = new EventEmitter<any>();
-	@Output() onScreenShareClicked = new EventEmitter<any>();
-	@Output() onLeaveSessionClicked = new EventEmitter<any>();
-	@Output() onChatClicked = new EventEmitter<any>();
+	@Output() onLeaveButtonClicked = new EventEmitter<any>();
+	@Output() onCameraButtonClicked = new EventEmitter<any>();
+	@Output() onMicrophoneButtonClicked = new EventEmitter<any>();
+	@Output() onFullscreenButtonClicked = new EventEmitter<any>();
+	@Output() onScreenshareButtonClicked = new EventEmitter<any>();
+	@Output() onParticipantsPanelButtonClicked = new EventEmitter<any>();
+	@Output() onChatPanelButtonClicked = new EventEmitter<any>();
 
 	session: Session;
 	unreadMessages: number = 0;
@@ -142,7 +143,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	}
 
 	toggleMicrophone() {
-		this.onMicClicked.emit();
+		this.onMicrophoneButtonClicked.emit();
 
 		if (this.participantService.isMyCameraActive()) {
 			this.openviduService.publishAudio(
@@ -155,7 +156,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	}
 
 	async toggleCamera() {
-		this.onCamClicked.emit();
+		this.onCameraButtonClicked.emit();
 
 		try {
 			const publishVideo = !this.participantService.hasCameraVideoActive();
@@ -189,7 +190,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	}
 
 	async toggleScreenShare() {
-		this.onScreenShareClicked.emit();
+		this.onScreenshareButtonClicked.emit();
 
 		try {
 			// Disabling screenShare
@@ -268,17 +269,23 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	leaveSession() {
 		this.log.d('Leaving session...');
 		this.openviduService.disconnect();
-		this.onLeaveSessionClicked.emit();
+		this.onLeaveButtonClicked.emit();
 	}
 
-	toggleMenu(type: string) {
-		this.menuService.toggleMenu(<MenuType>type);
-		this.onChatClicked.emit();
+	toggleParticipantsPanel() {
+		this.onParticipantsPanelButtonClicked.emit();
+		this.menuService.toggleMenu(MenuType.PARTICIPANTS);
+	}
+
+	toggleChatPanel() {
+		this.onChatPanelButtonClicked.emit();
+		this.menuService.toggleMenu(MenuType.CHAT);
 	}
 
 	toggleFullscreen() {
 		this.isFullscreenActive = !this.isFullscreenActive;
 		this.documentService.toggleFullscreen('session-container');
+		this.onFullscreenButtonClicked.emit();
 	}
 
 	protected subscribeToReconnection() {
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 0deed966..bedae661 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
@@ -1,8 +1,7 @@
 <div id="call-container">
 	<div id="pre-join-container" *ngIf="!joinSessionClicked">
-		<ov-pre-join (onJoinClicked)="_onJoinClicked()"></ov-pre-join>
+		<ov-pre-join (onJoinButtonClicked)="_onJoinButtonClicked()"></ov-pre-join>
 		<!-- <ov-user-settings (onJoinClicked)="_onJoinClicked()" (onCloseClicked)="onLeaveSessionClicked()"></ov-user-settings> -->
-
 	</div>
 
 	<div id="spinner" *ngIf="joinSessionClicked && !isSessionAlive && !error">
@@ -39,7 +38,15 @@
 </div>
 
 <ng-template #defaultToolbar>
-	<ov-toolbar></ov-toolbar>
+	<ov-toolbar
+		(onLeaveButtonClicked)="onLeaveButtonClicked()"
+		(onCameraButtonClicked)="onCameraButtonClicked()"
+		(onMicrophoneButtonClicked)="onMicrophoneButtonClicked()"
+		(onScreenshareButtonClicked)="onScreenshareButtonClicked()"
+		(onFullscreenButtonClicked)="onFullscreenButtonClicked()"
+		(onParticipantsPanelButtonClicked)="onParticipantsPanelButtonClicked()"
+		(onChatPanelButtonClicked)="onChatPanelButtonClicked()"
+	></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 dbf20df1..32e5db4e 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
@@ -70,19 +70,26 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	// *** Events ***
 
 	// Event sent when user click on the join button in pre-join page
-	@Output() onJoinSessionClicked = new EventEmitter<any>();
+	@Output() onJoinButtonClicked = new EventEmitter<any>();
+	// Event sent when user click on the join button in pre-join page
+	@Output() onToolbarLeaveButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarCameraButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarMicrophoneButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarScreenshareButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter<any>();
+	@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
 
 	// Event sent when participant has joined the session
 	@Output() onParticipantJoined = new EventEmitter<any>();
 
 	// Event sent when participant has left the session
-	@Output() onParticipantLeft = new EventEmitter<any>();
+	// @Output() onParticipantLeft = new EventEmitter<any>();
 
 	// Event sent when session has been created
 	@Output() onSessionCreated = new EventEmitter<any>();
 
 	joinSessionClicked: boolean = false;
-	// closeClicked: boolean = false;
 	isSessionAlive: boolean = false;
 	_tokens: { webcam: string; screen: string };
 	error: boolean = false;
@@ -153,12 +160,32 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 
 	ngOnInit() {}
 
-	async _onJoinClicked() {
+	_onJoinButtonClicked() {
 		this.joinSessionClicked = true;
-		this.onJoinSessionClicked.emit();
+		this.onJoinButtonClicked.emit();
+	}
+	onLeaveButtonClicked() {
+		this.joinSessionClicked = false;
+		this.isSessionAlive = false;
+		this.onToolbarLeaveButtonClicked.emit();
+	}
+	onCameraButtonClicked() {
+		this.onToolbarCameraButtonClicked.emit();
+	}
+
+	onMicrophoneButtonClicked() {
+		this.onToolbarMicrophoneButtonClicked.emit();
+	}
+	onScreenshareButtonClicked() {
+		this.onToolbarScreenshareButtonClicked.emit();
+	}
+	onFullscreenButtonClicked() {
+		this.onToolbarFullscreenButtonClicked.emit();
+	}
+	onParticipantsPanelButtonClicked() {
+		this.onToolbarParticipantsPanelButtonClicked.emit();
+	}
+	onChatPanelButtonClicked() {
+		this.onToolbarChatPanelButtonClicked.emit();
 	}
-	// onLeaveSessionClicked() {
-	// 	this.isSessionAlive = false;
-	// 	this.closeClicked = true;
-	// }
 }