From 262f51a7137e6722dd62b8eb8893bd629c36b5d4 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Tue, 25 Jan 2022 12:02:50 +0100 Subject: [PATCH] Updated imports in openvidu-webcomponent --- openvidu-components-angular/package-lock.json | 55 +++++++++--------- .../openvidu-webcomponent.component.scss | 5 +- .../openvidu-webcomponent.component.ts | 56 +++++++++---------- .../openvidu-webcomponent.module.ts | 32 ++++------- 4 files changed, 73 insertions(+), 75 deletions(-) diff --git a/openvidu-components-angular/package-lock.json b/openvidu-components-angular/package-lock.json index 837c3e40646..aaeb7aa4d30 100644 --- a/openvidu-components-angular/package-lock.json +++ b/openvidu-components-angular/package-lock.json @@ -4579,12 +4579,15 @@ "dev": true }, "node_modules/copy-anything": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", - "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "dependencies": { - "is-what": "^3.12.0" + "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" } }, "node_modules/copy-webpack-plugin": { @@ -5534,9 +5537,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.51", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz", - "integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==", + "version": "1.4.52", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz", + "integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==", "dev": true }, "node_modules/emoji-regex": { @@ -8014,9 +8017,9 @@ } }, "node_modules/karma": { - "version": "6.3.11", - "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz", - "integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==", + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz", + "integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==", "dev": true, "dependencies": { "body-parser": "^1.19.0", @@ -12553,9 +12556,9 @@ } }, "node_modules/rollup": { - "version": "2.66.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz", - "integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -18490,12 +18493,12 @@ "dev": true }, "copy-anything": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz", - "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "requires": { - "is-what": "^3.12.0" + "is-what": "^3.14.1" } }, "copy-webpack-plugin": { @@ -19224,9 +19227,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.51", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.51.tgz", - "integrity": "sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==", + "version": "1.4.52", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.52.tgz", + "integrity": "sha512-JGkh8HEh5PnVrhU4HbpyyO0O791dVY6k7AdqfDeqbcRMeoGxtNHWT77deR2nhvbLe4dKpxjlDEvdEwrvRLGu2Q==", "dev": true }, "emoji-regex": { @@ -21104,9 +21107,9 @@ } }, "karma": { - "version": "6.3.11", - "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.11.tgz", - "integrity": "sha512-QGUh4yXgizzDNPLB5nWTvP+wysKexngbyLVWFOyikB661hpa2RZLf5anZQzqliWtAQuYVep0ot0D1U7UQKpsxQ==", + "version": "6.3.12", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.12.tgz", + "integrity": "sha512-qwIG+oB2YmHx4hjvYSRMNzL3YWAJ9baHaLAxiP7biFNkfpwYTUTtPck0joFpucalNLzMr+7z/FX1uY/kl8DV9A==", "dev": true, "requires": { "body-parser": "^1.19.0", @@ -24555,9 +24558,9 @@ } }, "rollup": { - "version": "2.66.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.0.tgz", - "integrity": "sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "requires": { "fsevents": "~2.3.2" 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 547a3839c26..c0adb7161bf 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 @@ -70,4 +70,7 @@ $openvidu-components-theme: mat.define-light-theme(( --ov-light-color: #ffffff; --ov-light-dark-color: #f1f1f1; -} \ No newline at end of file +} + +html, body { height: 100%; overflow: hidden;} +body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;} \ No newline at end of file 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 ac6deeb7565..890b1ba0e58 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,4 +1,4 @@ -import { Component, Input, OnInit } from "@angular/core"; +import { Component, Input, OnInit } from '@angular/core'; export interface SessionConfig { sessionName: string; @@ -7,18 +7,19 @@ export interface SessionConfig { } @Component({ - template: ` `, + [tokens]="_sessionConfig.tokens" + >` }) export class OpenviduWebComponentComponent implements OnInit { @Input() openviduServerUrl: string; @Input() openviduSecret: string; + _sessionConfig: SessionConfig; successParams: boolean = false; @@ -26,39 +27,38 @@ export class OpenviduWebComponentComponent implements OnInit { ngOnInit(): void {} - @Input("sessionConfig") + @Input('sessionConfig') set sessionConfig(config: SessionConfig | string) { - console.log("Webcomponent sessionConfig: ", config); - // setTimeout(() => { - if (typeof config === "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); + console.error('Unexpected JSON', error); + throw 'Unexpected JSON'; } + } + + if (this.isEmpty(config)) { + // Leaving session when sessionConfig is empty } else { - if (this.isEmpty(config)) { - // Leaving session when sessionConfig is empty - } else { - this.successParams = this.isCorrectParams(config); - if (!this.successParams) { - console.error("Parameters received are incorrect: ", config); - console.error("Session cannot start"); - } + 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'); } } - - // }, 200); } private isCorrectParams(config: SessionConfig): boolean { - const canGenerateToken = - !!config.sessionName && - !!config.userName && - !!this.openviduServerUrl && - !!this.openviduSecret; - const hasToken = - !!config.tokens?.webcam && !!config.tokens?.screen && !!config.userName; + + 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; } diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts index 048f6909ba3..23ae46b940f 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.module.ts @@ -1,37 +1,29 @@ -import { BrowserModule } from "@angular/platform-browser"; -import { DoBootstrap, Injector, NgModule } from "@angular/core"; -import { APP_BASE_HREF, CommonModule } from "@angular/common"; -import { createCustomElement, NgElement, WithProperties } from "@angular/elements"; -import { OpenviduWebComponentComponent } from "./openvidu-webcomponent.component"; +import { BrowserModule } from '@angular/platform-browser'; +import { DoBootstrap, Injector, NgModule } from '@angular/core'; +import { APP_BASE_HREF, CommonModule } from '@angular/common'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { OpenviduAngularModule, VideoconferenceComponent } from "openvidu-angular"; -import { environment } from '../../environments/environment'; +import { OpenviduWebComponentComponent } from './openvidu-webcomponent.component'; +import { OpenviduAngularModule, VideoconferenceComponent } from 'openvidu-angular'; +import { environment } from '../../environments/environment'; -declare global { - interface HTMLElementTagNameMap { - 'openvidu-webcomponent': NgElement & WithProperties<{ openviduServerUrl: string, openviduSecret: string}>; - } - } +import { createCustomElement } from '@angular/elements'; @NgModule({ declarations: [OpenviduWebComponentComponent], - imports: [ - CommonModule, - BrowserModule, - OpenviduAngularModule.forRoot(environment), - ], + imports: [CommonModule, BrowserModule, BrowserAnimationsModule, OpenviduAngularModule.forRoot(environment)], // exports: [OpenviduWebComponentComponent], - providers: [{provide: APP_BASE_HREF, useValue: '/'} , VideoconferenceComponent], + providers: [{ provide: APP_BASE_HREF, useValue: '/' }, VideoconferenceComponent] }) export class OpenviduWebComponentModule implements DoBootstrap { constructor(private injector: Injector) {} ngDoBootstrap(): void { const element = createCustomElement(OpenviduWebComponentComponent, { - injector: this.injector, + injector: this.injector }); - customElements.define("openvidu-webcomponent", element); + customElements.define('openvidu-webcomponent', element); } }