Replace custom code with SidebarView

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

js/app.js

@@ -350,7 +350,6 @@
 		_showParticipantList: function() {
 			this._participants = new OCA.SpreedMe.Models.ParticipantCollection();
 			this._participantsView = new OCA.SpreedMe.Views.ParticipantView({
-				el: 'ul#participantWithList',
 				collection: this._participants
 			});
 
@@ -359,6 +358,8 @@
 					this.setRoom(model);
 				}
 			});
+
+			this._sidebarView.addTab('participants', { label: t('spreed', 'Participants') }, this._participantsView);
 		},
 		/**
 		 * @param {string} token
@@ -486,11 +487,29 @@
 			$('#emptycontent p').text(messageAdditional);
 		},
 		initialize: function() {
+			this._sidebarView = new OCA.SpreedMe.Views.SidebarView();
+			$('#app-content').append(this._sidebarView.$el);
+
 			if (oc_current_user) {
 				this._rooms = new OCA.SpreedMe.Models.RoomCollection();
 				this.listenTo(roomChannel, 'active', this._setRoomActive);
+
+				this._sidebarView.listenTo(this._rooms, 'change:active', function(model, active) {
+					if (active) {
+						this.enable();
+
+						var callInfoView = new OCA.SpreedMe.Views.CallInfoView({
+							model: model,
+						});
+						this.setCallInfoView(callInfoView);
+					}
+				});
 			}
 
+			this._sidebarView.listenTo(roomChannel, 'leaveCurrentCall', function() {
+				this.disable();
+			});
+
 			$(document).on('click', this.onDocumentClick);
 			OC.Util.History.addOnPopStateHandler(_.bind(this._onPopState, this));
 		},

js/calls.js

@@ -20,7 +20,7 @@
 		OCA.SpreedMe.Calls.leaveAllCalls();
 	}
 
-	Backbone.Radio.channel('rooms');
+	var roomsChannel = Backbone.Radio.channel('rooms');
 
 	OCA.SpreedMe.Calls = {
 		showCamera: function() {
@@ -94,6 +94,7 @@
 			OC.Util.History.pushState({}, OC.generateUrl('/apps/spreed'));
 			$('#app-content').removeClass('incall');
 			this.showRoomDeletedMessage(deleter);
+			roomsChannel.trigger('leaveCurrentCall');
 		},
 		leaveAllCalls: function() {
 			if (signaling) {

js/views/roomlistview.js

@@ -166,7 +166,6 @@
 			if (this.model.get('active')) {
 				this.$el.addClass('active');
 				this.addRoomMessage();
-				this.updateSidebar();
 			} else {
 				this.$el.removeClass('active');
 			}
@@ -178,24 +177,6 @@
 
 			this.toggleMenuClass();
 		},
-		updateSidebar: function() {
-			var $content = $('#app-content'),
-				$sidebar = $content.find('#app-sidebar');
-
-			$sidebar.find('.room-name').text(this.model.get('displayName'));
-
-			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',
@@ -390,7 +371,6 @@
 			// 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();
@@ -409,7 +389,6 @@
 			//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'));
 			}
 

templates/index-public.php

@@ -14,7 +14,10 @@ script(
 		'vendor/backbone.marionette/lib/backbone.marionette.min',
 		'models/room',
 		'models/roomcollection',
+		'views/callinfoview',
 		'views/roomlistview',
+		'views/sidebarview',
+		'views/tabview',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',

templates/index.php

@@ -16,8 +16,11 @@ script(
 		'models/roomcollection',
 		'models/participant',
 		'models/participantcollection',
-		'views/roomlistview',
+		'views/callinfoview',
 		'views/participantview',
+		'views/roomlistview',
+		'views/sidebarview',
+		'views/tabview',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',
@@ -39,43 +42,6 @@ script(
 
 	<div id="app-content" class="participants-1">
 
-		<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>
-
-				<input name="shareLink" id="shareLink" class="checkbox" value="1" type="checkbox">
-				<label for="shareLink"><?php p($l->t('Share link'));?></label><br>
-				<div class="oneline">
-					<label for="linkText" class="hidden-visually">Link</label>
-					<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">
-					<a href="#"><?php p($l->t('Scheduling'));?></a>
-				</li>-->
-			</ul>
-
-			<div class="tabsContainer">
-				<div id="participantTabView" class="tab participantTabView">
-					<div class="participantListView subView">
-						<ul id="participantWithList" class="participantWithList with-icon">
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
-
 		<div id="app-content-wrapper">
 		<button id="video-fullscreen" class="icon-fullscreen-white" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen')) ?>"></button>