Show the chat view as the main view when in a room but not in a call

When shown as the main view, the input field to add a new message is
always shown and a scroll bar is provided just for the list of messages.

Only the chat view is added and removed to and from the main view; the
other elements in the main view are not modified when that happens, and
they are hidden using some CSS magic.

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

css/style.css

@@ -140,6 +140,30 @@
     background-position-y: 8px !important;
 }
 
+/**
+ * Main view chat styles
+ */
+#app-content-wrapper {
+	height: 100%;
+}
+
+#app-content-wrapper #commentsTabView {
+	width: 100%;
+	height: 100%;
+
+	display: flex;
+	flex-direction: column;
+}
+
+#app-content-wrapper #commentsTabView .comments {
+	overflow-y: auto;
+}
+
+/* Hide all siblings of the chat view when shown as the main view */
+#app-content-wrapper #commentsTabView ~ * {
+	display: none !important;
+}
+
 /**
  * Video styles
  */

js/app.js

@@ -358,6 +358,8 @@
 			var self = this;
 			this.syncRooms()
 				.then(function() {
+					self.stopListening(self.activeRoom, 'change:participantInCall');
+
 					if (oc_current_user) {
 						roomChannel.trigger('active', token);
 
@@ -379,9 +381,28 @@
 
 					self.setPageTitle(self.activeRoom.get('displayName'));
 
+					self.updateChatViewPlacement();
+					self.listenTo(self.activeRoom, 'change:participantInCall', self.updateChatViewPlacement);
+
 					self.updateSidebarWithActiveRoom();
 				});
 		},
+		updateChatViewPlacement: function() {
+			if (!this.activeRoom) {
+				// This should never happen, but just in case
+				return;
+			}
+
+			if (this.activeRoom.get('participantInCall') && this._chatViewInMainView === true) {
+				this._chatView.$el.detach();
+				this._sidebarView.addTab('chat', { label: t('spreed', 'Chat') }, this._chatView);
+				this._chatViewInMainView = false;
+			} else if (!this.activeRoom.get('participantInCall') && !this._chatViewInMainView) {
+				this._sidebarView.removeTab('chat');
+				this._chatView.$el.prependTo('#app-content-wrapper');
+				this._chatViewInMainView = true;
+			}
+		},
 		updateSidebarWithActiveRoom: function() {
 			this._sidebarView.enable();
 
@@ -491,8 +512,6 @@
 				className: 'chat tab'
 			});
 
-			this._sidebarView.addTab('chat', { label: t('spreed', 'Chat') }, this._chatView);
-
 			this._messageCollection.listenTo(roomChannel, 'leaveCurrentCall', function() {
 				this.stopReceivingMessages();
 			});