Make the UI handle the call state on it's interactions instead of the…

… participant data

The user could have joined the call in another window/device and shouldn't jump to the call view
for this window unless the user pressed "Join call" here as well

Signed-off-by: Joas Schilling <coding@schilljs.com>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -167,6 +167,7 @@ import Check from 'vue-material-design-icons/Check'
 import CheckAll from 'vue-material-design-icons/CheckAll'
 import Reload from 'vue-material-design-icons/Reload'
 import Quote from '../../../Quote'
+import isInCall from '../../../../mixins/isInCall'
 import participant from '../../../../mixins/participant'
 import { EventBus } from '../../../../services/EventBus'
 import emojiRegex from 'emoji-regex'
@@ -201,6 +202,7 @@ export default {
 
 	mixins: [
 		participant,
+		isInCall,
 	],
 
 	inheritAttrs: false,
@@ -392,8 +394,8 @@ export default {
 		showJoinCallButton() {
 			return this.systemMessage === 'call_started'
 				&& this.conversation.hasCall
-				&& this.participant.inCall === PARTICIPANT.CALL_FLAG.DISCONNECTED
 				&& this.isLastCallStartedMessage
+				&& !this.isInCall
 		},
 
 		isSingleEmoji() {

src/mixins/isInCall.js

@@ -19,14 +19,11 @@
  *
  */
 
-import { PARTICIPANT } from '../constants'
 import SessionStorage from '../services/SessionStorage'
 import { EventBus } from '../services/EventBus'
 
 /**
- * A mixin to check whether the current session of a user is in a call or not.
- *
- * Components using this mixin require a "participant" property with, at least, the "inCall" property.
+ * A mixin to check whether the user joined the call of the current token in this PHP session or not.
  */
 export default {
 
@@ -39,7 +36,7 @@ export default {
 	computed: {
 		isInCall() {
 			return this.sessionStorageJoinedConversation === this.$store.getters.getToken()
-				&& this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
+				&& this.$store.getters.isInCall(this.$store.getters.getToken())
 		},
 	},
 

src/store/actorStore.js

@@ -57,6 +57,7 @@ const getters = {
 		return {
 			actorType: state.actorType,
 			actorId: state.actorId,
+			sessionId: state.sessionId,
 		}
 	},
 }

src/store/participantsStore.js

@@ -37,9 +37,14 @@ const state = {
 	},
 	peers: {
 	},
+	inCall: {
+	},
 }
 
 const getters = {
+	isInCall: (state) => (token) => {
+		return !!(state.inCall[token] && Object.keys(state.inCall[token]).length > 0)
+	},
 	/**
 	 * Gets the participants array
 	 * @param {object} state the state object.
@@ -114,6 +119,18 @@ const mutations = {
 			console.error(`The conversation you are trying to purge doesn't exist`)
 		}
 	},
+	setInCall(state, { token, sessionId, flags }) {
+		if (flags === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
+			if (state.inCall[token] && state.inCall[token][sessionId]) {
+				Vue.delete(state.inCall[token], sessionId)
+			}
+		} else {
+			if (!state.inCall[token]) {
+				Vue.set(state.inCall, token, {})
+			}
+			Vue.set(state.inCall[token], sessionId, flags)
+		}
+	},
 	/**
 	 * Purges a given conversation from the previously added participants
 	 * @param {object} state current store state;
@@ -247,12 +264,22 @@ const actions = {
 	},
 
 	async joinCall({ commit, getters }, { token, participantIdentifier, flags }) {
+		if (!participantIdentifier?.sessionId) {
+			console.error('Trying to join call without sessionId')
+		}
+
 		const index = getters.getParticipantIndex(token, participantIdentifier)
 		if (index === -1) {
 			console.error('Participant not found', participantIdentifier)
 			return
 		}
 
+		commit('setInCall', {
+			token,
+			sessionId: participantIdentifier.sessionId,
+			flags,
+		})
+
 		await joinCall(token, flags)
 
 		const updatedData = {
@@ -262,8 +289,13 @@ const actions = {
 	},
 
 	async leaveCall({ commit, getters }, { token, participantIdentifier }) {
+		if (!participantIdentifier?.sessionId) {
+			console.error('Trying to leave call without sessionId')
+		}
+
 		const index = getters.getParticipantIndex(token, participantIdentifier)
 		if (index === -1) {
+			console.error('Participant not found', participantIdentifier)
 			return
 		}
 
@@ -273,6 +305,12 @@ const actions = {
 			inCall: PARTICIPANT.CALL_FLAG.DISCONNECTED,
 		}
 		commit('updateParticipant', { token, index, updatedData })
+
+		commit('setInCall', {
+			token,
+			sessionId: participantIdentifier.sessionId,
+			flags: PARTICIPANT.CALL_FLAG.DISCONNECTED,
+		})
 	},
 
 	/**

src/views/MainView.vue

@@ -20,7 +20,6 @@ import CallView from '../components/CallView/CallView'
 import ChatView from '../components/ChatView'
 import LobbyScreen from '../components/LobbyScreen'
 import TopBar from '../components/TopBar/TopBar'
-import { PARTICIPANT } from '../constants'
 import isInLobby from '../mixins/isInLobby'
 import isInCall from '../mixins/isInCall'
 import participant from '../mixins/participant'
@@ -60,7 +59,7 @@ export default {
 	watch: {
 		isInLobby: function(isInLobby) {
 			// User is now blocked by the lobby
-			if (isInLobby && this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED) {
+			if (isInLobby && this.isInCall) {
 				this.$store.dispatch('leaveCall', {
 					token: this.token,
 					participantIdentifier: this.$store.getters.getParticipantIdentifier(),