From 88b639ac2a280bfbc361d1b7bee585c238cf081f Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Thu, 2 Nov 2017 15:25:13 +0100 Subject: [PATCH] Fix the UI to correctly join the room and the call Signed-off-by: Joas Schilling --- js/app.js | 6 ++-- js/calls.js | 16 ++++++--- js/signaling.js | 74 +++++++++++++++++++++++++++++++--------- js/simplewebrtc.js | 24 ++++++++++--- js/views/callinfoview.js | 26 +++++++++++++- js/views/roomlistview.js | 2 +- js/webrtc.js | 19 ++++++++++- 7 files changed, 136 insertions(+), 31 deletions(-) diff --git a/js/app.js b/js/app.js index c06f74ade..2e3ec82e4 100644 --- a/js/app.js +++ b/js/app.js @@ -528,10 +528,10 @@ var token = $('#app').attr('data-token'); if (token) { if (OCA.SpreedMe.webrtc.sessionReady) { - OCA.SpreedMe.Calls.join(token); + OCA.SpreedMe.Calls.joinRoom(token); } else { OCA.SpreedMe.webrtc.once('connectionReady', function() { - OCA.SpreedMe.Calls.join(token); + OCA.SpreedMe.Calls.joinRoom(token); }); } } @@ -560,7 +560,7 @@ }, _onPopState: function(params) { if (!_.isUndefined(params.token)) { - OCA.SpreedMe.Calls.join(params.token); + OCA.SpreedMe.Calls.joinRoom(params.token); } }, onDocumentClick: function(event) { diff --git a/js/calls.js b/js/calls.js index adad25d55..fa5f1f543 100644 --- a/js/calls.js +++ b/js/calls.js @@ -35,7 +35,7 @@ OC.Util.History.pushState({ token: token }, OC.generateUrl('/call/' + token)); - this.join(token); + this.joinRoom(token); }, createOneToOneVideoCall: function(recipientUserId) { console.log("Creating one-to-one video call", recipientUserId); @@ -81,7 +81,15 @@ success: _.bind(this._createCallSuccessHandle, this) }); }, - join: function(token) { + joinRoom: function(token) { + if (signaling.currentRoomToken === token) { + return; + } + + OCA.SpreedMe.webrtc.leaveRoom(); + OCA.SpreedMe.webrtc.joinRoom(token); + }, + joinCall: function(token) { if (signaling.currentCallToken === token) { return; } @@ -90,8 +98,8 @@ $('.videoView').addClass('hidden'); $('#app-content').addClass('icon-loading'); - OCA.SpreedMe.webrtc.leaveRoom(); - OCA.SpreedMe.webrtc.joinRoom(token); + OCA.SpreedMe.webrtc.leaveCall(); + OCA.SpreedMe.webrtc.joinCall(token); }, leaveCurrentCall: function(deleter) { OCA.SpreedMe.webrtc.leaveRoom(); diff --git a/js/signaling.js b/js/signaling.js index 43782cc11..fa84ed1dd 100644 --- a/js/signaling.js +++ b/js/signaling.js @@ -6,6 +6,7 @@ function SignalingBase(settings) { this.settings = settings; this.sessionId = ''; + this.currentRoomToken = null; this.currentCallToken = null; this.handlers = {}; this.features = {}; @@ -61,12 +62,16 @@ SignalingBase.prototype.emit = function(ev, data) { switch (ev) { - case 'join': - var callback = arguments[2]; - var token = data; - this.joinCall(token, callback); + case 'joinRoom': + this.joinRoom(data); break; - case 'leave': + case 'joinCall': + this.joinCall(data, arguments[2]); + break; + case 'leaveRoom': + this.leaveCurrentRoom(); + break; + case 'leaveCall': this.leaveCurrentCall(); break; case 'message': @@ -75,6 +80,13 @@ } }; + SignalingBase.prototype.leaveCurrentRoom = function() { + if (this.currentCallToken) { + this.leaveRoom(this.currentCallToken); + this.currentCallToken = null; + } + }; + SignalingBase.prototype.leaveCurrentCall = function() { if (this.currentCallToken) { this.leaveCall(this.currentCallToken); @@ -207,9 +219,9 @@ return defer; }; - InternalSignaling.prototype.joinCall = function(token, callback, password) { + InternalSignaling.prototype.joinRoom = function(token, password) { $.ajax({ - url: OC.linkToOCS('apps/spreed/api/v1/call', 2) + token, + url: OC.linkToOCS('apps/spreed/api/v1/room', 2) + token + '/participants/active', type: 'POST', beforeSend: function (request) { request.setRequestHeader('Accept', 'application/json'); @@ -220,14 +232,9 @@ success: function (result) { console.log("Joined", result); this.sessionId = result.ocs.data.sessionId; - this.currentCallToken = token; + this.currentRoomToken = token; this._startPingCall(); this._startPullingMessages(); - // We send an empty call description to simplewebrtc since - // usersChanged (webrtc.js) will create/remove peer connections - // with call participants - var callDescription = {'clients': {}}; - callback('', callDescription); }.bind(this), error: function (result) { if (result.status === 404 || result.status === 503) { @@ -243,7 +250,7 @@ t('spreed','Password required'), function (result, password) { if (result && password !== '') { - this.joinCall(token, callback, password); + this.joinRoom(token, password); } }.bind(this), true, @@ -262,11 +269,46 @@ }); }; - InternalSignaling.prototype.leaveCall = function(token) { - if (token === this.currentCallToken) { + InternalSignaling.prototype.leaveRoom = function(token) { + if (this.currentCallToken) { + this.leaveCall(); + } + + if (token === this.currentRoomToken) { this._stopPingCall(); this._closeEventSource(); } + + $.ajax({ + url: OC.linkToOCS('apps/spreed/api/v1/room', 2) + token + '/participants/active', + method: 'DELETE', + async: false + }); + }; + + InternalSignaling.prototype.joinCall = function(token, callback) { + $.ajax({ + url: OC.linkToOCS('apps/spreed/api/v1/call', 2) + token, + type: 'POST', + beforeSend: function (request) { + request.setRequestHeader('Accept', 'application/json'); + }, + success: function () { + this.currentCallToken = token; + // We send an empty call description to simplewebrtc since + // usersChanged (webrtc.js) will create/remove peer connections + // with call participants + var callDescription = {'clients': {}}; + callback('', callDescription); + }.bind(this), + error: function () { + // Room not found or maintenance mode + OC.redirect(OC.generateUrl('apps/spreed')); + }.bind(this) + }); + }; + + InternalSignaling.prototype.leaveCall = function(token) { $.ajax({ url: OC.linkToOCS('apps/spreed/api/v1/call', 2) + token, method: 'DELETE', diff --git a/js/simplewebrtc.js b/js/simplewebrtc.js index 62b4d9e7a..89b277a6b 100644 --- a/js/simplewebrtc.js +++ b/js/simplewebrtc.js @@ -18185,14 +18185,22 @@ SimpleWebRTC.prototype.leaveRoom = function () { if (this.roomName) { - this.connection.emit('leave'); + this.connection.emit('leaveRoom'); + this.emit('leftRoom', this.roomName); + this.roomName = undefined; + } + }; + + SimpleWebRTC.prototype.leaveCall = function () { + if (this.roomName) { + this.connection.emit('leaveCall'); while (this.webrtc.peers.length) { this.webrtc.peers[0].end(); } if (this.getLocalScreen()) { this.stopScreenShare(); } - this.emit('leftRoom', this.roomName); + this.emit('leftCall', this.roomName); this.roomName = undefined; } }; @@ -18249,10 +18257,16 @@ }); }; - SimpleWebRTC.prototype.joinRoom = function (name, cb) { + SimpleWebRTC.prototype.joinRoom = function (name) { + this.connection.emit('joinRoom', name); + this.roomName = name; + this.emit('joinedRoom', name); + }; + + SimpleWebRTC.prototype.joinCall = function (name, cb) { var self = this; this.roomName = name; - this.connection.emit('join', name, function (err, roomDescription) { + this.connection.emit('joinCall', name, function (err, roomDescription) { console.log('join CB', err, roomDescription); if (err) { self.emit('error', err); @@ -18282,7 +18296,7 @@ } if (cb) cb(err, roomDescription); - self.emit('joinedRoom', name); + self.emit('joinedCall', name); }); }; diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 157f57196..2db9becfa 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -36,6 +36,15 @@ '{{#if isGuest}}' + '
' + '{{/if}}' + + '{{#if participantInCall}}' + + '
' + + ' ' + + '
' + + '{{else}}' + + '
' + + ' ' + + '
' + + '{{/if}}' + '{{#if canModerate}}' + '
' + ' ' + @@ -76,6 +85,8 @@ 'linkCheckbox': '.link-checkbox', 'guestName': 'div.guest-name', + 'joinCallButton': 'button.join-call', + 'leaveCallButton': 'button.leave-call', 'passwordOption': '.password-option', 'passwordInput': '.password-input', @@ -91,13 +102,18 @@ 'change @ui.linkCheckbox': 'toggleLinkCheckbox', 'keyup @ui.passwordInput': 'keyUpPassword', - 'click @ui.passwordConfirm': 'confirmPassword' + 'click @ui.passwordConfirm': 'confirmPassword', + 'click @ui.joinCallButton': 'joinCall', + 'click @ui.leaveCallButton': 'leaveCall' }, modelEvents: { 'change:hasPassword': function() { this.renderWhenInactive(); }, + 'change:participantInCall': function() { + this.renderWhenInactive(); + }, 'change:participantType': function() { this._updateNameEditability(); @@ -222,6 +238,14 @@ }); }, + joinCall: function() { + OCA.SpreedMe.Calls.joinCall(this.model.get('token')); + }, + + leaveCall: function() { + OCA.SpreedMe.Calls.leaveCall(this.model.get('token')); + }, + /** * Password */ diff --git a/js/views/roomlistview.js b/js/views/roomlistview.js index 06889cab6..a3f5679b2 100644 --- a/js/views/roomlistview.js +++ b/js/views/roomlistview.js @@ -200,7 +200,7 @@ joinRoom: function(e) { e.preventDefault(); var token = this.ui.room.attr('data-token'); - OCA.SpreedMe.Calls.join(token); + OCA.SpreedMe.Calls.joinRoom(token); OC.Util.History.pushState({ token: token diff --git a/js/webrtc.js b/js/webrtc.js index b8de9df1a..4037f7ade 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -40,6 +40,10 @@ var spreedPeerConnectionTable = []; var currentSessionId = webrtc.connection.getSessionid(); newUsers.forEach(function(user) { + if (!user.inCall) { + return; + } + // TODO(fancycode): Adjust property name of internal PHP backend to be all lowercase. var sessionId = user.sessionId || user.sessionid; if (!sessionId || sessionId === currentSessionId || previousUsersInRoom.indexOf(sessionId) !== -1) { @@ -125,9 +129,15 @@ var spreedPeerConnectionTable = []; var currentSessionId = webrtc.connection.getSessionid(); var currentUsersInRoom = []; var userMapping = {}; + var selfInCall = false; users.forEach(function(user) { + if (!user['inCall']) { + return; + } + var sessionId = user['sessionId'] || user.sessionid; if (sessionId === currentSessionId) { + selfInCall = true; return; } @@ -135,6 +145,10 @@ var spreedPeerConnectionTable = []; userMapping[sessionId] = user; }); + if (!selfInCall) { + return; + } + var newSessionIds = currentUsersInRoom.diff(previousUsersInRoom); var disconnectedSessionIds = previousUsersInRoom.diff(currentUsersInRoom); var newUsers = []; @@ -643,9 +657,12 @@ var spreedPeerConnectionTable = []; } OCA.SpreedMe.webrtc.on('joinedRoom', function(name) { + OCA.SpreedMe.app.syncAndSetActiveRoom(name); + }); + + OCA.SpreedMe.webrtc.on('joinedCall', function() { $('#app-content').removeClass('icon-loading'); $('.videoView').removeClass('hidden'); - OCA.SpreedMe.app.syncAndSetActiveRoom(name); }); OCA.SpreedMe.webrtc.on('channelOpen', function(channel) {