From 4a413843fa75e63447e6f5cf7e1eeb06376e8d1c Mon Sep 17 00:00:00 2001
From: "Simon L." <szaimen@e.mail.de>
Date: Fri, 17 May 2024 09:19:39 +0200
Subject: [PATCH 1/2] feat(mobile): use button without text if on mobile

Signed-off-by: Simon L <szaimen@e.mail.de>
---
 src/components/TopBar/CallButton.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index e8f44536e43..762e09cba41 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 @@
 				<VideoOutlineIcon v-else-if="silentCall" :size="20" />
 				<VideoIcon v-else :size="20" />
 			</template>
-			{{ startCallLabel }}
+			<template v-if="!isMobile" #default>
+				{{ startCallLabel }}
+			</template>
 		</NcButton>
 		<NcButton v-else-if="showLeaveCallButton && canEndForAll && isPhoneRoom"
 			id="call_button"
+			:aria-label="endCallLabel"
 			type="error"
 			:disabled="loading"
 			@click="leaveCall(true)">
 			<template #icon>
 				<PhoneHangup :size="20" />
 			</template>
-			{{ t('spreed', 'End call') }}
+			<template v-if="!isMobile" #default>
+				{{ endCallLabel }}
+			</template>
 		</NcButton>
 		<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
 			id="call_button"
+			:aria-label="leaveCallLabel"
 			:type="isScreensharing ? 'tertiary' : 'error'"
 			:disabled="loading"
 			@click="leaveCall(false)">
 			<template #icon>
 				<VideoOff :size="20" />
 			</template>
-			{{ leaveCallLabel }}
+			<template v-if="!isMobile" #default>
+				{{ leaveCallLabel }}
+			</template>
 		</NcButton>
 		<NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
 			:disabled="loading"
-			:menu-name="leaveCallCombinedLabel"
+			:aria-label="leaveCallCombinedLabel"
+			:menu-name="!isMobile ? leaveCallCombinedLabel : undefined"
 			force-name
 			:container="container"
 			:type="isScreensharing ? 'tertiary' : 'error'">
@@ -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'
@@ -190,6 +201,7 @@ export default {
 			breakoutRoomsStore: useBreakoutRoomsStore(),
 			talkHashStore: useTalkHashStore(),
 			settingsStore: useSettingsStore(),
+			isMobile: useIsMobile(),
 		}
 	},
 
@@ -269,6 +281,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.')

From a7e73f69583b028020fdaeba61fb99ca18603258 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 31 May 2024 17:37:58 +0200
Subject: [PATCH 2/2] fix: hide text on mobile for TopBar only

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/TopBar/CallButton.vue | 22 ++++++++++++++++------
 src/components/TopBar/TopBar.vue     |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 762e09cba41..8fccb5ec976 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -39,7 +39,7 @@
 				<VideoOutlineIcon v-else-if="silentCall" :size="20" />
 				<VideoIcon v-else :size="20" />
 			</template>
-			<template v-if="!isMobile" #default>
+			<template v-if="showButtonText" #default>
 				{{ startCallLabel }}
 			</template>
 		</NcButton>
@@ -52,7 +52,7 @@
 			<template #icon>
 				<PhoneHangup :size="20" />
 			</template>
-			<template v-if="!isMobile" #default>
+			<template v-if="showButtonText" #default>
 				{{ endCallLabel }}
 			</template>
 		</NcButton>
@@ -65,14 +65,14 @@
 			<template #icon>
 				<VideoOff :size="20" />
 			</template>
-			<template v-if="!isMobile" #default>
+			<template v-if="showButtonText" #default>
 				{{ leaveCallLabel }}
 			</template>
 		</NcButton>
 		<NcActions v-else-if="showLeaveCallButton && (canEndForAll || isBreakoutRoom)"
 			:disabled="loading"
 			:aria-label="leaveCallCombinedLabel"
-			:menu-name="!isMobile ? leaveCallCombinedLabel : undefined"
+			:menu-name="showButtonText ? leaveCallCombinedLabel : undefined"
 			force-name
 			:container="container"
 			:type="isScreensharing ? 'tertiary' : 'error'">
@@ -192,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() {
@@ -225,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)
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" />
 
-		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen" />
+		<CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- sidebar toggle -->
 		<template v-if="showOpenSidebarButton">