FS-8293 [verto_communicator] - Showing speed in the menu bar if autoBand is true, adding option to test speed before making a call, enabling dedEnc if inboundBandwidth is below dedEncWatermark (3072 by default).

FS-8293 [verto_communicator] - Changed info in the top menu bar for a icon+popover, changed autoBand's code in testSpeed method, moved 'Bandwidth settings' to 'Video settings' in settings modal and now hidding video quality selection when autoBand is checked.
FS-8293 [verto_communicator] - Better bandwidth info ui.
FS-8293 [verto_communicator] - Fixed speed test breaking at splash screen if user isn't logged in.

html5/verto/verto_communicator/src/config.json

@@ -1,4 +1,5 @@
 {
       "login": "1008",
-      "password": "1234"
+      "password": "1234",
+      "dedEncWatermark": 3072
 }

html5/verto/verto_communicator/src/config.json.sample

@@ -9,5 +9,6 @@
       "autologin": "true",
       "autocall": "3500",
       "googlelogin": "true",
-      "wsURL": "wss://gamma.tollfreegateway.com/wss2"
+      "wsURL": "wss://gamma.tollfreegateway.com/wss2",
+      "dedEncWatermark": 3072
 }

html5/verto/verto_communicator/src/css/verto.css

@@ -1481,6 +1481,35 @@ body:-webkit-full-screen #incall .video-footer {
 .preview-wrapper video {
   transform: scaleX(-1);
 }
+
+.drop-net-info {
+  padding-top: 0px;
+  cursor: default;
+}
+
+.drop-net-info .title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+}
+
+.drop-net-info .title:hover {
+  background-color: #f7f7f7;
+}
+
+.drop-net-info a:hover {
+  color: #333 !important;
+}
+
+.net-info .dedenc {
+  color: #e3d95b;
+}
+
 #mic-meter {
   position: absolute;
   bottom: 5px;

html5/verto/verto_communicator/src/partials/dialpad.html

@@ -1,4 +1,10 @@
-<div class="centered-block-frame" id="dialpad">
+<div ng-show="loading">
+  <h3 style="margin-top: 4%;" class="text-center">Calling to {{ dialpadNumber }}...</h3>
+  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+  </svg>
+</div>
+<div class="centered-block-frame" id="dialpad" ng-show="!loading">
   <div id="call-history-wrapper">
     <div id="call_history" class="shadow-z-2 panel">
       <div class="panel-heading">

html5/verto/verto_communicator/src/partials/menu.html

@@ -19,9 +19,21 @@
     </div>
     <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav navbar-right">
+        <li class="navbar-item-icon net-info" ng-show="(bandUp || bandDown) && storage.data.autoBand">
+          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+            <i ng-class="iconClass"></i>
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu drop-net-info" role="menu" ng-click="$event.stopPropagation()">
+            <li><a class="title">Bandwidth Info</a></li>
+            <li><a>Outgoing: {{bandUp}} Kbps</a></li>
+            <li><a>Incoming: {{bandDown}} Kbps</a></li>
+            <li><a>Video Resolution: {{vidRes}}</a></li>
+          </ul>
+        </li>
         <li>
           <a href="">
-              <i class="mdi-toggle-radio-button-on" user-status condition="storage.data.userStatus"></i>
+            <i class="mdi-toggle-radio-button-on" user-status condition="storage.data.userStatus"></i>
           </a>
         </li>
         <li>
@@ -29,7 +41,6 @@
               {{ storage.data.called_number && storage.data.userStatus == 'connecting' ? 'Last Call: ' : 'In Call: '  }} {{ storage.data.called_number  }}
           </a>
         </li>
-
         <li class="navbar-item-icon" ng-show="verto.data.connected">
           <a href="" ng-click="openModal('partials/modal_settings.html', 'ModalSettingsController')">
             <i class="mdi-action-settings"></i>

html5/verto/verto_communicator/src/partials/modal_settings.html

@@ -84,37 +84,53 @@
   </div>
 
   <div class="form-group">
-    <label for="video-quality">Video quality:</label>
+    <label>Video settings:</label>
-    <select name="video_quality" id="video-quality" class="form-control"
+    <!-- <a class="btn btn-primary" href="" ng-click="testSpeed()">Check Speed</a> -->
-            ng-model="mydata.vidQual"
+    <span ng-bind="speedMsg"></span>
-            ng-options="item.id as item.label for item in verto.videoQuality"></select>
 
-    <a class="btn btn-primary" href="" ng-click="testSpeed()">Check Speed</a>
+    <input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
-  </div>
 
-  <input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
 
-  <h4>Dedicated Remote Encoder</h4>
+    <div ng-show="mydata.useDedenc" class="dedicated_encoder">
-  <h5>Select a non default bandwidth to use a dedicated remote encoder.</h5>
+      <p>Dedicated Remote Encoder enabled.</b>
+    </div>
 
