diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue index d5b65a60ffb..ad7a3338d73 100644 --- a/src/components/RightSidebar/Participants/ParticipantsTab.vue +++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue @@ -128,15 +128,11 @@ export default { const { isActive } = toRefs(props) const { sortParticipants } = useSortParticipants() const isInCall = useIsInCall() - const { - participantsInitialised, - cancelableGetParticipants, - } = useGetParticipants(isActive, false) + const { cancelableGetParticipants } = useGetParticipants(isActive, false) return { sortParticipants, isInCall, - participantsInitialised, cancelableGetParticipants, } }, @@ -154,6 +150,10 @@ export default { }, computed: { + participantsInitialised() { + return this.$store.getters.participantsInitialised(this.token) + }, + participants() { return this.$store.getters.participantsList(this.token).slice().sort(this.sortParticipants) }, diff --git a/src/composables/useGetParticipants.js b/src/composables/useGetParticipants.js index 689ebbbd2c4..4bc3f64983a 100644 --- a/src/composables/useGetParticipants.js +++ b/src/composables/useGetParticipants.js @@ -45,15 +45,11 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { let fetchingParticipants = false let pendingChanges = true - // Exposed - const participantsInitialised = ref(false) - /** * Initialise the get participants listeners * */ function initialiseGetParticipants() { - EventBus.$on('route-change', onRouteChange) EventBus.$on('joined-conversation', onJoinedConversation) // FIXME this works only temporary until signaling is fixed to be only on the calls @@ -68,16 +64,11 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { * */ function stopGetParticipants() { - EventBus.$off('route-change', onRouteChange) EventBus.$off('joined-conversation', onJoinedConversation) EventBus.$off('signaling-participant-list-changed', debounceUpdateParticipants) unsubscribe('guest-promoted', onJoinedConversation) } - const onRouteChange = () => { - participantsInitialised.value = store.getters.participantsList(token.value).length > 1 - } - const onJoinedConversation = () => { if (isOneToOneConversation.value) { cancelableGetParticipants() @@ -112,10 +103,7 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { debounceFastUpdateParticipants.clear() debounceSlowUpdateParticipants.clear() - const response = await store.dispatch('fetchParticipants', { token: token.value }) - if (response) { - participantsInitialised.value = true - } + await store.dispatch('fetchParticipants', { token: token.value }) fetchingParticipants = false } @@ -143,7 +131,6 @@ export function useGetParticipants(isActive = ref(true), isTopBar = true) { }) return { - participantsInitialised, cancelableGetParticipants, } } diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js index b8e22728ac8..178424777cd 100644 --- a/src/store/participantsStore.js +++ b/src/store/participantsStore.js @@ -85,6 +85,8 @@ const state = { }, speaking: { }, + initialised: { + }, /** * Stores the cancel function returned by `cancelableFetchParticipants`, * which allows to cancel the previous request for participants @@ -204,6 +206,19 @@ const getters = { return null }, + /** + * Gets the initialisation status of the participants for a conversation. + * This is used to determine if the participants have been fetched for a + * conversation or not. + * + * @param {object} state - the state object. + * param {string} token - the conversation token. + * @return {boolean} - The initialisation status of the participants. + */ + participantsInitialised: (state) => (token) => { + return state.initialised[token] + }, + /** * 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. @@ -316,6 +331,10 @@ const mutations = { } }, + setParticipantsInitialised(state, { token, initialised }) { + Vue.set(state.initialised, token, initialised) + }, + setInCall(state, { token, sessionId, flags }) { if (flags === PARTICIPANT.CALL_FLAG.DISCONNECTED) { if (state.inCall[token] && state.inCall[token][sessionId]) { @@ -507,6 +526,7 @@ const actions = { const attendee = getters.findParticipant(token, participant) if (!attendee) { commit('addParticipant', { token, participant }) + commit('setParticipantsInitialised', { token, initialised: false }) } }, @@ -647,6 +667,9 @@ const actions = { } }) + if (context.state.initialised[token] === false) { + context.commit('setParticipantsInitialised', { token, initialised: true }) + } // Discard current cancel function context.commit('setCancelFetchParticipants', null)