From 3a12428be8082f2e6f8b0a0210d957af6ae3cec1 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Wed, 27 Sep 2017 16:24:39 +0200 Subject: [PATCH] REST API tab finished on testapp --- openvidu-testapp/package.json | 1 + .../src/app/app.material.module.ts | 8 ++ openvidu-testapp/src/app/app.module.ts | 4 +- .../dashboard/dashboard.component.css | 130 +++++++++++------- .../dashboard/dashboard.component.html | 73 +++++++++- .../dashboard/dashboard.component.ts | 60 +++++++- .../src/app/services/openvidu-rest.service.ts | 34 ++++- openvidu-testapp/src/index.html | 5 +- openvidu-testapp/src/styles.css | 63 +-------- 9 files changed, 251 insertions(+), 127 deletions(-) diff --git a/openvidu-testapp/package.json b/openvidu-testapp/package.json index 2e2bf3d7..257bdb00 100644 --- a/openvidu-testapp/package.json +++ b/openvidu-testapp/package.json @@ -24,6 +24,7 @@ "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", + "colormap": "^2.2.0", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "openvidu-browser": "1.1.0", diff --git a/openvidu-testapp/src/app/app.material.module.ts b/openvidu-testapp/src/app/app.material.module.ts index 7fed5df1..f094fd3c 100644 --- a/openvidu-testapp/src/app/app.material.module.ts +++ b/openvidu-testapp/src/app/app.material.module.ts @@ -11,6 +11,10 @@ import { MdDialogModule, MdToolbarModule, MdTabsModule, + MdTableModule, + MdListModule, + MdRadioModule, + MdSelectModule, MdSlideToggleModule } from '@angular/material'; @@ -27,6 +31,10 @@ import { MdDialogModule, MdToolbarModule, MdTabsModule, + MdTableModule, + MdListModule, + MdRadioModule, + MdSelectModule, MdSlideToggleModule ], }) diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts index 24a2504e..14623889 100644 --- a/openvidu-testapp/src/app/app.module.ts +++ b/openvidu-testapp/src/app/app.module.ts @@ -26,7 +26,9 @@ import { OpenviduRestService } from './services/openvidu-rest.service'; FlexLayoutModule, routing ], - providers: [OpenviduRestService], + providers: [ + OpenviduRestService + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css index 506bed37..3d7e8389 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css @@ -1,93 +1,125 @@ -#join-dialog h1 { - color: #4d4d4d; +.demo-tab-content { + margin-top: 50px; +} + +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; +} + +md-card { font-weight: bold; - text-align: center; +} + +#join-dialog h1 { + color: #4d4d4d; + font-weight: bold; + text-align: center; } #img-div { - text-align: center; - position: absolute; - top: 19%; - left: 50%; - transform: translate(-50%, -50%); + text-align: center; + position: absolute; + top: 19%; + left: 50%; + transform: translate(-50%, -50%); } #img-div img { - height: 15%; + height: 15%; } #join-dialog label { - color: #0088aa; + color: #0088aa; } #join-dialog input.btn { - margin-top: 15px; + margin-top: 15px; } #session-header { - margin-bottom: 20px; + margin-bottom: 20px; } #session-title { - display: inline-block; + display: inline-block; } #buttonLeaveSession { - float: right; - margin-top: 20px; + float: right; + margin-top: 20px; } #video-container video { - position: relative; - float: left; - cursor: pointer; + position: relative; + float: left; + cursor: pointer; } #video-container p { - display: inline-block; - background: #f8f8f8; - padding-right: 5px; - padding-left: 5px; - color: #777777; - font-weight: bold; - border-bottom-right-radius: 4px; + display: inline-block; + background: #f8f8f8; + padding-right: 5px; + padding-left: 5px; + color: #777777; + font-weight: bold; + border-bottom-right-radius: 4px; } video { - width: 100%; - height: auto; + width: 100%; + height: auto; } #main-video p { - position: absolute; - display: inline-block; - background: #f8f8f8; - padding-right: 5px; - padding-left: 5px; - left: 0; - font-size: 22px; - color: #777777; - font-weight: bold; - border-bottom-right-radius: 4px; + position: absolute; + display: inline-block; + background: #f8f8f8; + padding-right: 5px; + padding-left: 5px; + left: 0; + font-size: 22px; + color: #777777; + font-weight: bold; + border-bottom-right-radius: 4px; } #main-video video { - cursor: initial; + cursor: initial; } #session img { - width: 100%; - height: auto; - display: inline-block; - object-fit: contain; - vertical-align: baseline; + width: 100%; + height: auto; + display: inline-block; + object-fit: contain; + vertical-align: baseline; } #session #video-container img { - position: relative; - float: left; - width: 50%; - cursor: pointer; - object-fit: cover; - height: 180px; + position: relative; + float: left; + width: 50%; + cursor: pointer; + object-fit: cover; + height: 180px; } diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html index e9457a7d..d89021a5 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html @@ -1,4 +1,8 @@ - + + + + +
@@ -18,11 +22,72 @@
- +
+
- - +
+ + + + + +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + + + + +
sessionIdstokensSession
+ {{sid[0]}} + + +

{{token}}

+ + 		+ +
+
+
+ + + + + + + + + +
OpenVidu RoleServer data
+ + + {{ role }} + + + + + + +
+
+
+
diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts index 8ce9494d..fe6d0935 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts @@ -1,19 +1,49 @@ import { Component, OnInit } from '@angular/core'; import { OpenviduRestService } from '../../services/openvidu-rest.service'; +import { DataSource } from '@angular/cdk/table'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/of'; + +import { OpenVidu } from 'openvidu-browser'; + +import * as colormap from 'colormap'; +const numColors = 64; + +declare var $: any; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.css'] + styleUrls: ['./dashboard.component.css'], }) export class DashboardComponent implements OnInit { + openviduURL = 'https://localhost:8443'; + openviduSecret = 'MY_SECRET'; + serverData = 'data_test'; + selectedRole = 'PUBLISHER'; + selectedRadioIndex = 0; + + openViduRoles = ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR']; + // Join form sessionName: string; clientData: string; + // API REST data collected + data = []; + cg; + constructor(private openviduRestService: OpenviduRestService) { this.generateSessionInfo(); + const options = { + colormap: [ + { 'index': 0, 'rgb': [135, 196, 213] }, + { 'index': 1, 'rgb': [255, 230, 151] }], + nshades: numColors, + format: 'hex' + }; + this.cg = colormap(options); } ngOnInit() { } @@ -24,9 +54,9 @@ export class DashboardComponent implements OnInit { } private getSessionId() { - this.openviduRestService.getSessionId() + this.openviduRestService.getSessionId(this.openviduURL, this.openviduSecret) .then((sessionId) => { - alert(sessionId); + this.updateData(); }) .catch((error) => { console.error('Error getting a sessionId', error); @@ -34,12 +64,32 @@ export class DashboardComponent implements OnInit { } private getToken() { - this.openviduRestService.getToken() + const sessionId = this.data[this.selectedRadioIndex][0]; + + this.openviduRestService.getToken(this.openviduURL, this.openviduSecret, sessionId, this.selectedRole, this.serverData) .then((token) => { - alert(token); + this.updateData(); }) .catch((error) => { console.error('Error getting a token', error); }); } + + private updateData() { + this.data = Array.from(this.openviduRestService.getAvailableParams()); + } + + private getTokenDisabled(): boolean { + return ((this.data.length === 0) || this.selectedRadioIndex === undefined); + } + + private getBackgroundColor(index: number) { + return this.cg[((index + 1) * 15) % numColors]; + } + + private cleanAllSessions() { + this.data = []; + this.openviduRestService.sessionIdSession.clear(); + this.openviduRestService.sessionIdTokenOpenViduRole.clear(); + } } diff --git a/openvidu-testapp/src/app/services/openvidu-rest.service.ts b/openvidu-testapp/src/app/services/openvidu-rest.service.ts index 54bd9a85..798c2970 100644 --- a/openvidu-testapp/src/app/services/openvidu-rest.service.ts +++ b/openvidu-testapp/src/app/services/openvidu-rest.service.ts @@ -10,29 +10,49 @@ import { environment } from '../../environments/environment'; @Injectable() export class OpenviduRestService { + sessionIdSession: Map = new Map(); + sessionIdTokenOpenViduRole: Map> = new Map(); + constructor() { } - getSessionId(): Promise { - const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET); + getSessionId(openviduURL: string, openviduSecret: string): Promise { + const OV = new OpenViduAPI(openviduURL, openviduSecret); const session = OV.createSession(); return new Promise(resolve => { session.getSessionId((sessionId) => { + this.sessionIdSession.set(sessionId, session); + this.sessionIdTokenOpenViduRole.set(sessionId, new Map()); resolve(sessionId); }); }); } - getToken(): Promise { - const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET); - const session = OV.createSession(); + getToken(openviduURL: string, openviduSecret: string, sessionId: string, role: string, serverData: string): Promise { + console.warn(sessionId); + + const OV = new OpenViduAPI(openviduURL, openviduSecret); + const session: SessionAPI = this.sessionIdSession.get(sessionId); + const OVRole: OpenViduRoleAPI = OpenViduRoleAPI[role]; return new Promise(resolve => { - let tokenOptions: TokenOptionsAPI; - session.generateToken((token) => { + const tokenOptions: TokenOptionsAPI = new TokenOptionsAPI.Builder() + .role(OVRole) + .data(serverData) + .build(); + session.generateToken(tokenOptions, (token) => { + this.sessionIdTokenOpenViduRole.get(sessionId).set(token, OVRole); resolve(token); }); }); } + getAvailableParams(): Map { + const params = new Map(); + this.sessionIdSession.forEach((sessionApi, sessionId, map) => { + params.set(sessionId, Array.from(this.sessionIdTokenOpenViduRole.get(sessionId).keys())); + }); + return params; + } + } diff --git a/openvidu-testapp/src/index.html b/openvidu-testapp/src/index.html index 94e061e0..1fd2f900 100644 --- a/openvidu-testapp/src/index.html +++ b/openvidu-testapp/src/index.html @@ -9,7 +9,10 @@ - + + + diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 8285dafe..93f57389 100644 --- a/openvidu-testapp/src/styles.css +++ b/openvidu-testapp/src/styles.css @@ -16,64 +16,7 @@ a { text-decoration: inherit; } - -/* Elevation */ - -.z-depth-1 { - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); -} - -.z-depth-1-half { - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); -} - -.z-depth-2 { - box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); -} - -.z-depth-3 { - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3); -} - -.z-depth-4 { - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3); -} - -.z-depth-5 { - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); -} - - -/* Colors of Deep Purple Material Theme */ - -.back-primary { - background: #673ab7 !important; -} - -.back-accent { - background: #ffd740; -} - -.back-warn { - background: #f44336; -} - -.back-secondary { - background: #D1C4E9; -} - -.color-primary { - color: #673ab7 !important; -} - -.color-accent { - color: #ffd740; -} - -.color-warn { - color: #f44336; -} - -.color-secondary { - color: #D1C4E9; +ul { + list-style: none; + padding-left: 0; }