Only show the sidebar while we are in a room

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

3 files changed, 36 insertions, 9 deletions

diff --git a/css/style.css b/css/style.css
index 4cc57e868..732aa2285 100644
--- a/css/style.css
+++ b/css/style.css
@@ -628,6 +628,10 @@ video {
 	display: inline-block;
 }
 
+#app-sidebar.hidden {
+	display: none !important;
+}
+
 #participantTabView .participant-moderator-indicator {
 	opacity: .5;
 	font-weight: 300;
diff --git a/js/views/roomlistview.js b/js/views/roomlistview.js
index cf4a2ea8b..ee31c4b5b 100644
--- a/js/views/roomlistview.js
+++ b/js/views/roomlistview.js
@@ -158,11 +158,7 @@
 			if (this.model.get('active')) {
 				this.$el.addClass('active');
 				this.addRoomMessage();
-				if (!_.isUndefined(this.model)) {
-					OCA.SpreedMe.app._participants.setRoom(this.model);
-					OCA.SpreedMe.app._participants.fetch();
-					OCA.SpreedMe.app._participantsView.render();
-				}
+				this.updateSidebar();
 			} else {
 				this.$el.removeClass('active');
 			}
@@ -174,6 +170,28 @@
 
 			this.toggleMenuClass();
 		},
+		updateSidebar: function() {
+			var $content = $('#app-content'),
+				$sidebar = $content.find('#app-sidebar');
+
+			$sidebar.find('.room-name').text(this.model.get('displayName'));
+
+			OCA.SpreedMe.app._participants.setRoom(this.model);
+			OCA.SpreedMe.app._participants.fetch();
+			OCA.SpreedMe.app._participantsView.render();
+
+			if (!$content.hasClass('with-app-sidebar')) {
+				$content.addClass('with-app-sidebar');
+				$sidebar.removeClass('hidden');
+			}
+		},
+		hideSidebar: function() {
+			var $content = $('#app-content'),
+				$sidebar = $content.find('#app-sidebar');
+
+			$content.removeClass('with-app-sidebar');
+			$sidebar.addClass('hidden');
+		},
 		events: {
 			'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
 			'click .app-navigation-entry-menu .add-person-button': 'addPerson',
@@ -326,6 +344,7 @@
 			// If user is in that room, it should leave the associated call first.
 			if (this.model.get('active')) {
 				OCA.SpreedMe.Calls.leaveCurrentCall(true);
+				this.hideSidebar();
 			}
 
 			this.$el.slideUp();
@@ -344,6 +363,7 @@
 			//If user is in that room, it should leave that room first.
 			if (this.model.get('active')) {
 				OCA.SpreedMe.Calls.leaveCurrentCall(true);
+				this.hideSidebar();
 				OC.Util.History.pushState({}, OC.generateUrl('/apps/spreed'));
 			}
 
diff --git a/templates/index.php b/templates/index.php
index b23d9d706..4edadd479 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -37,10 +37,12 @@ script(
 		</ul>
 	</div>
 
-	<div id="app-content" class="participants-1 with-app-sidebar">
+	<div id="app-content" class="participants-1">
 
-		<div id="app-sidebar" class="detailsView scroll-container">
+		<div id="app-sidebar" class="detailsView scroll-container hidden">
 			<div class="detailCallInfoContainer">
+				<h3><span class="room-name">Name</span></h3>
+				<!--
 				<h3>Call name <span class="icon icon-rename"></span></h3>
 
 				<button><?php p($l->t('Start/stop webinary'));?></button>
@@ -52,15 +54,16 @@ script(
 					<input id="linkText" class="linkText" type="text" readonly value="https://nextcloud13.local/index.php/s/LRDYjaFrAw2oBp7">
 					<a class="clipboardButton icon icon-clippy" data-clipboard-target="#linkText" data-original-title="" title=""></a>
 				</div>
+				-->
 			</div>
 
 			<ul class="tabHeaders">
 				<li class="tabHeader selected" data-tabid="participantTabView" data-tabindex="0">
 					<a href="#"><?php p($l->t('Participants'));?></a>
 				</li>
-				<li class="tabHeader" data-tabid="schedulingTabView" data-tabindex="1">
+				<!--<li class="tabHeader" data-tabid="schedulingTabView" data-tabindex="1">
 					<a href="#"><?php p($l->t('Scheduling'));?></a>
-				</li>
+				</li>-->
 			</ul>
 
 			<div class="tabsContainer">