openvidu-components-angular: multiple VB bug fixes

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

@@ -72,7 +72,7 @@
 						<button
 							mat-icon-button
 							id="camera-button"
-							[disabled]="!hasVideoDevices"
+							[disabled]="!hasVideoDevices || videoMuteChanging"
 							[class.warn-btn]="isVideoMuted"
 							(click)="toggleCam()"
 						>

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

@@ -20,6 +20,7 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service';
 import { PanelService } from '../../services/panel/panel.service';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { StorageService } from '../../services/storage/storage.service';
+import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service';
 
 /**
  * @internal
@@ -37,6 +38,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	microphoneSelected: CustomDevice;
 	isVideoMuted: boolean;
 	isAudioMuted: boolean;
+	videoMuteChanging: boolean;
 	localParticipant: ParticipantAbstractModel;
 	windowSize: number;
 	hasVideoDevices: boolean;
@@ -72,7 +74,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		private participantService: ParticipantService,
 		protected panelService: PanelService,
 		private libService: OpenViduAngularConfigService,
-		private storageSrv: StorageService
+		private storageSrv: StorageService,
+		private backgroundService: VirtualBackgroundService
 	) {
 		this.log = this.loggerSrv.get('PreJoinComponent');
 	}
@@ -118,6 +121,8 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 			// await this.openviduService.replaceTrack(VideoType.CAMERA, pp);
 			// TODO: Remove this when replaceTrack issue is fixed
 			const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror };
+
+			await this.backgroundService.removeBackground();
 			await this.openviduService.republishTrack(pp);
 
 			this.deviceSrv.setCameraSelected(videoSource);
@@ -142,10 +147,12 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	}
 
 	async toggleCam() {
+		this.videoMuteChanging = true;
 		const publish = this.isVideoMuted;
 		await this.openviduService.publishVideo(publish);
 		this.isVideoMuted = !this.isVideoMuted;
 		this.storageSrv.setVideoMuted(this.isVideoMuted);
+		this.videoMuteChanging = false;
 	}
 
 	toggleMic() {

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

@@ -29,7 +29,7 @@
 			id="camera-btn"
 			mat-icon-button
 			(click)="toggleCamera()"
-			[disabled]="isConnectionLost || !hasVideoDevices"
+			[disabled]="isConnectionLost || !hasVideoDevices || videoMuteChanging"
 			[class.warn-btn]="!isWebcamVideoActive"
 		>
 			<mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam" id="videocam">videocam</mat-icon>

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

@@ -277,6 +277,10 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	 * @ignore
 	 */
 	showSessionName: boolean = true;
+	/**
+	 * @ignore
+	 */
+	videoMuteChanging: boolean = false;
 
 	/**
 	 * @ignore
@@ -395,8 +399,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	 * @ignore
 	 */
 	async toggleCamera() {
+		this.videoMuteChanging = true;
 		this.onCameraButtonClicked.emit();
-
 		try {
 			const publishVideo = !this.participantService.isMyVideoActive();
 			await this.openviduService.publishVideo(publishVideo);
@@ -404,6 +408,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 			this.log.e('There was an error toggling camera:', error.code, error.message);
 			this.actionService.openDialog('There was an error toggling camera', error?.error || error?.message);
 		}
+		this.videoMuteChanging = false;
 	}
 
 	/**

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

@@ -114,7 +114,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 		}
 		if (this.isVideoMuted) {
 			// Publish Webcam video
-			this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
+			await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), true);
 			this.isVideoMuted = false;
 		}
 	}
@@ -141,10 +141,10 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	toggleCam() {
+	async toggleCam() {
 
 		const publish = this.isVideoMuted;
-		this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
+		await this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publish);
 
 		if (this.participantService.haveICameraAndScreenActive()) {
 			// Cam will not published, disable webcam with screensharing active

openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts

@@ -261,7 +261,7 @@ export class OpenViduService {
 
 		// Disabling webcam
 		if (this.participantService.haveICameraAndScreenActive()) {
-			this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
+			await this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
 			this.participantService.disableWebcamStream();
 			this.unpublish(this.participantService.getMyCameraPublisher());
 			this.publishAudioAux(this.participantService.getMyScreenPublisher(), publishAudio);
@@ -273,22 +273,22 @@ export class OpenViduService {
 				await this.connectSession(this.getWebcamSession(), this.tokenService.getWebcamToken());
 			}
 			await this.publish(this.participantService.getMyCameraPublisher());
-			this.publishVideoAux(this.participantService.getMyCameraPublisher(), true);
+			await this.publishVideoAux(this.participantService.getMyCameraPublisher(), true);
 			this.publishAudioAux(this.participantService.getMyScreenPublisher(), false);
 			this.publishAudioAux(this.participantService.getMyCameraPublisher(), hasAudio);
 			this.participantService.enableWebcamStream();
 		} else {
 			// Muting/unmuting webcam
-			this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
+			await this.publishVideoAux(this.participantService.getMyCameraPublisher(), publish);
 		}
 	}
 
 	/**
 	 * @internal
 	 */
