Merge pull request #614 in FS/freeswitch from…

Merge pull request #614 in FS/freeswitch from ~JAONZE/freeswitch:bugfix/FS-7800-add-support-for-fs-7769-feature-set to master

* commit '05ff8ec7':
  FS-7800 [verto_communicator] - Added Canvas controls and now opening popup with original (master)  dimensions
  FS-7800 [verto_communicator] - Added an option in user's hover buttons to open another canvas when canvasCount is higher than 1

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

@@ -861,6 +861,10 @@ body .modal-body .btn-group .btn.active {
         padding-right: 360px;
     }
 
+    .watcher #wrapper {
+      padding-right: 0;
+    }
+
     #wrapper.toggled {
         padding-right: 0;
     }
@@ -1566,3 +1570,42 @@ body:-webkit-full-screen #incall .video-footer {
 #preview .refresh {
   margin: 15px 0px 0px 0px;
 }
+
+.watcher {
+  padding: 0;
+  background-color: #333333;
+}
+
+.watcher .navbar, .watcher #sidebar-wrapper, .watcher #dialpad {
+  display: none;
+}
+
+.watcher #wrapper.toggled {
+  padding-right: 0;
+}
+
+.watcher #incall .panel {
+  margin: 0;
+}
+
+.watcher #video-tag-wrapper {
+  background: linear-gradient(to bottom, #272627, #27252A);
+  background-color: #27252A;
+}
+
+.watcher #incall .video-call {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  max-width: none;
+  max-height: none;
+}
+
+.watcher #webcam {
+  max-width: 160.78vh;
+  margin: auto;
+}
+
+.watcher .spinner {
+  top: 20%;
+}

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

@@ -93,6 +93,24 @@
                 Transfer
               </a>
             </li>
+            <li>
+              <a href="" ng-click="confCanvasIn(member.id)">
+                <span class="mdi-fw  mdi-image-switch-video"></span>
+                Canvas In
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confCanvasOut(member.id)">
+                <span class="mdi-fw mdi-action-swap-horiz"></span>
+                Canvas Out
+              </a>
+            </li>
+            <li>
+              <a href="" ng-click="confLayer(member.id)">
+                <span class="mdi-fw mdi-action-view-carousel"></span>
+                Layer
+              </a>
+            </li>
           </ul>
         </div>
       </div>

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

 <div class="centered-block-frame" id="incall">
-  <div class="col-md-12 centered-block" ng-class="{'video-call': storage.data.videoCall, 'phone-call': !storage.data.videoCall}">
+  <div class="col-md-12 centered-block" ng-class="storage.data.videoCall || watcher ? 'video-call' : 'phone-call'">
     <div class="slide-animate height100" ng-include="callTemplate"></div>
   </div>
 </div>

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

 <div class="panel panel-default shadow-z-0">
   <div class="video-wrapper">
-    <div class="video-hover-buttons" ng-show="verto.data.callState == 'active'">
+    <div class="video-hover-buttons" ng-show="verto.data.callState == 'active' && !watcher">
       <div id="moderator-tools" ng-show="verto.data.confRole == 'moderator'">
         <button tooltip-placement="bottom" tooltip-title="Play" uib-tooltip="Play"
                 class="btn btn-material-blue-900" ng-click="play()">
@@ -68,6 +68,17 @@
             </li>
           </ul>
         </div>
+        <div class="btn-group" ng-show="conf.canvasCount > 1">
+          <button tooltip-placement="bottom" tooltip-title="Popup" uib-tooltips="Popup" type="button" class="btn btn-material-blue-900 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="mdi-image-filter-none"></i>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li ng-repeat="canvas in canvases">
+              <a ng-click="confPopup(canvas.id)">{{ canvas.name }}</a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
     <div class="video-tag-wrapper" id="video-tag-wrapper" ng-dblclick="goFullscreen()" show-controls>
@@ -80,13 +91,14 @@
       <div class="row">
         <div class="col-md-6 col-xs-6 text-left">
           <div class="video-timer">
-            <timer start-time="start_time" autostart="false" interval="1000">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
+            <span ng-show="watcher" style="font-size: 18px">Room {{ extension }} - Canvas {{ canvasID }}</span>
+            <timer start-time="start_time" autostart="false" interval="1000" ng-if="!watcher">{{hhours}}:{{mminutes}}:{{sseconds}}</timer>
           </div>
         </div>
         <div class="col-md-6 col-xs-6 text-right">
           <button class="btn btn-danger" ng-click="hangup()">
             <i class="mdi-communication-call-end"></i>
