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.');
+ }
+ }
}