From 26dad963db7840dcb065d1a63d42dd0fa0a90a40 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 12 Feb 2024 19:08:02 +0100
Subject: [PATCH] feat: switch focus to screenshare button instead of end call
 button

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/TopBar/CallButton.vue          | 13 +++++++++++--
 src/components/TopBar/TopBar.vue              | 12 +++++-------
 src/components/TopBar/TopBarMediaControls.vue | 19 ++++++++++++-------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 7f776f3dd712..98172717fe4a 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -51,7 +51,7 @@
 		</NcButton>
 		<NcButton v-else-if="showLeaveCallButton && !canEndForAll && !isBreakoutRoom"
 			id="call_button"
-			type="error"
+			:type="isScreensharing ? 'tertiary' : 'error'"
 			:disabled="loading"
 			@click="leaveCall(false)">
 			<template #icon>
@@ -64,7 +64,7 @@
 			:menu-name="leaveCallCombinedLabel"
 			force-name
 			:container="container"
-			type="error">
+			:type="isScreensharing ? 'tertiary' : 'error'">
 			<template #icon>
 				<VideoOff v-if="!isBreakoutRoom" :size="20" />
 				<ArrowLeft v-else :size="20" />
@@ -170,6 +170,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		isScreensharing: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	setup() {
@@ -446,4 +451,8 @@ export default {
 #call_button {
 	margin: 0 auto;
 }
+
+:deep(.button-vue--vue-tertiary) {
+	color: white !important;
+}
 </style>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 3bee056e4296..299800729e24 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -101,7 +101,9 @@
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton class="top-bar__button" />
+		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen"
+			class="top-bar__button"
+			:class="{'dark-hover' : !!localMediaModel.attributes.localScreen }" />
 
 		<!-- sidebar toggle -->
 		<template v-if="showOpenSidebarButton">
@@ -430,8 +432,8 @@ export default {
 		}
 
 		:deep(button.dark-hover:hover),
-		.dark-hover :deep(button:hover),
-		.dark-hover :deep(.action-item--open button),
+		.dark-hover :deep(button:not(.button-vue--vue-error):hover),
+		.dark-hover :deep(.action-item--open button:not(.button-vue--vue-error)),
 		:deep(.action-item--open.dark-hover button) {
 			background-color: rgba(0, 0, 0, 0.2);
 		}
@@ -446,10 +448,6 @@ export default {
 		.icon {
 			margin-right: 4px !important;
 		}
-
-		&__force-white {
-			color: white;
-		}
 	}
 
 	.chat-button {
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index 22377bddfde2..4c551d153ecb 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -85,6 +85,7 @@
 		<NcActions v-if="!screenSharingButtonHidden"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
+			:type="isScreensharing ? 'error' : 'tertiary'"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
@@ -93,7 +94,7 @@
 			:open.sync="screenSharingMenuOpen">
 			<!-- Actions button icon -->
 			<template #icon>
-				<MonitorOff v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
+				<MonitorOff v-if="isScreensharing" :size="20" fill-color="#ffffff" />
 				<MonitorShare v-else :size="20" fill-color="#ffffff" />
 			</template>
 			<!-- /Actions button icon -->
@@ -105,7 +106,7 @@
 				</template>
 				{{ screenSharingButtonTooltip }}
 			</NcActionButton>
-			<template v-if="model.attributes.localScreen">
+			<template v-if="isScreensharing">
 				<NcActionButton close-after-click @click="showScreen">
 					<template #icon>
 						<Monitor :size="20" />
@@ -254,11 +255,15 @@ export default {
 
 		screenSharingButtonClass() {
 			return {
-				'screensharing-enabled': this.isScreensharingAllowed && this.model.attributes.localScreen,
+				'screensharing-enabled': this.isScreensharingAllowed && this.isScreensharing,
 				'no-screensharing-available': !this.isScreensharingAllowed,
 			}
 		},
 
+		isScreensharing() {
+			return this.model.attributes.localScreen
+		},
+
 		screenSharingButtonTooltip() {
 			if (!this.isScreensharingAllowed) {
 				return t('spreed', 'You are not allowed to enable screensharing')
@@ -272,7 +277,7 @@ export default {
 				return t('spreed', 'No screensharing')
 			}
 
-			return this.model.attributes.localScreen
+			return this.isScreensharing
 				? t('spreed', 'Screensharing options')
 				: t('spreed', 'Enable screensharing')
 		},
@@ -282,7 +287,7 @@ export default {
 				return ''
 			}
 
-			return this.model.attributes.localScreen
+			return this.isScreensharing
 				? t('spreed', 'Screensharing options')
 				: t('spreed', 'Enable screensharing')
 		},
@@ -486,13 +491,13 @@ export default {
 				return
 			}
 
-			if (!this.model.attributes.localScreen) {
+			if (!this.isScreensharing) {
 				this.startShareScreen()
 			}
 		},
 
 		showScreen() {
-			if (this.model.attributes.localScreen) {
+			if (this.isScreensharing) {
 				emit('switch-screen-to-id', this.localCallParticipantModel.attributes.peerId)
 			}
 		},