From 5f22072f7169019f2f1a9453d4becd97b36243e3 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 28 Feb 2022 13:06:39 +0100
Subject: [PATCH] openvidu-components: Force mute participant from participants
 panel

---
 .../participant-panel-item.component.css             |  8 ++++++++
 .../participant-panel-item.component.html            |  7 ++++++-
 .../participant-panel-item.component.ts              |  4 ++++
 .../src/lib/components/stream/stream.component.html  | 12 ++++++------
 .../src/lib/components/stream/stream.component.ts    |  4 ++--
 .../src/lib/models/participant.model.ts              |  6 ++++++
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
index 4391e21a..ae5f341e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.css
@@ -23,3 +23,11 @@ mat-list {
 	display: contents;
 }
 
+#action-btn {
+	border-radius: var(--ov-buttons-radius);
+}
+
+.warn-btn {
+	/* background-color: var(--ov-warn-color) !important; */
+	color: var(--ov-warn-color);
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
index fdba655f..ebc2e54c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
@@ -6,5 +6,10 @@
 		<!-- <p matLine>
 			<span class="participant-subtitle"></span>
 		</p> -->
+
+		<button mat-icon-button id="action-btn" [class.warn-btn]="_participant.isMutedForcibly" (click)="toggleMuteForcibly()">
+			<mat-icon *ngIf="!_participant.isMutedForcibly">volume_up</mat-icon>
+			<mat-icon *ngIf="_participant.isMutedForcibly">volume_off</mat-icon>
+		</button>
 	</mat-list-item>
-</mat-list>
\ No newline at end of file
+</mat-list>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
index edd0b7ef..dcea75f2 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
@@ -15,4 +15,8 @@ export class ParticipantPanelItemComponent {
 	_participant: ParticipantAbstractModel;
 	constructor() {}
 
+	toggleMuteForcibly() {
+		this._participant.setMutedForcibly(!this._participant.isMutedForcibly);
+	}
+
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index 7e1bab4f..6fb61964 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
@@ -36,7 +36,7 @@
 	<ov-video
 		(dblclick)="toggleVideoEnlarged()"
 		[streamManager]="_stream.streamManager"
-		[mutedSound]="mutedSound"
+		[mutedSound]="_stream.participant.isMutedForcibly"
 	></ov-video>
 
 
@@ -59,12 +59,12 @@
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
 			</button>
-			<button mat-menu-item id="volumeButton" *ngIf="this._stream.streamManager?.remote" (click)="toggleSound()">
-				<mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
-				<span *ngIf="!mutedSound">Mute sound</span>
+			<button mat-menu-item id="volumeButton" *ngIf="!this._stream.local" (click)="toggleSound()">
+				<mat-icon *ngIf="!_stream.participant.isMutedForcibly">volume_up</mat-icon>
+				<span *ngIf="!_stream.participant.isMutedForcibly">Mute sound</span>
 
-				<mat-icon *ngIf="mutedSound">volume_off</mat-icon>
-				<span *ngIf="mutedSound">Unmute sound</span>
+				<mat-icon *ngIf="_stream.participant.isMutedForcibly">volume_off</mat-icon>
+				<span *ngIf="_stream.participant.isMutedForcibly">Unmute sound</span>
 			</button>
 			<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
 				<mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index c9c7f1c3..d636a5cf 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
@@ -23,7 +23,6 @@ export class StreamComponent implements OnInit {
 	videoSizeIconEnum = VideoSizeIcon;
 	videoTypeEnum = VideoType;
 	videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
-	mutedSound: boolean;
 	toggleNickname: boolean;
 	nicknameFormControl: FormControl;
 	matcher: NicknameMatcher;
@@ -100,7 +99,8 @@ export class StreamComponent implements OnInit {
 	}
 
 	toggleSound() {
-		this.mutedSound = !this.mutedSound;
+		this._stream.participant.setMutedForcibly(!this._stream.participant.isMutedForcibly);
+
 	}
 
 	toggleNicknameForm() {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
index ed0b94fb..fb58f121 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
@@ -15,6 +15,7 @@ export interface StreamModel {
 export abstract class ParticipantAbstractModel {
 	streams: Map<VideoType, StreamModel> = new Map();
 	id: string;
+	isMutedForcibly: boolean;
 
 	constructor(model?: StreamModel, id?: string) {
 		let streamModel: StreamModel = {
@@ -29,6 +30,7 @@ export abstract class ParticipantAbstractModel {
 		};
 		this.streams.set(streamModel.type, streamModel);
 		this.id = id ? id : new Date().getTime().toString();
+		this.isMutedForcibly = false;
 	}
 
 	addConnection(streamModel: StreamModel) {
@@ -190,6 +192,10 @@ export abstract class ParticipantAbstractModel {
 	someHasVideoEnlarged(): boolean {
 		return Array.from(this.streams.values()).some((conn) => conn.videoEnlarged);
 	}
+
+	setMutedForcibly(muted: boolean){
+		this.isMutedForcibly = muted;
+	}
 }
 
 export class ParticipantModel extends ParticipantAbstractModel {