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

openvidu-components: Updated webcomponent wrapper

pull/707/head
csantosm 2022-03-11 12:11:41 +01:00
parent 9d94ffa417
commit 442119d0e4
2 changed files with 186 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.scss
View File

@ -56,21 +56,6 @@ $openvidu-components-theme: mat.define-light-theme((
-webkit-font-smoothing: antialiased; -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;} html, body { height: 100%; overflow: hidden;}
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;} body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}

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

@ -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 { export interface SessionConfig {
sessionName: string; sessionName: string;
userName: string; participantName: string;
tokens: { webcam: string; screen: string }; tokens: { webcam: string; screen: string };
} }
@Component({ @Component({
template: `<ov-videoconference template: `
*ngIf="successParams" <ov-videoconference
[sessionName]="_sessionConfig.sessionName" *ngIf="successParams"
[userName]="_sessionConfig.userName" [sessionName]="_sessionConfig.sessionName"
[openviduServerUrl]="openviduServerUrl" [userName]="_sessionConfig.userName"
[openviduSecret]="openviduSecret" [tokens]="_sessionConfig.tokens"
[tokens]="_sessionConfig.tokens" [minimal]="_minimal"
></ov-videoconference>` [prejoin]="_prejoin"
[videoMuted]="_videoMuted"
[audioMuted]="_audioMuted"
[toolbarScreenshareButton]="_toolbarScreenshareButton"
[toolbarFullscreenButton]="_toolbarFullscreenButton"
[toolbarLeaveButton]="_toolbarLeaveButton"
[toolbarChatPanelButton]="_toolbarChatPanelButton"
[toolbarParticipantsPanelButton]="_toolbarParticipantsPanelButton"
[toolbarDisplayLogo]="_toolbarDisplayLogo"
[toolbarDisplaySessionName]="_toolbarDisplaySessionName"
[streamDisplayParticipantName]="_streamDisplayParticipantName"
[streamDisplayAudioDetection]="_streamDisplayAudioDetection"
[streamSettingsButton]="_streamSettingsButton"
[participantPanelItemMuteButton]="_participantPanelItemMuteButton"
(onJoinButtonClicked)="_onJoinButtonClicked()"
(onToolbarLeaveButtonClicked)="_onToolbarLeaveButtonClicked()"
(onToolbarCameraButtonClicked)="_onToolbarCameraButtonClicked()"
(onToolbarMicrophoneButtonClicked)="_onToolbarMicrophoneButtonClicked()"
(onToolbarScreenshareButtonClicked)="_onToolbarScreenshareButtonClicked()"
(onToolbarParticipantsPanelButtonClicked)="_onToolbarParticipantsPanelButtonClicked()"
(onToolbarChatPanelButtonClicked)="_onToolbarChatPanelButtonClicked()"
(onToolbarFullscreenButtonClicked)="_onToolbarFullscreenButtonClicked()"
(onSessionCreated)="_onSessionCreated($event)"
></ov-videoconference>
`
}) })
export class OpenviduWebComponentComponent implements OnInit { export class OpenviduWebComponentComponent implements OnInit {
@Input() openviduServerUrl: string; _minimal: boolean = false;
@Input() openviduSecret: string; _prejoin: boolean = true;
_sessionConfig: SessionConfig; _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<any>();
@Output() onToolbarLeaveButtonClicked = new EventEmitter<any>();
@Output() onToolbarCameraButtonClicked = new EventEmitter<any>();
@Output() onToolbarMicrophoneButtonClicked = new EventEmitter<any>();
@Output() onSessionCreated = new EventEmitter<any>();
@Output() onToolbarScreenshareButtonClicked = new EventEmitter<any>();
@Output() onToolbarParticipantsPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarChatPanelButtonClicked = new EventEmitter<any>();
@Output() onToolbarFullscreenButtonClicked = new EventEmitter<any>();
successParams: boolean = false; 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 {} ngOnInit(): void {}
@Input('sessionConfig') @Input('sessionConfig')
set sessionConfig(config: SessionConfig | string) { set sessionConfig(config: SessionConfig | string) {
console.log('Webcomponent sessionConfig: ', config); this.log.d('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';
}
}
if (this.isEmpty(<SessionConfig>config)) { config = this.castToJson(config);
// Leaving session when sessionConfig is empty this.successParams = this.isCorrectParams(<SessionConfig>config);
} else { this._sessionConfig = <SessionConfig>config;
console.log("URL",this.openviduServerUrl); if (!this.successParams) {
console.log('SECRET',this.openviduSecret); this.log.e('Parameters received are incorrect: ', config);
this.successParams = this.isCorrectParams(<SessionConfig>config); this.log.e('Session cannot start');
this._sessionConfig = <SessionConfig>config;
if (!this.successParams) {
console.error('Parameters received are incorrect: ', config);
console.error('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 { private isCorrectParams(config: SessionConfig): boolean {
return !!config.tokens?.webcam && !!config.tokens?.screen && !!config.participantName && !!config.sessionName;
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;
} }
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 {
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.');
}
}
} }