-  <div ng-show="mydata.useDedenc" class="dedicated_encoder">
+    <div class="checkbox">
-    <p>Dedicated Remote Encoder enabled.</b>
+      <label>
-  </div>
+        <input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
+        Auto
+      </label>
+    </div>
 
-  <div class="form-group">
+    <div class="checkbox" ng-show="mydata.autoBand">
-    <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
+      <label>
-    <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
+        <input type="checkbox" ng-model="mydata.testSpeedJoin">
-            ng-model="mydata.outgoingBandwidth"
+        Check bandwidth before joining call
-	    ng-change="checkUseDedRemoteEncoder(mydata.outgoingBandwidth)"
+      </label>
-            ng-options="item.id as item.label for item in verto.bandwidth"></select>
+    </div>
-  </div>
 
-  <div class="form-group">
+    <div ng-show="!mydata.autoBand">
-    <label for="incoming-bandwidth">Max incoming bandwidth:</label>
+      <label for="video-quality">Video quality:</label>
-    <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
+      <select name="video_quality" id="video-quality" class="form-control"
-            ng-model="mydata.incomingBandwidth"
+              ng-disabled="mydata.autoBand"
-	    ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
+              ng-model="mydata.vidQual"
-            ng-options="item.id as item.label for item in verto.bandwidth"></select>
+              ng-options="item.id as item.label for item in verto.videoQuality"></select>
+    </div>
+
+    <div ng-show="!mydata.autoBand">
+      <label for="incoming-bandwidth">Max incoming bandwidth:</label>
+      <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
+              ng-model="mydata.incomingBandwidth"
+  	    ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
+              ng-options="item.id as item.label for item in verto.bandwidth"></select>
+    </div>
+
+    <div ng-show="!mydata.autoBand">
+      <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
+      <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
+              ng-model="mydata.outgoingBandwidth"
+              ng-options="item.id as item.label for item in verto.bandwidth"></select>
+    </div>
   </div>
 
 </div>

html5/verto/verto_communicator/src/storageService/services/splash_screen.js

@@ -82,15 +82,13 @@
               'message': 'Check Connection Speed.'
             };
 
-            if(!verto.instance) {
+            if (storage.data.autoBand && verto.instance) {
+              verto.testSpeed(cb);
+            } else {
               resolve(result);
-              return;
             }
 
-            verto.testSpeed(cb);
-
             function cb(data) {
-
               resolve(result);
             }
           });

html5/verto/verto_communicator/src/storageService/services/storage.js

@@ -35,7 +35,9 @@
           askRecoverCall: false,
           googNoiseSuppression: true,
           googHighpassFilter: true,
-          googEchoCancellation: true
+          googEchoCancellation: true,
+          autoBand: true,
+          testSpeedJoin: true
        };
 
     data.$default(defaultSettings);

html5/verto/verto_communicator/src/vertoControllers/controllers/DialPadController.js

@@ -97,8 +97,17 @@
         /**
          * Call to the number in the $rootScope.dialpadNumber.
          */
+        $scope.loading = false;
         $rootScope.call = function(extension) {
-          return call(extension);
+          if (!storage.data.testSpeedJoin || !$rootScope.dialpadNumber) {
+            return call(extension);
+          }
+          $scope.loading = true;
+
+          verto.testSpeed(function() {
+            $scope.loading = false;
+            call(extension);
+          });
         }
       }
     ]);

html5/verto/verto_communicator/src/vertoControllers/controllers/MainController.js

@@ -52,7 +52,9 @@
             storage.data.email = verto.data.email;
             storage.data.login = verto.data.login;
             storage.data.password = verto.data.password;
-            verto.testSpeed();
+            if (storage.data.autoBand) {
+              verto.testSpeed();
+            }
 
             if (redirect && storage.data.preview) {
               $location.path('/preview');
@@ -181,6 +183,9 @@
       };
 
       function onWSLogin(ev, data) {
+        if(storage.data.autoBand) {
+          verto.testSpeed();
+        }
         if(!ws_modalInstance) {
           return;
         };

html5/verto/verto_communicator/src/vertoControllers/controllers/MenuController.js

@@ -4,10 +4,36 @@
   angular
     .module('vertoControllers')
 	.controller('MenuController', ['$scope', '$http', '$location',
-	  'verto', 'storage',
+	  'verto', 'storage', '$rootScope',
-	  function($scope, $http, $location, verto, storage) {
+	  function($scope, $http, $location, verto, storage, $rootScope) {
 	    console.debug('Executing MenuController.');
-	  }
+      $scope.storage = storage;
+
+      $rootScope.$on('testSpeed', function(e, data) {
+        var dedEncWatermark = storage.data.dedEncWatermark;
+        var vidQual = storage.data.vidQual;
+
+        $scope.bandDown = data.downKPS;
+        $scope.bandUp = data.upKPS;
+        $scope.dedEnc = storage.data.useDedenc;
+
+        $scope.iconClass = 'mdi-device-signal-wifi-3-bar';
+
+        if ($scope.bandDown < dedEncWatermark) {
+          $scope.iconClass = 'mdi-device-signal-wifi-1-bar dedenc';
+        } else if ($scope.bandDown >= 2*dedEncWatermark) {
+          $scope.iconClass = 'mdi-device-signal-wifi-4-bar';
+        }
+
+        verto.videoQuality.forEach(function(vid) {
+          if (vid.id == vidQual){
+            $scope.vidRes = vid.label;
+          }
+        });
+
+        $scope.$apply();
+      });
+    }
 	]);
 
 })();

