openvidu-components-angular: manage some incompatible VB situations

pull/721/head
pabloFuente 2022-05-05 18:07:33 +02:00
parent 7832f5a75f
commit 279da4eeaf
4 changed files with 26 additions and 17 deletions

View File

@ -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() {

View File

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

View File

@ -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;
}

View File

@ -88,7 +88,7 @@ export class PanelService {
return this.isParticipantsOpened;
}
private isExternalPanelOpened(): boolean {
isExternalPanelOpened(): boolean {
return this.isExternalOpened;
}
}