-            End Call
+            {{ watcher ? 'Close' : 'End Call' }}
           </button>
         </div>
       </div>

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

@@ -131,6 +131,11 @@
       });
 
       $rootScope.$on('members.del', function(event, uuid) {
+        if ($rootScope.watcher && $rootScope.master === uuid) {
+          verto.hangup();
+          window.close();
+        }
+
         $scope.$apply(function() {
           var memberIdx = findMemberByUUID(uuid);
           if (memberIdx != -1) {
@@ -229,6 +234,41 @@
         });
       };
 
+      $scope.confCanvasIn = function(memberID, canvasID) {
+        if (canvasID) {
+          verto.setCanvasIn(memberID, canvasID);
+          return;
+        }
+
+        shortPrompt('Please insert the Canvas Id', function(canvasID) {
+          console.log(memberID, canvasID);
+          verto.setCanvasIn(memberID, canvasID);
+        });
+
+      };
+
+      $scope.confCanvasOut = function(memberID, canvasID) {
+        if (canvasID) {
+          verto.setCanvasOut(memberID, canvasID);
+          return;
+        }
+
+        shortPrompt('Please insert the Canvas Id', function(canvasID) {
+          verto.setCanvasOut(memberID, canvasID);
+        });
+      };
+
+      $scope.confLayer = function(memberID, canvasID) {
+        if (canvasID) {
+          verto.setLayer(memberID, canvasID);
+          return;
+        }
+
+        shortPrompt('Please insert the Layer', function(canvasID) {
+          verto.setLayer(memberID, canvasID);
+        });
+      };
+
       $scope.confResetBanner = function(memberID) {
         console.log('$scope.confResetBanner');
         var text = 'reset';
@@ -259,6 +299,19 @@
           }
         });
       };
+
+      function shortPrompt(text, cb) {
+        prompt({
+          title: text,
+          input: true,
+          label: '',
+          value: '',
+        }).then(function(val) {
+          if (val && cb) {
+            cb(val);
+          }
+        });
+      }
     }
   ]);
 

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

@@ -10,6 +10,15 @@
 
         eventQueue.process();
 
+        if ($location.search().autocall) {
+            $rootScope.dialpadNumber = $location.search().autocall;
+            delete $location.search().autocall;
+            call($rootScope.dialpadNumber);
+            if($rootScope.watcher) {
+              return;
+            }
+        }
+
         $scope.call_history = CallHistory.all();
         $scope.history_control = CallHistory.all_control();
         $scope.has_history = Object.keys($scope.call_history).length;
@@ -32,11 +41,6 @@
         /**
          * fill dialpad via querystring [?autocall=\d+]
          */
