From 442119d0e4ff67b4415643d07d60b54d7930c0f1 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Fri, 11 Mar 2022 12:11:41 +0100 Subject: [PATCH] openvidu-components: Updated webcomponent wrapper --- .../openvidu-webcomponent.component.scss | 15 -- .../openvidu-webcomponent.component.ts | 227 ++++++++++++++---- 2 files changed, 186 insertions(+), 56 deletions(-) diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss index 69e9f17f..4b9678bc 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss @@ -56,21 +56,6 @@ $openvidu-components-theme: mat.define-light-theme(( -webkit-font-smoothing: antialiased; } -// Default openvidu-webcomponent colors -:root { - - --ov-primary-color: #303030; - --ov-secondary-color: #586063; - --ov-tertiary-color: #598eff; - --ov-warn-color: #EB5144; - --ov-accent-color: #ffae35; - - --ov-dark-color: #1d1d1d; - --ov-dark-light-color: #43484A; - - --ov-light-color: #ffffff; - --ov-light-dark-color: #f1f1f1; -} html, body { height: 100%; overflow: hidden;} body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;} 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 890b1ba0..6191d3a7 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 @@ -1,69 +1,214 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, ElementRef, Input, OnInit, Output, EventEmitter } from '@angular/core'; +import { ILogger, LoggerService, OpenViduService } from 'openvidu-angular'; +import { Session } from 'openvidu-browser'; export interface SessionConfig { sessionName: string; - userName: string; + participantName: string; tokens: { webcam: string; screen: string }; } @Component({ - template: `` + template: ` + + ` }) export class OpenviduWebComponentComponent implements OnInit { - @Input() openviduServerUrl: string; - @Input() openviduSecret: string; - _sessionConfig: SessionConfig; + _minimal: boolean = false; + _prejoin: boolean = true; + _videoMuted: boolean = false; + _audioMuted: boolean = false; + _toolbarScreenshareButton: boolean = true; + _toolbarFullscreenButton: boolean = true; + _toolbarLeaveButton: boolean = true; + _toolbarChatPanelButton: boolean = true; + _toolbarParticipantsPanelButton: boolean = true; + _toolbarDisplayLogo: boolean = true; + _toolbarDisplaySessionName: boolean = true; + _streamDisplayParticipantName: boolean = true; + _streamDisplayAudioDetection: boolean = true; + _streamSettingsButton: boolean = true; + _participantPanelItemMuteButton: boolean = true; + + @Input() set minimal(value: string | boolean) { + this._minimal = this.castToBoolean(value); + } + @Input() set prejoin(value: string | boolean) { + this._prejoin = this.castToBoolean(value); + } + @Input() set videoMuted(value: string | boolean) { + this._videoMuted = this.castToBoolean(value); + } + @Input() set audioMuted(value: string | boolean) { + this._audioMuted = this.castToBoolean(value); + } + + @Input() set toolbarScreenshareButton(value: string | boolean) { + this._toolbarScreenshareButton = this.castToBoolean(value); + } + @Input() set toolbarFullscreenButton(value: string | boolean) { + this._toolbarFullscreenButton = this.castToBoolean(value); + } + @Input() set toolbarLeaveButton(value: string | boolean) { + this._toolbarLeaveButton = this.castToBoolean(value); + } + @Input() set toolbarChatPanelButton(value: string | boolean) { + this._toolbarChatPanelButton = this.castToBoolean(value); + } + @Input() set toolbarParticipantsPanelButton(value: string | boolean) { + this._toolbarParticipantsPanelButton = this.castToBoolean(value); + } + @Input() set toolbarDisplayLogo(value: string | boolean) { + this._toolbarDisplayLogo = this.castToBoolean(value); + } + @Input() set toolbarDisplaySessionName(value: string | boolean) { + this._toolbarDisplaySessionName = this.castToBoolean(value); + } + @Input() set streamDisplayParticipantName(value: string | boolean) { + this._streamDisplayParticipantName = this.castToBoolean(value); + } + @Input() set streamDisplayAudioDetection(value: string | boolean) { + this._streamDisplayAudioDetection = this.castToBoolean(value); + } + @Input() set streamSettingsButton(value: string | boolean) { + this._streamSettingsButton = this.castToBoolean(value); + } + @Input() set participantPanelItemMuteButton(value: string | boolean) { + this._participantPanelItemMuteButton = this.castToBoolean(value); + } + + @Output() onJoinButtonClicked = new EventEmitter(); + @Output() onToolbarLeaveButtonClicked = new EventEmitter(); + @Output() onToolbarCameraButtonClicked = new EventEmitter(); + @Output() onToolbarMicrophoneButtonClicked = new EventEmitter(); + @Output() onSessionCreated = new EventEmitter(); + @Output() onToolbarScreenshareButtonClicked = new EventEmitter(); + @Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter(); + @Output() onToolbarChatPanelButtonClicked = new EventEmitter(); + @Output() onToolbarFullscreenButtonClicked = new EventEmitter(); successParams: boolean = false; + _sessionConfig: SessionConfig; - constructor() {} + private log: ILogger; + + constructor(private loggerService: LoggerService, private host: ElementRef, private openviduService: OpenViduService) { + this.log = this.loggerService.get('WebComponent'); + this.host.nativeElement.leaveSession = this.leaveSession.bind(this); + } ngOnInit(): void {} @Input('sessionConfig') set sessionConfig(config: SessionConfig | string) { - console.log('Webcomponent sessionConfig: ', config); - if (typeof config === 'string') { - try { - console.log('STRING') - config = JSON.parse(config); - } catch (error) { - console.error('Unexpected JSON', error); - throw 'Unexpected JSON'; - } - } + this.log.d('Webcomponent sessionConfig: ', config); - if (this.isEmpty(config)) { - // Leaving session when sessionConfig is empty - } else { - console.log("URL",this.openviduServerUrl); - console.log('SECRET',this.openviduSecret); - this.successParams = this.isCorrectParams(config); - this._sessionConfig = config; - if (!this.successParams) { - console.error('Parameters received are incorrect: ', config); - console.error('Session cannot start'); - } + 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'); } } + _onJoinButtonClicked() { + this.onJoinButtonClicked.emit(); + } + + _onToolbarLeaveButtonClicked() { + this.onToolbarLeaveButtonClicked.emit(); + } + + _onToolbarCameraButtonClicked() { + this.onToolbarCameraButtonClicked.emit(); + } + + _onToolbarMicrophoneButtonClicked() { + this.onToolbarMicrophoneButtonClicked.emit(); + } + _onToolbarScreenshareButtonClicked(){ + this.onToolbarScreenshareButtonClicked.emit(); + } + _onToolbarParticipantsPanelButtonClicked(){ + this.onToolbarParticipantsPanelButtonClicked.emit(); + } + _onToolbarChatPanelButtonClicked(){ + this.onToolbarChatPanelButtonClicked.emit(); + } + _onToolbarFullscreenButtonClicked(){ + this.onToolbarFullscreenButtonClicked.emit(); + } + _onSessionCreated(event: Session) { + this.onSessionCreated.emit(event); + } + + leaveSession() { + this.openviduService.disconnect(); + } + private isCorrectParams(config: SessionConfig): boolean { - - console.log(config) - const canGenerateToken = !!config.sessionName && !!config.userName && !!this.openviduServerUrl && !!this.openviduSecret; - const hasToken = !!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName; - - return canGenerateToken || hasToken; + return !!config.tokens?.webcam && !!config.tokens?.screen && !!config.participantName && !!config.sessionName; } private isEmpty(config: SessionConfig): boolean { return Object.keys(config).length === 0; } + + private castToBoolean(value: string | boolean): boolean { + if (typeof value === 'boolean') { + return value; + } else if (typeof value === 'string') { + if (value !== 'true' && value !== 'false') { + throw new Error('Parameter has an incorrect string value.'); + } + return value === 'true'; + } else { + throw new Error('Parameter has not a valid type. The parameters must to be string or boolean.'); + } + } + + private castToJson(value: SessionConfig | string) { + if (typeof value === 'string') { + try { + return JSON.parse(value); + } catch (error) { + this.log.e('Unexpected JSON', error); + throw 'Unexpected JSON'; + } + } 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.'); + } + } }