Fix the UI to correctly join the room and the call

Signed-off-by: Joas Schilling <coding@schilljs.com>

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) {

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();

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',

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);
 		});
 	};
 

js/views/callinfoview.js

@@ -36,6 +36,15 @@
 		'{{#if isGuest}}' +
 		'	<div class="guest-name"></div>' +
 		'{{/if}}' +
+		'{{#if participantInCall}}' +
+		'	<div>' +
+		'		<button class="leave-call">' + t('spreed', 'Leave call') + '</button>' +
+		'	</div>' +
+		'{{else}}' +
+		'	<div>' +
+		'		<button class="join-call">' + t('spreed', 'Join call') + '</button>' +
+		'	</div>' +
+		'{{/if}}' +
 		'{{#if canModerate}}' +
 		'	<div>' +
 		'		<input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" {{#if isPublic}} checked="checked"{{/if}} type="checkbox">' +
@@ -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
 		 */

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

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) {