Merge pull request #186 from nextcloud/leave-current-room

Leave current room without reloading the page

css/style.css

@@ -190,7 +190,7 @@ video {
 	z-index: 40;
 }
 
-#emptyContentIcon {
+#emptycontent-icon {
 	width: 128px;
 	margin: 0 auto;
 	padding-bottom: 20px;

js/app.js

@@ -298,9 +298,9 @@
 			var message, messageAdditional;
 
 			//Remove previous icon or avatar
-			var emptyContentIcon = document.getElementById("emptyContentIcon");
-			emptyContentIcon.removeAttribute("class");
-			emptyContentIcon.innerHTML = "";
+			var emptyContentIcon = document.getElementById('emptycontent-icon');
+			emptyContentIcon.removeAttribute('class');
+			emptyContentIcon.innerHTML = '';
 
 			if (Object.keys(participants).length === 1) {
 				var waitingParticipantId, waitingParticipantName;
@@ -314,9 +314,9 @@
 				var avatar = document.createElement('div');
 				avatar.className = 'avatar room-avatar';
 
-				$('#emptyContentIcon').append(avatar);
+				$('#emptycontent-icon').append(avatar);
 
-				$('#emptyContentIcon').find('.avatar').each(function () {
+				$('#emptycontent-icon').find('.avatar').each(function () {
 					if (waitingParticipantName && (waitingParticipantId !== waitingParticipantName)) {
 						$(this).avatar(waitingParticipantId, 128, undefined, false, undefined, waitingParticipantName);
 					} else {
@@ -329,7 +329,7 @@
 			} else {
 				message = t('spreed', 'Waiting for others to join the call …');
 				messageAdditional = '';
-				$('#emptyContentIcon').addClass('icon-contacts-dark');
+				$('#emptycontent-icon').addClass('icon-contacts-dark');
 			}
 
 			$('#emptycontent h2').text(message);

js/rooms.js

@@ -75,6 +75,12 @@
 			OCA.SpreedMe.webrtc.joinRoom(roomId);
 			OCA.SpreedMe.Rooms.ping();
 		},
+		leaveCurrentRoom: function() {
+			OCA.SpreedMe.webrtc.leaveRoom();
+
+			currentRoomId = 0;
+			OC.Util.History.pushState();
+		},
 		currentRoom: function() {
 			return currentRoomId;
 		},
@@ -93,7 +99,10 @@
 				{
 					roomId: OCA.SpreedMe.Rooms.currentRoom()
 				}
-			);
+			).fail(function() {
+				OCA.SpreedMe.Rooms.leaveCurrentRoom();
+				OCA.SpreedMe.Rooms.showRoomDeletedMessage(false);
+			});
 		},
 		leaveAllRooms: function() {
 			$.ajax({
@@ -102,6 +111,24 @@
 				async: false
 			});
 		},
+		showRoomDeletedMessage: function(deleter) {
+			//Remove previous icon, avatar or link from emptycontent
+			var emptyContentIcon = document.getElementById('emptycontent-icon');
+			emptyContentIcon.removeAttribute('class');
+			emptyContentIcon.innerHTML = '';
+			$('#shareRoomInput').addClass('hidden');
+			$('#shareRoomClipboardButton').addClass('hidden');
+
+			if (deleter) {
+				$('#emptycontent-icon').addClass('icon-video');
+				$('#emptycontent h2').text(t('spreed', 'Looking great today! :)'));
+				$('#emptycontent p').text(t('spreed', 'Time to call your friends'));
+			} else {
+				$('#emptycontent-icon').addClass('icon-video-off');
+				$('#emptycontent h2').text(t('spreed', 'This call has ended'));
+				$('#emptycontent p').text('');
+			}
+		}
 	};
 
 	OCA.SpreedMe.initRooms = initRooms;

js/views/roomlistview.js

