Skip to content

Commit

Permalink
Merge pull request #8962 from nextcloud/backport/8960/stable26
Browse files Browse the repository at this point in the history 
[stable26] Breakout room fixes
  • Loading branch information
@nickvergessen
nickvergessen committed Mar 6, 2023
2 parents 9f4193e + 0359cc3 commit 8b655e4
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 55 deletions.
22 changes: 16 additions & 6 deletions src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -117,6 +117,10 @@ export default {
type: Object,
required: true,
},
mainConversation: {
type: Object,
required: true,
},
},
data() {
Expand All @@ -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)
},
Expand Down Expand Up @@ -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,
})
Expand Down
75 changes: 40 additions & 35 deletions src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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'
Expand Down Expand Up @@ -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,
},
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -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,
})
},
},
Expand Down
50 changes: 38 additions & 12 deletions src/components/RightSidebar/BreakoutRooms/BreakoutRoomsTab.vue
View file
Expand Up @@ -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',
Expand All @@ -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,
},
Expand All @@ -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: {
Expand Down Expand Up @@ -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,
})
}
},
Expand Down
15 changes: 13 additions & 2 deletions src/components/RightSidebar/RightSidebar.vue
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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()
},
Expand Down

0 comments on commit 8b655e4

Please sign in to comment.