-        if ($location.search().autocall) {
-            $rootScope.dialpadNumber = $location.search().autocall;
-	    delete $location.search().autocall;
-            call($rootScope.dialpadNumber);
-        }
 
 	/**
 	 * fill in dialpad via config.json
@@ -83,6 +87,13 @@
             return false;
           }
 
+          if (extension.indexOf('-canvas-') != -1) {
+            $rootScope.watcher = true;
+            verto.call($rootScope.dialpadNumber, null, { useCamera: false, useMic: false, caller_id_name: null, userVariables: {}, caller_id_number: null, mirrorInput: false });
+            $location.path('/incall');
+            return;
+          }
+
           storage.data.mutedVideo = false;
           storage.data.mutedMic = false;
 

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

@@ -15,7 +15,6 @@
         $scope.dialpadTemplate = '';
         $scope.incall = true;
 
-
         if (storage.data.videoCall) {
           $scope.callTemplate = 'partials/video_call.html';
         }
@@ -25,6 +24,7 @@
             if($scope.chatStatus) {
               $scope.openChat();
             }
+            buildCanvasesData();
           });
         });
 
@@ -82,6 +82,24 @@
           $rootScope.$emit('changedSpeaker', speakerId);
         };
 
+        $scope.confPopup = function(canvas_id) {
+          var video = document.getElementById('webcam');
+          var s = window.location.href;
+          var curCall = verto.data.call.callID;
+          var extension = verto.data.call.params.remote_caller_id_number;
+          var width = webcam.offsetWidth;
+          var height = webcam.offsetHeight + 100;
+          var x = (screen.width - width)/2
+          var y = (screen.height - height)/2
+
+          s = s.replace(/\#.*/, '');
+          s += "#/?sessid=random&master=" + curCall + "&watcher=true&extension=" + extension+ "&canvas_id=" + canvas_id;
+
+          console.log("opening new window to " + s);
+          var popup = window.open(s, "canvas_window_" + canvas_id, "toolbar=0,location=0,menubar=0,directories=0,width=" + width + ",height=" + height, + ',left=' + x + ',top=' + y);
+          popup.moveTo(x, y);
+        };
+
         $scope.screenshare = function() {
           if(verto.data.shareCall) {
             verto.screenshareHangup();
@@ -90,6 +108,14 @@
           verto.screenshare(storage.data.called_number);
         };
 
+        function buildCanvasesData() {
+          $scope.conf = verto.data.conf.params.laData;
+          $scope.canvases = [{ id: 1, name: 'Super Canvas' }];
+          for (var i = 1; i < $scope.conf.canvasCount; i++) {
+            $scope.canvases.push({ id: i+1, name: 'Canvas ' + (i+1) });
+          }
+        }
+
         $scope.muteMic = verto.muteMic;
         $scope.muteVideo = verto.muteVideo;
 

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

@@ -8,6 +8,24 @@
 
       console.debug('Executing MainController.');
 
+      $rootScope.master = $location.search().master;
+      if ($location.search().watcher === 'true') {
+        $rootScope.watcher = true;
+        angular.element(document.body).addClass('watcher');
+        var dialpad;
+        var extension = dialpad = $location.search().extension;
+        var canvasID = $location.search().canvas_id;
+
+        if (dialpad) {
+          if (canvasID) {
+            dialpad += '-canvas-' + canvasID;
+          }
+          $rootScope.extension = extension;
+          $rootScope.canvasID = canvasID;
+          $location.search().autocall = dialpad;
+        }
+      }
+
       var myVideo = document.getElementById("webcam");
       $scope.verto = verto;
       $scope.storage = storage;
@@ -432,6 +450,11 @@
           return;
         }
 
+        if ($rootScope.watcher) {
+          window.close();
+          return;
+        }
+
         //var hangupCallback = function(v, hangup) {
         //  if (hangup) {
         //    $location.path('/dialpad');

html5/verto/verto_communicator/src/vertoDirectives/directives/videoTag.js

@@ -32,4 +32,4 @@
     }
   });
 
-})();
\ No newline at end of file
+})();

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

@@ -605,6 +605,11 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
 
         var that = this;
         function ourBootstrap() {
+          var sessid = $location.search().sessid;
+          if (sessid === 'random') {
+            sessid = $.verto.genUUID();
+            $location.search().sessid = sessid;
+          }
           // Checking if we have a failed connection attempt before
           // connecting again.
           if (data.instance && !data.instance.rpcClient.socketReady()) {
@@ -625,6 +630,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
                 googNoiseSuppression: storage.data.googNoiseSuppression || true,
                 googHighpassFilter: storage.data.googHighpassFilter || true
             },
+            sessid: sessid,
             iceServers: storage.data.useSTUN
           }, callbacks);
 
@@ -635,6 +641,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
           jQuery.verto.unloadJobs.push(function() {
             that.reloaded = true;
           });
+
           data.instance.deviceParams({
             useCamera: storage.data.selectedVideo,
             useSpeak: storage.data.selectedSpeaker,
@@ -695,10 +702,10 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
        *
        * @param callback
        */
-      call: function(destination, callback) {
+      call: function(destination, callback, custom) {
         console.debug('Attempting to call destination ' + destination + '.');
 
-        var call = data.instance.newCall({
+        var call = data.instance.newCall(angular.extend({
           destination_number: destination,
           caller_id_name: data.name,
           caller_id_number: data.callerid ? data.callerid : data.email,
@@ -715,7 +722,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
             email : storage.data.email,
             avatar: "http://gravatar.com/avatar/" + md5(storage.data.email) + ".png?s=600"
           }
-        });
+        }, custom));
 
         data.call = call;
 
@@ -933,6 +940,15 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
       sendConferenceChat: function(message) {
         data.conf.sendChat(message, "message");
       },
+      setCanvasIn: function(memberID, canvasID) {
+        data.conf.modCommand('vid-canvas', memberID, canvasID);
+      },
+      setCanvasOut: function(memberID, canvasID) {
+        data.conf.modCommand('vid-watching-canvas', memberID, canvasID);
+      },
+      setLayer: function(memberID, canvasID) {
+        data.conf.modCommand('vid-layer', memberID, canvasID);
+      },
       /*
       * Method is used to set a member's resevartion Id.
       */