request tab leadership to fetch conversations and update talk-hash every 30 seconds only from one source

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

src/App.vue

@@ -64,6 +64,8 @@ import Router from './router/router.js'
 import BrowserStorage from './services/BrowserStorage.js'
 import { EventBus } from './services/EventBus.js'
 import { leaveConversationSync } from './services/participantsService.js'
+import { talkBroadcastChannel } from './services/talkBroadcastChannel.js'
+import { requestTabLeadership } from './utils/requestTabLeadership.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
 // Styles
@@ -101,6 +103,7 @@ export default {
 			defaultPageTitle: false,
 			loading: false,
 			isRefreshingCurrentConversation: false,
+			isCurrentTabLeader: false,
 		}
 	},
 
@@ -442,6 +445,31 @@ export default {
 		} else {
 			console.debug('Can not set current user because it\'s a guest')
 		}
+
+		requestTabLeadership().then(() => {
+			this.isCurrentTabLeader = true
+		})
+
+		talkBroadcastChannel.addEventListener('message', (event) => {
+			if (!this.isCurrentTabLeader) {
+				switch (event.data.message) {
+				case 'talk:update-conversations' : {
+					this.$store.dispatch('patchConversations', {
+						conversations: event.data.conversations,
+						withRemoving: event.data.withRemoving,
+					})
+					break
+				}
+				case 'update-nextcloud-talk-hash': {
+					this.$store.dispatch('setNextcloudTalkHash', event.data.hash)
+					break
+				}
+				default: {
+					break
+				}
+				}
+			}
+		})
 	},
 
 	async mounted() {

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -14,6 +14,7 @@ import { searchPossibleConversations, searchListedConversations } from '../../se
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
 import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
+import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
 
 jest.mock('@nextcloud/initial-state', () => ({
 	loadState: jest.fn(),
@@ -131,6 +132,8 @@ describe('LeftSidebar.vue', () => {
 
 			const wrapper = mountComponent()
 
+			await requestTabLeadership()
+
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 			expect(conversationsListMock).toHaveBeenCalled()
 
@@ -157,6 +160,9 @@ describe('LeftSidebar.vue', () => {
 
 		test('re-fetches conversations every 30 seconds', async () => {
 			const wrapper = mountComponent()
+
+			await requestTabLeadership()
+
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -175,6 +181,9 @@ describe('LeftSidebar.vue', () => {
 
 		test('re-fetches conversations when receiving bus event', async () => {
 			const wrapper = mountComponent()
+
+			await requestTabLeadership()
+
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -303,6 +312,8 @@ describe('LeftSidebar.vue', () => {
 
 			const wrapper = mountComponent()
 
+			await requestTabLeadership()
+
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 			expect(conversationsListMock).toHaveBeenCalled()
 

src/components/LeftSidebar/LeftSidebar.vue

@@ -261,7 +261,9 @@ import {
 	searchListedConversations,
 } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
+import { talkBroadcastChannel } from '../../services/talkBroadcastChannel.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
+import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
 
 export default {
 
@@ -331,6 +333,8 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
+			isFetchingConversations: false,
+			isCurrentTabLeader: false,
 			isFocused: false,
 			isFiltered: null,
 		}
@@ -414,17 +418,32 @@ export default {
 		// before updated ones come from server
 		this.restoreConversations()
 
-		this.fetchConversations()
-	},
-
-	mounted() {
-		// Refreshes the conversations every 30 seconds
-		this.refreshTimer = window.setInterval(() => {
-			if (!this.isFetchingConversations) {
+		requestTabLeadership().then(() => {
+			this.isCurrentTabLeader = true
+			this.fetchConversations()
+			// Refreshes the conversations list every 30 seconds
+			this.refreshTimer = window.setInterval(() => {
 				this.fetchConversations()
+			}, 30000)
+		})
+
+		talkBroadcastChannel.addEventListener('message', (event) => {
+			if (this.isCurrentTabLeader) {
+				switch (event.data.message) {
+				case 'talk:reset-modified-before-count' : {
+					this.roomListModifiedBefore = 0
+					this.debounceFetchConversations()
+					break
+				}
+				default: {
+					break
+				}
+				}
 			}
-		}, 30000)
+		})
+	},
 
+	mounted() {
 		EventBus.$on('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$once('conversations-received', this.handleUnreadMention)
 		EventBus.$on('route-change', this.onRouteChange)
@@ -622,7 +641,13 @@ export default {
 		 */
 		async handleShouldRefreshConversations(options) {
 			if (options?.all === true) {
-				this.roomListModifiedBefore = 0
+				if (this.isCurrentTabLeader) {
+					this.roomListModifiedBefore = 0
+				} else {
+					// Force leader tab to do a full fetch
+					talkBroadcastChannel.postMessage({ message: 'talk:reset-modified-before-count' })
+					return
+				}
 			} else if (options?.token && options?.properties) {
 				await this.$store.dispatch('setConversationProperties', {
 					token: options.token,

src/services/talkBroadcastChannel.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+/**
+ * Broadcast channel to send messages between active tabs.
+ */
+const talkBroadcastChannel = new BroadcastChannel('nextcloud:talk')
+
+export {
+	talkBroadcastChannel,
+}

src/store/conversationsStore.js

@@ -63,6 +63,7 @@ import {
 	startCallRecording,
 	stopCallRecording,
 } from '../services/recordingService.js'
+import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 
 const DUMMY_CONVERSATION = {
 	token: '',
@@ -766,6 +767,12 @@ const actions = {
 
 			dispatch('cacheConversations')
 
+			// Inform other tabs about successful fetch
+			talkBroadcastChannel.postMessage({
+				message: 'talk:update-conversations',
+				conversations: response.data.ocs.data,
+				withRemoving: modifiedSince === 0,
+			})
 			return response
 		} catch (error) {
 			if (error?.response) {

src/store/talkHashStore.js

@@ -22,6 +22,8 @@
 
 import { showError, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
+import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
+
 const state = {
 	initialNextcloudTalkHash: '',
 	isNextcloudTalkHashDirty: false,
@@ -94,6 +96,12 @@ const actions = {
 		}
 
 		context.dispatch('setNextcloudTalkHash', newTalkCacheBusterHash)
+
+		// Inform other tabs about changed hash
+		talkBroadcastChannel.postMessage({
+			message: 'update-nextcloud-talk-hash',
+			hash: newTalkCacheBusterHash,
+		})
 	},
 
 	checkMaintenanceMode(context, response) {

src/test-setup.js

@@ -98,6 +98,11 @@ function myArrayBuffer() {
 
 global.Blob.prototype.arrayBuffer = Blob.prototype.arrayBuffer || myArrayBuffer
 
+global.BroadcastChannel = jest.fn(() => ({
+	postMessage: jest.fn(),
+	addEventListener: jest.fn(),
+}))
+
 const originalConsoleError = console.error
 console.error = function(error) {
 	if (error?.message?.includes('Could not parse CSS stylesheet')) {

src/utils/requestTabLeadership.js

@@ -0,0 +1,68 @@
+/**
+ * @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ * @author Grigorii Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+/**
+ * Assign the first window, which requested that, a 'fetching leader'.
+ * It will fetch conversations with defined interval and cache to BrowserStorage
+ * Other will update list with defined interval from the BrowserStorage
+ * Once 'leader' is closed, next requested tab will be assigned, and so on
+ */
+function lockTabLeadership() {
+	return new Promise((resolve) => {
+		// Locks are supported only with HTTPS protocol,
+		// so we don't lock anything for another cases
+		if (navigator.locks === undefined) {
+			resolve()
+			return
+		}
+
+		window.navigator.locks.request('talk:leader', () => {
+			// resolve a promise for the first requested tab
+			resolve()
+
+			// return an infinity promise, resource is blocked until 'leader' tab is closed
+			return new Promise(() => {
+			})
+		})
+	})
+}
+
+const createPromiseSingleton = (promiseFn) => {
+	let promise = null
+
+	return (...args) => {
+		if (!promise) {
+			promise = promiseFn(...args)
+			promise.then(() => {
+				promise = null
+			})
+		}
+		return promise
+	}
+}
+
+const requestTabLeadership = createPromiseSingleton(lockTabLeadership)
+
+export {
+	requestTabLeadership,
+}