-	private publishVideoAux(publisher: Publisher, publish: boolean): void {
+	private async publishVideoAux(publisher: Publisher, publish: boolean): Promise<void> {
 		if (!!publisher) {
-			publisher.publishVideo(publish, true);
+			await publisher.publishVideo(publish, true);
 			this.participantService.updateLocalParticipant();
 		}
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts

@@ -41,9 +41,11 @@ export class VirtualBackgroundService {
 	getBackgrounds(): any[] {
 		return this.backgrounds;
 	}
+
 	async applyBackground(effect: BackgroundEffect) {
 		if (effect.id !== this.backgroundSelected.getValue()) {
-			const isBackgroundSelected = !!this.backgroundSelected.getValue() && this.backgroundSelected.getValue() !== 'no_effect';
+			const filter = this.participantService.getMyCameraPublisher().stream.filter;
+			const isBackgroundSelected = !!filter && filter.type.startsWith('VB:');
 			let options = { token: this.tokenService.getWebcamToken(), url: '' };
 			if (effect.type === EffectType.IMAGE) {
 				options.url = effect.src;

openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts

@@ -20,9 +20,9 @@ export class ToolbarDirectiveComponent implements OnInit {
 	OPENVIDU_SECRET = 'MY_SECRET';
 	publishVideo = true;
 	publishAudio = true;
-	constructor(private restService: RestService, private openviduService: OpenViduService) {}
+	constructor(private restService: RestService, private openviduService: OpenViduService) { }
 
-	ngOnInit(): void {}
+	ngOnInit(): void { }
 
 	async onJoinButtonClicked() {
 		this.tokens = {
@@ -31,13 +31,13 @@ export class ToolbarDirectiveComponent implements OnInit {
 		};
 	}
 
-	toggleVideo() {
+	async toggleVideo(): Promise<void> {
 		this.publishVideo = !this.publishVideo;
-		this.openviduService.publishVideo(this.publishVideo);
+		await this.openviduService.publishVideo(this.publishVideo);
 	}
 
-	toggleAudio() {
+	async toggleAudio(): Promise<void> {
 		this.publishAudio = !this.publishAudio;
-		this.openviduService.publishAudio(this.publishAudio);
+		await this.openviduService.publishAudio(this.publishAudio);
 	}
 }

openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts

@@ -22,7 +22,7 @@ export class ToolbarAdditionalButtonsDirectiveComponent {
 		private restService: RestService,
 		private openviduService: OpenViduService,
 		private participantService: ParticipantService
-	) {}
+	) { }
 
 	async onJoinButtonClicked() {
 		this.tokens = {
@@ -31,13 +31,13 @@ export class ToolbarAdditionalButtonsDirectiveComponent {
 		};
 	}
 
-	toggleVideo() {
+	async toggleVideo() {
 		const publishVideo = !this.participantService.isMyVideoActive();
-		this.openviduService.publishVideo(publishVideo);
+		await this.openviduService.publishVideo(publishVideo);
 	}
 
-	toggleAudio() {
+	async toggleAudio() {
 		const publishAudio = !this.participantService.isMyAudioActive();
-		this.openviduService.publishAudio(publishAudio);
+		await this.openviduService.publishAudio(publishAudio);
 	}
 }