FS-8563 [verto_communicator] - Added callback to setAudioPlaybackDevice

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

@@ -1679,6 +1679,11 @@ body:-webkit-full-screen #incall .video-footer {
   animation: growY .2s reverse;
 }
 
+.unsupported {
+  color: grey;
+  font-size: 10px;
+}
+
 @keyframes growY {
   from { max-height:2000px;}
   to { max-height:0px;}

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

@@ -24,8 +24,13 @@
   </div>
 
   <div class="form-group">
-    <label for="settings-microphone">Speaker:</label>
-    <select name="microphone" id="settings-microphone" class="form-control"
+    <label for="settings-microphone">
+      Speaker:
+      <span ng-show="!speakerFeature" class="unsupported">
+        Your browser doesn't seem to support this feature
+      </span>
+    </label>
+    <select name="microphone" id="settings-microphone" class="form-control" ng-disabled="!speakerFeature"
             ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
     </select>
   </div>

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

@@ -54,10 +54,9 @@
       });
 
       $rootScope.$on('changedSpeaker', function(event, speakerId) {
-        // This should provide feedback
-	//setAudioPlaybackDevice(<id>[,<callback>[,<callback arg>]]);
-	// if callback is set it will be called as callback(<bool success/fail>, <device name>, <arg if you supplied it>)
-        verto.data.call.setAudioPlaybackDevice(speakerId);
+        if (verto.data.call) {
+          verto.data.call.setAudioPlaybackDevice(speakerId, sinkIdCallback);
+        }
       });
 
       /**
@@ -527,6 +526,13 @@
           });
       };
 
+      function sinkIdCallback(success, deviceName) {
+        if (success) {
+          toastr.info('Speaker is now <span class="install">' + deviceName + '</a>', 'Success', { allowHtml: true });
+        } else {
+          toastr.error('Your browser doesn\'t seem to support this feature', 'Error');
+        }
+      }
 
     }
   );

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

@@ -12,6 +12,8 @@
         $scope.verto = verto;
         $scope.mydata = angular.copy(storage.data);
 
+        $scope.speakerFeature = typeof document.getElementById('webcam').sinkId !== 'undefined';
+
         $scope.ok = function() {
           if ($scope.mydata.selectedSpeaker != storage.data.selectedSpeaker) {
             $rootScope.$emit('changedSpeaker', $scope.mydata.selectedSpeaker);