openvidu-testapp: update to support new Session.updateConnection method

openvidu-testapp/src/app/components/dialogs/filter-dialog/filter-dialog.component.html

@@ -5,19 +5,19 @@
             <mat-dialog-content>
                 <label class="label">Apply filter</label>
                 <button mat-button id="apply-filter-btn" (click)="apply()">Apply</button>
-                <mat-form-field class="inner-text-input">
+                <mat-form-field>
                     <input matInput id="filter-type-field" placeholder="Type" [(ngModel)]="filterType">
                 </mat-form-field>
-                <mat-form-field class="inner-text-input">
+                <mat-form-field>
                     <input matInput id="filter-options-field" placeholder="Options" [(ngModel)]="filterOptions">
                 </mat-form-field>
                 <mat-divider></mat-divider>
                 <label class="label">Exec filter method</label>
                 <button mat-button id="exec-filter-btn" (click)="execMethod()">Exec</button>
-                <mat-form-field class="inner-text-input">
+                <mat-form-field>
                     <input matInput id="filter-method-field" placeholder="Method" [(ngModel)]="filterMethod">
                 </mat-form-field>
-                <mat-form-field class="inner-text-input">
+                <mat-form-field>
                     <input matInput id="filter-params-field" placeholder="Params" [(ngModel)]="filterParams">
                 </mat-form-field>
                 <mat-divider></mat-divider>
@@ -34,7 +34,7 @@
         <div>
             <h2 mat-dialog-title>Filter events</h2>
             <mat-dialog-content>
-                <mat-form-field class="inner-text-input">
+                <mat-form-field>
                     <input matInput id="filter-event-type-field" placeholder="Event type" [(ngModel)]="eventType">
                 </mat-form-field>
                 <label class="label">Add listener to filter event</label>

openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.css

@@ -31,6 +31,7 @@ mat-dialog-content button {
 
 .inner-text-input {
   margin-left: 9px;
+  width: 42%;
 }
 
 #rec-properties-btn {

openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.html

@@ -6,23 +6,44 @@
       <button mat-button id="get-session-btn" (click)="fetchActiveConnections()">Fetch</button>
       <button mat-button id="list-sessions-btn" (click)="fetchActiveSessions()">Fetch all</button>
       <button mat-button id="close-session-btn" (click)="closeSession()">Close this session</button>
-    </div>
-    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
-      <input matInput id="resource-id-field" placeholder="resourceId" [(ngModel)]="resourceId">
-    </mat-form-field>
-    <div>
-      <button mat-button id="force-disconnect-api-btn" (click)="forceDisconnect()" [disabled]="!resourceId">Force
-        disconnect</button>
-      <button mat-button id="force-unpublish-api-btn" (click)="forceUnpublish()" [disabled]="!resourceId">Force
-        unpublish</button>
       <mat-divider></mat-divider>
     </div>
+
+    <label class="label">Connections/Streams</label>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="connection-id-field" placeholder="connectionId" [(ngModel)]="connectionId">
+    </mat-form-field>
+    <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+      <input matInput id="stream-id-field" placeholder="streamId" [(ngModel)]="streamId">
+    </mat-form-field>
+    <div style="margin-left:9px">
+      <mat-checkbox class="checkbox-form" [(ngModel)]="tokenOptions.record" id="record-checkbox">Record
+      </mat-checkbox>
+      <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
+        <mat-select [(ngModel)]="tokenOptions.role" id="token-role-select">
+          <mat-option *ngFor="let enumerator of enumToArray(openviduRoles)" [value]="enumerator">
+            <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <button mat-button id="force-disconnect-api-btn" (click)="forceDisconnect()"
+        [disabled]="!connectionId">Disconnect</button>
+      <button mat-button id="update-connection-api-btn" (click)="updateConnection()" [disabled]="!connectionId">Update
+        connection</button>
+      <button mat-button id="force-unpublish-api-btn" (click)="forceUnpublish()"
+        [disabled]="!streamId">Unpublish</button>
+      <mat-divider></mat-divider>
+    </div>
+
     <label class="label">Recordings</label>
     <button mat-button id="list-recording-btn" (click)="listRecordings()">List recordings</button>
     <button mat-button id="start-recording-btn" (click)="startRecording()">Start recording</button>
-    <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;" title="Recording properties"
+    <button id="rec-properties-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
-      (click)="toggleRecProperties()">
+      title="Recording properties" (click)="toggleRecProperties()">
-      <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">{{recPropertiesIcon}}</mat-icon>
+      <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px" aria-label="Recording properties">
+        {{recPropertiesIcon}}</mat-icon>
     </button>
     <div *ngIf="showRecProperties" id="rec-properties-div">
       <div>
@@ -37,7 +58,9 @@
           </mat-select>
         </mat-form-field>
       </div>
-      <div *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED] && recordingProperties.hasVideo" id="rec-layout-div">
+      <div
+        *ngIf="recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED] && recordingProperties.hasVideo"
+        id="rec-layout-div">
         <mat-form-field class="inner-text-input" [style.fontSize.px]=14>
           <mat-select placeholder="Recording layout" [(ngModel)]="recordingProperties.recordingLayout">
             <mat-option *ngFor="let enumerator of enumToArray(recLayouts)" [value]="enumerator">
