Breakout rooms polishing round 1

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -77,7 +77,7 @@
 			</NcAppSettingsSection>
 
 			<!-- Breakout rooms -->
-			<NcAppSettingsSection v-if="canFullModerate"
+			<NcAppSettingsSection v-if="canConfigureBreakoutRooms"
 				id="breakout-rooms"
 				:title="t('spreed', 'Breakout Rooms')">
 				<BreakoutRoomsSettings :token="token" />
@@ -104,6 +104,7 @@
 </template>
 
 <script>
+import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
@@ -112,6 +113,7 @@ import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDia
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
+import Description from '../Description/Description.vue'
 import BreakoutRoomsSettings from './BreakoutRoomsSettings.vue'
 import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue'
 import DangerZone from './DangerZone.vue'
@@ -123,7 +125,6 @@ import LockingSettings from './LockingSettings.vue'
 import MatterbridgeSettings from './Matterbridge/MatterbridgeSettings.vue'
 import NotificationsSettings from './NotificationsSettings.vue'
 import SipSettings from './SipSettings.vue'
-import Description from '../Description/Description.vue'
 
 import { PARTICIPANT, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -212,6 +213,13 @@ export default {
 		isBreakoutRoom() {
 			return this.conversation.objectType === 'room'
 		},
+
+		canConfigureBreakoutRooms() {
+			const breakoutRoomsEnabled = getCapabilities()?.spreed?.config?.call?.['breakout-rooms'] || false
+			return this.canFullModerate
+				&& breakoutRoomsEnabled
+				&& this.conversation.type === CONVERSATION.TYPE.GROUP
+		},
 	},
 
 	watch: {
@@ -237,7 +245,9 @@ export default {
 			this.$store.dispatch('updateConversationSettingsToken', token)
 			this.showSettings = true
 			this.$nextTick(() => {
-				this.$refs.linkShareSettings.$el.focus()
+				if (this.$refs.linkShareSettings) {
+					this.$refs.linkShareSettings.$el.focus()
+				}
 			})
 		},
 

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -38,9 +38,9 @@ import { emit } from '@nextcloud/event-bus'
 
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
-import Conversation from './Conversation.vue'
 import Hint from '../../Hint.vue'
 import LoadingPlaceholder from '../../LoadingPlaceholder.vue'
+import Conversation from './Conversation.vue'
 
 import { EventBus } from '../../../services/EventBus.js'
 

src/components/LeftSidebar/LeftSidebar.vue

@@ -125,12 +125,12 @@ import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import ConversationsOptionsList from '../ConversationsOptionsList.vue'
+import Hint from '../Hint.vue'
 import Conversation from './ConversationsList/Conversation.vue'
 import ConversationsList from './ConversationsList/ConversationsList.vue'
 import NewGroupConversation from './NewGroupConversation/NewGroupConversation.vue'
 import SearchBox from './SearchBox/SearchBox.vue'
-import ConversationsOptionsList from '../ConversationsOptionsList.vue'
-import Hint from '../Hint.vue'
 
 import { CONVERSATION } from '../../constants.js'
 import arrowNavigation from '../../mixins/arrowNavigation.js'

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -133,10 +133,10 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
+import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 import SetConversationName from './SetConversationName/SetConversationName.vue'
-import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
 
 import { CONVERSATION } from '../../../constants.js'
 import isInCall from '../../../mixins/isInCall.js'

src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue

@@ -69,8 +69,8 @@ import { showError } from '@nextcloud/dialogs'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBubble.vue'
 import ParticipantSearchResults from '../../../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
+import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBubble.vue'
 
 import { searchPossibleConversations } from '../../../../services/conversationsService.js'
 import CancelableRequest from '../../../../utils/cancelableRequest.js'

src/components/MessagesList/MessagesList.vue

@@ -85,8 +85,8 @@ import moment from '@nextcloud/moment'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
-import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
+import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 
 import {
 	ATTENDEE,

src/components/NewMessageForm/NewMessageForm.vue

@@ -239,10 +239,10 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+import Quote from '../Quote.vue'
 import AudioRecorder from './AudioRecorder/AudioRecorder.vue'
 import SimplePollsEditor from './SimplePollsEditor/SimplePollsEditor.vue'
 import TemplatePreview from './TemplatePreview.vue'
-import Quote from '../Quote.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
@@ -895,7 +895,7 @@ export default {
 			if (!this.isTributePickerActive) {
 				this.blurInput()
 			}
-		}
+		},
 	},
 }
 </script>

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -65,13 +65,12 @@
 </template>
 
 <script>
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Send from 'vue-material-design-icons/Send.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
 import { showWarning } from '@nextcloud/dialogs'
