mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Updated webcomponent wrapper
csantosm
parent
9d94ffa417
commit
442119d0e4
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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: `<ov-videoconference
|
||||
template: `
|
||||
<ov-videoconference
|
||||
*ngIf="successParams"
|
||||
[sessionName]="_sessionConfig.sessionName"
|
||||
[userName]="_sessionConfig.userName"
|
||||
[openviduServerUrl]="openviduServerUrl"
|
||||
[openviduSecret]="openviduSecret"
|
||||
[tokens]="_sessionConfig.tokens"
|
||||
></ov-videoconference>`
|
||||
[minimal]="_minimal"
|
||||
[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 {
|
||||
@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<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;
|
||||
_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(<SessionConfig>config)) {
|
||||
// Leaving session when sessionConfig is empty
|
||||
} else {
|
||||
console.log("URL",this.openviduServerUrl);
|
||||
console.log('SECRET',this.openviduSecret);
|
||||
config = this.castToJson(config);
|
||||
this.successParams = this.isCorrectParams(<SessionConfig>config);
|
||||
this._sessionConfig = <SessionConfig>config;
|
||||
if (!this.successParams) {
|
||||
console.error('Parameters received are incorrect: ', config);
|
||||
console.error('Session cannot start');
|
||||
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.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue