Replace sidebar header contents with call view during calls

During calls the call view is now moved from the header actions to the
header itself, and all the other elements in the header (except the
close button) are hidden. This is done by setting a special CSS class,
"hidden-by-call", which is defined in a style sheet added dynamically.

When the file is changed the sidebar is cleared until the new file is
loaded. However, "setFileInfo" is called once the new file has loaded,
so the call view can not be hidden based on when a new fileInfo is set,
as that would keep the call view shown while the sidebar only shows the
loading spinner. However, "OCA.Talk.fileInfo" is cleared by
"FilesSidebarTab" when the tab is destroyed, which happens when the rest
of the sidebar is cleared, so that fileInfo is the one used to show and
hide the call view.

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

1 files changed, 124 insertions, 0 deletions

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index f172245b9..b663a7cd7 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -31,12 +31,41 @@ export default {
 
 	name: 'FilesSidebarCallViewApp',
 
+	data() {
+		return {
+			// Needed for reactivity.
+			Talk: OCA.Talk,
+		}
+	},
+
 	computed: {
+		fileInfo() {
+			// When changing files OCA.Talk.fileInfo is cleared as soon as the
+			// new file starts to be loaded; "setFileInfo()" is called once the
+			// new file has loaded, so fileInfo is got from OCA.Talk to hide the
+			// call view at the same time as the rest of the sidebar UI.
+			return this.Talk.fileInfo || {}
+		},
+
+		fileId() {
+			return this.fileInfo.id
+		},
+
 		token() {
 			return this.$store.getters.getToken()
 		},
 
+		fileIdForToken() {
+			return this.$store.getters.getFileIdForToken()
+		},
+
 		isInCall() {
+			// FIXME Remove participants as soon as the file changes so this
+			// condition is not needed.
+			if (this.fileId !== this.fileIdForToken) {
+				return false
+			}
+
 			const participantIndex = this.$store.getters.getParticipantIndex(this.token, this.$store.getters.getParticipantIdentifier())
 			if (participantIndex === -1) {
 				return false
@@ -48,9 +77,104 @@ export default {
 		},
 	},
 
+	watch: {
+		isInCall: function(isInCall) {
+			if (isInCall) {
+				this.replaceSidebarHeaderContentsWithCallView()
+			} else {
+				this.restoreSidebarHeaderContents()
+			}
+		},
+	},
+
 	methods: {
 		setFileInfo(fileInfo) {
 		},
+
+		/**
+		 * Adds a special style sheet to hide the sidebar header contents during
+		 * a call.
+		 *
+		 * The style sheet contains a rule to hide ".hidden-by-call" elements,
+		 * which is the CSS class set in the sidebar header contents during a
+		 * call.
+		 */
+		addCallInFilesSidebarStyleSheet() {
+			for (let i = 0; i < document.styleSheets.length; i++) {
+				const sheet = document.styleSheets[i]
+				// None of the default properties of a style sheet can be used
+				// as an ID. Adding a "data-id" attribute would work in Firefox,
+				// but not in Chromium, as it does not provide a "dataset"
+				// property in styleSheet objects. Therefore it is necessary to
+				// check the rules themselves, but as the order is undefined a
+				// matching rule needs to be looked for in all of them.
+				if (sheet.cssRules.length !== 1) {
+					continue
+				}
+
+				for (const cssRule of sheet.cssRules) {
+					if (cssRule.cssText === '.app-sidebar-header .hidden-by-call { display: none !important; }') {
+						return
+					}
+				}
+			}
+
+			const style = document.createElement('style')
+
+			document.head.appendChild(style)
+
+			// "insertRule" calls below need to be kept in sync with the
+			// condition above.
+
+			style.sheet.insertRule('.app-sidebar-header .hidden-by-call { display: none !important; }', 0)
+		},
+
+		/**
+		 * Hides the sidebar header contents (except the close button) and shows
+		 * the call view instead.
+		 */
+		replaceSidebarHeaderContentsWithCallView() {
+			this.addCallInFilesSidebarStyleSheet()
+
+			const header = document.querySelector('.app-sidebar-header')
+			if (!header) {
+				return
+			}
+
+			for (let i = 0; i < header.children.length; i++) {
+				const headerChild = header.children[i]
+
+				if (!headerChild.classList.contains('app-sidebar__close')) {
+					headerChild.classList.add('hidden-by-call')
+				}
+			}
+
+			header.append(this.$el)
+		},
+
+		/**
+		 * Shows the sidebar header contents and moves the call view back to the
+		 * actions.
+		 */
+		restoreSidebarHeaderContents() {
+			const header = document.querySelector('.app-sidebar-header')
+			if (!header) {
+				return
+			}
+
+			for (let i = 0; i < header.children.length; i++) {
+				const headerChild = header.children[i]
+
+				if (!headerChild.classList.contains('app-sidebar__close')) {
+					headerChild.classList.remove('hidden-by-call')
+				}
+			}
+
+			const headerAction = document.querySelector('.app-sidebar-header__action')
+			if (headerAction) {
+				headerAction.append(this.$el)
+			}
+		},
 	},
 }
 </script>