openvidu-components: Added directive for hidding/showing mute button

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 {

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()"
 			>

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();
+		});
+	}
 }

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 {}

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);
+		}
+	}
+}

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 {

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';