-import { EventBus } from '../../../services/EventBus.js'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
@@ -80,6 +79,7 @@ import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
+import { EventBus } from '../../../services/EventBus.js'
 
 export default {
 	name: 'BreakoutRoomItem',

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue

@@ -23,9 +23,9 @@
 	<div class="breakout-rooms">
 		<!-- Series of buttons at the top of the tab, these affect all
 		 breakout rooms -->
-		<div v-if="canModerate" class="breakout-rooms__actions">
+		<div v-if="canModerate || isInBreakoutRoom" class="breakout-rooms__actions">
 			<div class="breakout-rooms__actions-group">
-				<NcButton v-if="breakoutRoomsNotStarted"
+				<NcButton v-if="breakoutRoomsNotStarted && canModerate"
 					:title="t('spreed', 'Start breakout rooms')"
 					:aria-label="t('spreed', 'Start breakout rooms')"
 					type="tertiary"
@@ -35,7 +35,7 @@
 						<Play :size="20" />
 					</template>
 				</NcButton>
-				<NcButton v-else
+				<NcButton v-else-if="canModerate"
 					:title="t('spreed', 'Stop breakout rooms')"
 					:aria-label="t('spreed', 'Stop breakout rooms')"
 					type="tertiary"
@@ -44,7 +44,19 @@
 						<StopIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton :title="t('spreed', 'Send message to breakout rooms')"
+				<NcButton v-if="isInBreakoutRoom"
+					:title="backToMainRoomLabel"
+					:aria-label="backToMainRoomLabel"
+					:wide="true"
+					type="secondary"
+					@click="switchToParentRoom">
+					<template #icon>
+						<ArrowLeft :size="20" />
+					</template>
+					{{ backToMainRoomLabel }}
+				</NcButton>
+				<NcButton v-if="canModerate"
+					:title="t('spreed', 'Send message to breakout rooms')"
 					:aria-label="t('spreed', 'Send message to breakout rooms')"
 					type="tertiary"
 					@click="openSendMessageDialog">
@@ -53,7 +65,7 @@
 					</template>
 				</NcButton>
 			</div>
-			<div class="breakout-rooms__actions-group">
+			<div v-if="canModerate" class="breakout-rooms__actions-group right">
 				<!-- Re-arrange participants button -->
 				<NcButton type="tertiary"
 					:title="moveParticipantsButtonTitle"
@@ -108,6 +120,7 @@
 
 <script>
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import Message from 'vue-material-design-icons/Message.vue'
 import Play from 'vue-material-design-icons/Play.vue'
@@ -116,13 +129,14 @@ import StopIcon from 'vue-material-design-icons/Stop.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
-import BreakoutRoomItem from './BreakoutRoomItem.vue'
 import BreakoutRoomsParticipantsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue'
 import SendMessageDialog from '../../BreakoutRoomsEditor/SendMessageDialog.vue'
+import BreakoutRoomItem from './BreakoutRoomItem.vue'
 
+// Constants
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
-
 import isInCall from '../../../mixins/isInCall.js'
+import { EventBus } from '../../../services/EventBus.js'
 
 export default {
 	name: 'BreakoutRoomsTab',
@@ -141,6 +155,7 @@ export default {
 		AccountMultiple,
 		StopIcon,
 		Message,
+		ArrowLeft,
 	},
 
 	mixins: [isInCall],
@@ -198,6 +213,14 @@ export default {
 		canModerate() {
 			return !this.isOneToOne && (this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
 		},
+
+		backToMainRoomLabel() {
+			return t('spreed', 'Back to main room')
+		},
+
+		isInBreakoutRoom() {
+			return this.conversation.objectType === 'room'
+		},
 	},
 
 	watch: {
@@ -312,6 +335,13 @@ export default {
 		closeParticipantsEditor() {
 			this.showParticipantsEditor = false
 		},
+
+		async switchToParentRoom() {
+			const parentRoomToken = this.conversation.objectId
+			EventBus.$emit('switch-to-conversation', {
+				token: parentRoomToken,
+			})
+		},
 	},
 }
 </script>
@@ -328,7 +358,7 @@ export default {
 	&__actions-group {
 		display: flex;
 		gap: var(--default-grid-baseline);
-
+		flex-grow: 1;
 	}
 
 	&__room {
@@ -340,6 +370,10 @@ export default {
 	}
 }
 
+.right {
+	justify-content: right;
+}
+
 ::v-deep .app-navigation-entry__title {
 	font-weight: bold !important;
 }

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js

@@ -10,8 +10,8 @@ import VideoIcon from 'vue-material-design-icons/Video.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 
-import Participant from './Participant.vue'
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+import Participant from './Participant.vue'
 
 import { ATTENDEE, PARTICIPANT } from '../../../../../constants.js'
 import storeConfig from '../../../../../store/storeConfig.js'

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -230,8 +230,8 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import ParticipantPermissionsEditor from './ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue'
 import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+import ParticipantPermissionsEditor from './ParticipantPermissionsEditor/ParticipantPermissionsEditor.vue'
 
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
 import readableNumber from '../../../../../mixins/readableNumber.js'

src/components/RightSidebar/Participants/ParticipantsList/Participant/ParticipantPermissionsEditor/ParticipantPermissionsEditor.spec.js

@@ -2,8 +2,8 @@ import { createLocalVue, mount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
 import Vuex from 'vuex'
 
-import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
 import PermissionsEditor from '../../../../../PermissionsEditor/PermissionsEditor.vue'
+import ParticipantPermissionsEditor from './ParticipantPermissionsEditor.vue'
 
 import { PARTICIPANT, ATTENDEE } from '../../../../../../constants.js'
 import storeConfig from '../../../../../../store/storeConfig.js'

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -48,9 +48,9 @@ import { loadState } from '@nextcloud/initial-state'
 
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 
+import SearchBox from '../../LeftSidebar/SearchBox/SearchBox.vue'
 import CurrentParticipants from './CurrentParticipants/CurrentParticipants.vue'
 import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue'
-import SearchBox from '../../LeftSidebar/SearchBox/SearchBox.vue'
 
 import getParticipants from '../../../mixins/getParticipants.js'
 import { searchPossibleConversations } from '../../../services/conversationsService.js'

src/components/RightSidebar/RightSidebar.vue

@@ -120,13 +120,13 @@ import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import ChatView from '../ChatView.vue'
+import SetGuestUsername from '../SetGuestUsername.vue'
 import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
 import LobbyStatus from './LobbyStatus.vue'
 import ParticipantsTab from './Participants/ParticipantsTab.vue'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
 import SipSettings from './SipSettings.vue'
-import ChatView from '../ChatView.vue'
-import SetGuestUsername from '../SetGuestUsername.vue'
 
 import { CONVERSATION, WEBINAR, PARTICIPANT } from '../../constants.js'
 import isInLobby from '../../mixins/isInLobby.js'
@@ -268,7 +268,9 @@ export default {
 		},
 
 		showBreakoutRoomsTab() {
-			return this.getUserId && !this.isOneToOne && this.breakoutRoomsConfigured
+			return this.getUserId
+				&& !this.isOneToOne
+				&& (this.breakoutRoomsConfigured || this.conversation.breakoutRoomMode === CONVERSATION.BREAKOUT_ROOM_MODE.FREE || this.conversation.objectType === 'room')
 		},
 
 		breakoutRoomsText() {

src/components/TopBar/CallButton.vue

@@ -338,23 +338,9 @@ export default {
 
 		async switchToParentRoom() {
 			const parentRoomToken = this.$store.getters.parentRoomToken(this.token)
-			if (this.canModerate) {
-				EventBus.$emit('switch-to-conversation', {
-					token: parentRoomToken,
-				})
-			} else {
-				try {
-					await this.$store.dispatch('switchToBreakoutRoomAction', {
-						token: this.token,
-						target: parentRoomToken,
-					})
-					EventBus.$emit('switch-to-conversation', {
-						token: parentRoomToken,
-					})
-				} catch (error) {
-					console.debug(error)
-				}
-			}
+			EventBus.$emit('switch-to-conversation', {
+				token: parentRoomToken,
+			})
 		},
 	},
 }