[stable26] Breakout room fixes

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -38,10 +38,10 @@
 			</NcButton>
 			{{ roomName }}
 			<div class="breakout-room-item__actions">
-				<NcButton @click="joinRoom">
+				<NcButton v-if="showJoinButton" @click="joinRoom">
 					{{ t('spreed', 'Join') }}
 				</NcButton>
-				<NcActions :force-menu="true">
+				<NcActions v-if="canModerate" :force-menu="true">
 					<NcActionButton v-if="showAssistanceButton"
 						@click="dismissRequestAssistance">
 						<template #icon>
@@ -117,6 +117,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		mainConversation: {
+			type: Object,
+			required: true,
+		},
 	},
 
 	data() {
@@ -140,6 +144,10 @@ export default {
 			return this.breakoutRoom.token
 		},
 
+		showJoinButton() {
+			return this.roomToken !== this.$store.getters.getToken()
+		},
+
 		roomParticipants() {
 			return this.$store.getters.participantsList(this.roomToken)
 		},
@@ -187,10 +195,12 @@ export default {
 				})
 			} else {
 				try {
-					await this.$store.dispatch('switchToBreakoutRoomAction', {
-						token: this.$store.getters.parentRoomToken(this.roomToken),
-						target: this.roomToken,
-					})
+					if (this.mainConversation.breakoutRoomMode === CONVERSATION.BREAKOUT_ROOM_MODE.FREE) {
+						await this.$store.dispatch('switchToBreakoutRoomAction', {
+							token: this.$store.getters.parentRoomToken(this.roomToken),
+							target: this.roomToken,
+						})
+					}
 					EventBus.$emit('switch-to-conversation', {
 						token: this.roomToken,
 					})

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue

@@ -4,7 +4,7 @@
 	<div v-if="canModerate || isInBreakoutRoom" class="breakout-rooms-actions">
 		<div class="breakout-rooms-actions__row">
 			<NcButton v-if="breakoutRoomsNotStarted && canModerate"
-				:title="startLabel"
+				:title="startLabelTitle"
 				:aria-label="startLabel"
 				type="primary"
 				:wide="true"
@@ -50,6 +50,17 @@
 				</template>
 				{{ backToMainRoomLabel }}
 			</NcButton>
+			<NcButton v-else-if="!canModerate"
+				:title="backToBreakoutRoomLabel"
+				:aria-label="backToBreakoutRoomLabel"
+				:wide="true"
+				type="secondary"
+				@click="switchToBreakoutRoom">
+				<template #icon>
+					<ArrowRight :size="20" />
+				</template>
+				{{ backToBreakoutRoomLabel }}
+			</NcButton>
 			<NcActions v-if="canModerate" class="right">
 				<NcActionButton v-if="canModerate && isInBreakoutRoom"
 					:title="sendMessageLabel"
@@ -75,7 +86,7 @@
 			@close="closeParticipantsEditor">
 			<div class="breakout-rooms-actions__editor">
 				<h2> {{ manageBreakoutRoomsTitle }} </h2>
-				<BreakoutRoomsParticipantsEditor :token="token"
+				<BreakoutRoomsParticipantsEditor :token="mainToken"
 					:breakout-rooms="breakoutRooms"
 					:is-creating-rooms="false"
 					@close="closeParticipantsEditor"
@@ -85,14 +96,15 @@
 
 		<!-- Send message dialog -->
 		<SendMessageDialog v-if="sendMessageDialogOpened"
-			:token="token"
+			:token="mainToken"
 			:broadcast="true"
 			@close="closeSendMessageDialog" />
 	</div>
 </template>
 
 <script>
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Play from 'vue-material-design-icons/Play.vue'
@@ -127,18 +139,19 @@ export default {
 		Cog,
 		Check,
 		ArrowLeft,
+		ArrowRight,
 		Send,
 	},
 
 	mixins: [isInCall],
 
 	props: {
-		token: {
+		mainToken: {
 			type: String,
 			required: true,
 		},
 
-		conversation: {
+		mainConversation: {
 			type: Object,
 			required: true,
 		},
@@ -163,31 +176,19 @@ export default {
 
 	computed: {
 		canFullModerate() {
-			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
+			return this.mainConversation.participantType === PARTICIPANT.TYPE.OWNER || this.mainConversation.participantType === PARTICIPANT.TYPE.MODERATOR
 		},
 
 		canModerate() {
-			return !this.isOneToOne && (this.canFullModerate || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
+			return !this.isOneToOne && (this.canFullModerate || this.mainConversation.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
 		},
 
 		breakoutRoomsNotStarted() {
-			if (this.isInBreakoutRoom) {
-				return this.parentRoom.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
-			} else {
-				return this.conversation.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
-			}
+			return this.mainConversation.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
 		},
 
 		isInBreakoutRoom() {
-			return this.conversation.objectType === 'room'
-		},
-
-		parentRoom() {
-			if (!this.isInBreakoutRoom) {
-				return undefined
-			} else {
-				return this.$store.getters.conversation(this.conversation.objectId)
-			}
+			return this.mainToken !== this.$store.getters.getToken()
 		},
 
 		manageBreakoutRoomsTitle() {
@@ -198,8 +199,8 @@ export default {
 			return t('spreed', 'Back to main room')
 		},
 
-		participantType() {
-			return this.conversation.participantType
+		backToBreakoutRoomLabel() {
+			return t('spreed', 'Back to your room')
 		},
 
 		sendMessageLabel() {
@@ -210,27 +211,25 @@ export default {
 			return t('spreed', 'Start session')
 		},
 
+		startLabelTitle() {
+			if (this.isInCall) {
+				return this.startLabel
+			}
+			return t('spreed', 'Start a call before you start a breakout room session')
+		},
+
 		stopLabel() {
 			return t('spreed', 'Stop session')
 		},
 	},
 
 	methods: {
 		startBreakoutRooms() {
-			if (this.isInBreakoutRoom) {
-				this.$store.dispatch('startBreakoutRoomsAction', this.parentRoom.token)
-			} else {
-				this.$store.dispatch('startBreakoutRoomsAction', this.token)
-			}
-
+			this.$store.dispatch('startBreakoutRoomsAction', this.mainToken)
 		},
 
 		stopBreakoutRooms() {
-			if (this.isInBreakoutRoom) {
-				this.$store.dispatch('stopBreakoutRoomsAction', this.parentRoom.token)
-			} else {
-				this.$store.dispatch('stopBreakoutRoomsAction', this.token)
-			}
+			this.$store.dispatch('stopBreakoutRoomsAction', this.mainToken)
 		},
 
 		openSendMessageDialog() {
@@ -251,7 +250,13 @@ export default {
 
 		async switchToParentRoom() {
 			EventBus.$emit('switch-to-conversation', {
-				token: this.parentRoom.token,
+				token: this.mainToken,
+			})
+		},
+
+		async switchToBreakoutRoom() {
+			EventBus.$emit('switch-to-conversation', {
+				token: this.mainToken,
 			})
 		},
 	},

src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue

@@ -22,26 +22,36 @@
 <template>
 	<div class="breakout-rooms">
 		<!-- Actions -->
-		<BreakoutRoomsActions :token="token"
-			:conversation="conversation"
+		<BreakoutRoomsActions :main-token="mainToken"
+			:main-conversation="mainConversation"
 			:breakout-rooms="breakoutRooms"
 			:breakout-rooms-configured="breakoutRoomsConfigured" />
 		<!-- Breakout rooms list -->
-		<ul v-if="breakoutRooms">
+		<ul v-if="showBreakoutRoomsList">
 			<template v-for="breakoutRoom in breakoutRooms">
 				<BreakoutRoomItem :key="breakoutRoom.token"
-					:breakout-room="breakoutRoom" />
+					:breakout-room="breakoutRoom"
+					:main-conversation="mainConversation" />
 			</template>
 		</ul>
+		<NcEmptyContent v-else :title="t('spreed', 'Breakout rooms are not started')">
+			<template #icon>
+				<DotsCircle :size="20" />
+			</template>
+		</NcEmptyContent>
 	</div>
 </template>
 
 <script>
+import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
+
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
 import BreakoutRoomItem from './BreakoutRoomItem.vue'
 import BreakoutRoomsActions from './BreakoutRoomsActions.vue'
 
 // Constants
-import { CONVERSATION } from '../../../constants.js'
+import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 
 export default {
 	name: 'BreakoutRoomsTab',
@@ -50,15 +60,19 @@ export default {
 		// Components
 		BreakoutRoomItem,
 		BreakoutRoomsActions,
+		NcEmptyContent,
+
+		// Icons
+		DotsCircle,
 	},
 
 	props: {
-		token: {
+		mainToken: {
 			type: String,
 			required: true,
 		},
 
-		conversation: {
+		mainConversation: {
 			type: Object,
 			required: true,
 		},
@@ -76,14 +90,26 @@ export default {
 	},
 
 	computed: {
+		canFullModerate() {
+			return this.mainConversation.participantType === PARTICIPANT.TYPE.OWNER || this.mainConversation.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+
+		canModerate() {
+			return !this.isOneToOne && (this.canFullModerate || this.mainConversation.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR)
+		},
+
+		showBreakoutRoomsList() {
+			return this.breakoutRoomsConfigured
+				&& (this.canModerate || this.mainConversation.breakoutRoomStatus === CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED)
+		},
+
 		breakoutRooms() {
-			return this.$store.getters.breakoutRooms(this.token)
+			return this.$store.getters.breakoutRooms(this.mainToken)
 		},
 
 		breakoutRoomsConfigured() {
-			return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
+			return this.mainConversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
 		},
-
 	},
 
 	watch: {
@@ -118,15 +144,15 @@ export default {
 		getBreakoutRooms() {
 			if (this.breakoutRoomsConfigured) {
 				this.$store.dispatch('getBreakoutRoomsAction', {
-					token: this.token,
+					token: this.mainToken,
 				})
 			}
 		},
 
 		getParticipants() {
 			if (this.breakoutRoomsConfigured) {
 				this.$store.dispatch('getBreakoutRoomsParticipantsAction', {
-					token: this.token,
+					token: this.mainToken,
 				})
 			}
 		},

src/components/RightSidebar/RightSidebar.vue

@@ -67,8 +67,8 @@
 			<template slot="icon">
 				<DotsCircle :size="20" />
 			</template>
-			<BreakoutRoomsTab :token="token"
-				:conversation="conversation"
+			<BreakoutRoomsTab :main-token="mainConversationToken"
+				:main-conversation="mainConversation"
 				:is-active="activeTab === 'breakout-rooms'" />
 		</NcAppSidebarTab>
 		<NcAppSidebarTab v-if="!getUserId || showSIPSettings"
@@ -190,6 +190,17 @@ export default {
 			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
+		mainConversationToken() {
+			if (this.conversation.objectType === 'room') {
+				return this.conversation.objectId
+			}
+			return this.token
+		},
+
+		mainConversation() {
+			return this.$store.getters.conversation(this.mainConversationToken) || this.$store.getters.dummyConversation
+		},
+
 		getUserId() {
 			return this.$store.getters.getUserId()
 		},