feat: switch focus to screenshare button instead of end call button

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Feb 14, 2024 · 000e046 · 000e046
1 parent 6eb02c5
commit 000e046
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 61 deletions.
diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -20,7 +20,7 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['m']"
 		v-tooltip="audioButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="audioButtonAriaLabel"
 		:class="{ 'no-audio-available': !isAudioAllowed || !model.attributes.audioAvailable }"
 		@shortkey="toggleAudio"
@@ -70,7 +70,7 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},

diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -20,7 +20,7 @@
 <template>
 	<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['v']"
 		v-tooltip="videoButtonTooltip"
-		:type="ncButtonType"
+		:type="type"
 		:aria-label="videoButtonAriaLabel"
 		:class="{ 'no-video-available': !isVideoAllowed || !model.attributes.videoAvailable }"
 		@shortkey="toggleVideo"
@@ -68,7 +68,7 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},

diff --git 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,5 @@ export default {
 #call_button {
 	margin: 0 auto;
 }
+
 </style>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="top-bar" :class="{ 'in-call': isInCall }">
+	<div class="top-bar" :data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -60,14 +60,12 @@
 
 		<!-- Call time -->
 		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime"
-			class="top-bar__button dark-hover" />
+			:start="conversation.callStartTime" />
 
 		<!-- Participants counter -->
 		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
 			:title="participantsInCallAriaLabel"
 			:aria-label="participantsInCallAriaLabel"
-			class="top-bar__button dark-hover"
 			type="tertiary"
 			@click="openSidebar('participants')">
 			<template #icon>
@@ -79,14 +77,12 @@
 
 		<!-- Reactions menu -->
 		<ReactionMenu v-if="hasReactionSupport"
-			class="top-bar__button dark-hover"
 			:token="token"
 			:supported-reactions="supportedReactions"
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- Local media controls -->
 		<TopBarMediaControls v-if="isInCall"
-			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
 			:show-actions="!isSidebar"
@@ -95,21 +91,19 @@
 
 		<!-- TopBar menu -->
 		<TopBarMenu :token="token"
-			class="top-bar__button dark-hover"
 			:show-actions="!isSidebar"
 			:is-sidebar="isSidebar"
 			:model="localMediaModel"
 			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
 
-		<CallButton class="top-bar__button" />
+		<CallButton :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
 		<!-- sidebar toggle -->
 		<template v-if="showOpenSidebarButton">
 			<!-- in chat: open last tab -->
 			<NcButton v-if="!isInCall"
 				:aria-label="t('spreed', 'Open sidebar')"
 				:title="t('spreed', 'Open sidebar')"
-				class="top-bar__button dark-hover"
 				close-after-click="true"
 				type="tertiary"
 				@click="openSidebar">
@@ -122,7 +116,7 @@
 			<NcButton v-else
 				:aria-label="t('spreed', 'Open chat')"
 				:title="t('spreed', 'Open chat')"
-				class="top-bar__button chat-button dark-hover"
+				class="chat-button"
 				type="tertiary"
 				@click="openSidebar('chat')">
 				<template #icon>
@@ -416,40 +410,13 @@ export default {
 		margin-right: var(--default-clickable-area);
 	}
 
-	&.in-call {
+	&[data-theme-dark="true"] {
 		right: 0;
 		border: none;
 		position: absolute;
 		top: 0;
-		left:0;
+		left: 0;
 		background-color: transparent;
-		display: flex;
-		flex-wrap: wrap;
-		& * {
-			color: #fff;
-		}
-
-		:deep(button.dark-hover:hover),
-		.dark-hover :deep(button:hover),
-		.dark-hover :deep(.action-item--open button),
-		:deep(.action-item--open.dark-hover button) {
-			background-color: rgba(0, 0, 0, 0.2);
-		}
-	}
-
-	&__button {
-		margin: 0 2px;
-		align-self: center;
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		.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
@@ -63,16 +63,18 @@
 			:token="token"
 			:conversation="conversation"
 			:model="model"
+			type="tertiary"
 			color="#ffffff" />
 
 		<LocalVideoControlButton :token="token"
 			:conversation="conversation"
 			:model="model"
+			type="tertiary"
 			color="#ffffff" />
 
 		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
 			v-tooltip="toggleVirtualBackgroundButtonLabel"
-			type="tertiary-no-background"
+			type="tertiary"
 			:aria-label="toggleVirtualBackgroundButtonLabel"
 			:class="blurButtonClass"
 			@click.stop="toggleVirtualBackground">
@@ -82,9 +84,10 @@
 			</template>
 		</NcButton>
 
-		<NcActions v-if="!screenSharingButtonHidden"
+		<NcActions v-if="!screenSharingButtonHidden && isScreensharing"
 			id="screensharing-button"
 			v-tooltip="screenSharingButtonTooltip"
+			type="error"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
 			class="app-navigation-entry-utils-menu-button"
@@ -93,19 +96,12 @@
 			: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 -->
 			<!-- Actions -->
-			<NcActionButton v-if="!screenSharingMenuOpen"
-				@click.stop="toggleScreenSharingMenu">
-				<template #icon>
-					<MonitorShare :size="20" fill-color="#ffffff" />
-				</template>
-				{{ screenSharingButtonTooltip }}
-			</NcActionButton>
-			<template v-if="model.attributes.localScreen">
+			<template v-if="isScreensharing">
 				<NcActionButton close-after-click @click="showScreen">
 					<template #icon>
 						<Monitor :size="20" />
@@ -120,6 +116,14 @@
 				</NcActionButton>
 			</template>
 		</NcActions>
+		<NcButton v-else-if="!screenSharingButtonHidden"
+			v-tooltip="screenSharingButtonTooltip"
+			type="tertiary"
+			@click.stop="toggleScreenSharingMenu">
+			<template #icon>
+				<MonitorShare :size="20" fill-color="#ffffff" />
+			</template>
+		</NcButton>
 	</div>
 </template>
 
@@ -254,11 +258,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 +280,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 +290,7 @@ export default {
 				return ''
 			}
 
-			return this.model.attributes.localScreen
+			return this.isScreensharing
 				? t('spreed', 'Screensharing options')
 				: t('spreed', 'Enable screensharing')
 		},
@@ -486,13 +494,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)
 			}
 		},