fix(callView): reset promoted view once switched to Grid mode

src/App.vue

@@ -49,7 +49,7 @@ import Router from './router/router.js'
 import BrowserStorage from './services/BrowserStorage.js'
 import { EventBus } from './services/EventBus.ts'
 import { leaveConversationSync } from './services/participantsService.js'
-import { useCallViewStore } from './stores/callView.js'
+import { useCallViewStore } from './stores/callView.ts'
 import { useFederationStore } from './stores/federation.ts'
 import { useSidebarStore } from './stores/sidebar.ts'
 import { checkBrowser } from './utils/browserCheck.ts'

src/components/CallView/CallView.vue

@@ -156,7 +156,7 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 import { fetchPeers } from '../../services/callsService.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
-import { useCallViewStore } from '../../stores/callView.js'
+import { useCallViewStore } from '../../stores/callView.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 import { satisfyVersion } from '../../utils/satisfyVersion.ts'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index.js'
@@ -721,7 +721,12 @@ export default {
 				return
 			}
 			this.callViewStore.setSelectedVideoPeerId(peerId)
-			this.callViewStore.startPresentation(this.token)
+			this.callViewStore.setCallViewMode({
+				token: this.token,
+				isGrid: false,
+				isStripeOpen: false,
+				clearLast: false,
+			})
 		},
 		handleClickLocalVideo() {
 			// DO nothing if no video
@@ -730,7 +735,12 @@ export default {
 			}
 			// Deselect possible selected video
 			this.callViewStore.setSelectedVideoPeerId('local')
-			this.callViewStore.startPresentation(this.token)
+			this.callViewStore.setCallViewMode({
+				token: this.token,
+				isGrid: false,
+				isStripeOpen: false,
+				clearLast: false,
+			})
 		},
 
 		async fetchPeers() {

src/components/CallView/Grid/Grid.vue

@@ -167,7 +167,7 @@ import VideoVue from '../shared/VideoVue.vue'
 
 import { placeholderImage, placeholderModel, placeholderName, placeholderSharedData } from './gridPlaceholders.ts'
 import { PARTICIPANT, ATTENDEE } from '../../../constants.ts'
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import { useSidebarStore } from '../../../stores/sidebar.ts'
 
 // Max number of videos per page. `0`, the default value, means no cap

src/components/CallView/shared/LocalVideo.vue

@@ -74,7 +74,7 @@ import VideoBackground from './VideoBackground.vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 
 import { AVATAR } from '../../../constants.ts'
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 import { placeholderImage } from '../Grid/gridPlaceholders.ts'

src/components/CallView/shared/VideoBottomBar.spec.js

@@ -21,7 +21,7 @@ import VideoBottomBar from './VideoBottomBar.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.ts'
 import storeConfig from '../../../store/storeConfig.js'
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import { findNcButton } from '../../../test-helpers.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 

src/components/CallView/shared/VideoBottomBar.vue

@@ -105,7 +105,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
 import { PARTICIPANT } from '../../../constants.ts'
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 
 export default {

src/components/CallView/shared/VideoVue.vue

@@ -101,7 +101,7 @@ import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
 import { ATTENDEE, AVATAR } from '../../../constants.ts'
 import { EventBus } from '../../../services/EventBus.ts'
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import { useGuestNameStore } from '../../../stores/guestName.js'
 import attachMediaStream from '../../../utils/attachmediastream.js'
 import { getDisplayNameWithFallback } from '../../../utils/getDisplayName.ts'

src/components/CallView/shared/ViewerOverlayCallView.vue

@@ -114,7 +114,7 @@ import Screen from './Screen.vue'
 import VideoVue from './VideoVue.vue'
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
-import { useCallViewStore } from '../../../stores/callView.js'
+import { useCallViewStore } from '../../../stores/callView.ts'
 import { localCallParticipantModel, localMediaModel } from '../../../utils/webrtc/index.js'
 
 export default {

src/components/TopBar/CallButton.vue

@@ -110,7 +110,7 @@ import { callSIPDialOut } from '../../services/callsService.js'
 import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
-import { useCallViewStore } from '../../stores/callView.js'
+import { useCallViewStore } from '../../stores/callView.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 import { useSoundsStore } from '../../stores/sounds.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'

src/components/TopBar/TopBarMenu.vue

@@ -189,7 +189,7 @@ import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, CONVERSATION, PARTICIPANT } from '../../constants.ts'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
-import { useCallViewStore } from '../../stores/callView.js'
+import { useCallViewStore } from '../../stores/callView.ts'
 import { generateAbsoluteUrl } from '../../utils/handleUrl.ts'
 import { callParticipantCollection } from '../../utils/webrtc/index.js'
 

src/composables/useIsInCall.js

@@ -10,7 +10,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue'
 import { useStore } from './useStore.js'
 import { EventBus } from '../services/EventBus.ts'
 import SessionStorage from '../services/SessionStorage.js'
-import { useCallViewStore } from '../stores/callView.js'
+import { useCallViewStore } from '../stores/callView.ts'
 
 /**
  * Check whether the user joined the call of the current token in this PHP session or not

src/composables/useViewer.js

@@ -6,7 +6,7 @@
 import { nextTick, ref } from 'vue'
 
 import { useIsInCall } from './useIsInCall.js'
-import { useCallViewStore } from '../stores/callView.js'
+import { useCallViewStore } from '../stores/callView.ts'
 import { useSidebarStore } from '../stores/sidebar.ts'
 
 /**

src/store/messagesStore.js

@@ -27,7 +27,7 @@ import {
 	postNewMessage,
 	postRichObjectToConversation,
 } from '../services/messagesService.ts'
-import { useCallViewStore } from '../stores/callView.js'
+import { useCallViewStore } from '../stores/callView.ts'
 import { useGuestNameStore } from '../stores/guestName.js'
 import { usePollsStore } from '../stores/polls.ts'
 import { useReactionsStore } from '../stores/reactions.js'

src/store/participantsStore.js

@@ -36,7 +36,7 @@ import {
 } from '../services/participantsService.js'
 import SessionStorage from '../services/SessionStorage.js'
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
-import { useCallViewStore } from '../stores/callView.js'
+import { useCallViewStore } from '../stores/callView.ts'
 import { useGuestNameStore } from '../stores/guestName.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
 import { messagePleaseTryToReload } from '../utils/talkDesktopUtils.ts'

src/stores/__tests__/callView.spec.js

@@ -7,7 +7,7 @@ import { setActivePinia, createPinia } from 'pinia'
 import { CONVERSATION } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import vuexStore from '../../store/index.js'
-import { useCallViewStore } from '../callView.js'
+import { useCallViewStore } from '../callView.ts'
 
 jest.mock('../../services/BrowserStorage.js', () => ({
 	getItem: jest.fn().mockReturnValue(null),
@@ -87,7 +87,7 @@ describe('callViewStore', () => {
 			})
 			expect(callViewStore.isGrid).toBeTruthy()
 			expect(callViewStore.isStripeOpen).toBeFalsy()
-			expect(BrowserStorage.setItem).toHaveBeenCalledWith(BROWSER_STORAGE_KEY, true)
+			expect(BrowserStorage.setItem).toHaveBeenCalledWith(BROWSER_STORAGE_KEY, 'true')
 
 			callViewStore.setCallViewMode({
 				token: TOKEN,
@@ -96,7 +96,7 @@ describe('callViewStore', () => {
 			})
 			expect(callViewStore.isGrid).toBeFalsy()
 			expect(callViewStore.isStripeOpen).toBeTruthy()
-			expect(BrowserStorage.setItem).toHaveBeenCalledWith(BROWSER_STORAGE_KEY, false)
+			expect(BrowserStorage.setItem).toHaveBeenCalledWith(BROWSER_STORAGE_KEY, 'false')
 		})
 
 		it('start presentation switches off grid view and restores when it ends', () => {

src/stores/callView.js → src/stores/callView.ts

@@ -7,9 +7,30 @@ import { defineStore } from 'pinia'
 
 import { CONVERSATION } from '../constants.ts'
 import BrowserStorage from '../services/BrowserStorage.js'
+import type { Conversation } from '../types/index.ts'
+
+type State = {
+	forceCallView: boolean,
+	isViewerOverlay: boolean,
+	isGrid: boolean,
+	isStripeOpen: boolean,
+	isEmptyCallView: boolean,
+	lastIsGrid: boolean | null,
+	lastIsStripeOpen: boolean | null,
+	presentationStarted: boolean,
+	selectedVideoPeerId: string | null,
+	callEndedTimeout: NodeJS.Timeout | number | undefined,
+}
+
+type CallViewModePayload = {
+	token: string,
+	isGrid?: boolean | null,
+	isStripeOpen?: boolean | null,
+	clearLast?: boolean,
+}
 
 export const useCallViewStore = defineStore('callView', {
-	state: () => ({
+	state: (): State => ({
 		forceCallView: false,
 		isViewerOverlay: false,
 		isGrid: false,
@@ -19,31 +40,31 @@ export const useCallViewStore = defineStore('callView', {
 		lastIsStripeOpen: null,
 		presentationStarted: false,
 		selectedVideoPeerId: null,
-		callEndedTimeout: null,
+		callEndedTimeout: undefined,
 	}),
 
 	getters: {
 		callHasJustEnded: (state) => !!state.callEndedTimeout,
 	},
 
 	actions: {
-		setForceCallView(value) {
+		setForceCallView(value: boolean) {
 			this.forceCallView = value
 		},
 
-		setIsViewerOverlay(value) {
+		setIsViewerOverlay(value: boolean) {
 			this.isViewerOverlay = value
 		},
 
-		setIsEmptyCallView(value) {
+		setIsEmptyCallView(value: boolean) {
 			this.isEmptyCallView = value
 		},
 
-		setSelectedVideoPeerId(value) {
+		setSelectedVideoPeerId(value: string | null) {
 			this.selectedVideoPeerId = value
 		},
 
-		handleJoinCall(conversation) {
+		handleJoinCall(conversation: Conversation) {
 			if (!conversation) {
 				return
 			}
@@ -59,25 +80,29 @@ export const useCallViewStore = defineStore('callView', {
 		 * Sets the current call view mode and saves it in preferences.
 		 * If clearLast is false, also remembers it in separate properties.
 		 *
-		 * @param {object} data the wrapping object;
-		 * @param {string} data.token current conversation token;
-		 * @param {boolean|null} [data.isGrid=null] true for enabled grid mode, false for speaker view;
-		 * @param {boolean|null} [data.isStripeOpen=null] true for visible striped mode, false for speaker view;
-		 * @param {boolean} [data.clearLast=true] set false to not reset last temporary remembered state;
+		 * @param data the wrapping object;
+		 * @param data.token current conversation token;
+		 * @param data.isGrid true for enabled grid mode, false for speaker view;
+		 * @param data.isStripeOpen true for visible striped mode, false for speaker view;
+		 * @param data.clearLast set false to not reset last temporary remembered state;
 		 */
-		setCallViewMode({ token, isGrid = null, isStripeOpen = null, clearLast = true }) {
+		setCallViewMode({ token, isGrid = null, isStripeOpen = null, clearLast = true }: CallViewModePayload) {
 			if (clearLast) {
 				this.lastIsGrid = null
 				this.lastIsStripeOpen = null
 			}
 
-			if (isGrid !== null) {
+			if (isGrid !== null && isGrid !== undefined) {
 				this.lastIsGrid = this.isGrid
-				BrowserStorage.setItem(`callprefs-${token}-isgrid`, isGrid)
+				BrowserStorage.setItem(`callprefs-${token}-isgrid`, isGrid.toString())
 				this.isGrid = isGrid
+
+				if (isGrid) {
+					this.setSelectedVideoPeerId(null)
+				}
 			}
 
-			if (isStripeOpen !== null) {
+			if (isStripeOpen !== null && isStripeOpen !== undefined) {
 				this.lastIsStripeOpen = this.isStripeOpen
 				this.isStripeOpen = isStripeOpen
 			}
@@ -88,9 +113,9 @@ export const useCallViewStore = defineStore('callView', {
 		 *
 		 * Switches off grid mode and closes the stripe.
 		 * Remembers the call view state for after the end of the presentation.
-		 * @param {string} token current conversation token.
+		 * @param token current conversation token.
 		 */
-		startPresentation(token) {
+		startPresentation(token: string) {
 			// don't start twice, this would prevent multiple screen shares to clear the last call view state
 			if (this.presentationStarted) {
 				return
@@ -105,9 +130,9 @@ export const useCallViewStore = defineStore('callView', {
 		 *
 		 * Restores call view state from before starting the presentation,
 		 * given that the last state was not cleared manually.
-		 * @param {string} token current conversation token.
+		 * @param token current conversation token.
 		 */
-		stopPresentation(token) {
+		stopPresentation(token: string) {
 			if (!this.presentationStarted) {
 				return
 			}
@@ -122,9 +147,9 @@ export const useCallViewStore = defineStore('callView', {
 		/**
 		 * Checks the time difference between the current time and the call end time.
 		 * Then, disable the CallButton for the remaining time until 10 seconds after the call ends.
-		 * @param {number} timestamp timestamp of callEnded message (in seconds)
+		 * @param timestamp timestamp of callEnded message (in seconds)
 		 */
-		setCallHasJustEnded(timestamp) {
+		setCallHasJustEnded(timestamp: number) {
 			const timeDiff = Math.abs(Date.now() - timestamp * 1000)
 			if (10000 - timeDiff < 0) {
 				return
@@ -137,7 +162,7 @@ export const useCallViewStore = defineStore('callView', {
 
 		resetCallHasJustEnded() {
 			clearTimeout(this.callEndedTimeout)
-			this.callEndedTimeout = null
+			this.callEndedTimeout = undefined
 		}
 	},
 })