Add support for Talk sidebar in Files app

appinfo/routes.php

@@ -319,6 +319,19 @@
 			'requirements' => ['apiVersion' => 'v1'],
 		],
 
+		/**
+		 * Files
+		 */
+		[
+			'name' => 'Files#getRoom',
+			'url' => '/api/{apiVersion}/file/{fileId}',
+			'verb' => 'GET',
+			'requirements' => [
+				'apiVersion' => 'v1',
+				'fileId' => '.+'
+			],
+		],
+
 		/**
 		 * Guest
 		 */

css/files.scss

@@ -0,0 +1,118 @@
+/**
+ * Cascade parent element height to the chat view in the sidebar to limit the
+ * vertical scroll bar only to the list of messages. Otherwise, the vertical
+ * scroll bar would be shown for the whole sidebar and everything would be
+ * moved when scrolling to see overflown messages.
+ *
+ * The list of messages should stretch to fill the available space at the bottom
+ * of the right sidebar, so the height is cascaded using flex boxes.
+ *
+ * It is horrible, I know (but better than using JavaScript ;-) ). Please
+ * improve it if you know how :-)
+ */
+#app-sidebar {
+	/* Override "display: block" set inline by jQuery. */
+	display: flex !important;
+	flex-direction: column;
+}
+
+#app-sidebar.disappear {
+	/* Override "display: flex !important" when the sidebar has to be hidden. */
+	display: none !important;
+}
+
+#app-sidebar .detailFileInfoContainer {
+	flex-shrink: 0;
+}
+
+#app-sidebar .tabsContainer {
+	display: flex;
+	flex-direction: column;
+
+	flex-grow: 1;
+}
+
+#app-sidebar .tab {
+	display: flex;
+	flex-direction: column;
+
+	flex-grow: 1;
+}
+
+#app-sidebar .tabsContainer.with-inner-scroll-bars,
+#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
+	overflow: hidden;
+}
+
+#app-sidebar .tab.hidden {
+	display: none;
+}
+
+#app-sidebar #chatView {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	flex-grow: 1;
+}
+
+#app-sidebar #chatView .comments {
+	overflow-y: auto;
+
+	/* Needed for proper calculation of comment positions in the scrolling
+	   container (as otherwise the comment position is calculated with respect
+	   to the closest ancestor with a relative position) */
+	position: relative;
+}
+
+/**
+ * Place the scroll bar of the message list on the right edge of the sidebar,
+ * but keeping the padding of the tab view.
+ *
+ * The padding must be set on the left too to ensure that the contacts menu
+ * shown when clicking on an author name does not overflow the tab (as it would
+ * be hidden).
+ *
+ * The bottom padding is removed to extend the chat view to the bottom edge of
+ * the sidebar.
+ */
+#app-sidebar .tab-chat {
+	padding-left: 0;
+	padding-right: 0;
+	padding-bottom: 0;
+}
+
+/* Hack needed to overcome the padding of the tab container and move the scroll
+ * bar of the messages list to the right border of the sidebar. */
+#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
+	padding-right: 0px;
+}
+
+#app-sidebar .tabsContainer .tab .app-not-started-placeholder {
+	/* Make the placeholder take the full tab height until the app is
+	 * started. */
+	flex-grow: 1;
+}
+
+#app-sidebar #chatView .comments {
+	padding-right: 15px;
+}
+
+#app-sidebar #chatView .comments .wrapper-background,
+#app-sidebar #chatView .comments .wrapper {
+	/* Padding is not respected in the comment wrapper due to its absolute
+	 * positioning, so it must be set through its position. */
+	right: 15px;
+}
+
+#app-sidebar #chatView .newCommentRow {
+	/* The details view in the Files app has a bottom padding of 15px, so the
+	 * general bottom margin used for comments should be reduced for the new
+	 * comment form. */
+	margin-bottom: 5px;
+}
+
+#app-sidebar #chatView .newCommentForm {
+	/* Make room to show the "Add" button when chat is shown in the sidebar. */
+	margin-right: 44px;
+}

js/embedded.js

@@ -0,0 +1,128 @@
+/* global Marionette, Backbone, _, $ */
+
+/**
+ *
+ * @copyright Copyright (c) 2018, Daniel Calviño Sánchez (danxuliu@gmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OC, OCA, Marionette, Backbone, _, $) {
+	'use strict';
+
+	OCA.Talk = OCA.Talk || {};
+
+	var roomChannel = Backbone.Radio.channel('rooms');
+
+	OCA.Talk.Embedded = Marionette.Application.extend({
+		OWNER: 1,
+		MODERATOR: 2,
+		USER: 3,
+		GUEST: 4,
+		USERSELFJOINED: 5,
+
+		/* Must stay in sync with values in "lib/Room.php". */
+		FLAG_DISCONNECTED: 0,
+		FLAG_IN_CALL: 1,
+		FLAG_WITH_AUDIO: 2,
+		FLAG_WITH_VIDEO: 4,
+
+		/** @property {OCA.SpreedMe.Models.Room} activeRoom  */
+		activeRoom: null,
+
+		/** @property {String} token  */
+		token: null,
+
+		/** @property {OCA.Talk.Connection} connection  */
+		connection: null,
+
+		/** @property {OCA.Talk.Signaling.base} signaling  */
+		signaling: null,
+
+		/** @property {OCA.SpreedMe.Models.RoomCollection} _rooms  */
+		_rooms: null,
+
+		_registerPageEvents: function() {
+			// Initialize button tooltips
+			$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}).click(function() {
+				$(this).tooltip('hide');
+			});
+		},
+
+		/**
+		 * @param {string} token
+		 */
+		_setRoomActive: function(token) {
+			if (OC.getCurrentUser().uid) {
+				this._rooms.forEach(function(room) {
+					room.set('active', room.get('token') === token);
+				});
+			}
+		},
+		syncAndSetActiveRoom: function(token) {
+			var self = this;
+			this.signaling.syncRooms()
+				.then(function() {
+					self.stopListening(self.activeRoom, 'change:participantFlags');
+
+					if (OC.getCurrentUser().uid) {
+						roomChannel.trigger('active', token);
+
+						self._rooms.forEach(function(room) {
+							if (room.get('token') === token) {
+								self.activeRoom = room;
+							}
+						});
+					}
+				});
+		},
+
+		setEmptyContentMessage: function() {
+		},
+		restoreEmptyContent: function() {
+		},
+
+		initialize: function() {
+			if (OC.getCurrentUser().uid) {
+				this._rooms = new OCA.SpreedMe.Models.RoomCollection();
+				this.listenTo(roomChannel, 'active', this._setRoomActive);
+			}
+
+			this._messageCollection = new OCA.SpreedMe.Models.ChatMessageCollection(null, {token: null});
+			this._chatView = new OCA.SpreedMe.Views.ChatView({
+				collection: this._messageCollection,
+				id: 'chatView'
+			});
+
+			this._messageCollection.listenTo(roomChannel, 'leaveCurrentRoom', function() {
+				this.stopReceivingMessages();
+			});
+		},
+		onStart: function() {
+			this.signaling = OCA.Talk.Signaling.createConnection();
+			this.connection = new OCA.Talk.Connection(this);
+
+			$(window).unload(function () {
+				this.connection.leaveCurrentRoom(false);
+				this.signaling.disconnect();
+			}.bind(this));
+
+			this._registerPageEvents();
+		},
+	});
+
+})(OC, OCA, Marionette, Backbone, _, $);