diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue index a90df7fa072..80b7b1e081f 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue @@ -58,6 +58,10 @@ export default { type: Number, default: 0, }, + token: { + type: String, + required: true, + }, }, computed: { @@ -83,22 +87,32 @@ export default { }, nextVoiceMessageID() { - const voiceMessages = this.$store.getters.getVoiceMessages() - const thisVoiceMessage = voiceMessages[this.messageId] - - // Return early if next voice message is not present. - if (!thisVoiceMessage || !thisVoiceMessage.nextId) { - return null - } - - const nextVoiceMessage = voiceMessages[thisVoiceMessage.nextId] - - // Return early if next voice message is not just next to the current one. - if (!nextVoiceMessage || nextVoiceMessage.since > 0) { - return null + const messagesList = this.$store.getters.messagesList(this.token) + + let maximumAllowedDistance = 0 + let currentMessageFound = false + + for (const message of messagesList) { + // Return null if no voice-message found within the maximum allowed distance. + if (maximumAllowedDistance < 0) { + return null + } + + // If current message is already found and the current iterating message is of type voice-message then return its ID. + if (currentMessageFound && message.messageType === 'voice-message') { + return message.id + } else if (currentMessageFound) { + maximumAllowedDistance-- + continue + } + + // If current message is found then set the flag to true. + if (message.id === this.messageId) { + currentMessageFound = true + } } - return thisVoiceMessage.nextId + return null }, }, diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js index 351a1ab215b..6a659c19c2f 100644 --- a/src/store/messagesStore.js +++ b/src/store/messagesStore.js @@ -134,18 +134,6 @@ const state = { * Array of temporary message id to cancel function for the "postNewMessage" action */ cancelPostNewMessage: {}, - /** - * Number of messages send after last voice message. - */ - lastVoiceMessageSince: 0, - /** - * Last processed message ID. - */ - lastProcessedMessageId: 0, - /** - * Voice messages. - */ - voiceMessages: {}, } const getters = { @@ -167,10 +155,6 @@ const getters = { return getters.getLastKnownMessageId(token) < conversation.lastMessage.id }, - getVoiceMessages: (state) => () => { - return state.voiceMessages - }, - isMessagesListPopulated: (state) => (token) => { return !!state.loadedMessages[token] }, @@ -315,42 +299,6 @@ const mutations = { const preparedMessage = !message.parent && storedMessage?.parent ? { ...message, parent: storedMessage.parent } : message - - // If this is a voice message, then set this as the last voice message ID. - if (message.messageType === 'voice-message') { - // Get all the voice messages. - const voiceMessages = state.voiceMessages - - // Get last voice message. - const lastVoiceMessageKey = Object.keys(voiceMessages)[Object.keys(voiceMessages).length - 2] - const lastVoiceMessage = voiceMessages[lastVoiceMessageKey] - - // Get this voice message. - const thisVoiceMessage = voiceMessages[message.id] || {} - - // Set this voice message data. - thisVoiceMessage.id = message.id - thisVoiceMessage.since = state.lastVoiceMessageSince - thisVoiceMessage.previousId = lastVoiceMessage?.id || null - thisVoiceMessage.nextId = null - - // Set this voice messages new data. - voiceMessages[message.id] = thisVoiceMessage - - // Set last voice message next ID. - if (lastVoiceMessage) { - lastVoiceMessage.nextId = message.id - voiceMessages[lastVoiceMessageKey] = lastVoiceMessage - } - - // update the state. - Vue.set(state.voiceMessages, voiceMessages) - - state.lastVoiceMessageSince = 0 - } else if (!Object.keys(state.messages[token]).includes(String(message.id))) { - state.lastVoiceMessageSince++ - } - Vue.set(state.messages[token], message.id, preparedMessage) }, /** @@ -382,37 +330,6 @@ const mutations = { } Vue.set(state.messages[token][id], 'messageType', 'comment_deleted') Vue.set(state.messages[token][id], 'message', placeholder) - - if (state.voiceMessages[id]) { - // Get all the voice messages. - const voiceMessages = state.voiceMessages - - // Get the voice message to be deleted. - const toDeleteVoiceMessage = voiceMessages[id] - - // Get the previous and next voice messages. - const previousVoiceMessage = voiceMessages[toDeleteVoiceMessage.previousId] - const nextVoiceMessage = voiceMessages[toDeleteVoiceMessage.nextId] - - // Mutate and set the previous message. - if (previousVoiceMessage) { - previousVoiceMessage.nextId = nextVoiceMessage ? nextVoiceMessage.id : null - voiceMessages[previousVoiceMessage.id] = previousVoiceMessage - } - - // Mutate and set the next message. - if (nextVoiceMessage) { - nextVoiceMessage.previousId = previousVoiceMessage ? previousVoiceMessage.id : null - nextVoiceMessage.since += toDeleteVoiceMessage.since + 1 - voiceMessages[nextVoiceMessage.id] = nextVoiceMessage - } - - // Delete the voice message. - delete voiceMessages[id] - - // update the state. - Vue.set(state.voiceMessages, voiceMessages) - } }, /** * Adds a temporary message to the store.