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

openvidu-components: Refactored webcomponent wrapper

pull/707/head
csantosm 2022-03-16 14:19:04 +01:00
parent facc06bebc
commit 6a01a33dba
6 changed files with 86 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

@ -73,10 +73,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
openviduAngularLayoutTemplate: TemplateRef<any>; openviduAngularLayoutTemplate: TemplateRef<any>;
openviduAngularStreamTemplate: TemplateRef<any>; openviduAngularStreamTemplate: TemplateRef<any>;
// *** Parameters ***
@Input() sessionName: string;
@Input() participantName: string;
@Input() @Input()
set tokens(tokens: { webcam: string; screen: string }) { set tokens(tokens: { webcam: string; screen: string }) {
if (!tokens || (!tokens.webcam && !tokens.screen)) { if (!tokens || (!tokens.webcam && !tokens.screen)) {
@ -120,7 +116,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
error: boolean = false; error: boolean = false;
errorMessage: string = ''; errorMessage: string = '';
showPrejoin: boolean = true; showPrejoin: boolean = true;
private externalParticipantName: string;
private prejoinSub: Subscription; private prejoinSub: Subscription;
private participantNameSub: Subscription;
private log: ILogger; private log: ILogger;
constructor( constructor(
@ -131,7 +129,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
private openviduService: OpenViduService, private openviduService: OpenViduService,
private actionService: ActionService, private actionService: ActionService,
private libService: OpenViduAngularConfigService, private libService: OpenViduAngularConfigService,
private tokenService: TokenService, private tokenService: TokenService
) { ) {
this.log = this.loggerSrv.get('VideoconferenceComponent'); this.log = this.loggerSrv.get('VideoconferenceComponent');
} }
@ -139,7 +137,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
async ngOnInit() { async ngOnInit() {
this.subscribeToVideconferenceDirectives(); this.subscribeToVideconferenceDirectives();
await this.deviceSrv.initializeDevices(); 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 = { const props: ParticipantProperties = {
local: true, local: true,
nickname nickname
@ -171,6 +169,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
ngOnDestroy(): void { ngOnDestroy(): void {
if (this.prejoinSub) this.prejoinSub.unsubscribe(); if (this.prejoinSub) this.prejoinSub.unsubscribe();
if (this.participantNameSub) this.participantNameSub.unsubscribe();
} }
ngAfterViewInit() { ngAfterViewInit() {
@ -295,5 +294,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
this.showPrejoin = value; this.showPrejoin = value;
// this.cd.markForCheck(); // this.cd.markForCheck();
}); });
this.participantNameSub = this.libService.participantName.subscribe((nickname: string) => {
this.externalParticipantName = nickname;
});
} }
} }

14
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
View File

@ -15,7 +15,13 @@ import {
ToolbarDisplayLogoDirective, ToolbarDisplayLogoDirective,
LogoDirective LogoDirective
} from './toolbar.directive'; } from './toolbar.directive';
import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDirective } from './videoconference.directive'; import {
AudioMutedDirective,
MinimalDirective,
PrejoinDirective,
VideoMutedDirective,
ParticipantNameDirective
} from './videoconference.directive';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -34,7 +40,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire
StreamDisplayAudioDetectionDirective, StreamDisplayAudioDetectionDirective,
StreamSettingsButtonDirective, StreamSettingsButtonDirective,
LogoDirective, LogoDirective,
ParticipantPanelItemMuteButtonDirective ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective
], ],
exports: [ exports: [
MinimalDirective, MinimalDirective,
@ -52,7 +59,8 @@ import { AudioMutedDirective, MinimalDirective, PrejoinDirective, VideoMutedDire
StreamDisplayAudioDetectionDirective, StreamDisplayAudioDetectionDirective,
StreamSettingsButtonDirective, StreamSettingsButtonDirective,
LogoDirective, LogoDirective,
ParticipantPanelItemMuteButtonDirective ParticipantPanelItemMuteButtonDirective,
ParticipantNameDirective
] ]
}) })
export class ApiDirectiveModule {} export class ApiDirectiveModule {}