@@ -216,10 +216,8 @@
 		leaveGroup: function() {
 			//If user is in that room, it should leave that room first.
 			if (this.model.get('active')) {
-				var homeURL = OC.generateUrl('/apps/spreed');
-
-				OCA.SpreedMe.webrtc.leaveRoom();
-				window.location.replace(homeURL);
+				OCA.SpreedMe.Rooms.leaveCurrentRoom();
+				OCA.SpreedMe.Rooms.showRoomDeletedMessage(true);
 			}
 
 			this.$el.slideUp();
@@ -238,9 +236,9 @@
 			var message, messageAdditional, participants;
 
 			//Remove previous icon, avatar or link from emptycontent
-			var emptyContentIcon = document.getElementById("emptyContentIcon");
-			emptyContentIcon.removeAttribute("class");
-			emptyContentIcon.innerHTML = "";
+			var emptyContentIcon = document.getElementById('emptycontent-icon');
+			emptyContentIcon.removeAttribute('class');
+			emptyContentIcon.innerHTML = '';
 			$('#shareRoomInput').addClass('hidden');
 			$('#shareRoomClipboardButton').addClass('hidden');
 
@@ -261,9 +259,9 @@
 					var avatar = document.createElement('div');
 					avatar.className = 'avatar room-avatar';
 
-					$('#emptyContentIcon').append(avatar);
+					$('#emptycontent-icon').append(avatar);
 
-					$('#emptyContentIcon').find('.avatar').each(function () {
+					$('#emptycontent-icon').find('.avatar').each(function () {
 						if (waitingParticipantName && (waitingParticipantId !== waitingParticipantName)) {
 							$(this).avatar(waitingParticipantId, 128, undefined, false, undefined, waitingParticipantName);
 						} else {
@@ -282,7 +280,7 @@
 						message = t('spreed', 'No other participants in this call');
 						messageAdditional = 'You can invite other participants to this call by clicking "+ Add person" in the call menu.';
 					}
-					$('#emptyContentIcon').addClass('icon-contacts-dark');
+					$('#emptycontent-icon').addClass('icon-contacts-dark');
 					break;
 				case 3:
 					if (Object.keys(participants).length > 1) {
@@ -291,7 +289,7 @@
 						message = t('spreed', 'No other participants in this call');
 					}
 					messageAdditional = 'Share this link to invite others!';
-					$('#emptyContentIcon').addClass('icon-public');
+					$('#emptycontent-icon').addClass('icon-public');
 
 					//Add link
 					var url = window.location.protocol + '//' + window.location.host + OC.generateUrl('/apps/spreed?roomId=' + this.model.get('id'));

js/webrtc.js

@@ -293,13 +293,13 @@ var spreedMappingTable = [];
 			}
 
 			//Remove previous icon, avatar or link from emptycontent
-			var emptyContentIcon = document.getElementById("emptyContentIcon");
-			emptyContentIcon.removeAttribute("class");
-			emptyContentIcon.innerHTML = "";
+			var emptyContentIcon = document.getElementById('emptycontent-icon');
+			emptyContentIcon.removeAttribute('class');
+			emptyContentIcon.innerHTML = '';
 			$('#shareRoomInput').addClass('hidden');
 			$('#shareRoomClipboardButton').addClass('hidden');
 
-			$('#emptyContentIcon').addClass('icon-video-off');
+			$('#emptycontent-icon').addClass('icon-video-off');
 			$('#emptycontent h2').text(message);
 			$('#emptycontent p').text(messageAdditional);
 		});
@@ -312,13 +312,13 @@ var spreedMappingTable = [];
 			messageAdditional = t('spreed', 'Please use a different browser like Firefox or Chrome');
 
 			//Remove previous icon, avatar or link from emptycontent
-			var emptyContentIcon = document.getElementById("emptyContentIcon");
-			emptyContentIcon.removeAttribute("class");
-			emptyContentIcon.innerHTML = "";
+			var emptyContentIcon = document.getElementById('emptycontent-icon');
+			emptyContentIcon.removeAttribute('class');
+			emptyContentIcon.innerHTML = '';
 			$('#shareRoomInput').addClass('hidden');
 			$('#shareRoomClipboardButton').addClass('hidden');
 
-			$('#emptyContentIcon').addClass('icon-video-off');
+			$('#emptycontent-icon').addClass('icon-video-off');
 			$('#emptycontent h2').text(message);
 			$('#emptycontent p').text(messageAdditional);
 		}

templates/index-public.php

@@ -64,7 +64,7 @@ script(
 
 
 		<div id="emptycontent">
-			<div id="emptyContentIcon" class="icon-video"></div>
+			<div id="emptycontent-icon" class="icon-video"></div>
 			<h2><?php p($l->t('Looking great today! :)')) ?></h2>
 			<p class="uploadmessage"><?php p($l->t('Smile in 3… 2… 1!')) ?></p>
 		</div>

templates/index.php

@@ -54,7 +54,7 @@ script(
 
 
 		<div id="emptycontent">
-			<div id="emptyContentIcon" class="icon-video"></div>
+			<div id="emptycontent-icon" class="icon-video"></div>
 			<h2><?php p($l->t('Looking great today! :)')) ?></h2>
 			<p class="uploadmessage"><?php p($l->t('Time to call your friends')) ?></p>
 			<div id="shareRoomContainer" class="" style="display: inline-flex">