From 6d624209a0665ac703d373ffb47b65e83d7e090f Mon Sep 17 00:00:00 2001
From: pabloFuente <pablofuenteperez@gmail.com>
Date: Thu, 24 Jun 2021 15:07:56 +0200
Subject: [PATCH] openvidu-testapp: add reconnect button

---
 .../app/components/video/video.component.css   | 16 ++++++++++------
 .../app/components/video/video.component.html  | 18 +++++++++++-------
 .../app/components/video/video.component.ts    |  6 ++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/openvidu-testapp/src/app/components/video/video.component.css b/openvidu-testapp/src/app/components/video/video.component.css
index d58176190..669916b49 100644
--- a/openvidu-testapp/src/app/components/video/video.component.css
+++ b/openvidu-testapp/src/app/components/video/video.component.css
@@ -26,10 +26,10 @@ p {
 }
 
 .material-icons {
-  font-size: 17px;
-  width: 17px;
-  height: 17px;
-  line-height: 20px;
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  line-height: 16px;
 }
 
 .video-btn {
@@ -37,7 +37,7 @@ p {
   background: rgba(255, 255, 255, 0.75);
   cursor: pointer;
   padding: 0;
-  height: 20px;
+  height: 16px;
   float: left;
 }
 
@@ -64,6 +64,10 @@ p {
   float: right;
 }
 
+.filter-btn {
+  float: right;
+}
+
 .top-left-rounded {
   border-top-left-radius: 2px;
 }
@@ -94,6 +98,6 @@ p {
 .bottom-div {
   position: absolute;
   bottom: 0;
-  height: 20px;
+  height: 16px;
   width: 100%;
 }
\ No newline at end of file
diff --git a/openvidu-testapp/src/app/components/video/video.component.html b/openvidu-testapp/src/app/components/video/video.component.html
index 0a9830f85..aa59f1fd8 100644
--- a/openvidu-testapp/src/app/components/video/video.component.html
+++ b/openvidu-testapp/src/app/components/video/video.component.html
@@ -5,6 +5,9 @@
             <button class="video-btn events-btn bottom-left-rounded" title="Publisher events" (click)="openPublisherEventsDialog()">
                 <mat-icon aria-label="Publisher events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
             </button>
+            <button class="video-btn filter-btn" *ngIf="!this.unpublished" title="Filter configuration" (click)="filterConfig()">
+                <mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
+            </button>
             <button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
               <mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
             </button>
@@ -24,8 +27,8 @@
             <button *ngIf="!this.unpublished" class="video-btn change-publisher-btn" title="Change publisher" (click)="changePub()">
                 <mat-icon aria-label="Change publisher" class="mat-icon material-icons" role="img" aria-hidden="true">switch_video</mat-icon>
             </button>
-            <button *ngIf="!this.unpublished" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
-                <mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
+            <button *ngIf="!this.unpublished" class="video-btn reconnect-publisher-btn" title="Reconnect publisher" (click)="reconnect()">
+                <mat-icon aria-label="Reconnect publisher" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</mat-icon>
             </button>
             <button *ngIf="!this.unpublished" class="video-btn rec-btn publisher-rec-btn" title="Record" (click)="record()">
                 <mat-icon aria-label="Start/Stop local recording" class="mat-icon material-icons" role="img" aria-hidden="true">
@@ -44,6 +47,9 @@
             <button *ngIf="subbed" class="video-btn events-btn bottom-left-rounded" title="Subscriber events" (click)="openSubscriberEventsDialog()">
                 <mat-icon aria-label="Subscriber events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
             </button>
+            <button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
+                <mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</mat-icon>
+            </button>
             <button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
               <mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
             </button>
@@ -60,17 +66,15 @@
                 (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="!!pubSubVideoIcon" class="video-btn reconnect-subscriber-btn" title="Reconnect subscriber" (click)="reconnect()">
+                <mat-icon aria-label="Reconnect subscriber" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</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="OV.session.capabilities.forceDisconnect" class="video-btn filter-btn" title="Filter configuration" (click)="filterConfig()">
-                <mat-icon aria-label="Filter configuration" class="mat-icon material-icons" role="img" aria-hidden="true">filter_vintage</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>
diff --git a/openvidu-testapp/src/app/components/video/video.component.ts b/openvidu-testapp/src/app/components/video/video.component.ts
index 97ec6c709..5d8168712 100644
--- a/openvidu-testapp/src/app/components/video/video.component.ts
+++ b/openvidu-testapp/src/app/components/video/video.component.ts
@@ -327,6 +327,12 @@ export class VideoComponent implements OnInit, OnDestroy {
           this.publisherChanged = !this.publisherChanged;
       }
 
+      reconnect() {
+        this.streamManager.stream.reconnect()
+            .then(() => console.log(`Stream ${this.streamManager.stream} (${this.streamManager.remote ? 'Subscriber' : 'Publisher'}) successfully reconnected`))
+            .catch(error => console.error(`Error while reconnecting stream ${this.streamManager.stream} (${this.streamManager.remote ? 'Subscriber' : 'Publisher'})`, error));
+    }
+
       updateSubscriberEvents(oldValues) {
           const sub: Subscriber = <Subscriber>this.streamManager;