@@ -45,17 +68,20 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]" class="inner-text-input"
+        <mat-form-field
-          [style.fontSize.px]=14>
+          *ngIf="recordingProperties.hasVideo && recordingProperties.recordingLayout.toString() === recLayouts[recLayouts.CUSTOM]"
+          class="inner-text-input" [style.fontSize.px]=14>
           <input matInput placeholder="Custom layout" type="text" [(ngModel)]="recordingProperties.customLayout">
         </mat-form-field>
       </div>
       <div>
         <mat-checkbox id="rec-hasaudio-checkbox" [(ngModel)]="recordingProperties.hasAudio">Has audio</mat-checkbox>
         <mat-checkbox id="rec-hasvideo-checkbox" [(ngModel)]="recordingProperties.hasVideo">Has video</mat-checkbox>
-        <mat-form-field *ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]" id="recording-resolution-form"
+        <mat-form-field
-          class="inner-text-input" [style.fontSize.px]=14>
+          *ngIf="recordingProperties.hasVideo && recordingProperties.outputMode.toString() === recMode[recMode.COMPOSED]"
-          <input matInput id="recording-resolution-field" placeholder="Resolution" type="text" [(ngModel)]="recordingProperties.resolution">
+          id="recording-resolution-form" class="inner-text-input" [style.fontSize.px]=14>
+          <input matInput id="recording-resolution-field" placeholder="Resolution" type="text"
+            [(ngModel)]="recordingProperties.resolution">
         </mat-form-field>
       </div>
     </div>
@@ -63,8 +89,10 @@
       <input matInput id="recording-id-field" placeholder="recordingId" [(ngModel)]="recordingId">
     </mat-form-field>
     <div>
-      <button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop recording</button>
+      <button mat-button id="stop-recording-btn" (click)="stopRecording()" [disabled]="!recordingId">Stop
-      <button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get recording</button>
+        recording</button>
+      <button mat-button id="get-recording-btn" (click)="getRecording()" [disabled]="!recordingId">Get
+        recording</button>
       <button mat-button id="delete-recording-btn" (click)="deleteRecording()" [disabled]="!recordingId">Delete
         recording</button>
     </div>
@@ -73,6 +101,7 @@
     </mat-form-field>
   </mat-dialog-content>
   <mat-dialog-actions>
-    <button mat-button id="close-dialog-btn" [mat-dialog-close]="{session: session, recordingProperties: recordingProperties}">CLOSE</button>
+    <button mat-button id="close-dialog-btn"
+      [mat-dialog-close]="{session: session, recordingProperties: recordingProperties}">CLOSE</button>
   </mat-dialog-actions>
 </div>

