Fix conversation switching lag

src/components/ChatView.vue

@@ -70,13 +70,6 @@ export default {
 		NewMessageForm,
 	},
 
-	props: {
-		token: {
-			type: String,
-			required: true,
-		},
-	},
-
 	data: function() {
 		return {
 			isDraggingOver: false,
@@ -109,6 +102,10 @@ export default {
 				return undefined
 			}
 		},
+
+		token() {
+			return this.$store.getters.getToken()
+		},
 	},
 
 	methods: {

src/components/NewMessageForm/NewMessageForm.vue

@@ -40,6 +40,8 @@
 				<div
 					v-if="canUploadFiles || canShareFiles">
 					<Actions
+						ref="uploadMenu"
+						:disabled="disabled"
 						default-icon="icon-clip-add-file"
 						:aria-label="t('spreed', 'Share files to the conversation')"
 						:aria-haspopup="true">
@@ -59,11 +61,11 @@
 						</ActionButton>
 					</Actions>
 				</div>
-				<div
-					v-if="!isReadOnly">
+				<div>
 					<EmojiPicker @select="addEmoji">
 						<button
 							type="button"
+							:disabled="disabled"
 							class="nc-button nc-button__main"
 							:aria-label="t('spreed', 'Add emoji')"
 							:aria-haspopup="true">
@@ -86,15 +88,15 @@
 						ref="advancedInput"
 						v-model="text"
 						:token="token"
-						:active-input="!isReadOnly"
+						:active-input="!disabled"
 						:placeholder-text="placeholderText"
 						:aria-label="placeholderText"
 						@update:contentEditable="contentEditableToParsed"
 						@submit="handleSubmit"
 						@files-pasted="handlePastedFiles" />
 				</div>
 				<button
-					:disabled="isReadOnly"
+					:disabled="disabled"
 					type="submit"
 					:aria-label="t('spreed', 'Send message')"
 					class="nc-button nc-button__main"
@@ -179,10 +181,18 @@ export default {
 			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
 		},
 
+		disabled() {
+			return this.isReadOnly || !this.currentConversationIsJoined
+		},
+
 		placeholderText() {
-			return this.isReadOnly
-				? t('spreed', 'This conversation has been locked')
-				: t('spreed', 'Write message, @ to mention someone …')
+			if (this.isReadonly) {
+				return t('spreed', 'This conversation has been locked')
+			} else if (!this.currentConversationIsJoined) {
+				return t('spreed', 'Joining conversation …')
+			} else {
+				return t('spreed', 'Write message, @ to mention someone …')
+			}
 		},
 
 		messageToBeReplied() {
@@ -194,7 +204,7 @@ export default {
 		},
 
 		canShareFiles() {
-			return !this.currentUserIsGuest && !this.isReadOnly
+			return !this.currentUserIsGuest
 		},
 
 		canUploadFiles() {
@@ -207,6 +217,16 @@ export default {
 		attachmentFolderFreeSpace() {
 			return this.$store.getters.getAttachmentFolderFreeSpace()
 		},
+
+		currentConversationIsJoined() {
+			return this.$store.getters.currentConversationIsJoined
+		},
+	},
+
+	watch: {
+		disabled(newValue) {
+			this.$refs.uploadMenu.$refs.menuButton.disabled = newValue
+		},
 	},
 
 	mounted() {

src/components/TopBar/CallButton.vue

@@ -98,6 +98,7 @@ export default {
 				|| this.isBlockedByLobby
 				|| this.conversation.readOnly
 				|| this.isNextcloudTalkHashDirty
+				|| !this.currentConversationIsJoined
 		},
 
 		leaveCallLabel() {
@@ -164,6 +165,10 @@ export default {
 			return this.conversation.readOnly === CONVERSATION.STATE.READ_WRITE
 				&& this.isInCall
 		},
+
+		currentConversationIsJoined() {
+			return this.$store.getters.currentConversationIsJoined
+		},
 	},
 
 	methods: {

src/init.js

@@ -24,6 +24,7 @@
 // entry points
 
 import store from './store'
+import { EventBus } from './services/EventBus'
 
 if (!window.OCA.Talk) {
 	window.OCA.Talk = {}
@@ -46,3 +47,8 @@ window.OCA.Talk.registerMessageAction = ({ label, callback, icon }) => {
 	}
 	store.dispatch('addMessageAction', messageAction)
 }
+
+EventBus.$on('Signaling::joinRoom', (payload) => {
+	const token = payload[0]
+	store.dispatch('updateLastJoinedConversationToken', token)
+})

src/store/tokenStore.js

@@ -23,6 +23,14 @@
 const state = {
 	token: '',
 	fileIdForToken: null,
+	/**
+	 * The joining of a room with the signaling server always lags
+	 * behind the "joining" of it in talk's UI. For this reason we
+	 * might have a  window of time in which we might be in
+	 * conversation B in talk's UI while still leaving conversation
+	 * A in the signaling server.
+	 **/
+	lastJoinedConversationToken: '',
 }
 
 const getters = {
@@ -32,6 +40,9 @@ const getters = {
 	getFileIdForToken: (state) => () => {
 		return state.fileIdForToken
 	},
+	currentConversationIsJoined() {
+		return state.lastJoinedConversationToken === state.token
+	},
 }
 
 const mutations = {
@@ -56,6 +67,10 @@ const mutations = {
 		state.token = newToken
 		state.fileIdForToken = newFileId
 	},
+
+	updateLastJoinedConversationToken(state, { token }) {
+		state.lastJoinedConversationToken = token
+	},
 }
 
 const actions = {
@@ -80,6 +95,10 @@ const actions = {
 	updateTokenAndFileIdForToken(context, { newToken, newFileId }) {
 		context.commit('updateTokenAndFileIdForToken', { newToken, newFileId })
 	},
+
+	updateLastJoinedConversationToken({ commit }, token) {
+		commit('updateLastJoinedConversationToken', { token })
+	},
 }
 
 export default { state, mutations, getters, actions }