Merge pull request #9212 from nextcloud/backport/9210/stable26

[stable26] `RightSidebar` improvements and bug fixes
nextcloud · Mar 31, 2023 · 283159c · 283159c
2 parents a5551bb + 237812b
commit 283159c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 33 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -28,7 +28,7 @@
 		<NcAppContent>
 			<router-view />
 		</NcAppContent>
-		<RightSidebar :show-chat-in-sidebar="isInCall" />
+		<RightSidebar :is-in-call="isInCall" />
 		<PreventUnload :when="warnLeaving || isSendingMessages" />
 		<DeviceChecker :initialize-on-mounted="false" />
 		<UploadEditor />
@@ -65,12 +65,8 @@ import talkHashCheck from './mixins/talkHashCheck.js'
 import Router from './router/router.js'
 import BrowserStorage from './services/BrowserStorage.js'
 import { EventBus } from './services/EventBus.js'
-import {
-	leaveConversationSync,
-} from './services/participantsService.js'
-import {
-	signalingKill,
-} from './utils/webrtc/index.js'
+import { leaveConversationSync } from './services/participantsService.js'
+import { signalingKill } from './utils/webrtc/index.js'
 
 // Styles
 import '@nextcloud/dialogs/dist/index.css'

diff --git a/src/components/BreakoutRoomsEditor/SendMessageDialog.vue b/src/components/BreakoutRoomsEditor/SendMessageDialog.vue
@@ -26,6 +26,7 @@
 				{{ dialogTitle }}
 			</h2>
 			<NewMessageForm v-if="modalContainerId"
+				ref="messageForm"
 				role="region"
 				:token="token"
 				:breakout-room="true"
@@ -98,6 +99,9 @@ export default {
 	mounted() {
 		// Postpone render of NewMessageForm until modal container is mounted
 		this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
+		this.$nextTick(() => {
+			this.$refs.messageForm.focusInput()
+		})
 	},
 
 	methods: {

diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
@@ -562,7 +562,7 @@ export default {
 				// Also remove the message to be replied for this conversation
 				await this.$store.dispatch('removeMessageToBeReplied', this.token)
 
-				this.breakoutRoom
+				this.broadcast
 					? await this.broadcastMessage(temporaryMessage, options)
 					: await this.postMessage(temporaryMessage, options)
 			}

diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
@@ -38,7 +38,7 @@
 		<template slot="description">
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
-		<NcAppSidebarTab v-if="showChatInSidebar"
+		<NcAppSidebarTab v-if="isInCall"
 			id="chat"
 			:order="1"
 			:name="t('spreed', 'Chat')">
@@ -135,30 +135,31 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 export default {
 	name: 'RightSidebar',
 	components: {
+		BreakoutRoomsTab,
+		ChatView,
+		LobbyStatus,
 		NcAppSidebar,
 		NcAppSidebarTab,
-		SharedItemsTab,
-		ChatView,
+		NcButton,
 		ParticipantsTab,
 		SetGuestUsername,
+		SharedItemsTab,
 		SipSettings,
-		LobbyStatus,
-		NcButton,
+		// Icons
 		AccountMultiple,
 		CogIcon,
+		DotsCircle,
 		FolderMultipleImage,
 		InformationOutline,
 		Message,
-		DotsCircle,
-		BreakoutRoomsTab,
 	},
 
 	mixins: [
 		isInLobby,
 	],
 
 	props: {
-		showChatInSidebar: {
+		isInCall: {
 			type: Boolean,
 			required: true,
 		},
@@ -219,7 +220,7 @@ export default {
 
 		canSearchParticipants() {
 			return (this.conversation.type === CONVERSATION.TYPE.GROUP
-					|| (this.conversation.type === CONVERSATION.TYPE.PUBLIC && this.conversation.objectType !== 'share:password'))
+				|| (this.conversation.type === CONVERSATION.TYPE.PUBLIC && this.conversation.objectType !== 'share:password'))
 		},
 
 		isSearching() {
@@ -279,8 +280,7 @@ export default {
 		},
 
 		showBreakoutRoomsTab() {
-			return this.getUserId
-				&& !this.isOneToOne
+			return this.getUserId && !this.isOneToOne
 				&& (this.breakoutRoomsConfigured || this.conversation.breakoutRoomMode === CONVERSATION.BREAKOUT_ROOM_MODE.FREE || this.conversation.objectType === 'room')
 		},
 
@@ -295,27 +295,49 @@ export default {
 				this.conversationName = this.conversation.displayName
 			}
 
-			if (newConversation.token !== oldConversation.token) {
-				if (newConversation.type === CONVERSATION.TYPE.ONE_TO_ONE
-					|| newConversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER) {
-					this.activeTab = 'shared-items'
-				} else {
-					this.activeTab = 'participants'
-				}
+			if (newConversation.token === oldConversation.token) {
+				return
+			}
+
+			if (this.isOneToOne) {
+				this.activeTab = 'shared-items'
+				return
 			}
-		},
 
-		showChatInSidebar(chatInSidebar) {
-			if (chatInSidebar) {
+			// Remain on "breakout-rooms" tab, when switching back to main room
+			if (this.breakoutRoomsConfigured && this.activeTab === 'breakout-rooms') {
+				return
+			}
+
+			// In other case switch to other tabs
+			if (this.isInCall) {
 				this.activeTab = 'chat'
-			} else if (this.activeTab === 'chat') {
-				if (this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE
-					|| this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER) {
+			} else {
+				this.activeTab = 'participants'
+			}
+		},
+
+		isInCall(newValue) {
+			// Waiting for chat tab to mount / destroy
+			this.$nextTick(() => {
+				if (newValue) {
+					// Set 'chat' tab as active, and switch to it if sidebar is open
+					this.activeTab = 'chat'
+					return
+				}
+
+				// If 'chat' tab wasn't active, leave it as is
+				if (this.activeTab !== 'chat') {
+					return
+				}
+
+				// In other case switch to other tabs
+				if (this.isOneToOne) {
 					this.activeTab = 'shared-items'
 				} else {
 					this.activeTab = 'participants'
 				}
-			}
+			})
 		},
 
 		token() {