fix: pass token to callView store via actions

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/CallView/CallView.vue

@@ -447,19 +447,19 @@ export default {
 		callParticipantModelsWithScreen(newValue, previousValue) {
 			// Everytime a new screen is shared, switch to promoted view
 			if (newValue.length > previousValue.length) {
-				this.callViewStore.startPresentation()
+				this.callViewStore.startPresentation(this.token)
 			} else if (newValue.length === 0 && previousValue.length > 0 && !this.hasLocalScreen && !this.selectedVideoPeerId) {
 				// last screen share stopped and no selected video, restoring previous state
-				this.callViewStore.stopPresentation()
+				this.callViewStore.stopPresentation(this.token)
 			}
 		},
 		showLocalScreen(showLocalScreen) {
 			// Everytime the local screen is shared, switch to promoted view
 			if (showLocalScreen) {
-				this.callViewStore.startPresentation()
+				this.callViewStore.startPresentation(this.token)
 			} else if (this.callParticipantModelsWithScreen.length === 0 && !this.selectedVideoPeerId) {
 				// last screen share stopped and no selected video, restoring previous state
-				this.callViewStore.stopPresentation()
+				this.callViewStore.stopPresentation(this.token)
 			}
 		},
 		hasLocalVideo(newValue) {
@@ -681,12 +681,13 @@ export default {
 
 			if (this.callViewStore.presentationStarted) {
 				this.callViewStore.setCallViewMode({
+					token: this.token,
 					isGrid: false,
 					isStripeOpen: false,
 					clearLast: false,
 				})
 			} else {
-				this.callViewStore.startPresentation()
+				this.callViewStore.startPresentation(this.token)
 			}
 			this.callViewStore.setSelectedVideoPeerId(null)
 			this.screens.splice(index, 1)
@@ -718,7 +719,7 @@ export default {
 				return
 			}
 			this.callViewStore.setSelectedVideoPeerId(peerId)
-			this.callViewStore.startPresentation()
+			this.callViewStore.startPresentation(this.token)
 		},
 		handleClickLocalVideo() {
 			// DO nothing if no video
@@ -727,7 +728,7 @@ export default {
 			}
 			// Deselect possible selected video
 			this.callViewStore.setSelectedVideoPeerId('local')
-			this.callViewStore.startPresentation()
+			this.callViewStore.startPresentation(this.token)
 		},
 
 		async fetchPeers() {

src/components/CallView/Grid/Grid.vue

@@ -558,7 +558,7 @@ export default {
 				return this.isStripe
 			},
 			set(value) {
-				this.callViewStore.setCallViewMode({ isGrid: !value, clearLast: false })
+				this.callViewStore.setCallViewMode({ token: this.token, isGrid: !value, clearLast: false })
 			},
 		},
 	},
@@ -853,7 +853,7 @@ export default {
 		},
 
 		handleClickStripeCollapse() {
-			this.callViewStore.setCallViewMode({ isStripeOpen: !this.stripeOpen, clearLast: false })
+			this.callViewStore.setCallViewMode({ token: this.token, isStripeOpen: !this.stripeOpen, clearLast: false })
 		},
 
 		handleMovement() {

src/components/CallView/shared/LocalVideo.vue

@@ -339,7 +339,7 @@ export default {
 
 		handleStopFollowing() {
 			this.callViewStore.setSelectedVideoPeerId(null)
-			this.callViewStore.stopPresentation()
+			this.callViewStore.stopPresentation(this.token)
 		},
 
 		updateContainerAspectRatio([{ target }]) {

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

@@ -527,7 +527,7 @@ describe('VideoBottomBar.vue', () => {
 
 				test('method is called after click', async () => {
 					callViewStore.setSelectedVideoPeerId(PEER_ID)
-					callViewStore.startPresentation()
+					callViewStore.startPresentation(TOKEN)
 					expect(callViewStore.selectedVideoPeerId).toBe(PEER_ID)
 					expect(callViewStore.presentationStarted).toBeTruthy()
 

src/components/CallView/shared/VideoBottomBar.vue

@@ -286,7 +286,7 @@ export default {
 		},
 
 		handleStopFollowing() {
-			this.callViewStore.stopPresentation()
+			this.callViewStore.stopPresentation(this.token)
 			this.callViewStore.setSelectedVideoPeerId(null)
 		},
 	},

src/components/TopBar/TopBarMenu.vue

@@ -452,7 +452,7 @@ export default {
 		},
 
 		changeView() {
-			this.callViewStore.setCallViewMode({ isGrid: !this.isGrid, clearLast: false })
+			this.callViewStore.setCallViewMode({ token: this.token, isGrid: !this.isGrid, clearLast: false })
 			this.callViewStore.setSelectedVideoPeerId(null)
 		},
 

src/stores/__tests__/callView.spec.js

@@ -72,9 +72,8 @@ describe('callViewStore', () => {
 		})
 
 		it('switching call view mode saves in local storage', () => {
-			vuexStore.dispatch('updateToken', TOKEN)
-
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: false,
 			})
@@ -83,6 +82,7 @@ describe('callViewStore', () => {
 			expect(BrowserStorage.setItem).toHaveBeenCalledWith(BROWSER_STORAGE_KEY, true)
 
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: false,
 				isStripeOpen: true,
 			})
@@ -93,37 +93,41 @@ describe('callViewStore', () => {
 
 		it('start presentation switches off grid view and restores when it ends', () => {
 			[{
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			}, {
+				token: TOKEN,
 				isGrid: false,
 				isStripeOpen: false,
 			}].forEach((testState) => {
 				callViewStore.setCallViewMode(testState)
 
-				callViewStore.startPresentation()
+				callViewStore.startPresentation(TOKEN)
 				expect(callViewStore.isGrid).toBeFalsy()
 				expect(callViewStore.isStripeOpen).toBeFalsy()
 
-				callViewStore.stopPresentation()
+				callViewStore.stopPresentation(TOKEN)
 				expect(callViewStore.isGrid).toEqual(testState.isGrid)
 				expect(callViewStore.isStripeOpen).toEqual(testState.isStripeOpen)
 			})
 		})
 
 		it('switching modes during presentation does not resets it after it ends', () => {
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			})
-			callViewStore.startPresentation()
+			callViewStore.startPresentation(TOKEN)
 
 			// switch during presentation
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			})
-			callViewStore.stopPresentation()
+			callViewStore.stopPresentation(TOKEN)
 
 			// state kept, not restored
 			expect(callViewStore.isGrid).toBeTruthy()
@@ -132,26 +136,28 @@ describe('callViewStore', () => {
 
 		it('starting presentation twice does not mess up remembered state', () => {
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			})
 			expect(callViewStore.presentationStarted).toBeFalsy()
 
-			callViewStore.startPresentation()
+			callViewStore.startPresentation(TOKEN)
 			expect(callViewStore.presentationStarted).toBeTruthy()
 
 			// switch during presentation
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			})
-			callViewStore.startPresentation()
+			callViewStore.startPresentation(TOKEN)
 			// state kept
 			expect(callViewStore.presentationStarted).toBeTruthy()
 			expect(callViewStore.isGrid).toBeTruthy()
 			expect(callViewStore.isStripeOpen).toBeTruthy()
 
-			callViewStore.stopPresentation()
+			callViewStore.stopPresentation(TOKEN)
 			expect(callViewStore.presentationStarted).toBeFalsy()
 			// state kept, not restored
 			expect(callViewStore.isGrid).toBeTruthy()
@@ -160,24 +166,26 @@ describe('callViewStore', () => {
 
 		it('stopping presentation twice does not mess up remembered state', () => {
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: true,
 			})
 			expect(callViewStore.presentationStarted).toBeFalsy()
 
-			callViewStore.startPresentation()
+			callViewStore.startPresentation(TOKEN)
 			expect(callViewStore.presentationStarted).toBeTruthy()
 
-			callViewStore.stopPresentation()
+			callViewStore.stopPresentation(TOKEN)
 			expect(callViewStore.presentationStarted).toBeFalsy()
 			expect(callViewStore.isGrid).toBeTruthy()
 			expect(callViewStore.isStripeOpen).toBeTruthy()
 
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: false,
 				isStripeOpen: false,
 			})
-			callViewStore.stopPresentation()
+			callViewStore.stopPresentation(TOKEN)
 			expect(callViewStore.presentationStarted).toBeFalsy()
 			// state kept, not reset
 			expect(callViewStore.isGrid).toBeFalsy()
@@ -188,13 +196,15 @@ describe('callViewStore', () => {
 			expect(callViewStore.lastIsGrid).toEqual(null)
 			expect(callViewStore.lastIsStripeOpen).toEqual(null)
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				isGrid: true,
 				isStripeOpen: false,
 			})
 			expect(callViewStore.lastIsGrid).toBeFalsy()
 			expect(callViewStore.lastIsStripeOpen).toBeTruthy()
 
 			callViewStore.setCallViewMode({
+				token: TOKEN,
 				clearLast: false,
 			})
 			expect(callViewStore.lastIsGrid).toBeFalsy()

src/stores/callView.js

@@ -58,19 +58,20 @@ export const useCallViewStore = defineStore('callView', {
 		 * 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;
 		 */
-		setCallViewMode({ isGrid = null, isStripeOpen = null, clearLast = true }) {
+		setCallViewMode({ token, isGrid = null, isStripeOpen = null, clearLast = true }) {
 			if (clearLast) {
 				this.lastIsGrid = null
 				this.lastIsStripeOpen = null
 			}
 
 			if (isGrid !== null) {
 				this.lastIsGrid = this.isGrid
-				BrowserStorage.setItem(`callprefs-${store.getters.getToken()}-isgrid`, isGrid)
+				BrowserStorage.setItem(`callprefs-${token}-isgrid`, isGrid)
 				this.isGrid = isGrid
 			}
 
@@ -85,32 +86,34 @@ 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.
 		 */
-		startPresentation() {
+		startPresentation(token) {
 			// don't start twice, this would prevent multiple screen shares to clear the last call view state
 			if (this.presentationStarted) {
 				return
 			}
 			this.presentationStarted = true
 
-			this.setCallViewMode({ isGrid: false, isStripeOpen: false, clearLast: false })
+			this.setCallViewMode({ token, isGrid: false, isStripeOpen: false, clearLast: false })
 		},
 
 		/**
 		 * Stops presentation mode.
 		 *
 		 * Restores call view state from before starting the presentation,
 		 * given that the last state was not cleared manually.
+		 * @param {string} token current conversation token.
 		 */
-		stopPresentation() {
+		stopPresentation(token) {
 			if (!this.presentationStarted) {
 				return
 			}
 			this.presentationStarted = false
 
 			if (!this.isGrid && !this.isStripeOpen) {
 				// User didn't pick grid view during presentation, restore previous state
-				this.setCallViewMode({ isGrid: this.lastIsGrid, isStripeOpen: this.lastIsStripeOpen, clearLast: false })
+				this.setCallViewMode({ token, isGrid: this.lastIsGrid, isStripeOpen: this.lastIsStripeOpen, clearLast: false })
 			}
 		},