Merge pull request #11582 from nextcloud/fix/10566/in-call-highlights

Feat(screensharing): switch focus to screenshare button instead of end call button

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"
@@ -30,7 +30,6 @@
 				:audio-enabled="showMicrophoneOn"
 				:current-volume="model.attributes.currentVolume"
 				:volume-threshold="model.attributes.volumeThreshold"
-				:primary-color="color"
 				overlay-muted-color="#888888" />
 		</template>
 	</NcButton>
@@ -70,16 +69,11 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},
 
-		color: {
-			type: String,
-			default: 'currentColor',
-		},
-
 		token: {
 			type: String,
 			required: true,

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -20,14 +20,14 @@
 <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"
 		@click.stop="toggleVideo">
 		<template #icon>
-			<VideoIcon v-if="showVideoOn" :size="20" :fill-color="color" />
-			<VideoOff v-else :size="20" :fill-color="color" />
+			<VideoIcon v-if="showVideoOn" :size="20" />
+			<VideoOff v-else :size="20" />
 		</template>
 	</NcButton>
 </template>
@@ -68,16 +68,11 @@ export default {
 			default: OCP.Accessibility.disableKeyboardShortcuts(),
 		},
 
-		ncButtonType: {
+		type: {
 			type: String,
 			default: 'tertiary-no-background',
 		},
 
-		color: {
-			type: String,
-			default: 'currentColor',
-		},
-
 		token: {
 			type: String,
 			required: true,

src/components/CallView/shared/ViewerOverlayCallView.vue

@@ -106,13 +106,13 @@
 								:token="token"
 								:conversation="conversation"
 								:model="localModel"
-								nc-button-type="secondary"
+								type="secondary"
 								disable-keyboard-shortcuts />
 							<LocalVideoControlButton class="viewer-overlay__button"
 								:token="token"
 								:conversation="conversation"
 								:model="localModel"
-								nc-button-type="secondary"
+								type="secondary"
 								disable-keyboard-shortcuts />
 						</div>
 					</div>

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>

src/components/TopBar/ReactionMenu.vue

@@ -21,12 +21,12 @@
 
 <template>
 	<NcActions v-tooltip="t('spreed', 'Send a reaction')"
+		type="tertiary"
 		:aria-label="t('spreed', 'Send a reaction')"
 		:container="container"
 		class="reaction">
 		<template #icon>
-			<EmoticonOutline :size="20"
-				fill-color="#ffffff" />
+			<EmoticonOutline :size="20" />
 		</template>
 
 		<NcActionButtonGroup class="reaction__group"

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,33 +60,28 @@
 
 		<!-- 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>
-				<AccountMultiple :size="20"
-					fill-color="#ffffff" />
+				<AccountMultiple :size="20" />
 			</template>
 			{{ participantsInCall }}
 		</NcButton>
 
 		<!-- Reactions menu -->
-		<ReactionMenu v-if="hasReactionSupport"
-			class="top-bar__button dark-hover"
+		<ReactionMenu v-if="isInCall && hasReactionSupport"
 			: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 +90,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,12 +115,11 @@
 			<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>
-					<MessageText :size="20"
-						fill-color="#ffffff" />
+					<MessageText :size="20" />
 					<NcCounterBubble v-if="unreadMessagesCounter > 0"
 						class="chat-button__unread-messages-counter"
 						:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
@@ -406,7 +398,9 @@ export default {
 <style lang="scss" scoped>
 .top-bar {
 	display: flex;
+	flex-wrap: wrap;
 	z-index: 10;
+	gap: 3px;
 	justify-content: flex-end;
 	padding: 8px;
 	background-color: var(--color-main-background);
@@ -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 {