REST API tab finished on testapp

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",

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
     ],
 })

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 { }

openvidu-testapp/src/app/components/dashboard/dashboard.component.css

@@ -1,93 +1,125 @@
-#join-dialog h1 {
+.demo-tab-content {
-	color: #4d4d4d;
+  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;
+  text-align: center;
-	position: absolute;
+  position: absolute;
-	top: 19%;
+  top: 19%;
-	left: 50%;
+  left: 50%;
-	transform: translate(-50%, -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;
+  float: right;
-	margin-top: 20px;
+  margin-top: 20px;
 }
 
 #video-container video {
-	position: relative;
+  position: relative;
-	float: left;
+  float: left;
-	cursor: pointer;
+  cursor: pointer;
 }
 
 #video-container p {
-	display: inline-block;
+  display: inline-block;
-	background: #f8f8f8;
+  background: #f8f8f8;
-	padding-right: 5px;
+  padding-right: 5px;
-	padding-left: 5px;
+  padding-left: 5px;
-	color: #777777;
+  color: #777777;
-	font-weight: bold;
+  font-weight: bold;
-	border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 video {
-	width: 100%;
+  width: 100%;
-	height: auto;
+  height: auto;
 }
 
 #main-video p {
-	position: absolute;
+  position: absolute;
-	display: inline-block;
+  display: inline-block;
-	background: #f8f8f8;
+  background: #f8f8f8;
-	padding-right: 5px;
+  padding-right: 5px;
-	padding-left: 5px;
+  padding-left: 5px;
-	left: 0;
+  left: 0;
-	font-size: 22px;
+  font-size: 22px;
-	color: #777777;
+  color: #777777;
-	font-weight: bold;
+  font-weight: bold;
-	border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 #main-video video {
-	cursor: initial;
+  cursor: initial;
 }
 
 #session img {
-	width: 100%;
+  width: 100%;
-	height: auto;
+  height: auto;
-	display: inline-block;
+  display: inline-block;
-	object-fit: contain;
+  object-fit: contain;
-	vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 #session #video-container img {
-	position: relative;
+  position: relative;
-	float: left;
+  float: left;
-	width: 50%;
+  width: 50%;
-	cursor: pointer;
+  cursor: pointer;
-	object-fit: cover;
+  object-fit: cover;
-	height: 180px;
+  height: 180px;
 }

openvidu-testapp/src/app/components/dashboard/dashboard.component.html

@@ -1,4 +1,8 @@
-<md-tab-group class="demo-tab-group" dynamicHeight="true">
+<md-form-field class="example-full-width">
+  <input mdInput placeholder="OpenVidu Server URL" [(ngModel)]="openviduURL">
+</md-form-field>
+
+<md-tab-group class="demo-tab-group" dynamicHeight="true" selectedIndex="5">
   <md-tab id="audio-video" label="Audio + Video">
     <div class="demo-tab-content">
 
@@ -18,11 +22,72 @@
     </div>
   </md-tab>
   <md-tab id="screen-only" label="Screen only">
-
+    <div class="demo-tab-content">
+    </div>
   </md-tab>
   <md-tab id="api-rest" label="API REST">
-      <button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
+    <div class="demo-tab-content">
-      <button md-raised-button color="primary" (click)="getToken()">Get token</button>
+      <md-form-field>
+        <input mdInput placeholder="OpenVidu Server Secret" [(ngModel)]="openviduSecret">
+      </md-form-field>
+      <button md-raised-button color="primary" (click)="cleanAllSessions()" style="float: right">Clean sessions</button>
+
+      <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
+        <div fxLayout="column" fxFlex="50" fxFlexAlign="center" fxFill>
+          <button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
+        </div>
+        <div fxLayout="column" fxFlex="50" fxFlexAlign="center" fxFill>
+          <button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">Get token</button>
+        </div>
+      </div>
+
+      <div id="table-row" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start">
+        <div fxLayout="column" fxFlex="65" fxFlexAlign="start" fxFill>
+          <table>
+            <tr>
+              <th class="first-col">sessionIds</th>
+              <th>tokens</th>
+              <th>Session</th>
+            </tr>
+            <tr *ngFor="let sid of this.data; let ind = index">
+              <td class="first-col">
+                <md-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</md-card>
+              </td>
+              <td>
+                <md-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)">
+                  <p *ngFor="let token of sid[1]">{{token}}</p>
+                </md-card>
+              </td>
+              <td style="text-align: center">
+                <md-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></md-radio-button>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div fxLayout="column" fxFlex="35" fxFlexAlign="start" fxFill>
+          <table>
+            <tr>
+              <th>OpenVidu Role</th>
+              <th>Server data</th>
+            </tr>
+            <tr id="tr-token-options" *ngIf="data.length > 0">
+              <td>
+                <md-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
+                  <md-option *ngFor="let role of openViduRoles" [value]="role">
+                    {{ role }}
+                  </md-option>
+                </md-select>
+              </td>
+              <td>
+                <md-form-field id="server-data-field">
+                  <input mdInput placeholder="Server Data" [(ngModel)]="serverData">
+                </md-form-field>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
   </md-tab>
 </md-tab-group>
 

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

openvidu-testapp/src/app/services/openvidu-rest.service.ts

@@ -10,29 +10,49 @@ import { environment } from '../../environments/environment';
 @Injectable()
 export class OpenviduRestService {
 
+  sessionIdSession: Map<string, SessionAPI> = new Map();
+  sessionIdTokenOpenViduRole: Map<string, Map<string, OpenViduRoleAPI>> = new Map();
+
   constructor() { }
 
-  getSessionId(): Promise<String> {
+  getSessionId(openviduURL: string, openviduSecret: string): Promise<string> {
-    const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET);
+    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<String> {
+  getToken(openviduURL: string, openviduSecret: string, sessionId: string, role: string, serverData: string): Promise<string> {
-    const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET);
+    console.warn(sessionId);
-    const session = OV.createSession();
+
+    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;
+      const tokenOptions: TokenOptionsAPI = new TokenOptionsAPI.Builder()
-      session.generateToken((token) => {
+        .role(OVRole)
+        .data(serverData)
+        .build();
+      session.generateToken(tokenOptions, (token) => {
+        this.sessionIdTokenOpenViduRole.get(sessionId).set(token, OVRole);
         resolve(token);
       });
     });
   }
 
+  getAvailableParams(): Map<string, string[]> {
+    const params = new Map<string, string[]>();
+    this.sessionIdSession.forEach((sessionApi, sessionId, map) => {
+      params.set(sessionId, Array.from(this.sessionIdTokenOpenViduRole.get(sessionId).keys()));
+    });
+    return params;
+  }
+
 }

openvidu-testapp/src/index.html

@@ -9,7 +9,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
+    crossorigin="anonymous"></script>
 
 </head>
 

openvidu-testapp/src/styles.css

@@ -16,64 +16,7 @@ a {
   text-decoration: inherit;
 }
 
-
+ul {
-/* Elevation */
+  list-style: none;
-
+  padding-left: 0;
-.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;
 }