ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
View File

@ -6,22 +6,22 @@ import { PanelService } from '../../../services/panel/panel.service';
import { VirtualBackgroundService } from '../../../services/virtual-background/virtual-background.service'; import { VirtualBackgroundService } from '../../../services/virtual-background/virtual-background.service';
@Component({ @Component({
selector: 'ov-background-effects-panel', selector: 'ov-background-effects-panel',
templateUrl: './background-effects-panel.component.html', templateUrl: './background-effects-panel.component.html',
styleUrls: ['./background-effects-panel.component.css'], styleUrls: ['./background-effects-panel.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class BackgroundEffectsPanelComponent implements OnInit { export class BackgroundEffectsPanelComponent implements OnInit {
backgroundSelectedId: string; backgroundSelectedId: string;
backgroundImages: BackgroundEffect[] = []; backgroundImages: BackgroundEffect[] = [];
noEffectAndBlurredBackground: BackgroundEffect[] = []; noEffectAndBlurredBackground: BackgroundEffect[] = [];
private backgrounds: BackgroundEffect[]; private backgrounds: BackgroundEffect[];
private backgroundSubs: Subscription; 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.subscribeToBackgroundSelected();
this.backgrounds = this.backgroundService.getBackgrounds(); this.backgrounds = this.backgroundService.getBackgrounds();
this.noEffectAndBlurredBackground = this.backgrounds.filter(f => f.type === EffectType.BLUR || f.type === EffectType.NONE); this.noEffectAndBlurredBackground = this.backgrounds.filter(f => f.type === EffectType.BLUR || f.type === EffectType.NONE);
@ -29,7 +29,7 @@ export class BackgroundEffectsPanelComponent implements OnInit {
} }
ngOnDestroy() { ngOnDestroy() {
if(this.backgroundSubs) this.backgroundSubs.unsubscribe(); if (this.backgroundSubs) this.backgroundSubs.unsubscribe();
} }
subscribeToBackgroundSelected() { subscribeToBackgroundSelected() {
this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => { this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => {
@ -38,18 +38,16 @@ export class BackgroundEffectsPanelComponent implements OnInit {
}); });
} }
close() { close() {
this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS); this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
} }
async applyBackground(effect: BackgroundEffect) { async applyBackground(effect: BackgroundEffect) {
if (effect.type === EffectType.NONE) {
if(effect.type === EffectType.NONE){
await this.removeBackground(); await this.removeBackground();
} else { } else {
await this.backgroundService.applyBackground(effect); await this.backgroundService.applyBackground(effect);
} }
} }
async removeBackground() { async removeBackground() {

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

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

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

@ -122,8 +122,16 @@ export class PreJoinComponent implements OnInit, OnDestroy {
// TODO: Remove this when replaceTrack issue is fixed // TODO: Remove this when replaceTrack issue is fixed
const pp: PublisherProperties = { videoSource, audioSource: this.microphoneSelected.device, mirror }; 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); await this.openviduService.republishTrack(pp);
if (backgroundWasApplied) {
await this.backgroundService.applyBackground(this.backgroundService.backgrounds.find(b => b.id === backgroundSelected));
}
this.deviceSrv.setCameraSelected(videoSource); this.deviceSrv.setCameraSelected(videoSource);
this.cameraSelected = this.deviceSrv.getCameraSelected(); this.cameraSelected = this.deviceSrv.getCameraSelected();
@ -152,6 +160,9 @@ export class PreJoinComponent implements OnInit, OnDestroy {
await this.openviduService.publishVideo(publish); await this.openviduService.publishVideo(publish);
this.isVideoMuted = !this.isVideoMuted; this.isVideoMuted = !this.isVideoMuted;
this.storageSrv.setVideoMuted(this.isVideoMuted); this.storageSrv.setVideoMuted(this.isVideoMuted);
if (this.isVideoMuted && this.panelService.isExternalPanelOpened()) {
this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
}
this.videoMuteChanging = false; this.videoMuteChanging = false;
} }

2
openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts
View File

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