diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue index e8f44536e43..8fccb5ec976 100644 --- a/src/components/TopBar/CallButton.vue +++ b/src/components/TopBar/CallButton.vue @@ -30,6 +30,7 @@ autoHide: false, html: true }" + :aria-label="startCallLabel" :disabled="startCallButtonDisabled || loading" :type="startCallButtonType" @click="handleClick"> @@ -38,31 +39,40 @@ - {{ startCallLabel }} + - {{ t('spreed', 'End call') }} + - {{ leaveCallLabel }} + @@ -110,6 +120,7 @@ import { loadState } from '@nextcloud/initial-state' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import { useIsInCall } from '../../composables/useIsInCall.js' @@ -181,7 +192,15 @@ export default { isScreensharing: { type: Boolean, default: false, - } + }, + + /** + * Whether the to use text on button at mobile view + */ + shrinkOnMobile: { + type: Boolean, + default: false, + }, }, setup() { @@ -190,6 +209,7 @@ export default { breakoutRoomsStore: useBreakoutRoomsStore(), talkHashStore: useTalkHashStore(), settingsStore: useSettingsStore(), + isMobile: useIsMobile(), } }, @@ -213,7 +233,9 @@ export default { conversation() { return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation }, - + showButtonText() { + return !this.isMobile || !this.shrinkOnMobile + }, showRecordingWarning() { return [CALL.RECORDING.VIDEO_STARTING, CALL.RECORDING.AUDIO_STARTING, CALL.RECORDING.VIDEO, CALL.RECORDING.AUDIO].includes(this.conversation.callRecording) @@ -269,6 +291,10 @@ export default { return this.silentCall ? t('spreed', 'Start call silently') : t('spreed', 'Start call') }, + endCallLabel() { + return t('spreed', 'End call') + }, + startCallToolTip() { if (this.isNextcloudTalkHashDirty) { return t('spreed', 'Nextcloud Talk was updated, you need to reload the page before you can start or join a call.') diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 6b6159b87dd..8c87f81c3ca 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -94,7 +94,7 @@ :model="localMediaModel" @open-breakout-rooms-editor="showBreakoutRoomsEditor = true" /> - +