mirror of
https://github.com/signalwire/freeswitch.git
synced 2025-04-13 07:45:26 +00:00
FS-8264 [verto_communicator] - Adapted the layout select to new response, added a separated menu in members list to set its resevartion id
This commit is contained in:
Jaon EarlWolf
Anthony Minessale
parent
833c193d04
commit
b27dfe9448
@ -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;*/
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -73,6 +73,8 @@
|
||||
|
||||
$scope.confChangeVideoLayout = function(layout) {
|
||||
verto.data.conf.setVideoLayout(layout);
|
||||
$scope.videoLayout = layout;
|
||||
$rootScope.$emit('changedVideoLayout', layout);
|
||||
};
|
||||
|
||||
$scope.confChangeSpeaker = function(speakerId) {
|
||||
|
||||
@ -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.
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user