FS-8264 [verto_communicator] - Adapted the layout select to new response, added a separated menu in members list to set its resevartion id

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

@@ -21,7 +21,6 @@ body {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  width: 160px;
   display: inline-block;
 }
 
@@ -604,12 +603,24 @@ body .modal-body .btn-group .btn.active {
   transition-delay:0s;
 }
 
+
+#incall .dropdown-menu .selected {
+  background-color: #ccc;
+  color: white;
+}
+
+#incall .dropdown-menu .selected:hover {
+  background-color: #ccc;
+  color: white;
+  cursor: pointer;
+}
+
 #incall .video-hover-buttons .btn-group .dropdown-menu {
   max-height: 200px;
   overflow: auto;
 }
 
-#incall .video-hover-buttons .btn-group ul li a:hover {
+#incall .video-hover-buttons .btn-group ul li a:not(.selected):hover {
   background-color: #EEE;
   cursor: pointer;
 }
@@ -906,13 +917,11 @@ body .modal-body .btn-group .btn.active {
 }
 
 .members-name {
-  width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  width: 140px;
 }
 
 .members-number {
+  width: 140px;
   font-size: 10px;
 }
 
@@ -970,6 +979,7 @@ body .modal-body .btn-group .btn.active {
   display: inline-block;
   line-height: 16px;
   margin-top: -3px;
+  width: 140px;
 }
 
 .chat-members .chat-members-status i {
@@ -1018,6 +1028,17 @@ body .modal-body .btn-group .btn.active {
   vertical-align: -2px;
 }
 
+.chat-members .resevartion-menu .icon {
+  color: #C5C5C5;
+}
+
+.chat-members .resevartion-menu .dropdown-menu {
+  min-width: 0;
+}
+
+.chat-members .resevartion-menu .dropdown-menu .selected {
+  font-weight: bold;
+}
 
 /*.chat-messages {*/
   /*border-top: 1px solid #E5E5E5;*/

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

@@ -23,12 +23,12 @@
       </span>
       <!-- FIXME(italo): Put this whole block in a flex box to avoid defining fixed width.-->
       <h4 class="chat-members-name">
-        <div class="members-name">{{ member.name }}</div>
+        <div class="ellipsis members-name">{{ member.name }}</div>
 	<small class="ellipsis members-number">({{ member.number }})</small>
 
 	<div class="members-badges">
    	  <div ng-if="member.status.video.floor" class="label badge-floor" ng-class="{'label-danger': member.status.video.floorLocked, 'label-info': !member.status.video.floorLocked}"><i class="mdi mdi-action-https lock-floor" ng-if="member.status.video.floorLocked"></i> <span>Floor</span></div>
-          <div ng-if="member.status.video.reservationID == 'presenter'" class="label label-info">Presenter</div>
+          <div class="label label-info text-capitalize">{{ member.status.video.reservationID }}</div>
           <div ng-if="member.status.video.screenShare" class="label label-info">Screen Share</div>
 	</div>
       </h4>
@@ -57,12 +57,6 @@
                 Mute/Unmute Video
               </a>
             </li>
-            <li>
-              <a href="" ng-click="confPresenter(member.id)">
-                <span class="mdi-fw mdi-action-picture-in-picture"></span>
-                Presenter
-              </a>
-            </li>
             <li>
               <a href="" ng-click="confVideoFloor(member.id)">
                 <span class="mdi-fw mdi-action-aspect-ratio"></span>
@@ -103,6 +97,21 @@
         </div>
       </div>
 
+      <div class="pull-right resevartion-menu chat-members-action" ng-show="verto.data.confRole == 'moderator' && resIDs.length > 0">
+        <div class="btn-group">
+          <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
+            <i class="mdi-action-picture-in-picture icon" style="margin-right: 0px;"></i>
+          </button>
+          <ul class="dropdown-menu slidedown pull-right">
+            <li ng-repeat="resID in resIDs">
+              <a href="" class="text-capitalize" ng-class="{ 'selected': resID == member.status.video.reservationID }" ng-click="confResID(member.id, resID)">
+                {{ resID }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
       <span class="chat-members-status pull-right">
         <i ng-click="confMuteMic(member.id)" class="in-use" ng-class="{'clickable': verto.data.confRole == 'moderator', 'mdi-av-mic': !member.status.audio.muted, 'mdi-av-mic-off': member.status.audio.muted, 'mic_talking': member.status.audio.talking}"></i>
         <i ng-click="confMuteVideo(member.id)" ng-class="{'clickable': verto.data.confRole == 'moderator', 'mdi-av-videocam': !member.status.video.muted, 'mdi-av-videocam-off': member.status.video.muted, 'in-use': (member.status.video && !member.status.video.muted), 'disabled': !member.status.video}"></i>

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

@@ -31,7 +31,7 @@
         </button>
         <ul class="dropdown-menu">
           <li ng-repeat="layout in verto.data.confLayouts">
-            <a ng-click="confChangeVideoLayout(layout)">{{ layout }}</a>
+            <a ng-click="confChangeVideoLayout(layout)" ng-class="{ 'selected': layout == videoLayout }">{{ layout }}</a>
           </li>
         </ul>
       </div>

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

@@ -49,6 +49,39 @@
         });
       });
 