html5/verto/verto_communicator/src/vertoControllers/controllers/ModalSettingsController.js

@@ -15,6 +15,9 @@
         $scope.ok = function() {
           storage.changeData($scope.mydata);
           verto.data.instance.iceServers(storage.data.useSTUN);
+          if (storage.data.autoBand) {
+            $scope.testSpeed();
+          }
           $modalInstance.close('Ok.');
         };
 
@@ -30,7 +33,8 @@
           return verto.testSpeed(cb);
 
           function cb(data) {
-
+            $scope.mydata.vidQual = storage.data.vidQual;
+            $scope.speedMsg = 'Up: ' + data.upKPS + ' Down: ' + data.downKPS;
             $scope.$apply();
           }
         };
@@ -44,11 +48,22 @@
 	  };
         };
 
-        $scope.checkUseDedRemoteEncoder = function(option) {
+        $scope.checkAutoBand = function(option) {
-          if ($scope.mydata.incomingBandwidth != 'default' || $scope.mydata.outgoingBandwidth != 'default') {
+          $scope.mydata.useDedenc = false;
-            $scope.mydata.useDedenc = true;
+          if (!option) {
+            $scope.mydata.outgoingBandwidth = 'default';
+            $scope.mydata.incomingBandwidth = 'default';
+            $scope.mydata.vidQual = 'hd';
           } else {
+            $scope.mydata.testSpeedJoin = true;
+          }
+        };
+
+        $scope.checkUseDedRemoteEncoder = function(option) {
+          if (['0', 'default', '5120'].indexOf(option) != -1) {
             $scope.mydata.useDedenc = false;
+          } else {
+            $scope.mydata.useDedenc = true;
           }
         };
       }

html5/verto/verto_communicator/src/vertoService/services/configService.js

@@ -41,6 +41,12 @@ vertoService.service('config', ['$rootScope', '$http', '$location', 'storage', '
           verto.data.googleclientid = data.googleclientid;
         }
 
+        if (data.dedEncWatermark) {
+          storage.data.dedEncWatermark = data.dedEncWatermark;
+        } else {
+          storage.data.dedEncWatermark = 3072;
+        }
+        
         angular.extend(verto.data, data);
 
         /**
@@ -79,4 +85,3 @@ vertoService.service('config', ['$rootScope', '$http', '$location', 'storage', '
       'configure': configure
     };
   }]);
-

html5/verto/verto_communicator/src/vertoService/services/vertoService.js

@@ -805,20 +805,29 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
       testSpeed: function(cb) {
 
         data.instance.rpcClient.speedTest(1024 * 256, function(e, data) {
-          var outBand = Math.ceil(data.upKPS * .75),
+          var upBand = Math.ceil(data.upKPS * .75),
-              inBand = Math.ceil(data.downKPS * .75);
+              downBand = Math.ceil(data.downKPS * .75);
 
-          storage.data.vidQual = 'hd';
 
-          if (outBand < 1024) {
+          if (storage.data.autoBand) {
-            storage.data.vidQual = 'vga';
+            storage.data.incomingBandwidth = downBand;
-          }
+            storage.data.outgoingBandwidth = upBand;
-          if (outBand < 512) {
+            storage.data.useDedenc = downBand <= storage.data.dedEncWatermark;
-            storage.data.vidQual = 'qvga';
+            storage.data.vidQual = 'hd';
+
+            if (upBand < 512) {
+              storage.data.vidQual = 'qvga';
+            }
+            else if (upBand < 1024) {
+              storage.data.vidQual = 'vga';
+            }
           }
 
-          if(cb) cb(data);
+          if(cb) {
-          // console.info("Up: " + data.upKPS, "Down: ", data.downKPS);
+            cb(data);
+          }
+
+          $rootScope.$emit('testSpeed', data);
         });
       },
       /**