From 878a767c96af8a8f2d3963f8ac79d661fd36ef18 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Fri, 16 Feb 2024 20:42:50 +0100
Subject: [PATCH 1/2] fix(TopBar): split screenshare button

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/TopBar/TopBarMediaControls.vue | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index 20af35667de..fadcd84239e 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -82,9 +82,10 @@
 			</template>
 		</NcButton>
 
-		<NcActions v-if="!screenSharingButtonHidden"
+		<NcActions v-if="!screenSharingButtonHidden && model.attributes.localScreen"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
+			type="tertiary-no-background"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
@@ -93,33 +94,31 @@
 			:open.sync="screenSharingMenuOpen">
 			<!-- Actions button icon -->
 			<template #icon>
-				<CancelPresentation v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
-				<PresentToAll v-else :size="20" fill-color="#ffffff" />
+				<CancelPresentation :size="20" fill-color="#ffffff" />
 			</template>
 			<!-- /Actions button icon -->
 			<!-- Actions -->
-			<NcActionButton v-if="!screenSharingMenuOpen"
-				@click.stop="toggleScreenSharingMenu">
+			<NcActionButton close-after-click @click="showScreen">
 				<template #icon>
-					<PresentToAll :size="20" fill-color="#ffffff" />
+					<Monitor :size="20" />
 				</template>
-				{{ screenSharingButtonTooltip }}
+				{{ t('spreed', 'Show your screen') }}
+			</NcActionButton>
+			<NcActionButton close-after-click @click="stopScreen">
+				<template #icon>
+					<CancelPresentation :size="20" />
+				</template>
+				{{ t('spreed', 'Stop screensharing') }}
 			</NcActionButton>
-			<template v-if="model.attributes.localScreen">
-				<NcActionButton close-after-click @click="showScreen">
-					<template #icon>
-						<Monitor :size="20" />
-					</template>
-					{{ t('spreed', 'Show your screen') }}
-				</NcActionButton>
-				<NcActionButton close-after-click @click="stopScreen">
-					<template #icon>
-						<CancelPresentation :size="20" />
-					</template>
-					{{ t('spreed', 'Stop screensharing') }}
-				</NcActionButton>
-			</template>
 		</NcActions>
+		<NcButton v-else-if="!screenSharingButtonHidden"
+			v-tooltip="screenSharingButtonTooltip"
+			type="tertiary-no-background"
+			@click.stop="toggleScreenSharingMenu">
+			<template #icon>
+				<PresentToAll :size="20" fill-color="#ffffff" />
+			</template>
+		</NcButton>
 	</div>
 </template>
 

From 2abb696c32eae5302e2bb6f8311334f542c6a78b Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 5 Mar 2024 09:12:24 +0100
Subject: [PATCH 2/2] refactor(TopBar): get rid of duplicated properties

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

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 7e5b0293697..8fb2d8b2489 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -87,8 +87,7 @@
 			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
-			:show-actions="!isSidebar"
-			:screen-sharing-button-hidden="isSidebar"
+			:is-sidebar="isSidebar"
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- TopBar menu -->
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index fadcd84239e..f18d29533e6 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -70,7 +70,7 @@
 			:model="model"
 			color="#ffffff" />
 
-		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
+		<NcButton v-if="isVirtualBackgroundAvailable && isSidebar"
 			v-tooltip="toggleVirtualBackgroundButtonLabel"
 			type="tertiary-no-background"
 			:aria-label="toggleVirtualBackgroundButtonLabel"
@@ -82,7 +82,7 @@
 			</template>
 		</NcButton>
 
-		<NcActions v-if="!screenSharingButtonHidden && model.attributes.localScreen"
+		<NcActions v-if="!isSidebar && model.attributes.localScreen"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
 			type="tertiary-no-background"
@@ -92,11 +92,9 @@
 			:boundaries-element="boundaryElement"
 			:container="container"
 			:open.sync="screenSharingMenuOpen">
-			<!-- Actions button icon -->
 			<template #icon>
 				<CancelPresentation :size="20" fill-color="#ffffff" />
 			</template>
-			<!-- /Actions button icon -->
 			<!-- Actions -->
 			<NcActionButton close-after-click @click="showScreen">
 				<template #icon>
@@ -111,7 +109,7 @@
 				{{ t('spreed', 'Stop screensharing') }}
 			</NcActionButton>
 		</NcActions>
-		<NcButton v-else-if="!screenSharingButtonHidden"
+		<NcButton v-else-if="!isSidebar"
 			v-tooltip="screenSharingButtonTooltip"
 			type="tertiary-no-background"
 			@click.stop="toggleScreenSharingMenu">
@@ -185,18 +183,6 @@ export default {
 			type: Object,
 			required: true,
 		},
-		screenSharingButtonHidden: {
-			type: Boolean,
-			default: false,
-		},
-		showActions: {
-			type: Boolean,
-			default: true,
-		},
-
-		/**
-		 * In the sidebar the conversation settings are hidden
-		 */
 		isSidebar: {
 			type: Boolean,
 			default: false,
@@ -204,8 +190,9 @@ export default {
 	},
 
 	setup() {
-		const isInCall = useIsInCall()
-		return { isInCall }
+		return {
+			isInCall: useIsInCall(),
+		}
 	},
 
 	data() {