From 6a01a33dba868fac66efb4c864677b0e7d698f44 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 16 Mar 2022 14:19:04 +0100 Subject: [PATCH] openvidu-components: Refactored webcomponent wrapper --- .../videoconference.component.ts | 15 ++-- .../directives/api/api.directive.module.ts | 14 +++- .../api/participant-panel-item.directive.ts | 2 - .../api/videoconference.directive.ts | 26 ++++++- .../config/openvidu-angular.config.service.ts | 4 +- .../openvidu-webcomponent.component.ts | 71 ++++++++++--------- 6 files changed, 86 insertions(+), 46 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index e102a9c0..60e0bc5e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -73,10 +73,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni openviduAngularLayoutTemplate: TemplateRef; openviduAngularStreamTemplate: TemplateRef; - // *** Parameters *** - @Input() sessionName: string; - @Input() participantName: string; - @Input() set tokens(tokens: { webcam: string; screen: string }) { if (!tokens || (!tokens.webcam && !tokens.screen)) { @@ -120,7 +116,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni error: boolean = false; errorMessage: string = ''; showPrejoin: boolean = true; + private externalParticipantName: string; private prejoinSub: Subscription; + private participantNameSub: Subscription; private log: ILogger; constructor( @@ -131,7 +129,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni private openviduService: OpenViduService, private actionService: ActionService, private libService: OpenViduAngularConfigService, - private tokenService: TokenService, + private tokenService: TokenService ) { this.log = this.loggerSrv.get('VideoconferenceComponent'); } @@ -139,7 +137,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni async ngOnInit() { this.subscribeToVideconferenceDirectives(); await this.deviceSrv.initializeDevices(); - const nickname = this.storageSrv.getNickname() || 'OpenVidu_User' + Math.floor(Math.random() * 100); + const nickname = this.externalParticipantName || this.storageSrv.getNickname() || `OpenVidu_User${Math.floor(Math.random() * 100)}`; const props: ParticipantProperties = { local: true, nickname @@ -171,6 +169,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni ngOnDestroy(): void { if (this.prejoinSub) this.prejoinSub.unsubscribe(); + if (this.participantNameSub) this.participantNameSub.unsubscribe(); } ngAfterViewInit() { @@ -295,5 +294,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni this.showPrejoin = value; // this.cd.markForCheck(); }); + + this.participantNameSub = this.libService.participantName.subscribe((nickname: string) => { + this.externalParticipantName = nickname; + }); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts index 2f225899..7911295d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts @@ -15,7 +15,13 @@ import { ToolbarDisplayLogoDirective, LogoDirective } from './toolbar.directive'; -import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDirective } from './videoconference.directive'; +import { + AudioMutedDirective, + MinimalDirective, + PrejoinDirective, + VideoMutedDirective, + ParticipantNameDirective +} from './videoconference.directive'; @NgModule({ declarations: [ @@ -34,7 +40,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire StreamDisplayAudioDetectionDirective, StreamSettingsButtonDirective, LogoDirective, - ParticipantPanelItemMuteButtonDirective + ParticipantPanelItemMuteButtonDirective, + ParticipantNameDirective ], exports: [ MinimalDirective, @@ -52,7 +59,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire StreamDisplayAudioDetectionDirective, StreamSettingsButtonDirective, LogoDirective, - ParticipantPanelItemMuteButtonDirective + ParticipantPanelItemMuteButtonDirective, + ParticipantNameDirective ] }) export class ApiDirectiveModule {} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts index 73317cfe..f23f4967 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts @@ -30,8 +30,6 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O } update(value: boolean) { - console.warn('directive mute ', value); - if (this.libService.participantItemMuteButton.getValue() !== value) { this.libService.participantItemMuteButton.next(value); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts index 8f28f8f0..ba8badbe 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Input, ElementRef, OnDestroy } from '@angular/core'; +import { Directive, Input, ElementRef, OnDestroy, OnInit } from '@angular/core'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; @Directive({ @@ -23,6 +23,29 @@ export class MinimalDirective implements OnDestroy { } } +@Directive({ + selector: 'ov-videoconference[participantName]' +}) +export class ParticipantNameDirective implements OnInit { + // Avoiding update participantName dynamically. + // The participantName must be updated from UI + @Input() participantName: string; + constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {} + ngOnInit(): void { + this.update(this.participantName); + } + + ngOnDestroy(): void { + this.clear(); + } + clear() { + this.update(''); + } + update(value: string) { + this.libService.participantName.next(value); + } +} + @Directive({ selector: 'ov-videoconference[prejoin]' }) @@ -45,7 +68,6 @@ export class PrejoinDirective implements OnDestroy { } } - @Directive({ selector: 'ov-videoconference[videoMuted]' }) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts index b5004804..d9026284 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts @@ -8,9 +8,10 @@ import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/ @Injectable() export class OpenViduAngularConfigService { private configuration: OpenViduAngularConfig; - minimal = >new BehaviorSubject(false); minimalObs: Observable; + participantName = >new BehaviorSubject(''); + participantNameObs: Observable; prejoin = >new BehaviorSubject(true); prejoinObs: Observable; @@ -52,6 +53,7 @@ export class OpenViduAngularConfigService { console.log(this.configuration); if(this.isProduction()) console.log('OpenVidu Angular Production Mode'); this.minimalObs = this.minimal.asObservable(); + this.participantNameObs = this.participantName.asObservable(); this.prejoinObs = this.prejoin.asObservable(); this.videoMutedObs = this.videoMuted.asObservable(); this.audioMutedObs = this.audioMuted.asObservable(); diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts index 6191d3a7..48b02507 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts @@ -2,19 +2,17 @@ import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@ang import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular'; import { Session } from 'openvidu-browser'; -export interface SessionConfig { - sessionName: string; - participantName: string; - tokens: { webcam: string; screen: string }; +export interface TokenModel { + webcam: string; + screen: string; } @Component({ template: ` (); @Output() onToolbarFullscreenButtonClicked = new EventEmitter(); - successParams: boolean = false; - _sessionConfig: SessionConfig; + success: boolean = false; + // _sessionConfig: SessionConfig; private log: ILogger; @@ -128,16 +131,18 @@ export class OpenviduWebComponentComponent implements OnInit { ngOnInit(): void {} - @Input('sessionConfig') - set sessionConfig(config: SessionConfig | string) { - this.log.d('Webcomponent sessionConfig: ', config); - - config = this.castToJson(config); - this.successParams = this.isCorrectParams(config); - this._sessionConfig = config; - if (!this.successParams) { - this.log.e('Parameters received are incorrect: ', config); - this.log.e('Session cannot start'); + @Input('tokens') + set tokens(value: TokenModel | string) { + this.log.d('Webcomponent tokens: ', value); + try { + this._tokens = this.castToJson(value); + this.success = !!this._tokens?.webcam && !!this._tokens?.screen; + } catch (error) { + this.log.e(error); + if (!this.success) { + this.log.e('Parameters received are incorrect: ', value); + this.log.e('Session cannot start'); + } } } @@ -156,16 +161,16 @@ export class OpenviduWebComponentComponent implements OnInit { _onToolbarMicrophoneButtonClicked() { this.onToolbarMicrophoneButtonClicked.emit(); } - _onToolbarScreenshareButtonClicked(){ + _onToolbarScreenshareButtonClicked() { this.onToolbarScreenshareButtonClicked.emit(); } - _onToolbarParticipantsPanelButtonClicked(){ + _onToolbarParticipantsPanelButtonClicked() { this.onToolbarParticipantsPanelButtonClicked.emit(); } - _onToolbarChatPanelButtonClicked(){ + _onToolbarChatPanelButtonClicked() { this.onToolbarChatPanelButtonClicked.emit(); } - _onToolbarFullscreenButtonClicked(){ + _onToolbarFullscreenButtonClicked() { this.onToolbarFullscreenButtonClicked.emit(); } _onSessionCreated(event: Session) { @@ -176,13 +181,13 @@ export class OpenviduWebComponentComponent implements OnInit { this.openviduService.disconnect(); } - private isCorrectParams(config: SessionConfig): boolean { - return !!config.tokens?.webcam && !!config.tokens?.screen && !!config.participantName && !!config.sessionName; - } + // private isCorrectParams(config: SessionConfig): boolean { + // return !!config.tokens?.webcam && !!config.tokens?.screen /*&& !!config.participantName && !!config.sessionName*/; + // } - private isEmpty(config: SessionConfig): boolean { - return Object.keys(config).length === 0; - } + // private isEmpty(config: SessionConfig): boolean { + // return Object.keys(config).length === 0; + // } private castToBoolean(value: string | boolean): boolean { if (typeof value === 'boolean') { @@ -197,7 +202,7 @@ export class OpenviduWebComponentComponent implements OnInit { } } - private castToJson(value: SessionConfig | string) { + private castToJson(value: TokenModel | string) { if (typeof value === 'string') { try { return JSON.parse(value); @@ -208,7 +213,9 @@ export class OpenviduWebComponentComponent implements OnInit { } else if (typeof value === 'object') { return value; } else { - throw new Error('Parameter has not a valid type. The parameters must to be string or SessionConfig.'); + throw new Error( + 'Parameter has not a valid type. The parameters must to be string or TokenModel {webcam:string, screen: string}.' + ); } } }