From 3d98bc93e64f12c2f311a29f097a37d9fc90a3f6 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Sat, 30 Sep 2017 13:48:40 +0200 Subject: [PATCH] testapp components refactoring. Event chips added --- openvidu-testapp/package.json | 8 +- openvidu-testapp/src/app/app.component.css | 10 ++ openvidu-testapp/src/app/app.component.html | 14 +- openvidu-testapp/src/app/app.component.ts | 20 ++- .../src/app/app.material.module.ts | 2 + openvidu-testapp/src/app/app.module.ts | 15 +- openvidu-testapp/src/app/app.routing.ts | 14 +- .../dashboard/dashboard.component.css | 37 ----- .../dashboard/dashboard.component.html | 83 ---------- .../openvidu-instance.component.css | 38 +++++ .../openvidu-instance.component.html | 143 ++++++++++-------- .../openvidu-instance.component.ts | 48 +++++- .../test-apirest/test-apirest.component.css | 23 +++ .../test-apirest/test-apirest.component.html | 60 ++++++++ .../test-apirest.component.spec.ts} | 12 +- .../test-apirest.component.ts} | 48 +++--- .../test-sessions/test-sessions.component.css | 8 + .../test-sessions.component.html | 11 ++ .../test-sessions.component.spec.ts | 25 +++ .../test-sessions/test-sessions.component.ts | 42 +++++ .../services/openvidu-params.service.spec.ts | 15 ++ .../app/services/openvidu-params.service.ts | 31 ++++ openvidu-testapp/src/styles.css | 18 +-- 23 files changed, 475 insertions(+), 250 deletions(-) delete mode 100644 openvidu-testapp/src/app/components/dashboard/dashboard.component.css delete mode 100644 openvidu-testapp/src/app/components/dashboard/dashboard.component.html create mode 100644 openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css create mode 100644 openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html rename openvidu-testapp/src/app/components/{dashboard/dashboard.component.spec.ts => test-apirest/test-apirest.component.spec.ts} (53%) rename openvidu-testapp/src/app/components/{dashboard/dashboard.component.ts => test-apirest/test-apirest.component.ts} (57%) create mode 100644 openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css create mode 100644 openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html create mode 100644 openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts create mode 100644 openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts create mode 100644 openvidu-testapp/src/app/services/openvidu-params.service.spec.ts create mode 100644 openvidu-testapp/src/app/services/openvidu-params.service.ts diff --git a/openvidu-testapp/package.json b/openvidu-testapp/package.json index 257bdb00..88eb0ce7 100644 --- a/openvidu-testapp/package.json +++ b/openvidu-testapp/package.json @@ -1,6 +1,6 @@ { "name": "openvidu-testapp", - "version": "0.0.0", + "version": "1.1.0", "license": "Apache-2.0", "scripts": { "ng": "ng", @@ -42,10 +42,10 @@ "codelyzer": "~3.1.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", - "karma": "~1.7.0", - "karma-chrome-launcher": "~2.1.1", + "karma": "1.7.1", + "karma-chrome-launcher": "2.2.0", "karma-cli": "~1.0.1", - "karma-coverage-istanbul-reporter": "^1.2.1", + "karma-coverage-istanbul-reporter": "^1.3.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", diff --git a/openvidu-testapp/src/app/app.component.css b/openvidu-testapp/src/app/app.component.css index 57c7a932..d2e551e4 100644 --- a/openvidu-testapp/src/app/app.component.css +++ b/openvidu-testapp/src/app/app.component.css @@ -6,3 +6,13 @@ main { padding: 30px 50px 30px 50px; } + +#nav-logo { + padding-right: 20px; + font-weight: inherit; +} + +md-toolbar a { + padding: 0 10px 0 10px; + font-weight: bold; +} \ No newline at end of file diff --git a/openvidu-testapp/src/app/app.component.html b/openvidu-testapp/src/app/app.component.html index f47d98fc..96d73726 100644 --- a/openvidu-testapp/src/app/app.component.html +++ b/openvidu-testapp/src/app/app.component.html @@ -1,10 +1,18 @@
- TestApp -
+ + SESSIONS + API REST +
+ + + + + +
- \ No newline at end of file + diff --git a/openvidu-testapp/src/app/app.component.ts b/openvidu-testapp/src/app/app.component.ts index 655c40c9..753ec969 100644 --- a/openvidu-testapp/src/app/app.component.ts +++ b/openvidu-testapp/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; +import { OpenviduParamsService } from './services/openvidu-params.service'; @Component({ selector: 'app-root', @@ -8,10 +9,23 @@ import { Router } from '@angular/router'; }) export class AppComponent { - constructor(private router: Router) { } + openviduURL = 'https://localhost:8443'; + openviduSecret = 'MY_SECRET'; - isVideoSessionUrl() { - return (this.router.url.substring(0, '/lesson/'.length) === '/lesson/'); + constructor(private router: Router, private openviduParamsService: OpenviduParamsService) { } + + updateUrl(url) { + this.openviduURL = url; + this.updateParams(); + } + + updateSecret(secret) { + this.openviduSecret = secret; + this.updateParams(); + } + + updateParams() { + this.openviduParamsService.updateParams({ openviduUrl: this.openviduURL, openviduSecret: this.openviduSecret }); } } diff --git a/openvidu-testapp/src/app/app.material.module.ts b/openvidu-testapp/src/app/app.material.module.ts index f094fd3c..2f5a6cd5 100644 --- a/openvidu-testapp/src/app/app.material.module.ts +++ b/openvidu-testapp/src/app/app.material.module.ts @@ -15,6 +15,7 @@ import { MdListModule, MdRadioModule, MdSelectModule, + MdChipsModule, MdSlideToggleModule } from '@angular/material'; @@ -35,6 +36,7 @@ import { MdListModule, MdRadioModule, MdSelectModule, + MdChipsModule, MdSlideToggleModule ], }) diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts index e97feffb..cbdf0d2e 100644 --- a/openvidu-testapp/src/app/app.module.ts +++ b/openvidu-testapp/src/app/app.module.ts @@ -7,16 +7,18 @@ import { AppMaterialModule } from './app.material.module'; import { routing } from './app.routing'; import { AppComponent } from './app.component'; -import { DashboardComponent } from './components/dashboard/dashboard.component'; - -import { OpenviduRestService } from './services/openvidu-rest.service'; +import { TestSessionsComponent } from './components/test-sessions/test-sessions.component'; +import { TestApirestComponent } from './components/test-apirest/test-apirest.component'; import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component'; +import { OpenviduRestService } from './services/openvidu-rest.service'; +import { OpenviduParamsService } from './services/openvidu-params.service'; @NgModule({ declarations: [ AppComponent, - DashboardComponent, - OpenviduInstanceComponent + OpenviduInstanceComponent, + TestSessionsComponent, + TestApirestComponent ], imports: [ BrowserModule, @@ -27,7 +29,8 @@ import { OpenviduInstanceComponent } from './components/openvidu-instance/openvi routing ], providers: [ - OpenviduRestService + OpenviduRestService, + OpenviduParamsService ], bootstrap: [AppComponent] }) diff --git a/openvidu-testapp/src/app/app.routing.ts b/openvidu-testapp/src/app/app.routing.ts index cac03737..eecf43da 100644 --- a/openvidu-testapp/src/app/app.routing.ts +++ b/openvidu-testapp/src/app/app.routing.ts @@ -1,12 +1,20 @@ import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { TestSessionsComponent } from './components/test-sessions/test-sessions.component'; +import { TestApirestComponent } from './components/test-apirest/test-apirest.component'; const appRoutes: Routes = [ { - path: '', - component: DashboardComponent + path: '', redirectTo: '/test-sessions', pathMatch: 'full' + }, + { + path: 'test-sessions', + component: TestSessionsComponent + }, + { + path: 'test-apirest', + component: TestApirestComponent } ]; diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css deleted file mode 100644 index 018094fe..00000000 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css +++ /dev/null @@ -1,37 +0,0 @@ -.demo-tab-content { - margin-top: 30px; - padding-left: 10px; - padding-right: 10px; -} - -table { - width: 100%; -} - -table tr { - text-align: left; -} - -#table-row { - margin-top: 40px; -} - -.first-col { - padding-right: 20px; -} - -th { - padding-bottom: 20px; -} - -#server-data-field { - padding-top: 16px; -} - -app-openvidu-instance { - display: inline-flex; - margin: 15px 25px 0 0; - background-color: #797979; - padding: 10px; - border-radius: 2px; -} \ No newline at end of file diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html deleted file mode 100644 index 700ef276..00000000 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - - -
-
- - -
- -
- - - -
-
-
- -
-
- -
-
- -
-
- -
-
- - - - - - - - - - - -
sessionIdstokensSession
- {{sid[0]}} - - -