2
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/participant-panel-item.directive.ts
View File

@ -30,8 +30,6 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O
} }
update(value: boolean) { update(value: boolean) {
console.warn('directive mute ', value);
if (this.libService.participantItemMuteButton.getValue() !== value) { if (this.libService.participantItemMuteButton.getValue() !== value) {
this.libService.participantItemMuteButton.next(value); this.libService.participantItemMuteButton.next(value);
} }

26
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -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'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
@Directive({ @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({ @Directive({
selector: 'ov-videoconference[prejoin]' selector: 'ov-videoconference[prejoin]'
}) })
@ -45,7 +68,6 @@ export class PrejoinDirective implements OnDestroy {
} }
} }
@Directive({ @Directive({
selector: 'ov-videoconference[videoMuted]' selector: 'ov-videoconference[videoMuted]'
}) })

4
openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
View File

@ -8,9 +8,10 @@ import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/
@Injectable() @Injectable()
export class OpenViduAngularConfigService { export class OpenViduAngularConfigService {
private configuration: OpenViduAngularConfig; private configuration: OpenViduAngularConfig;
minimal = <BehaviorSubject<boolean>>new BehaviorSubject(false); minimal = <BehaviorSubject<boolean>>new BehaviorSubject(false);
minimalObs: Observable<boolean>; minimalObs: Observable<boolean>;
participantName = <BehaviorSubject<string>>new BehaviorSubject('');
participantNameObs: Observable<string>;
prejoin = <BehaviorSubject<boolean>>new BehaviorSubject(true); prejoin = <BehaviorSubject<boolean>>new BehaviorSubject(true);
prejoinObs: Observable<boolean>; prejoinObs: Observable<boolean>;
@ -52,6 +53,7 @@ export class OpenViduAngularConfigService {
console.log(this.configuration); console.log(this.configuration);
if(this.isProduction()) console.log('OpenVidu Angular Production Mode'); if(this.isProduction()) console.log('OpenVidu Angular Production Mode');
this.minimalObs = this.minimal.asObservable(); this.minimalObs = this.minimal.asObservable();
this.participantNameObs = this.participantName.asObservable();
this.prejoinObs = this.prejoin.asObservable(); this.prejoinObs = this.prejoin.asObservable();
this.videoMutedObs = this.videoMuted.asObservable(); this.videoMutedObs = this.videoMuted.asObservable();
this.audioMutedObs = this.audioMuted.asObservable(); this.audioMutedObs = this.audioMuted.asObservable();

71
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -2,19 +2,17 @@ import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@ang
import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular'; import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular';
import { Session } from 'openvidu-browser'; import { Session } from 'openvidu-browser';
export interface SessionConfig { export interface TokenModel {
sessionName: string; webcam: string;
participantName: string; screen: string;
tokens: { webcam: string; screen: string };
} }
@Component({ @Component({
template: ` template: `
<ov-videoconference <ov-videoconference
*ngIf="successParams" *ngIf="success"
[sessionName]="_sessionConfig.sessionName" [participantName]="_participantName"
[userName]="_sessionConfig.userName" [tokens]="_tokens"
[tokens]="_sessionConfig.tokens"
[minimal]="_minimal" [minimal]="_minimal"
[prejoin]="_prejoin" [prejoin]="_prejoin"
[videoMuted]="_videoMuted" [videoMuted]="_videoMuted"
@ -43,7 +41,9 @@ export interface SessionConfig {
` `
}) })
export class OpenviduWebComponentComponent implements OnInit { export class OpenviduWebComponentComponent implements OnInit {
_tokens: TokenModel;
_minimal: boolean = false; _minimal: boolean = false;
_participantName: string;
_prejoin: boolean = true; _prejoin: boolean = true;
_videoMuted: boolean = false; _videoMuted: boolean = false;
_audioMuted: boolean = false; _audioMuted: boolean = false;
@ -62,6 +62,9 @@ export class OpenviduWebComponentComponent implements OnInit {
@Input() set minimal(value: string | boolean) { @Input() set minimal(value: string | boolean) {
this._minimal = this.castToBoolean(value); this._minimal = this.castToBoolean(value);
} }
@Input() set participantName(value: string) {
this._participantName = value;
}
@Input() set prejoin(value: string | boolean) { @Input() set prejoin(value: string | boolean) {
this._prejoin = this.castToBoolean(value); this._prejoin = this.castToBoolean(value);
} }
@ -116,8 +119,8 @@ export class OpenviduWebComponentComponent implements OnInit {
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>(); @Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>(); @Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
successParams: boolean = false; success: boolean = false;
_sessionConfig: SessionConfig; // _sessionConfig: SessionConfig;
private log: ILogger; private log: ILogger;
@ -128,16 +131,18 @@ export class OpenviduWebComponentComponent implements OnInit {
ngOnInit(): void {} ngOnInit(): void {}
@Input('sessionConfig') @Input('tokens')
set sessionConfig(config: SessionConfig | string) { set tokens(value: TokenModel | string) {
this.log.d('Webcomponent sessionConfig: ', config); this.log.d('Webcomponent tokens: ', value);
try {
config = this.castToJson(config); this._tokens = this.castToJson(value);
this.successParams = this.isCorrectParams(<SessionConfig>config); this.success = !!this._tokens?.webcam && !!this._tokens?.screen;
this._sessionConfig = <SessionConfig>config; } catch (error) {
if (!this.successParams) { this.log.e(error);
this.log.e('Parameters received are incorrect: ', config); if (!this.success) {
this.log.e('Session cannot start'); this.log.e('Parameters received are incorrect: ', value);
this.log.e('Session cannot start');
}
} }
} }
@ -156,16 +161,16 @@ export class OpenviduWebComponentComponent implements OnInit {
_onToolbarMicrophoneButtonClicked() { _onToolbarMicrophoneButtonClicked() {
this.onToolbarMicrophoneButtonClicked.emit(); this.onToolbarMicrophoneButtonClicked.emit();
} }
_onToolbarScreenshareButtonClicked(){ _onToolbarScreenshareButtonClicked() {
this.onToolbarScreenshareButtonClicked.emit(); this.onToolbarScreenshareButtonClicked.emit();
} }
_onToolbarParticipantsPanelButtonClicked(){ _onToolbarParticipantsPanelButtonClicked() {
this.onToolbarParticipantsPanelButtonClicked.emit(); this.onToolbarParticipantsPanelButtonClicked.emit();
} }
_onToolbarChatPanelButtonClicked(){ _onToolbarChatPanelButtonClicked() {
this.onToolbarChatPanelButtonClicked.emit(); this.onToolbarChatPanelButtonClicked.emit();
} }
_onToolbarFullscreenButtonClicked(){ _onToolbarFullscreenButtonClicked() {
this.onToolbarFullscreenButtonClicked.emit(); this.onToolbarFullscreenButtonClicked.emit();
} }
_onSessionCreated(event: Session) { _onSessionCreated(event: Session) {
@ -176,13 +181,13 @@ export class OpenviduWebComponentComponent implements OnInit {
this.openviduService.disconnect(); this.openviduService.disconnect();
} }
private isCorrectParams(config: SessionConfig): boolean { // private isCorrectParams(config: SessionConfig): boolean {
return !!config.tokens?.webcam && !!config.tokens?.screen && !!config.participantName && !!config.sessionName; // return !!config.tokens?.webcam && !!config.tokens?.screen /*&& !!config.participantName && !!config.sessionName*/;
} // }
private isEmpty(config: SessionConfig): boolean { // private isEmpty(config: SessionConfig): boolean {
return Object.keys(config).length === 0; // return Object.keys(config).length === 0;
} // }
private castToBoolean(value: string | boolean): boolean { private castToBoolean(value: string | boolean): boolean {
if (typeof value === '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') { if (typeof value === 'string') {
try { try {
return JSON.parse(value); return JSON.parse(value);
@ -208,7 +213,9 @@ export class OpenviduWebComponentComponent implements OnInit {
} else if (typeof value === 'object') { } else if (typeof value === 'object') {
return value; return value;
} else { } 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}.'
);
} }
} }
} }