openvidu-components: Disabled background button with video muted

Author: CSantosM

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

@@ -13,7 +13,8 @@
 				<ov-layout>
 					<ng-template #stream let-stream>
 						<button
-							*ngIf="!isMinimal && !isVideoMuted && showBackgroundEffectsButton"
+							*ngIf="!isMinimal && showBackgroundEffectsButton"
+							[disabled]="isVideoMuted"
 							mat-icon-button
 							id="background-effects-btn"
 							(click)="toggleBackgroundEffects()"

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html

@@ -93,7 +93,13 @@
 			</button> -->
 
 			<!-- Virtual background button -->
-			<button *ngIf="!isMinimal && showBackgroundEffectsButton" mat-menu-item id="virtual-bg-btn" (click)="toggleBackgroundEffects()">
+			<button
+				*ngIf="!isMinimal && showBackgroundEffectsButton"
+				[disabled]="!isWebcamVideoActive"
+				mat-menu-item
+				id="virtual-bg-btn"
+				(click)="toggleBackgroundEffects()"
+			>
 				<mat-icon>auto_awesome</mat-icon>
 				<span>Background effects</span>
 			</button>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -403,6 +403,9 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		this.onCameraButtonClicked.emit();
 		try {
 			const publishVideo = !this.participantService.isMyVideoActive();
+			if(this.panelService.isExternalPanelOpened() && !publishVideo) {
+				this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
+			}
 			await this.openviduService.publishVideo(publishVideo);
 		} catch (error) {
 			this.log.e('There was an error toggling camera:', error.code, error.message);