From b27dfe94489d6a8131bbbb66540c5bb3fa75a8b1 Mon Sep 17 00:00:00 2001
From: Jaon EarlWolf <jamonsterr@gmail.com>
Date: Tue, 24 Nov 2015 00:18:02 -0300
Subject: [PATCH] FS-8264 [verto_communicator] - Adapted the layout select to
new response, added a separated menu in members list to set its resevartion
id
---
.../verto_communicator/src/css/verto.css | 33 +++++++++++++---
.../verto_communicator/src/partials/chat.html | 25 ++++++++----
.../src/partials/video_call.html | 2 +-
.../controllers/ChatController.js | 38 +++++++++++++++++++
.../controllers/InCallController.js | 2 +
.../src/vertoService/services/vertoService.js | 29 +++++++++++++-
6 files changed, 113 insertions(+), 16 deletions(-)
diff --git a/html5/verto/verto_communicator/src/css/verto.css b/html5/verto/verto_communicator/src/css/verto.css
index 4e0175d583..89ffc0e7ca 100644
--- a/html5/verto/verto_communicator/src/css/verto.css
+++ b/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;*/
diff --git a/html5/verto/verto_communicator/src/partials/chat.html b/html5/verto/verto_communicator/src/partials/chat.html
index 23797d0b51..9cefd72615 100644
--- a/html5/verto/verto_communicator/src/partials/chat.html
+++ b/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>
diff --git a/html5/verto/verto_communicator/src/partials/video_call.html b/html5/verto/verto_communicator/src/partials/video_call.html
index 9633149c77..7fcb9b71b2 100644
--- a/html5/verto/verto_communicator/src/partials/video_call.html
+++ b/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>
diff --git a/html5/verto/verto_communicator/src/vertoControllers/controllers/ChatController.js b/html5/verto/verto_communicator/src/vertoControllers/controllers/ChatController.js
index 3129db87c7..c990e0d5c2 100644
--- a/html5/verto/verto_communicator/src/vertoControllers/controllers/ChatController.js
+++ b/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);
diff --git a/html5/verto/verto_communicator/src/vertoControllers/controllers/InCallController.js b/html5/verto/verto_communicator/src/vertoControllers/controllers/InCallController.js
index 93e510d5e3..4285ace586 100644
--- a/html5/verto/verto_communicator/src/vertoControllers/controllers/InCallController.js
+++ b/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) {
diff --git a/html5/verto/verto_communicator/src/vertoService/services/vertoService.js b/html5/verto/verto_communicator/src/vertoService/services/vertoService.js
index 9bf54c3cbd..4a46b09066 100644
--- a/html5/verto/verto_communicator/src/vertoService/services/vertoService.js
+++ b/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.
*/