From ce4b783ef0171fd07dda97112faa5a92204d4167 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 7 Nov 2022 11:48:43 +0100 Subject: [PATCH] openvidu-components: Stored virtual background in local storage Saved background in use in local storage for reapplying it at future meetings --- .../components/session/session.component.html | 2 +- .../components/session/session.component.ts | 17 +++++++-- .../src/lib/models/storage.model.ts | 3 +- .../lib/services/storage/storage.service.ts | 30 +++++++++++++--- .../virtual-background.service.ts | 36 +++++++++++++------ 5 files changed, 69 insertions(+), 19 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html index b2200a99..b3673683 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html @@ -14,7 +14,7 @@ -
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 0a7cdd27..e6531c5f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -7,6 +7,7 @@ import { EventEmitter, HostListener, Input, + OnDestroy, OnInit, Output, TemplateRef, @@ -44,6 +45,7 @@ import { PlatformService } from '../../services/platform/platform.service'; import { RecordingService } from '../../services/recording/recording.service'; import { TokenService } from '../../services/token/token.service'; import { TranslateService } from '../../services/translate/translate.service'; +import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service'; /** * @internal @@ -53,10 +55,10 @@ import { TranslateService } from '../../services/translate/translate.service'; selector: 'ov-session', templateUrl: './session.component.html', styleUrls: ['./session.component.css'], - animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))])])], + animations: [trigger('sessionAnimation', [transition(':enter', [style({ opacity: 0 }), animate('50ms', style({ opacity: 1 }))])])], changeDetection: ChangeDetectionStrategy.OnPush }) -export class SessionComponent implements OnInit { +export class SessionComponent implements OnInit, OnDestroy { @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef; @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef; @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; @@ -100,6 +102,7 @@ export class SessionComponent implements OnInit { private translateService: TranslateService, private captionService: CaptionService, private platformService: PlatformService, + private backgroundService: VirtualBackgroundService, private cd: ChangeDetectorRef ) { this.log = this.loggerSrv.get('SessionComponent'); @@ -152,6 +155,16 @@ export class SessionComponent implements OnInit { }, 0); } + @ViewChild('layoutContainer') + set layoutContainer(container: ElementRef) { + setTimeout(async () => { + if (container) { + // Apply background from storage when layout container is in DOM + await this.backgroundService.applyBackgroundFromStorage(); + } + }, 0); + } + async ngOnInit() { if (!this.usedInPrejoinPage) { if (!this.tokenService.getScreenToken()) { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/storage.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/storage.model.ts index 199e7556..9cadcb61 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/storage.model.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/storage.model.ts @@ -8,5 +8,6 @@ export enum Storage { AUDIO_MUTED = 'openviduCallAudioMuted', VIDEO_MUTED = 'openviduCallVideoMuted', LANG = 'openviduCallLang', - CAPTION_LANG = 'openviduCallCaptionLang' + CAPTION_LANG = 'openviduCallCaptionLang', + BACKGROUND = "openviduCallBackground" } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/storage/storage.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/storage/storage.service.ts index 3e58b8c6..583eb9c2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/storage/storage.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/storage/storage.service.ts @@ -21,7 +21,7 @@ export class StorageService { return this.get(Storage.USER_NICKNAME); } - setNickname(name: string){ + setNickname(name: string) { this.set(Storage.USER_NICKNAME, name); } getVideoDevice() { @@ -54,7 +54,7 @@ export class StorageService { this.set(Storage.AUDIO_MUTED, `${muted}`); } - setLang(lang: string){ + setLang(lang: string) { this.set(Storage.LANG, lang); } @@ -62,7 +62,7 @@ export class StorageService { return this.get(Storage.LANG); } - setCaptionLang(lang: string){ + setCaptionLang(lang: string) { this.set(Storage.CAPTION_LANG, lang); } @@ -70,15 +70,35 @@ export class StorageService { return this.get(Storage.CAPTION_LANG); } + setBackground(id: string) { + this.set(Storage.BACKGROUND, id); + } + + getBackground(): string { + return this.get(Storage.BACKGROUND); + } + + removeBackground() { + this.remove(Storage.BACKGROUND); + } + private set(key: string, item: any) { const value = JSON.stringify({ item: item }); // this.log.d('Storing on localStorage "' + key + '" with value "' + value + '"'); this.storage.setItem(key, value); } private get(key: string): any { - const value = JSON.parse(this.storage.getItem(key)); - return value?.item ? value.item : null; + const str = this.storage.getItem(key); + if (!!str) { + return JSON.parse(str).item; + } + return null; } + + private remove(key: string) { + this.storage.removeItem(key); + } + public clear() { this.log.d('Clearing localStorage'); this.storage.clear(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts index 202e675d..79cbf5c8 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/virtual-background/virtual-background.service.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { BackgroundEffect, EffectType } from '../../models/background-effect.model'; import { ParticipantService } from '../participant/participant.service'; +import { StorageService } from '../storage/storage.service'; import { TokenService } from '../token/token.service'; -import { TranslateService } from '../translate/translate.service'; /** * @internal @@ -38,7 +38,11 @@ export class VirtualBackgroundService { { id: '18', type: EffectType.IMAGE, thumbnail: 'assets/backgrounds/thumbnails/bg-18.jpg', src: 'assets/backgrounds/bg-18.jpg' } ]; - constructor(private participantService: ParticipantService, private translateService: TranslateService, private tokenService: TokenService) { + constructor( + private participantService: ParticipantService, + private storageService: StorageService, + private tokenService: TokenService + ) { this.backgroundSelectedObs = this.backgroundSelected.asObservable(); } @@ -51,22 +55,33 @@ export class VirtualBackgroundService { return !!bgSelected && bgSelected !== 'no_effect'; } - async applyBackground(effect: BackgroundEffect) { - if (effect.id !== this.backgroundSelected.getValue()) { + async applyBackgroundFromStorage() { + const bgId = this.storageService.getBackground(); + if (!!bgId) { + const background = this.backgrounds.find((bg) => bg.id === bgId); + if (background) { + this.applyBackground(background); + } + } + } + + async applyBackground(bg: BackgroundEffect) { + if (bg.id !== this.backgroundSelected.getValue()) { 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; + if (bg.type === EffectType.IMAGE) { + options.url = bg.src; } - if (isBackgroundSelected && this.hasSameTypeAsAbove(effect.type)) { - this.replaceBackground(effect); + if (isBackgroundSelected && this.hasSameTypeAsAbove(bg.type)) { + this.replaceBackground(bg); } else { await this.removeBackground(); - await this.participantService.getMyCameraPublisher().stream.applyFilter(`VB:${effect.type.toLowerCase()}`, options); + await this.participantService.getMyCameraPublisher().stream.applyFilter(`VB:${bg.type.toLowerCase()}`, options); } - this.backgroundSelected.next(effect.id); + this.storageService.setBackground(bg.id); + this.backgroundSelected.next(bg.id); } } @@ -74,6 +89,7 @@ export class VirtualBackgroundService { if (!!this.isBackgroundApplied()) { this.backgroundSelected.next('no_effect'); await this.participantService.getMyCameraPublisher().stream.removeFilter(); + this.storageService.removeBackground(); } }