From 6158a8877924631810894f85369f56c3e98dc3e6 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 1 Oct 2024 16:23:58 +0200 Subject: [PATCH] fix: remove redundant and unrelated getters - remove isQualityWarningTooltipDismissed from store (reset on each call, so make sense to store in component only) - move participantRaisedHands to participantsStore - remove backgroundImageAverageColorCache from store (was dropped in 9094628f3235218b8e8f3ce1b9954573db494154) Signed-off-by: Maksim Sukharev --- .../Participants/Participant.spec.js | 4 +- src/components/TopBar/TopBarMediaControls.vue | 7 +- src/store/callViewStore.spec.js | 61 ----------------- src/store/participantsStore.js | 38 +++++++++++ src/store/participantsStore.spec.js | 67 +++++++++++++++++++ src/stores/callView.js | 65 ------------------ 6 files changed, 110 insertions(+), 132 deletions(-) diff --git a/src/components/RightSidebar/Participants/Participant.spec.js b/src/components/RightSidebar/Participants/Participant.spec.js index 48bd409ead6..5e0cb04a5aa 100644 --- a/src/components/RightSidebar/Participants/Participant.spec.js +++ b/src/components/RightSidebar/Participants/Participant.spec.js @@ -5,6 +5,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils' import flushPromises from 'flush-promises' import { cloneDeep } from 'lodash' +import { createPinia, setActivePinia } from 'pinia' import Vuex from 'vuex' import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' @@ -38,6 +39,7 @@ describe('Participant.vue', () => { beforeEach(() => { localVue = createLocalVue() localVue.use(Vuex) + setActivePinia(createPinia()) participant = { displayName: 'Alice', @@ -271,7 +273,7 @@ describe('Participant.vue', () => { getParticipantRaisedHandMock = jest.fn().mockReturnValue({ state: false }) testStoreConfig = cloneDeep(storeConfig) - testStoreConfig.modules.callViewStore.getters.getParticipantRaisedHand = () => getParticipantRaisedHandMock + testStoreConfig.modules.participantsStore.getters.getParticipantRaisedHand = () => getParticipantRaisedHandMock store = new Vuex.Store(testStoreConfig) }) diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue index f7d812a9e82..75475661f99 100644 --- a/src/components/TopBar/TopBarMediaControls.vue +++ b/src/components/TopBar/TopBarMediaControls.vue @@ -185,6 +185,7 @@ export default { boundaryElement: document.querySelector('.main-view'), mouseover: false, qualityWarningInGracePeriodTimeout: null, + isQualityWarningTooltipDismissed: false, } }, @@ -256,10 +257,6 @@ export default { : t('spreed', 'Enable screensharing') }, - isQualityWarningTooltipDismissed() { - return this.$store.getters.isQualityWarningTooltipDismissed - }, - showQualityWarningTooltip() { return this.qualityWarningTooltip && (!this.isQualityWarningTooltipDismissed || this.mouseover) }, @@ -510,7 +507,7 @@ export default { }, dismissQualityWarningTooltip() { - this.$store.dispatch('dismissQualityWarningTooltip') + this.isQualityWarningTooltipDismissed = true }, }, } diff --git a/src/store/callViewStore.spec.js b/src/store/callViewStore.spec.js index 2301dd75e55..000a33d7b42 100644 --- a/src/store/callViewStore.spec.js +++ b/src/store/callViewStore.spec.js @@ -32,67 +32,6 @@ describe('callViewStore', () => { jest.clearAllMocks() }) - describe('raised hand', () => { - test('get whether participants raised hands with single session id', () => { - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-1', - raisedHand: { state: true, timestamp: 1 }, - }) - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-2', - raisedHand: { state: true, timestamp: 2 }, - }) - - expect(store.getters.getParticipantRaisedHand(['session-id-1'])) - .toStrictEqual({ state: true, timestamp: 1 }) - - expect(store.getters.getParticipantRaisedHand(['session-id-2'])) - .toStrictEqual({ state: true, timestamp: 2 }) - - expect(store.getters.getParticipantRaisedHand(['session-id-another'])) - .toStrictEqual({ state: false, timestamp: null }) - }) - - test('get raised hands after lowering', () => { - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-2', - raisedHand: { state: true, timestamp: 1 }, - }) - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-2', - raisedHand: { state: false, timestamp: 3 }, - }) - - expect(store.getters.getParticipantRaisedHand(['session-id-2'])) - .toStrictEqual({ state: false, timestamp: null }) - }) - - test('clears raised hands state after leaving call', () => { - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-2', - raisedHand: { state: true, timestamp: 1 }, - }) - store.dispatch('leaveCall') - - expect(store.getters.getParticipantRaisedHand(['session-id-2'])) - .toStrictEqual({ state: false, timestamp: null }) - }) - - test('get raised hands with multiple session ids only returns first found', () => { - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-2', - raisedHand: { state: true, timestamp: 1 }, - }) - store.dispatch('setParticipantHandRaised', { - sessionId: 'session-id-3', - raisedHand: { state: true, timestamp: 1 }, - }) - - expect(store.getters.getParticipantRaisedHand(['session-id-1', 'session-id-2', 'session-id-3'])) - .toStrictEqual({ state: true, timestamp: 1 }) - }) - }) - describe('call view mode and presentation', () => { test('restores grid state when joining call (true)', () => { localStorage.getItem.mockReturnValueOnce('true') diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js index 6f2b55655bc..d6803b3770a 100644 --- a/src/store/participantsStore.js +++ b/src/store/participantsStore.js @@ -73,6 +73,9 @@ const state = { }, speaking: { }, + // TODO: moved from callViewStore, separate to callExtras (with typing + speaking) + participantRaisedHands: { + }, initialised: { }, /** @@ -177,6 +180,19 @@ const getters = { return state.speaking[attendeeId] }, + participantRaisedHandList: (state) => { + return state.participantRaisedHands + }, + getParticipantRaisedHand: (state) => (sessionIds) => { + for (let i = 0; i < sessionIds.length; i++) { + if (state.participantRaisedHands[sessionIds[i]]) { + // note: only the raised states are stored, so no need to confirm + return state.participantRaisedHands[sessionIds[i]] + } + } + + return { state: false, timestamp: null } + }, /** * Replaces the legacy getParticipant getter. Returns a callback function in which you can * pass in the token and attendeeId as arguments to get the participant object. @@ -461,6 +477,21 @@ const mutations = { } }, + setParticipantHandRaised(state, { sessionId, raisedHand }) { + if (!sessionId) { + throw new Error('Missing or empty sessionId argument in call to setParticipantHandRaised') + } + if (raisedHand && raisedHand.state) { + Vue.set(state.participantRaisedHands, sessionId, raisedHand) + } else { + Vue.delete(state.participantRaisedHands, sessionId) + } + }, + + clearParticipantHandRaised(state) { + state.participantRaisedHands = {} + }, + /** * Purge a given conversation from the previously added participants. * @@ -831,6 +862,9 @@ const actions = { } commit('updateParticipant', { token, attendeeId: attendee.attendeeId, updatedData }) + // clear raised hands as they were specific to the call + commit('clearParticipantHandRaised') + commit('setInCall', { token, sessionId: participantIdentifier.sessionId, @@ -1099,6 +1133,10 @@ const actions = { context.commit('purgeSpeakingStore') }, + setParticipantHandRaised(context, { sessionId, raisedHand }) { + context.commit('setParticipantHandRaised', { sessionId, raisedHand }) + }, + processDialOutAnswer(context, { callid }) { context.commit('setPhoneState', { callid }) }, diff --git a/src/store/participantsStore.spec.js b/src/store/participantsStore.spec.js index a813c0e4995..a222f0cfa27 100644 --- a/src/store/participantsStore.spec.js +++ b/src/store/participantsStore.spec.js @@ -607,6 +607,73 @@ describe('participantsStore', () => { }, ]) }) + + describe('raised hand', () => { + test('get whether participants raised hands with single session id', () => { + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-1', + raisedHand: { state: true, timestamp: 1 }, + }) + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-2', + raisedHand: { state: true, timestamp: 2 }, + }) + + expect(store.getters.getParticipantRaisedHand(['session-id-1'])) + .toStrictEqual({ state: true, timestamp: 1 }) + + expect(store.getters.getParticipantRaisedHand(['session-id-2'])) + .toStrictEqual({ state: true, timestamp: 2 }) + + expect(store.getters.getParticipantRaisedHand(['session-id-another'])) + .toStrictEqual({ state: false, timestamp: null }) + }) + + test('get raised hands after lowering', () => { + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-2', + raisedHand: { state: true, timestamp: 1 }, + }) + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-2', + raisedHand: { state: false, timestamp: 3 }, + }) + + expect(store.getters.getParticipantRaisedHand(['session-id-2'])) + .toStrictEqual({ state: false, timestamp: null }) + }) + + test('clears raised hands state after leaving call', async () => { + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-2', + raisedHand: { state: true, timestamp: 1 }, + }) + await store.dispatch('leaveCall', { + token: TOKEN, + participantIdentifier: { + attendeeId: 1, + sessionId: 'session-id-1', + }, + }) + + expect(store.getters.getParticipantRaisedHand(['session-id-2'])) + .toStrictEqual({ state: false, timestamp: null }) + }) + + test('get raised hands with multiple session ids only returns first found', () => { + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-2', + raisedHand: { state: true, timestamp: 1 }, + }) + store.dispatch('setParticipantHandRaised', { + sessionId: 'session-id-3', + raisedHand: { state: true, timestamp: 1 }, + }) + + expect(store.getters.getParticipantRaisedHand(['session-id-1', 'session-id-2', 'session-id-3'])) + .toStrictEqual({ state: true, timestamp: 1 }) + }) + }) }) test('resends invitations', async () => { diff --git a/src/stores/callView.js b/src/stores/callView.js index c91a203f9c2..431501db63d 100644 --- a/src/stores/callView.js +++ b/src/stores/callView.js @@ -4,7 +4,6 @@ */ import { defineStore } from 'pinia' -import Vue from 'vue' import { CONVERSATION } from '../constants.js' import BrowserStorage from '../services/BrowserStorage.js' @@ -20,58 +19,15 @@ export const useCallViewStore = defineStore('callView', { lastIsStripeOpen: null, presentationStarted: false, selectedVideoPeerId: null, - qualityWarningTooltipDismissed: false, callEndedTimeout: null, - participantRaisedHands: {}, - backgroundImageAverageColorCache: {}, }), getters: { callHasJustEnded: (state) => !!state.callEndedTimeout, - isQualityWarningTooltipDismissed: (state) => state.qualityWarningTooltipDismissed, - participantRaisedHandList: (state) => { - return state.participantRaisedHands - }, - getParticipantRaisedHand: (state) => (sessionIds) => { - for (let i = 0; i < sessionIds.length; i++) { - if (state.participantRaisedHands[sessionIds[i]]) { - // note: only the raised states are stored, so no need to confirm - return state.participantRaisedHands[sessionIds[i]] - } - } - - return { state: false, timestamp: null } - }, - getCachedBackgroundImageAverageColor: (state) => (videoBackgroundId) => { - return state.backgroundImageAverageColorCache[videoBackgroundId] - }, }, actions: { // Mutations - setQualityWarningTooltipDismissed(state, { qualityWarningTooltipDismissed }) { - state.qualityWarningTooltipDismissed = qualityWarningTooltipDismissed - }, - setParticipantHandRaised(state, { sessionId, raisedHand }) { - if (!sessionId) { - throw new Error('Missing or empty sessionId argument in call to setParticipantHandRaised') - } - if (raisedHand && raisedHand.state) { - Vue.set(state.participantRaisedHands, sessionId, raisedHand) - } else { - Vue.delete(state.participantRaisedHands, sessionId) - } - }, - clearParticipantHandRaised(state) { - state.participantRaisedHands = {} - }, - setCachedBackgroundImageAverageColor(state, { videoBackgroundId, backgroundImageAverageColor }) { - Vue.set(state.backgroundImageAverageColorCache, videoBackgroundId, backgroundImageAverageColor) - }, - clearBackgroundImageAverageColorCache(state) { - state.backgroundImageAverageColorCache = {} - }, - // Actions setForceCallView(value) { this.forceCallView = value @@ -97,15 +53,6 @@ export const useCallViewStore = defineStore('callView', { isGrid = (isGrid === 'true') } context.dispatch('setCallViewMode', { isGrid, isStripeOpen: true }) - - context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: false }) - }, - - leaveCall(context) { - // clear raised hands as they were specific to the call - context.commit('clearParticipantHandRaised') - - context.commit('clearBackgroundImageAverageColorCache') }, /** @@ -136,14 +83,6 @@ export const useCallViewStore = defineStore('callView', { } }, - setParticipantHandRaised(context, { sessionId, raisedHand }) { - context.commit('setParticipantHandRaised', { sessionId, raisedHand }) - }, - - setCachedBackgroundImageAverageColor(context, { videoBackgroundId, backgroundImageAverageColor }) { - context.commit('setCachedBackgroundImageAverageColor', { videoBackgroundId, backgroundImageAverageColor }) - }, - /** * Starts presentation mode. * @@ -194,10 +133,6 @@ export const useCallViewStore = defineStore('callView', { this.presentationStarted = false }, - dismissQualityWarningTooltip(context) { - context.commit('setQualityWarningTooltipDismissed', { qualityWarningTooltipDismissed: true }) - }, - setIsEmptyCallView(value) { this.isEmptyCallView = value },