openvidu-testapp: Session.forceUnpublish and Session.forceDisconnect update

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

@@ -7,7 +7,7 @@ mat-radio-button:first-child {
     margin-left: 0;
 }
 
-#turn-conf-label {
+.label {
     display: block;
     font-size: 12px;
     color: rgba(0, 0, 0, 0.54);
@@ -15,9 +15,8 @@ mat-radio-button:first-child {
     margin-bottom: 5px;
 }
 
-.not-manual {
+#turn-div {
-    padding-top: 6px;
+    padding-bottom: 1.25em;
-    padding-bottom: 15px;
 }
 
 #manual-turn-div {
@@ -26,3 +25,8 @@ mat-radio-button:first-child {
     border: 1px solid #00000026;
     border-radius: 3px;
 }
+
+#role-div {
+    padding-top: 6px;
+    padding-bottom: 15px;
+}

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

@@ -28,8 +28,8 @@
         <mat-form-field>
             <input matInput placeholder="CustomSessionId" [(ngModel)]="sessionProperties.customSessionId">
         </mat-form-field>
-        <label id="turn-conf-label">Turn configuration</label>
+        <label class="label">Turn configuration</label>
-        <div [class.not-manual]="turnConf !== 'manual'">
+        <div id="turn-div">
             <mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
                 <mat-radio-button value="auto">Auto</mat-radio-button>
                 <mat-radio-button value="freeice">Freeice</mat-radio-button>
@@ -47,9 +47,20 @@
                 </mat-form-field>
             </div>
         </div>
+
+        <label class="label">Role</label>
+        <div id="role-div">
+            <mat-radio-group name="Role" [(ngModel)]="participantRole">
+                <mat-radio-button value="SUBSCRIBER">SUB</mat-radio-button>
+                <mat-radio-button value="PUBLISHER">PUB</mat-radio-button>
+                <mat-radio-button value="MODERATOR">MOD</mat-radio-button>
+            </mat-radio-group>
+        </div>
+
+
     </mat-dialog-content>
     <mat-dialog-actions>
         <button mat-button [mat-dialog-close]="undefined">CANCEL</button>
-        <button mat-button [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf}">SAVE</button>
+        <button mat-button [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, participantRole: participantRole}">SAVE</button>
     </mat-dialog-actions>
 </div>

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

@@ -13,6 +13,7 @@ export class SessionPropertiesDialogComponent {
     sessionProperties: SessionProperties;
     turnConf: string;
     manualTurnConf: RTCIceServer = {};
+    participantRole: string;
 
     mediaMode = MediaMode;
     recordingMode = RecordingMode;
@@ -23,6 +24,7 @@ export class SessionPropertiesDialogComponent {
         this.sessionProperties = data.sessionProperties;
         this.turnConf = data.turnConf;
         this.manualTurnConf = data.manualTurnConf;
+        this.participantRole = data.participantRole;
     }
 
     enumToArray(enumerator: any) {

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

@@ -78,7 +78,7 @@
               <div fxLayout="column" class="publisher-btns-div">
                 <button mat-icon-button title="Publisher properties" [id]="'publisher-settings-btn-' + index" class="mat-icon-custom" (click)="openPublisherPropertiesDialog()"
                   [disabled]="!publishTo">
-                  <mat-icon class="mat-icon-custom-ic" aria-label="Session properties button">settings</mat-icon>
+                  <mat-icon class="mat-icon-custom-ic" aria-label="Publisher properties button">settings</mat-icon>
                 </button>
                 <button mat-icon-button title="Add new publisher to running session" [id]="'session-api-btn-' + index" class="mat-icon-custom"
                   [disabled]="!session || !publishTo">

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

@@ -6,14 +6,15 @@ import {
 import {
   OpenVidu, Session, Subscriber, Publisher, VideoInsertMode, StreamEvent, ConnectionEvent,
   SessionDisconnectedEvent, SignalEvent, RecordingEvent,
-  PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent
+  PublisherSpeakingEvent, PublisherProperties, StreamPropertyChangedEvent, OpenViduError
 } from 'openvidu-browser';
 import {
   OpenVidu as OpenViduAPI,
   SessionProperties as SessionPropertiesAPI,
   MediaMode,
   RecordingMode,
-  RecordingLayout
+  RecordingLayout,
+  OpenViduRole
 } from 'openvidu-node-client';
 import { MatDialog, MAT_CHECKBOX_CLICK_ACTION } from '@angular/material';
 import { ExtensionDialogComponent } from '../dialogs/extension-dialog/extension-dialog.component';
@@ -111,6 +112,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
 
   turnConf = 'auto';
   manualTurnConf: RTCIceServer = { urls: [] };
+  participantRole: OpenViduRole = OpenViduRole.PUBLISHER;
 
   events: OpenViduEvent[] = [];
 
@@ -430,7 +432,10 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       this.publisher.subscribeToRemote();
     }
 
-    this.session.publish(this.publisher);
+    this.session.publish(this.publisher).catch((error: OpenViduError) => {
+      console.error(error);
+      this.session.unpublish(this.publisher);
+    });
   }
 
   syncSubscribe(session: Session, event) {
@@ -483,7 +488,8 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       data: {
         sessionProperties: this.sessionProperties,
         turnConf: this.turnConf,
-        manualTurnConf: this.manualTurnConf
+        manualTurnConf: this.manualTurnConf,
+        participantRole: this.participantRole
       },
       width: '280px'
     });
@@ -496,6 +502,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         }
         this.turnConf = result.turnConf;
         this.manualTurnConf = result.manualTurnConf;
+        this.participantRole = result.participantRole;
       }
       document.getElementById('session-settings-btn-' + this.index).classList.remove('cdk-program-focused');
     });
@@ -588,7 +595,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
     }
     return OV_NodeClient.createSession(this.sessionProperties)
       .then(session_NodeClient => {
-        return session_NodeClient.generateToken();
+        return session_NodeClient.generateToken({ role: this.participantRole });
       });
   }
 

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

@@ -47,6 +47,14 @@
             <button *ngIf="streamManager.stream.hasAudio && !!pubSubAudioIcon" class="video-btn sub-audio-btn" title="Subscribe/Unsubscribe Audio" (click)="subUnsubAudio()">
                 <mat-icon aria-label="Subscribe or unsubscribe audio" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubAudioIcon}}</mat-icon>
             </button>
+
+            <button *ngIf="OV.session.capabilities.forceUnpublish" class="video-btn force-unpub-btn" title="Force Unpublish" (click)="forceUnpublish()">
+                <mat-icon aria-label="Force unpublish" class="mat-icon material-icons" role="img" aria-hidden="true">voice_over_off</mat-icon>
+            </button>
+            <button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn force-disconnect-btn" title="Force Disconnect" (click)="forceDisconnect()">
+                <mat-icon aria-label="Force disconnect" class="mat-icon material-icons" role="img" aria-hidden="true">clear</mat-icon>
+            </button>
+
             <button *ngIf="!!recordIcon" class="video-btn rec-btn" title="Record" (click)="record()">
                 <mat-icon aria-label="Start/Stop recording" class="mat-icon material-icons" role="img" aria-hidden="true">{{recordIcon}}</mat-icon>
             </button>

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

@@ -613,4 +613,12 @@ export class VideoComponent implements OnInit, OnDestroy {
         }
     }
 
+    forceUnpublish() {
+        this.OV.session.forceUnpublish(this.streamManager.stream);
+    }
+
+    forceDisconnect() {
+        this.OV.session.forceDisconnect(this.streamManager.stream.connection);
+    }
+
 }