+
+      $rootScope.$on('changedVideoLayout', function(event, layout) {
+        $scope.resIDs = getResByLayout(layout);
+
+        // remove resIDs param to clear every members resID.
+        // passing $scope.resIDs results in preserving resIDs compatible
+        // with the current layout
+        clearMembersResID($scope.resIDs);
+      });
+
+      $rootScope.$on('conference.canvasInfo', function(event, data) {
+        $scope.currentLayout = data[0].layoutName;
+        $scope.resIDs = getResByLayout($scope.currentLayout);
+      });
+
+      function getResByLayout(layout) {
+        var layoutsData = verto.data.confLayoutsData;
+        for (var i = 0; i < layoutsData.length; i++) {
+          if (layoutsData[i].name === layout) {
+            return layoutsData[i].resIDS;
+          }
+        }
+      }
+
+      // @preserve - a array of values to be preserved
+      function clearMembersResID(preserve) {
+        $scope.members.forEach(function(member) {
+          var resID = member.status.video.reservationID;
+          if (preserve && preserve.indexOf(resID) !== -1) return;
+            $scope.confResID(member.id, resID);
+        });
+      };
+
       function findMemberByUUID(uuid) {
         var found = false;
         for (var idx in $scope.members) {
@@ -171,6 +204,11 @@
         verto.data.conf.presenter(memberID);
       };
 
+      $scope.confResID = function(memberID, resID) {
+        console.log('Set', memberID, 'to', resID);
+        verto.setResevartionId(memberID, resID);
+      };
+
       $scope.confVideoFloor = function(memberID) {
         console.log('$scope.confVideoFloor');
         verto.data.conf.videoFloor(memberID);

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

@@ -73,6 +73,8 @@
 
         $scope.confChangeVideoLayout = function(layout) {
           verto.data.conf.setVideoLayout(layout);
+          $scope.videoLayout = layout;
+          $rootScope.$emit('changedVideoLayout', layout);
         };
 
         $scope.confChangeSpeaker = function(speakerId) {

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

@@ -391,7 +391,27 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
               if (message.action == 'response') {
                 // This is a response with the video layouts list.
                 if (message['conf-command'] == 'list-videoLayouts') {
-                  data.confLayouts = message.responseData.sort();
+                  var rdata = [];
+
+                  for (var i in message.responseData) {
+                    rdata.push(message.responseData[i].name);
+                  }
+
+                  var options = rdata.sort(function(a, b) {
+                    var ga = a.substring(0, 6) == "group:" ? true : false;
+                    var gb = b.substring(0, 6) == "group:" ? true : false;
+
+                    if ((ga || gb) && ga != gb) {
+                      return ga ? -1 : 1;
+                    }
+
+                    return ( ( a == b ) ? 0 : ( ( a > b ) ? 1 : -1 ) );
+                  });
+                  data.confLayoutsData = message.responseData;
+                  data.confLayouts = options;
+                } else if (message['conf-command'] == 'canvasInfo') {
+                  data.canvasInfo = message.responseData;
+                  $rootScope.$emit('conference.canvasInfo', message.responseData);
                 } else {
                   $rootScope.$emit('conference.broadcast', message);
                 }
@@ -402,6 +422,7 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
           if (data.confRole == "moderator") {
             console.log('>>> conf.listVideoLayouts();');
             conf.listVideoLayouts();
+            conf.modCommand('canvasInfo');
           }
 
           data.conf = conf;
@@ -913,6 +934,12 @@ vertoService.service('verto', ['$rootScope', '$cookieStore', '$location', 'stora
         data.conf.sendChat(message, "message");
       },
       /*
+      * Method is used to set a member's resevartion Id.
+      */
+      setResevartionId: function(memberID, resID) {
+        data.conf.modCommand('vid-res-id', memberID, resID);
+      },
+      /*
       * Method is used to send user2user chats.
       * VC does not yet support that.
       */