diff options
author | Vincent Petry <vincent@nextcloud.com> | 2021-07-08 21:58:16 +0200 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2021-11-03 13:10:33 +0100 |
commit | cb2f6e2c18eee8263b3d939d776ea63a9f3504a8 (patch) | |
tree | cfa1b17f8c52deb50fb7b9da8e87a87ed2d54e47 /src/components/TopBar/CallButton.vue | |
parent | 2819892f317609a4a5fee86692e7ffa007a11730 (diff) |
Add button to end meeting for all
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Diffstat (limited to 'src/components/TopBar/CallButton.vue')
-rw-r--r-- | src/components/TopBar/CallButton.vue | 121 |
1 files changed, 94 insertions, 27 deletions
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue index 1a02569a6..ae272efad 100644 --- a/src/components/TopBar/CallButton.vue +++ b/src/components/TopBar/CallButton.vue @@ -20,32 +20,61 @@ --> <template> - <button v-if="showStartCallButton" - v-tooltip="{ - placement: 'auto', - trigger: 'hover', - content: startCallToolTip, - autoHide: false, - html: true - }" - :disabled="startCallButtonDisabled || loading || blockCalls" - class="top-bar__button" - :class="startCallButtonClasses" - @click="handleClick"> - <span - class="icon" - :class="startCallIcon" /> - {{ startCallLabel }} - </button> - <button v-else-if="showLeaveCallButton" - class="top-bar__button error" - :disabled="loading" - @click="leaveCall"> - <span - class="icon" - :class="leaveCallIcon" /> - {{ leaveCallLabel }} - </button> + <div> + <button v-if="showStartCallButton" + v-tooltip="{ + placement: 'auto', + trigger: 'hover', + content: startCallToolTip, + autoHide: false, + html: true + }" + :disabled="startCallButtonDisabled || loading || blockCalls" + class="top-bar__button" + :class="startCallButtonClasses" + @click="handleClick"> + <span + class="icon" + :class="startCallIcon" /> + {{ startCallLabel }} + </button> + <button v-else-if="showLeaveCallButton && !canEndForAll" + class="top-bar__button error" + :disabled="loading" + @click="leaveCall"> + <span + class="icon" + :class="leaveCallIcon" /> + {{ leaveCallLabel }} + </button> + <Actions + v-else-if="showLeaveCallButton && canEndForAll" + :disabled="loading"> + <template slot="icon"> + <VideoOff + :size="16" + decorative /> + <span class="label">{{ leaveCallLabel }}</span> + <MenuDown + :size="16" + decorative /> + </template> + <ActionButton @click="leaveCall(false)"> + <VideoOff + slot="icon" + :size="24" + decorative /> + {{ leaveCallLabel }} + </ActionButton> + <ActionButton @click="leaveCall(true)"> + <VideoOff + slot="icon" + :size="24" + decorative /> + {{ t('spreed', 'End meeting for all') }} + </ActionButton> + </Actions> + </div> </template> <script> @@ -57,6 +86,10 @@ import participant from '../../mixins/participant' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import { emit } from '@nextcloud/event-bus' import BrowserStorage from '../../services/BrowserStorage' +import Actions from '@nextcloud/vue/dist/Components/Actions' +import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +import VideoOff from 'vue-material-design-icons/VideoOff' +import MenuDown from 'vue-material-design-icons/MenuDown' export default { name: 'CallButton', @@ -65,6 +98,13 @@ export default { Tooltip, }, + components: { + Actions, + ActionButton, + VideoOff, + MenuDown, + }, + mixins: [ browserCheck, isInCall, @@ -101,6 +141,14 @@ export default { return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation }, + participantType() { + return this.conversation.participantType + }, + + canEndForAll() { + return (this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR || this.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR) + }, + startCallButtonDisabled() { return (!this.conversation.canStartCall && !this.conversation.hasCall) @@ -208,7 +256,7 @@ export default { this.loading = false }, - async leaveCall() { + async leaveCall(all = false) { console.info('Leaving call') // Remove selected participant this.$store.dispatch('selectedVideoPeerId', null) @@ -220,6 +268,7 @@ export default { await this.$store.dispatch('leaveCall', { token: this.token, participantIdentifier: this.$store.getters.getParticipantIdentifier(), + all, }) this.loading = false }, @@ -261,4 +310,22 @@ export default { border: 1px solid var(--color-success) !important; } } + +/* HACK: to override the default action button styles to make it look like a regular button */ +::v-deep .trigger > button { + &, + &:hover, + &:focus, + &:active { + color: white; + background-color: var(--color-error) !important; + border: 1px solid var(--color-error) !important; + padding: 0 16px; + opacity: 1; + } + + & > .label { + margin: 0 8px; + } +} </style> |