openvidu-components: Elevate an event on device muting

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.css

@@ -77,7 +77,7 @@ hr {
 
 #background-effects-btn {
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	background-color: var(--ov-secondary-color);
 	bottom: 5px;
 	right: 5px;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html

@@ -24,7 +24,7 @@
 					<ng-template #stream let-stream>
 						<button
 							*ngIf="!isMinimal && showBackgroundEffectsButton"
-							[disabled]="isVideoMuted"
+							[disabled]="!stream.streamManager?.stream?.videoActive"
 							matTooltip="{{ 'TOOLBAR.BACKGROUND' | translate }}"
 							mat-icon-button
 							id="background-effects-btn"
@@ -52,7 +52,10 @@
 					<hr *ngIf="windowSize >= 960" />
 
 					<!-- Camera -->
-					<ov-video-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-video-devices-select>
+					<ov-video-devices-select
+						(onDeviceSelectorClicked)="onDeviceSelectorClicked()"
+						(onVideoMutedClicked)="onVideoMutedClicked($event)"
+					></ov-video-devices-select>
 
 					<!-- Microphone -->
 					<ov-audio-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-audio-devices-select>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts

@@ -1,7 +1,6 @@
-import { Component, HostListener, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, HostListener, OnDestroy, OnInit, Output } from '@angular/core';
 
 import { Subscription } from 'rxjs';
-import { CustomDevice } from '../../models/device.model';
 import { ILogger } from '../../models/logger.model';
 import { PanelType } from '../../models/panel.model';
 import { ParticipantAbstractModel } from '../../models/participant.model';
@@ -22,17 +21,9 @@ import { ParticipantService } from '../../services/participant/participant.servi
 })
 export class PreJoinComponent implements OnInit, OnDestroy {
 	@Output() onJoinButtonClicked = new EventEmitter<any>();
-	cameras: CustomDevice[];
+
-	microphones: CustomDevice[];
-	cameraSelected: CustomDevice;
-	microphoneSelected: CustomDevice;
-	isVideoMuted: boolean;
-	isAudioMuted: boolean;
-	videoMuteChanging: boolean;
 	localParticipant: ParticipantAbstractModel;
 	windowSize: number;
-	hasVideoDevices: boolean;
-	hasAudioDevices: boolean;
 	isLoading = true;
 	nickname: string;
 	/**
@@ -92,6 +83,12 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		this.cdkSrv.setSelector('#prejoin-container');
 	}
 
+	onVideoMutedClicked(hasVideo: boolean) {
+		if (!hasVideo) {
+			this.panelService.closePanel();
+		}
+	}
+
 	joinSession() {
 		this.onJoinButtonClicked.emit();
 		this.panelService.closePanel();

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts

@@ -1,13 +1,13 @@
-import { EventEmitter, Component, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { PublisherProperties } from 'openvidu-browser';
-import { DeviceService } from '../../../services/device/device.service';
+import { Subscription } from 'rxjs';
-import { OpenViduService } from '../../../services/openvidu/openvidu.service';
-import { StorageService } from '../../../services/storage/storage.service';
 import { CustomDevice } from '../../../models/device.model';
 import { ParticipantAbstractModel } from '../../../models/participant.model';
-import { ParticipantService } from '../../../services/participant/participant.service';
-import { Subscription } from 'rxjs';
 import { VideoType } from '../../../models/video-type.model';
+import { DeviceService } from '../../../services/device/device.service';
+import { OpenViduService } from '../../../services/openvidu/openvidu.service';
+import { ParticipantService } from '../../../services/participant/participant.service';
+import { StorageService } from '../../../services/storage/storage.service';
 
 /**
  * @internal
@@ -19,6 +19,7 @@ import { VideoType } from '../../../models/video-type.model';
 })
 export class AudioDevicesComponent implements OnInit, OnDestroy {
 	@Output() onDeviceSelectorClicked = new EventEmitter<void>();
+	@Output() onAudioMutedClicked = new EventEmitter<boolean>();
 	hasAudioDevices: boolean;
 	isAudioMuted: boolean;
 	microphoneSelected: CustomDevice;
@@ -56,6 +57,7 @@ export class AudioDevicesComponent implements OnInit, OnDestroy {
 	toggleMic() {
 		const publish = this.isAudioMuted;
 		this.openviduService.publishAudio(publish);
+		this.onAudioMutedClicked.emit(publish);
 	}
 
 	async onMicrophoneSelected(event: any) {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { PublisherProperties } from 'openvidu-browser';
 import { Subscription } from 'rxjs';
 import { CustomDevice } from '../../../models/device.model';
@@ -22,6 +22,7 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
 })
 export class VideoDevicesComponent implements OnInit, OnDestroy {
 	@Output()  onDeviceSelectorClicked = new EventEmitter<void>();
+	@Output()  onVideoMutedClicked = new EventEmitter<boolean>();
 
 	videoMuteChanging: boolean;
 	isVideoMuted: boolean;
@@ -68,6 +69,7 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 			this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
 		}
 		this.videoMuteChanging = false;
+		this.onVideoMutedClicked.emit(publish);
 	}
 
 	async onCameraSelected(event: any) {