forked from Mirrors/freeswitch
Merge pull request #614 in FS/freeswitch from ~JAONZE/freeswitch:bugfix/FS-7800-add-support-for-fs-7769-feature-set to master
* commit '05ff8ec711d35c9817ef409e0ad2d55b76e898d7': 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
This commit is contained in:
commit
9383ecc1f0
@ -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%;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<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>
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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');
|
||||
|
@ -32,4 +32,4 @@
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
})();
|
||||
|
@ -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.
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user