From 279da4eeaf885d23592f4e48db6abf9e5f57ad6b Mon Sep 17 00:00:00 2001
From: pabloFuente <pablofuenteperez@gmail.com>
Date: Thu, 5 May 2022 18:07:33 +0200
Subject: [PATCH] openvidu-components-angular: manage some incompatible VB
 situations

---
 .../background-effects-panel.component.ts     | 26 +++++++++----------
 .../pre-join/pre-join.component.html          |  2 +-
 .../components/pre-join/pre-join.component.ts | 13 +++++++++-
 .../src/lib/services/panel/panel.service.ts   |  2 +-
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
index bade5043..13004682 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
@@ -6,22 +6,22 @@ import { PanelService } from '../../../services/panel/panel.service';
 import { VirtualBackgroundService } from '../../../services/virtual-background/virtual-background.service';
 
 @Component({
-	selector: 'ov-background-effects-panel',
-	templateUrl: './background-effects-panel.component.html',
-	styleUrls: ['./background-effects-panel.component.css'],
-	changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'ov-background-effects-panel',
+  templateUrl: './background-effects-panel.component.html',
+  styleUrls: ['./background-effects-panel.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BackgroundEffectsPanelComponent implements OnInit {
 
   backgroundSelectedId: string;
-	backgroundImages: BackgroundEffect[] = [];
+  backgroundImages: BackgroundEffect[] = [];
   noEffectAndBlurredBackground: BackgroundEffect[] = [];
   private backgrounds: BackgroundEffect[];
   private backgroundSubs: Subscription;
 
-	constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService, private cd: ChangeDetectorRef) {}
+  constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService, private cd: ChangeDetectorRef) { }
 
-	ngOnInit(): void {
+  ngOnInit(): void {
     this.subscribeToBackgroundSelected();
     this.backgrounds = this.backgroundService.getBackgrounds();
     this.noEffectAndBlurredBackground = this.backgrounds.filter(f => f.type === EffectType.BLUR || f.type === EffectType.NONE);
@@ -29,7 +29,7 @@ export class BackgroundEffectsPanelComponent implements OnInit {
   }
 
   ngOnDestroy() {
-    if(this.backgroundSubs) this.backgroundSubs.unsubscribe();
+    if (this.backgroundSubs) this.backgroundSubs.unsubscribe();
   }
   subscribeToBackgroundSelected() {
     this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => {
@@ -38,18 +38,16 @@ export class BackgroundEffectsPanelComponent implements OnInit {
     });
   }
 
-	close() {
-		this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
-	}
+  close() {
+    this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
+  }
 
   async applyBackground(effect: BackgroundEffect) {
-
-    if(effect.type === EffectType.NONE){
+    if (effect.type === EffectType.NONE) {
       await this.removeBackground();
     } else {
       await this.backgroundService.applyBackground(effect);
     }
-
   }
 
   async removeBackground() {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
index 4000ce66..e4b4a305 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
@@ -13,7 +13,7 @@
 				<ov-layout>
 					<ng-template #stream let-stream>
 						<button
-							*ngIf="!isMinimal && showBackgroundEffectsButton"
+							*ngIf="!isMinimal && !isVideoMuted && showBackgroundEffectsButton"
 							mat-icon-button
 							id="background-effects-btn"
 							(click)="toggleBackgroundEffects()"
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
index c23e4c8c..8964088a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -122,8 +122,16 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 			// TODO: Remove this when replaceTrack issue is fixed
 			const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
 
-			await this.backgroundService.removeBackground();
+			// Reapply Virtual Background to new Publisher if necessary
+			const backgroundSelected = this.backgroundService.backgroundSelected.getValue();
+			const backgroundWasApplied = !!backgroundSelected && backgroundSelected !== 'no_effect';
+			if (backgroundWasApplied) {
+				await this.backgroundService.removeBackground();
+			}
 			await this.openviduService.republishTrack(pp);
+			if (backgroundWasApplied) {
+				await this.backgroundService.applyBackground(this.backgroundService.backgrounds.find(b => b.id === backgroundSelected));
+			}
 
 			this.deviceSrv.setCameraSelected(videoSource);
 			this.cameraSelected = this.deviceSrv.getCameraSelected();
@@ -152,6 +160,9 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		await this.openviduService.publishVideo(publish);
 		this.isVideoMuted = !this.isVideoMuted;
 		this.storageSrv.setVideoMuted(this.isVideoMuted);
+		if (this.isVideoMuted && this.panelService.isExternalPanelOpened()) {
+			this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
+		}
 		this.videoMuteChanging = false;
 	}
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts
index b573f887..2507452a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts
@@ -88,7 +88,7 @@ export class PanelService {
 		return this.isParticipantsOpened;
 	}
 
-	private isExternalPanelOpened(): boolean {
+	isExternalPanelOpened(): boolean {
 		return this.isExternalOpened;
 	}
 }