From 27d70de3cd5335980c98088e956d4a60597a4c8c Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Thu, 10 Mar 2022 12:55:43 +0100
Subject: [PATCH] openvidu-components: Added directive for hidding/showing mute
 button

---
 .../participant-panel-item.component.css      |  1 -
 .../participant-panel-item.component.html     |  2 +-
 .../participant-panel-item.component.ts       | 27 +++++++++++--
 .../directives/api/api.directive.module.ts    |  7 +++-
 .../api/participant-panel-item.directive.ts   | 39 +++++++++++++++++++
 .../config/openvidu-angular.config.service.ts |  4 ++
 .../openvidu-angular/src/public-api.ts        |  1 +
 7 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts

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 d165c77c..80629081 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
@@ -16,7 +16,6 @@
 
 ::ng-deep .participant-action-buttons > *:not(#action-btn) > * {
 	margin: auto;
-
 }
 
 mat-list-item {
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 bd41673d..32e9e3d3 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
@@ -11,7 +11,7 @@
 			<button
 				mat-icon-button
 				id="action-btn"
-				*ngIf="!_participant.local"
+				*ngIf="!_participant.local && showMuteButton"
 				[class.warn-btn]="_participant.isMutedForcibly"
 				(click)="toggleMuteForcibly()"
 			>
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 9fb3b58d..9e2bc6b2 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
@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { ParticipantPanelItemElementsDirective } from '../../../../directives/template/openvidu-angular.directive';
 import { ParticipantAbstractModel } from '../../../../models/participant.model';
+import { OpenViduAngularConfigService } from '../../../../services/config/openvidu-angular.config.service';
 
 @Component({
 	selector: 'ov-participant-panel-item',
@@ -8,8 +10,11 @@ import { ParticipantAbstractModel } from '../../../../models/participant.model';
 	styleUrls: ['./participant-panel-item.component.css'],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ParticipantPanelItemComponent {
+export class ParticipantPanelItemComponent implements OnInit, OnDestroy {
 	@ContentChild('participantPanelItemElements', { read: TemplateRef }) participantPanelItemElementsTemplate: TemplateRef<any>;
+	showMuteButton: boolean = true;
+	private muteButtonSub: Subscription;
+
 	@ContentChild(ParticipantPanelItemElementsDirective)
 	set externalItemElements(externalItemElements: ParticipantPanelItemElementsDirective) {
 		// This directive will has value only when ITEM ELEMENTS component tagget with '*ovParticipantPanelItemElements' directive
@@ -25,9 +30,25 @@ export class ParticipantPanelItemComponent {
 	}
 
 	_participant: ParticipantAbstractModel;
-	constructor() {}
+	constructor(private libService: OpenViduAngularConfigService, private cd: ChangeDetectorRef) {}
+
+	ngOnInit(): void {
+		this.subscribeToParticipantPanelItemDirectives();
+	}
+	ngOnDestroy(): void {
+		if (this.muteButtonSub) this.muteButtonSub.unsubscribe();
+	}
 
 	toggleMuteForcibly() {
 		this._participant.setMutedForcibly(!this._participant.isMutedForcibly);
 	}
+
+	private subscribeToParticipantPanelItemDirectives() {
+		this.muteButtonSub = this.libService.participantItemMuteButton.subscribe((value: boolean) => {
+			console.warn("show mute", value);
+
+			this.showMuteButton = value;
+			this.cd.markForCheck();
+		});
+	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
index 1d293d67..c7915d25 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
 	StreamDisplayParticipantNameDirective,
 	StreamDisplayAudioDetectionDirective,
@@ -31,7 +32,8 @@ import { AudioMutedDirective, MinimalDirective, VideoMutedDirective } from './vi
 		StreamDisplayParticipantNameDirective,
 		StreamDisplayAudioDetectionDirective,
 		StreamSettingsButtonDirective,
-		LogoDirective
+		LogoDirective,
+		ParticipantPanelItemMuteButtonDirective
 	],
 	exports: [
 		MinimalDirective,
@@ -47,7 +49,8 @@ import { AudioMutedDirective, MinimalDirective, VideoMutedDirective } from './vi
 		StreamDisplayParticipantNameDirective,
 		StreamDisplayAudioDetectionDirective,
 		StreamSettingsButtonDirective,
-		LogoDirective
+		LogoDirective,
+		ParticipantPanelItemMuteButtonDirective
 	]
 })
 export class ApiDirectiveModule {}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts
new file mode 100644
index 00000000..73317cfe
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts
@@ -0,0 +1,39 @@
+import { Directive, AfterViewInit, OnDestroy, Input, ElementRef } from '@angular/core';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+
+@Directive({
+	selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]'
+})
+export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, OnDestroy {
+	@Input() set participantPanelItemMuteButton(value: boolean) {
+		this.muteValue = value;
+		this.update(this.muteValue);
+	}
+	@Input() set muteButton(value: boolean) {
+		this.muteValue = value;
+		this.update(this.muteValue);
+	}
+
+	muteValue: boolean = true;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		this.update(this.muteValue);
+	}
+	ngOnDestroy(): void {
+		this.clear();
+	}
+	clear() {
+		this.muteValue = true;
+		this.update(true);
+	}
+
+	update(value: boolean) {
+		console.warn('directive mute ', value);
+
+		if (this.libService.participantItemMuteButton.getValue() !== value) {
+			this.libService.participantItemMuteButton.next(value);
+		}
+	}
+}
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
index e66a5327..943f23ee 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
@@ -41,6 +41,8 @@ export class OpenViduAngularConfigService {
 	displayAudioDetectionObs: Observable<boolean>;
 	settingsButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 	settingsButtonObs: Observable<boolean>;
+	participantItemMuteButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	participantItemMuteButtonObs: Observable<boolean>;
 
 	constructor(@Inject('OPENVIDU_ANGULAR_CONFIG') config: OpenViduAngularConfig) {
 		this.configuration = config;
@@ -61,6 +63,8 @@ export class OpenViduAngularConfigService {
 		this.displayParticipantNameObs = this.displayParticipantName.asObservable();
 		this.displayAudioDetectionObs = this.displayAudioDetection.asObservable();
 		this.settingsButtonObs = this.settingsButton.asObservable();
+		// Participant item observables
+		this.participantItemMuteButtonObs = this.participantItemMuteButton.asObservable();
 	}
 
 	getConfig(): OpenViduAngularConfig {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
index 0589f04e..d26e489c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
@@ -53,3 +53,4 @@ export * from './lib/directives/template/openvidu-angular.directive';
 export * from './lib/directives/api/toolbar.directive';
 export * from './lib/directives/api/stream.directive';
 export * from './lib/directives/api/videoconference.directive';
+export * from './lib/directives/api/participant-panel-item.directive';