Add ability to start and stop breakout rooms

4 files changed, 84 insertions, 6 deletions

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
index 47c953a97..822b89ddf 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
@@ -22,9 +22,28 @@
 <template>
 	<div class="breakout-rooms">
 		<div class="breakout-rooms__actions">
+			<template v-if="breakoutRoomsConfigured">
+				<NcButton v-if="breakoutRoomsStarted"
+					v-tooltip.auto="t('spreed', 'Start breakout rooms')"
+					type="secondary"
+					@click="startBreakoutRooms">
+					<template #icon>
+						<Play :size="20" />
+					</template>
+				</NcButton>
+				<NcButton v-else
+					v-tooltip.auto="t('spreed', 'Start breakout rooms')"
+					type="secondary"
+					@click="stopBreakoutRooms">
+					<template #icon>
+						<StopIcon :size="20" />
+					</template>
+				</NcButton>
+			</template>
+
 			<!-- Configuration button -->
 			<NcButton :wide="true"
-				type="secondary"
+				:type="breakoutRoomsConfigured ? 'tertiary' : 'secondary'"
 				@click="openBreakoutRoomsEditor">
 				<template #icon>
 					<DotsCircle :size="20" />
@@ -72,26 +91,38 @@
 </template>
 
 <script>
+// Components
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import Participant from '../Participants/ParticipantsList/Participant/Participant.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import BreakoutRoomsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
+
+// Icons
 import GoogleCircles from 'vue-material-design-icons/GoogleCircles.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import { CONVERSATION } from '../../../constants.js'
+import Play from 'vue-material-design-icons/Play.vue'
+import StopIcon from 'vue-material-design-icons/Stop.vue'
 import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
-import BreakoutRoomsEditor from '../../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
+
+// Constants
+import { CONVERSATION } from '../../../constants.js'
 
 export default {
 	name: 'BreakoutRoomsTab',
 
 	components: {
+		// Components
 		NcAppNavigationItem,
 		Participant,
+		NcButton,
+		BreakoutRoomsEditor,
+
+		// Icons
 		GoogleCircles,
 		Delete,
-		NcButton,
+		Play,
 		DotsCircle,
-		BreakoutRoomsEditor,
+		StopIcon,
 	},
 
 	props: {
@@ -122,6 +153,10 @@ export default {
 		breakoutRoomsConfigured() {
 			return this.conversation.breakoutRoomMode !== CONVERSATION.BREAKOUT_ROOM_MODE.NOT_CONFIGURED
 		},
+
+		breakoutRoomsStarted() {
+			return this.conversation.breakoutRoomStatus !== CONVERSATION.BREAKOUT_ROOM_STATUS.STARTED
+		},
 	},
 
 	mounted() {
@@ -176,6 +211,14 @@ export default {
 				}
 			)
 		},
+
+		startBreakoutRooms() {
+			this.$store.dispatch('startBreakoutRoomsAction', this.token)
+		},
+
+		stopBreakoutRooms() {
+			this.$store.dispatch('stopBreakoutRoomsAction', this.token)
+		},
 	},
 }
 </script>
diff --git a/src/constants.js b/src/constants.js
index 7edbd1aaa..3e30edc13 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -68,6 +68,11 @@ export const CONVERSATION = {
 		MANUAL: 2,
 		FREE: 3,
 	},
+
+	BREAKOUT_ROOM_STATUS: {
+		STOPPED: 0,
+		STARTED: 1,
+	},
 }
 export const ATTENDEE = {
 	ACTOR_TYPE: {
diff --git a/src/services/breakoutRoomsService.js b/src/services/breakoutRoomsService.js
index 4f2a38cfa..eea3b9046 100644
--- a/src/services/breakoutRoomsService.js
+++ b/src/services/breakoutRoomsService.js
@@ -38,8 +38,18 @@ const getBreakoutRooms = async function(token) {
 	return await axios.get(generateOcsUrl('/apps/spreed/api/v4/room/{token}/breakout-rooms', { token }))
 }
 
+const startBreakoutRooms = async function(token) {
+	return await axios.post(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/rooms', { token }))
+}
+
+const stopBreakoutRooms = async function(token) {
+	return await axios.delete(generateOcsUrl('/apps/spreed/api/v1/breakout-rooms/{token}/rooms', { token }))
+}
+
 export {
 	configureBreakoutRooms,
 	deleteBreakoutRooms,
 	getBreakoutRooms,
+	startBreakoutRooms,
+	stopBreakoutRooms,
 }
diff --git a/src/store/breakoutRoomsStore.js b/src/store/breakoutRoomsStore.js
index f6ce7f405..8f54dbd7b 100644
--- a/src/store/breakoutRoomsStore.js
+++ b/src/store/breakoutRoomsStore.js
@@ -23,6 +23,8 @@ import {
 	configureBreakoutRooms,
 	deleteBreakoutRooms,
 	getBreakoutRooms,
+	startBreakoutRooms,
+	stopBreakoutRooms,
 } from '../services/breakoutRoomsService.js'
 import { showError } from '@nextcloud/dialogs'
 import { set } from 'vue'
@@ -77,6 +79,24 @@ const actions = {
 			console.error(error)
 		}
 	},
+
+	async startBreakoutRoomsAction(context, token) {
+		try {
+			await startBreakoutRooms(token)
+		} catch (error) {
+			console.error(error)
+			showError(t('spreed', 'An error occurred while starting breakout rooms'))
+		}
+	},
+
+	async stopBreakoutRoomsAction(context, token) {
+		try {
+			await stopBreakoutRooms(token)
+		} catch (error) {
+			console.error(error)
+			showError(t('spreed', 'An error occurred while stopping breakout rooms'))
+		}
+	},
 }
 
 export default { state, getters, mutations, actions }