openvidu-testapp/src/app/components/dialogs/session-api-dialog/session-api-dialog.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 
-import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout } from 'openvidu-node-client';
+import { OpenVidu as OpenViduAPI, Session as SessionAPI, Recording, RecordingProperties, RecordingLayout, TokenOptions, OpenViduRole } from 'openvidu-node-client';
 
 @Component({
     selector: 'app-session-api-dialog',
@@ -14,16 +14,23 @@ export class SessionApiDialogComponent {
     session: SessionAPI;
     sessionId: string;
     recordingId: string;
-    resourceId: string;
+    connectionId: string;
+    streamId: string;
     response: string;
 
     recordingProperties: RecordingProperties;
     recMode = Recording.OutputMode;
     recLayouts = RecordingLayout;
+    openviduRoles = OpenViduRole;
     customLayout = '';
     recPropertiesIcon = 'add_circle';
     showRecProperties = false;
 
+    tokenOptions: TokenOptions = {
+        record: true,
+        role: OpenViduRole.PUBLISHER
+    };
+
     constructor(public dialogRef: MatDialogRef<SessionApiDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data) {
         this.OV = data.openVidu;
@@ -145,7 +152,7 @@ export class SessionApiDialogComponent {
 
     forceDisconnect() {
         console.log('Forcing disconnect');
-        this.session.forceDisconnect(this.resourceId)
+        this.session.forceDisconnect(this.connectionId)
             .then(() => {
                 this.response = 'User disconnected';
             })
@@ -156,7 +163,7 @@ export class SessionApiDialogComponent {
 
     forceUnpublish() {
         console.log('Forcing unpublish');
-        this.session.forceUnpublish(this.resourceId)
+        this.session.forceUnpublish(this.streamId)
             .then(() => {
                 this.response = 'Stream unpublished';
             })
@@ -165,6 +172,17 @@ export class SessionApiDialogComponent {
             });
     }
 
+    updateConnection() {
+        console.log('Updating connection');
+        this.session.updateConnection(this.connectionId, this.tokenOptions)
+            .then(modifiedConnection => {
+                this.response = 'Connection updated: ' + JSON.stringify({ role: modifiedConnection.role, record: modifiedConnection.record });
+            })
+            .catch(error => {
+                this.response = 'Error [' + error.message + ']';
+            });
+    }
+
     enumToArray(enumerator: any) {
         return Object.keys(enumerator);
     }

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import {
-  OpenVidu, Session, Subscriber, Publisher, Event, VideoInsertMode, StreamEvent, ConnectionEvent,
+  OpenVidu, Session, Subscriber, Publisher, Event, StreamEvent, ConnectionEvent,
   SessionDisconnectedEvent, SignalEvent, RecordingEvent,
   PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError
 } from 'openvidu-browser';
@@ -18,7 +18,8 @@ import {
   TokenOptions,
   OpenViduRole,
   RecordingProperties,
-  Recording
+  Recording,
+  Token
 } from 'openvidu-node-client';
 import { MatDialog, MAT_CHECKBOX_CLICK_ACTION } from '@angular/material';
 import { ExtensionDialogComponent } from '../dialogs/extension-dialog/extension-dialog.component';
@@ -189,22 +190,21 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     this.clientData = 'TestClient';
   }
 
-  joinSession(): void {
+  async joinSession(): Promise<void> {
-
     if (this.session) {
       this.leaveSession();
     }
-
+    const sessionId = !!this.customToken ? this.getSessionIdFromToken(this.customToken) : this.sessionName;
+    await this.initializeNodeClient(sessionId);
     if (!!this.customToken) {
       this.joinSessionShared(this.customToken);
     } else {
-      this.getToken().then(token => {
+      const token: Token = await this.getToken();
-        this.joinSessionShared(token);
+      this.joinSessionShared(token.token);
-      });
     }
   }
 
-  private joinSessionShared(token): void {
+  private joinSessionShared(token: string): void {
 
     this.OV = new OpenVidu();
 
@@ -686,16 +686,14 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
-  getToken(): Promise<string> {
+  async initializeNodeClient(sessionId: string): Promise<any> {
     this.OV_NodeClient = new OpenViduAPI(this.openviduUrl, this.openviduSecret);
-    if (!this.sessionProperties.customSessionId) {
+    this.sessionProperties.customSessionId = sessionId;
-      this.sessionProperties.customSessionId = this.sessionName;
+    this.sessionAPI = await this.OV_NodeClient.createSession(this.sessionProperties);
-    }
+  }
-    return this.OV_NodeClient.createSession(this.sessionProperties)
+
-      .then(session_NodeClient => {
+  async getToken(): Promise<Token> {
-        this.sessionAPI = session_NodeClient;
+    return this.sessionAPI.createToken();
-        return session_NodeClient.generateToken(this.tokenOptions);
-      });
   }
 
   updateEventFromChild(event: OpenViduEvent) {
@@ -728,4 +726,15 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     this.syncInitPublisher();
   }
 
+  private getSessionIdFromToken(token: string): string {
+    const queryParams = decodeURI(token.split('?')[1])
+      .split('&')
+      .map(param => param.split('='))
+      .reduce((values, [key, value]) => {
+        values[key] = value
+        return values
+      }, {});
+    return queryParams['sessionId'];
+  }
+
 }