{{token}}

- - 		- -
-
-
- - - - - - - - - -
OpenVidu RoleServer data
- - - {{ role }} - - - - - - -
-
-
-
- - diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css index bfff4aab..c2c5c796 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css @@ -1,3 +1,10 @@ +.div-wrapper { + display: inline-flex; + background-color: #797979; + padding: 10px; + border-radius: 2px; +} + md-card { background-color: #ffffff; margin: 0; @@ -81,3 +88,34 @@ md-radio-button { .session-actions button:hover { color: #4d4d4d; } + +.event-list { + display: inline-block; + width: 125px; + max-height: 77.75px; + margin-top: 12px; + overflow-y: auto; +} + +md-chip { + line-height: 6px; + font-size: 9.5px; + padding: 6px 9px !important; + margin-bottom: 3.5px !important; + margin-right: 5px !important; +} + +.scroll-custom::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #F5F5F5; +} + +.scroll-custom::-webkit-scrollbar { + width: 8px; + background-color: #F5F5F5; +} + +.scroll-custom::-webkit-scrollbar-thumb { + background-color: #797979; +} diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html index 104a2ee3..706cf5d9 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html @@ -1,80 +1,91 @@ -
- +
- -
+
+ -
- - - + + - - - -
+
+ + + -
- - Subscribe - Publish -
- -
- -
-
-

Send

-
- Audio - Video -
-
-
-

Enter active

-
- Audio - Video -
-
+ + +
-
- -
- Video -
-
- Screen -
- - +
+ + Subscribe + Publish
-
+
- - +
+
+

Send

+
+ Audio + Video +
+
+
+

Enter active

+
+ Audio + Video +
+
+
- -
+
+ +
+ Video +
+
+ Screen +
+ + +
-
- -
-
-
{{sessionName}}
-
- - - +
+ + + + + +
+ +
+ +
+
+
{{sessionName}}
+
+ + + +
-
-
-
-
-
- +
+
+
+
+ + {{event}} + +
+
+
+
+ +
+
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts index b7a37a89..ce1d4df5 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts @@ -1,4 +1,7 @@ -import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; +import { + Component, Input, HostListener, ChangeDetectorRef, SimpleChanges, ElementRef, ViewChild, + OnInit, OnDestroy, OnChanges +} from '@angular/core'; import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser'; declare var $: any; @@ -8,10 +11,10 @@ declare var $: any; templateUrl: './openvidu-instance.component.html', styleUrls: ['./openvidu-instance.component.css'] }) -export class OpenviduInstanceComponent implements OnInit, OnDestroy { +export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy { @Input() - openviduURL: string; + openviduUrl: string; @Input() openviduSecret: string; @@ -59,12 +62,23 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { audioIcon = 'mic'; videoIcon = 'videocam'; + events: string[] = []; + constructor(private changeDetector: ChangeDetectorRef) { this.generateSessionInfo(); } ngOnInit() { } + ngOnChanges(changes: SimpleChanges) { + if (changes.openviduSecret) { + this.openviduSecret = changes.openviduSecret.currentValue; + } + if (changes.openviduUrl) { + this.openviduUrl = changes.openviduUrl.currentValue; + } + } + ngOnDestroy() { this.leaveSession(); } @@ -90,7 +104,7 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { const OV: OpenVidu = new OpenVidu(); this.session = OV.initSession('wss://' - + this.removeHttps(this.openviduURL) + + this.removeHttps(this.openviduUrl) + '/' + this.sessionName + '?secret=' + this.openviduSecret); @@ -103,19 +117,29 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId); subscriber.on('videoElementCreated', (e) => { this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); + this.updateEventList('videoElementCreated'); }); subscriber.on('videoPlaying', (e) => { + this.updateEventList('videoPlaying'); }); } + this.updateEventList('streamCreated'); }); this.session.on('streamDestroyed', (event) => { this.removeUserData(event.stream.connection); + this.updateEventList('streamDestroyed'); }); - this.session.on('connectionCreated', (event) => { }); - this.session.on('connetionDestroyed', (event) => { }); - this.session.on('sessionDisconnected', (event) => { }); + this.session.on('connectionCreated', (event) => { + this.updateEventList('connectionCreated'); + }); + this.session.on('connetionDestroyed', (event) => { + this.updateEventList('connetionDestroyed'); + }); + this.session.on('sessionDisconnected', (event) => { + this.updateEventList('sessionDisconnected'); + }); this.session.connect(null, this.clientData, (error) => { if (!error) { @@ -135,9 +159,15 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { }); this.publisher.on('videoElementCreated', (event) => { + this.updateEventList('videoElementCreated'); }); this.publisher.on('videoPlaying', (e) => { + this.updateEventList('videoPlaying'); + }); + + this.publisher.on('remoteVideoPlaying', (e) => { + this.updateEventList('remoteVideoPlaying'); }); if (this.subscribeToRemote) { @@ -194,6 +224,10 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { $('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove(); } + private updateEventList(event: string) { + this.events.push(event); + } + toggleSubscribeTo(): void { this.subscribeTo = !this.subscribeTo; } diff --git a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css new file mode 100644 index 00000000..8ab4d9fb --- /dev/null +++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css @@ -0,0 +1,23 @@ +table { + width: 100%; +} + +table tr { + text-align: left; +} + +#table-row { + margin-top: 40px; +} + +.first-col { + padding-right: 20px; +} + +th { + padding-bottom: 20px; +} + +#server-data-field { + padding-top: 16px; +} diff --git a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html new file mode 100644 index 00000000..0b8f2bde --- /dev/null +++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html @@ -0,0 +1,60 @@ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + + + + +
sessionIdstokensSession
+ {{sid[0]}} + + +

{{token}}

+ + 		+ +
+
+
+ + + + + + + + + +
OpenVidu RoleServer data
+ + + {{ role }} + + + + + + +
+
+
+
\ No newline at end of file diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts similarity index 53% rename from openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts rename to openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts index 9c996c37..c6c28ee7 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts +++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { DashboardComponent } from './dashboard.component'; +import { TestApirestComponent } from './test-apirest.component'; -describe('DashboardComponent', () => { - let component: DashboardComponent; - let fixture: ComponentFixture; +describe('TestApirestComponent', () => { + let component: TestApirestComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] + declarations: [ TestApirestComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(DashboardComponent); + fixture = TestBed.createComponent(TestApirestComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts similarity index 57% rename from openvidu-testapp/src/app/components/dashboard/dashboard.component.ts rename to openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts index a5f38f3f..1f7269ea 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts +++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts @@ -1,26 +1,22 @@ -import { Component, HostListener, OnInit } from '@angular/core'; +import { Component, Input, OnInit, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; import { OpenviduRestService } from '../../services/openvidu-rest.service'; -import { DataSource } from '@angular/cdk/table'; -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/observable/of'; +import { OpenviduParamsService } from '../../services/openvidu-params.service'; import * as colormap from 'colormap'; const numColors = 64; -declare var $: any; - @Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.css'], + selector: 'app-test-apirest', + templateUrl: './test-apirest.component.html', + styleUrls: ['./test-apirest.component.css'] }) -export class DashboardComponent implements OnInit { +export class TestApirestComponent implements OnInit, OnDestroy { - openviduURL = 'https://localhost:8443'; - openviduSecret = 'MY_SECRET'; + openviduUrl: string; + openviduSecret: string; - // OpenViduInstance collection - users = [true]; + paramsSubscription: Subscription; // API REST params serverData = 'data_test'; @@ -33,7 +29,7 @@ export class DashboardComponent implements OnInit { cg; - constructor(private openviduRestService: OpenviduRestService) { + constructor(private openviduRestService: OpenviduRestService, private openviduParamsService: OpenviduParamsService) { const options = { colormap: [ { 'index': 0, 'rgb': [135, 196, 213] }, @@ -44,16 +40,24 @@ export class DashboardComponent implements OnInit { this.cg = colormap(options); } - ngOnInit() { } + ngOnInit() { + const openviduParams = this.openviduParamsService.getParams(); + this.openviduUrl = openviduParams.openviduUrl; + this.openviduSecret = openviduParams.openviduSecret; - private addUser() { - this.users.push(true); + this.paramsSubscription = this.openviduParamsService.newParams$.subscribe( + params => { + this.openviduUrl = params.openviduUrl; + this.openviduSecret = params.openviduSecret; + }); } - /* API REST TAB */ + ngOnDestroy() { + this.paramsSubscription.unsubscribe(); + } private getSessionId() { - this.openviduRestService.getSessionId(this.openviduURL, this.openviduSecret) + this.openviduRestService.getSessionId(this.openviduUrl, this.openviduSecret) .then((sessionId) => { this.updateData(); }) @@ -65,7 +69,7 @@ export class DashboardComponent implements OnInit { private getToken() { const sessionId = this.data[this.selectedRadioIndex][0]; - this.openviduRestService.getToken(this.openviduURL, this.openviduSecret, sessionId, this.selectedRole, this.serverData) + this.openviduRestService.getToken(this.openviduUrl, this.openviduSecret, sessionId, this.selectedRole, this.serverData) .then((token) => { this.updateData(); }) @@ -92,6 +96,4 @@ export class DashboardComponent implements OnInit { this.openviduRestService.sessionIdTokenOpenViduRole.clear(); } - /* API REST TAB */ - } diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css new file mode 100644 index 00000000..c4725e6c --- /dev/null +++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css @@ -0,0 +1,8 @@ +app-openvidu-instance { + display: inline-flex; + margin: 25px 5px 0px 0px; +} + +.scenario-div { + float: right; +} diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html new file mode 100644 index 00000000..0525e85f --- /dev/null +++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html @@ -0,0 +1,11 @@ +
+
+ + +
+ Load scenario + +
+
+ +
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts new file mode 100644 index 00000000..b9103f15 --- /dev/null +++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestSessionsComponent } from './test-sessions.component'; + +describe('TestSessionsComponent', () => { + let component: TestSessionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TestSessionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestSessionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts new file mode 100644 index 00000000..0a029136 --- /dev/null +++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; +import { OpenviduParamsService } from '../../services/openvidu-params.service'; + +@Component({ + selector: 'app-test-sessions', + templateUrl: './test-sessions.component.html', + styleUrls: ['./test-sessions.component.css'] +}) +export class TestSessionsComponent implements OnInit, OnDestroy { + + openviduUrl: string; + openviduSecret: string; + + paramsSubscription: Subscription; + + // OpenViduInstance collection + users = [true]; + + constructor(private openviduParamsService: OpenviduParamsService) { } + + ngOnInit() { + const openviduParams = this.openviduParamsService.getParams(); + this.openviduUrl = openviduParams.openviduUrl; + this.openviduSecret = openviduParams.openviduSecret; + + this.paramsSubscription = this.openviduParamsService.newParams$.subscribe( + params => { + this.openviduUrl = params.openviduUrl; + this.openviduSecret = params.openviduSecret; + }); + } + + ngOnDestroy() { + this.paramsSubscription.unsubscribe(); + } + + private addUser() { + this.users.push(true); + } + +} diff --git a/openvidu-testapp/src/app/services/openvidu-params.service.spec.ts b/openvidu-testapp/src/app/services/openvidu-params.service.spec.ts new file mode 100644 index 00000000..46e35a05 --- /dev/null +++ b/openvidu-testapp/src/app/services/openvidu-params.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { OpenviduParamsService } from './openvidu-params.service'; + +describe('OpenviduParamsService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [OpenviduParamsService] + }); + }); + + it('should be created', inject([OpenviduParamsService], (service: OpenviduParamsService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/openvidu-testapp/src/app/services/openvidu-params.service.ts b/openvidu-testapp/src/app/services/openvidu-params.service.ts new file mode 100644 index 00000000..6e5668f1 --- /dev/null +++ b/openvidu-testapp/src/app/services/openvidu-params.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; + +export interface OpenviduParams { + openviduUrl: string; + openviduSecret: string; +} + +@Injectable() +export class OpenviduParamsService { + + params: OpenviduParams = + { + openviduUrl: 'https://localhost:8443/', + openviduSecret: 'MY_SECRET' + }; + + newParams$ = new Subject(); + + constructor() { } + + getParams() { + return this.params; + } + + updateParams(params: any) { + this.params = params; + this.newParams$.next(params); + } + +} diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 20ac28c9..603540e0 100644 --- a/openvidu-testapp/src/styles.css +++ b/openvidu-testapp/src/styles.css @@ -1,7 +1,3 @@ -* { - font-family: 'Exo 2', sans-serif; -} - html, body { height: 100%; @@ -10,6 +6,10 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05); } +body { + font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; +} + a { color: inherit; cursor: inherit; @@ -22,7 +22,7 @@ ul { } video { - max-width: 125px; + width: 125px; } button { @@ -38,14 +38,14 @@ button { } .video-container video { - float: left; + float: left; } -.video-container div { +.video-container div.data-node { float: left; position: relative; - margin-left: -46%; - margin-top: -5%; + margin-left: -125px; + margin-top: -14px; } .video-container p {