From 0ccf74e24187b6884830e92b2651ef2c0e742dcf Mon Sep 17 00:00:00 2001
From: Waldyr de Souza <waldyr.ar@gmail.com>
Date: Thu, 29 Sep 2016 12:22:49 -0300
Subject: [PATCH] FS-9591 [verto_communicator] Adjust settings and fix preview
 bugs to improve user experience

---
 .../src/partials/settings.html                | 54 +++++++++++--------
 .../controllers/PreviewController.js          | 11 +++-
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/html5/verto/verto_communicator/src/partials/settings.html b/html5/verto/verto_communicator/src/partials/settings.html
index 92e7cfc1f7..8678bfb751 100644
--- a/html5/verto/verto_communicator/src/partials/settings.html
+++ b/html5/verto/verto_communicator/src/partials/settings.html
@@ -2,14 +2,7 @@
   <div class="content">
     <div class="col-md-4">
 
-      <div class="form-group" ng-show="mydata.useVideo">
-        <label for="settings-camera">{{ 'CAMERA_SETTINGS' | translate }}</label>
-        <select name="camera" id="settings-camera" class="form-control"
-                ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
-        </select>
-      </div>
-
-      <div class="form-group" ng-show="mydata.useVideo">
+      <div class="form-group">
         <label for="settings-share-device">{{ 'SHARE_DEVICE' | translate }}</label>
         <select name="share-device" id="settings-share-device" class="form-control"
                 ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
@@ -35,15 +28,9 @@
         </select>
       </div>
 
-      <div class="form-group">
-        <label for="settings-framerate">{{ 'BEST_FRAME_RATE' | translate }}</label>
-        <select name="settings-framerate" id="settings-framerate" class="form-control"
-                ng-model="mydata.bestFrameRate"
-                ng-options="item.id as item.label for item in verto.framerate"></select>
-      </div>
-
       <a class="btn btn-primary" href="" ng-click="showPreview()">{{ 'PREVIEW_SETTINGS' | translate }}</a>
       <a class="btn btn-primary" href="" ng-click="refreshDeviceList()">{{ 'REFRESH_DEVICE_LIST' | translate }}</a>
+      <a class="btn btn-primary" href="" ng-click="resetSettings()">{{ 'FACTORY_RESET_SETTINGS' | translate }}</a>
     </div>
     <div class="col-md-4">
       <div class="form-group">
@@ -128,6 +115,20 @@
           <p>{{ 'REMOTE_ENCODER' | translate }}</b>
         </div>
 
+        <div class="form-group" ng-show="mydata.useVideo">
+          <label for="settings-camera">{{ 'CAMERA_SETTINGS' | translate }}</label>
+          <select name="camera" id="settings-camera" class="form-control"
+                  ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="settings-framerate">{{ 'BEST_FRAME_RATE' | translate }}</label>
+          <select name="settings-framerate" id="settings-framerate" class="form-control"
+                  ng-model="mydata.bestFrameRate"
+                  ng-options="item.id as item.label for item in verto.framerate"></select>
+        </div>
+
         <div class="checkbox">
           <label>
             <input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
@@ -135,14 +136,22 @@
           </label>
         </div>
 
-        <div class="checkbox" ng-show="mydata.autoBand">
-          <label>
-            <input type="checkbox" ng-model="mydata.testSpeedJoin">
-            <span ng-bind="'RECHECK_BANDWIDTH' | translate"></span>
-          </label>
-        </div>
+        <div ng-show="mydata.autoBand">
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" ng-model="mydata.testSpeedJoin">
+              <span ng-bind="'RECHECK_BANDWIDTH' | translate"></span>
+            </label>
+          </div>
 
-        <a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">{{ 'CHECK_NETWORK_SPEED' | translate }}</a> <span ng-bind="speedMsg"></span>
+          <a class="btn btn-primary" href="" ng-click="testSpeed()">
+            {{ 'CHECK_NETWORK_SPEED' | translate }}
+          </a>
+
+          <div>
+            <span ng-bind="speedMsg"></span>
+          </div>
+        </div>
 
         <div ng-show="!mydata.autoBand">
           <label for="video-quality">{{ 'VIDEO_QUALITY' | translate }}</label>
@@ -168,7 +177,6 @@
                   ng-options="item.id as item.label for item in verto.bandwidth"></select>
         </div>
       </div>
-      <button class="btn btn-danger pull-left btn-pull-left" ng-click="resetSettings()">{{ 'FACTORY_RESET_SETTINGS' | translate }}</button>
     </div>
   </div>
 </div>
diff --git a/html5/verto/verto_communicator/src/vertoControllers/controllers/PreviewController.js b/html5/verto/verto_communicator/src/vertoControllers/controllers/PreviewController.js
index 1379409cfe..9f437909c8 100644
--- a/html5/verto/verto_communicator/src/vertoControllers/controllers/PreviewController.js
+++ b/html5/verto/verto_communicator/src/vertoControllers/controllers/PreviewController.js
@@ -24,9 +24,16 @@
             }
           };
 
-          if (storage.data.selectedVideo !== 'none') {
+          var newDevice = verto.data.videoDevices.find(function(device) {
+            return device.id == storage.data.selectedVideo;
+          });
+
+          storage.data.selectedVideo = newDevice.id;
+          storage.data.selectedVideoName = newDevice.label;
+
+          if (newDevice.id !== 'none') {
             constraints.video = {
-              optional: [{ sourceId: storage.data.selectedVideo }]
+              optional: [{ sourceId: newDevice.id }]
             };
           }