Merge pull request #9766 from nextcloud/backport/9731/stable27

[stable27] Fix displaying 'Screensharing' button after reject and refactor `TopBar` controls for 'Raise hand' and 'Screensharing'

3 files changed, 229 insertions, 251 deletions

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ae654306d..07ab7d43b 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -82,7 +82,7 @@
 			:local-call-participant-model="localCallParticipantModel" />
 
 		<!-- Local media controls -->
-		<LocalMediaControls v-if="isInCall"
+		<TopBarMediaControls v-if="isInCall"
 			class="local-media-controls dark-hover"
 			:token="token"
 			:model="localMediaModel"
@@ -156,11 +156,11 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 
 import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
-import LocalMediaControls from '../CallView/shared/LocalMediaControls.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 import CallButton from './CallButton.vue'
 import CallTime from './CallTime.vue'
 import ReactionMenu from './ReactionMenu.vue'
+import TopBarMediaControls from './TopBarMediaControls.vue'
 import TopBarMenu from './TopBarMenu.vue'
 
 import { CONVERSATION } from '../../constants.js'
@@ -182,7 +182,7 @@ export default {
 		CallButton,
 		CallTime,
 		ConversationIcon,
-		LocalMediaControls,
+		TopBarMediaControls,
 		NcButton,
 		NcCounterBubble,
 		TopBarMenu,
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index db95a59ad..03ea69406 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -19,118 +19,100 @@
   -->
 <template>
 	<div v-shortkey.push="disableKeyboardShortcuts ? null : ['space']"
+		class="buttons-bar"
 		@shortkey="handleShortkey">
-		<div class="buttons-bar">
-			<div class="network-connection-state">
-				<NcPopover v-if="qualityWarningTooltip"
-					:boundary="boundaryElement"
-					:aria-label="qualityWarningAriaLabel"
-					trigger="hover"
-					:auto-hide="false"
-					:shown="showQualityWarningTooltip">
-					<template #trigger>
-						<NcButton id="quality_warning_button"
-							type="tertiary-no-background"
-							class="trigger"
-							:aria-label="qualityWarningAriaLabel"
-							@click="mouseover = !mouseover">
-							<template #icon>
-								<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
-							</template>
+		<div class="network-connection-state">
+			<NcPopover v-if="qualityWarningTooltip"
+				:boundary="boundaryElement"
+				:aria-label="qualityWarningAriaLabel"
+				trigger="hover"
+				:auto-hide="false"
+				:shown="showQualityWarningTooltip">
+				<template #trigger>
+					<NcButton id="quality_warning_button"
+						type="tertiary-no-background"
+						class="trigger"
+						:aria-label="qualityWarningAriaLabel"
+						@click="mouseover = !mouseover">
+						<template #icon>
+							<NetworkStrength2Alert fill-color="#e9322d" :size="20" />
+						</template>
+					</NcButton>
+				</template>
+				<div class="hint">
+					<span>{{ qualityWarningTooltip.content }}</span>
+					<div class="hint__actions">
+						<NcButton v-if="qualityWarningTooltip.action"
+							type="primary"
+							class="hint__button"
+							@click="executeQualityWarningTooltipAction">
+							{{ qualityWarningTooltip.actionLabel }}
+						</NcButton>
+						<NcButton v-if="!isQualityWarningTooltipDismissed"
+							type="tertiary"
+							class="hint__button"
+							@click="dismissQualityWarningTooltip">
+							{{ t('spreed', 'Dismiss') }}
 						</NcButton>
-					</template>
-					<div class="hint">
-						<span>{{ qualityWarningTooltip.content }}</span>
-						<div class="hint__actions">
-							<NcButton v-if="qualityWarningTooltip.action"
-								type="primary"
-								class="hint__button"
-								@click="executeQualityWarningTooltipAction">
-								{{ qualityWarningTooltip.actionLabel }}
-							</NcButton>
-							<NcButton v-if="!isQualityWarningTooltipDismissed"
-								type="tertiary"
-								class="hint__button"
-								@click="dismissQualityWarningTooltip">
-								{{ t('spreed', 'Dismiss') }}
-							</NcButton>
-						</div>
 					</div>
-				</NcPopover>
-			</div>
-
-			<LocalAudioControlButton :conversation="conversation" :model="model" color="#ffffff" />
-
-			<LocalVideoControlButton :conversation="conversation" :model="model" color="#ffffff" />
+				</div>
+			</NcPopover>
+		</div>
 
-			<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
-				v-tooltip="toggleVirtualBackgroundButtonLabel"
-				type="tertiary-no-background"
-				:aria-label="toggleVirtualBackgroundButtonLabel"
-				:class="blurButtonClass"
-				@click.stop="toggleVirtualBackground">
+		<LocalAudioControlButton :conversation="conversation" :model="model" color="#ffffff" />
+
+		<LocalVideoControlButton :conversation="conversation" :model="model" color="#ffffff" />
+
+		<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
+			v-tooltip="toggleVirtualBackgroundButtonLabel"
+			type="tertiary-no-background"
+			:aria-label="toggleVirtualBackgroundButtonLabel"
+			:class="blurButtonClass"
+			@click.stop="toggleVirtualBackground">
+			<template #icon>
+				<Blur v-if="isVirtualBackgroundEnabled" :size="20" fill-color="#ffffff" />
+				<BlurOff v-else :size="20" fill-color="#ffffff" />
+			</template>
+		</NcButton>
+
+		<NcActions v-if="!screenSharingButtonHidden"
+			id="screensharing-button"
+			v-tooltip="screenSharingButtonTooltip"
+			:aria-label="screenSharingButtonAriaLabel"
+			:class="screenSharingButtonClass"
+			class="app-navigation-entry-utils-menu-button"
+			:boundaries-element="boundaryElement"
+			:container="container"
+			: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" />
+			</template>
+			<!-- /Actions button icon -->
+			<!-- Actions -->
+			<NcActionButton v-if="!screenSharingMenuOpen"
+				@click.stop="toggleScreenSharingMenu">
 				<template #icon>
-					<Blur v-if="isVirtualBackgroundEnabled" :size="20" fill-color="#ffffff" />
-					<BlurOff v-else :size="20" fill-color="#ffffff" />
+					<PresentToAll :size="20" fill-color="#ffffff" />
 				</template>
-			</NcButton>
-
-			<NcActions v-if="!screenSharingButtonHidden"
-				id="screensharing-button"
-				v-tooltip="screenSharingButtonTooltip"
-				:aria-label="screenSharingButtonAriaLabel"
-				:class="screenSharingButtonClass"
-				class="app-navigation-entry-utils-menu-button"
-				:boundaries-element="boundaryElement"
-				:container="container"
-				:open="screenSharingMenuOpen"
-				@update:open="screenSharingMenuOpen = true"
-				@update:close="screenSharingMenuOpen = false">
-				<!-- Actions button icon -->
-				<template #icon>
-					<CancelPresentation v-if="model.attributes.localScreen" :size="20" fill-color="#ffffff" />
-					<PresentToAll v-else :size="20" fill-color="#ffffff" />
-				</template>
-				<!-- /Actions button icon -->
-				<!-- Actions -->
-				<NcActionButton v-if="!screenSharingMenuOpen"
-					@click.stop="toggleScreenSharingMenu">
-					<template #icon>
-						<PresentToAll :size="20" fill-color="#ffffff" />
-					</template>
-					{{ screenSharingButtonTooltip }}
-				</NcActionButton>
-				<NcActionButton v-if="model.attributes.localScreen"
-					@click="showScreen">
+				{{ screenSharingButtonTooltip }}
+			</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 v-if="model.attributes.localScreen"
-					@click="stopScreen">
+				<NcActionButton close-after-click @click="stopScreen">
 					<template #icon>
 						<CancelPresentation :size="20" />
 					</template>
 					{{ t('spreed', 'Stop screensharing') }}
 				</NcActionButton>
-			</NcActions>
-			<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
-				v-tooltip="lowerHandAriaLabel"
-				:aria-label="lowerHandAriaLabel"
-				type="tertiary-no-background"
-				class="lower-hand"
-				:class="model.attributes.raisedHand.state ? '' : 'hidden-visually'"
-				:tabindex="model.attributes.raisedHand.state ? 0 : -1"
-				@shortkey="toggleHandRaised"
-				@click.stop="toggleHandRaised">
-				<template #icon>
-					<!-- The following icon is much bigger than all the others
-						so we reduce its size -->
-					<HandBackLeft :size="18" fill-color="#ffffff" />
-				</template>
-			</NcButton>
-		</div>
+			</template>
+		</NcActions>
 	</div>
 </template>
 
@@ -139,7 +121,6 @@ import escapeHtml from 'escape-html'
 
 import Blur from 'vue-material-design-icons/Blur.vue'
 import BlurOff from 'vue-material-design-icons/BlurOff.vue'
-import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
 import Monitor from 'vue-material-design-icons/Monitor.vue'
 import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
 
@@ -152,20 +133,20 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-import CancelPresentation from '../../missingMaterialDesignIcons/CancelPresentation.vue'
-import PresentToAll from '../../missingMaterialDesignIcons/PresentToAll.vue'
-import LocalAudioControlButton from './LocalAudioControlButton.vue'
-import LocalVideoControlButton from './LocalVideoControlButton.vue'
+import LocalAudioControlButton from '../CallView/shared/LocalAudioControlButton.vue'
+import LocalVideoControlButton from '../CallView/shared/LocalVideoControlButton.vue'
+import CancelPresentation from '../missingMaterialDesignIcons/CancelPresentation.vue'
+import PresentToAll from '../missingMaterialDesignIcons/PresentToAll.vue'
 
-import { useIsInCall } from '../../../composables/useIsInCall.js'
-import { PARTICIPANT } from '../../../constants.js'
-import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js'
-import { callAnalyzer } from '../../../utils/webrtc/index.js'
-import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner.js'
+import { useIsInCall } from '../../composables/useIsInCall.js'
+import { PARTICIPANT } from '../../constants.js'
+import { CONNECTION_QUALITY } from '../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js'
+import { callAnalyzer } from '../../utils/webrtc/index.js'
+import SpeakingWhileMutedWarner from '../../utils/webrtc/SpeakingWhileMutedWarner.js'
 
 export default {
 
-	name: 'LocalMediaControls',
+	name: 'TopBarMediaControls',
 
 	directives: {
 		tooltip: Tooltip,
@@ -176,7 +157,6 @@ export default {
 		Blur,
 		BlurOff,
 		CancelPresentation,
-		HandBackLeft,
 		Monitor,
 		NcActions,
 		NcActionButton,
@@ -258,12 +238,6 @@ export default {
 			return this.conversation.permissions & PARTICIPANT.PERMISSIONS.PUBLISH_SCREEN
 		},
 
-		lowerHandAriaLabel() {
-			return this.disableKeyboardShortcuts
-				? t('spreed', 'Lower hand')
-				: t('spreed', 'Lower hand (R)')
-		},
-
 		blurButtonClass() {
 			return {
 				'blur-disabled': this.isVirtualBackgroundEnabled,
@@ -517,37 +491,19 @@ export default {
 				return
 			}
 
-			if (this.model.attributes.localScreen) {
-				this.screenSharingMenuOpen = !this.screenSharingMenuOpen
-			} else {
+			if (!this.model.attributes.localScreen) {
 				this.startShareScreen()
 			}
 		},
 
-		toggleHandRaised() {
-			const state = !this.model.attributes.raisedHand?.state
-			this.model.toggleHandRaised(state)
-			this.$store.dispatch(
-				'setParticipantHandRaised',
-				{
-					sessionId: this.$store.getters.getSessionId(),
-					raisedHand: this.model.attributes.raisedHand,
-				}
-			)
-		},
-
 		showScreen() {
 			if (this.model.attributes.localScreen) {
 				emit('switch-screen-to-id', this.localCallParticipantModel.attributes.peerId)
 			}
-
-			this.screenSharingMenuOpen = false
 		},
 
 		stopScreen() {
 			this.model.stopSharingScreen()
-
-			this.screenSharingMenuOpen = false
 		},
 
 		startShareScreen(mode) {
@@ -614,22 +570,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
+@import '../../assets/variables';
 
 .buttons-bar {
 	display: flex;
 	align-items: center;
 }
 
-.buttons-bar button.lower-hand.hidden-visually {
-	position: absolute;
-	left: -10000px;
-	top: -10000px;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
-
 .buttons-bar #screensharing-menu button {
 	width: 100%;
 	height: auto;
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index fc6dc1aee..1d3a58f65 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -20,130 +20,146 @@
 -->
 
 <template>
-	<NcActions v-if="!isSidebar"
-		v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
-		v-tooltip="t('spreed', 'Conversation actions')"
-		:aria-label="t('spreed', 'Conversation actions')"
-		:container="container"
-		@shortkey.native="toggleFullscreen">
-		<!-- Menu icon: white if in call -->
-		<template v-if="isInCall" #icon>
-			<DotsHorizontal :size="20"
-				fill-color="#ffffff" />
-		</template>
-		<template v-if="showActions && isInCall">
-			<!-- Raise hand -->
-			<NcActionButton :close-after-click="true"
-				@click="toggleHandRaised">
+	<div class="top-bar__wrapper">
+		<NcButton v-show="isInCall && isHandRaised"
+			v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
+			v-tooltip="raiseHandButtonLabel"
+			:aria-label="raiseHandButtonLabel"
+			type="tertiary-no-background"
+			@shortkey="toggleHandRaised"
+			@click.stop="toggleHandRaised">
+			<template #icon>
 				<!-- The following icon is much bigger than all the others
 					so we reduce its size -->
-				<template #icon>
-					<HandBackLeft :size="16" />
+				<HandBackLeft :size="18" fill-color="#ffffff" />
+			</template>
+		</NcButton>
+
+		<NcActions v-if="!isSidebar"
+			v-shortkey.once="disableKeyboardShortcuts ? null : ['f']"
+			v-tooltip="t('spreed', 'Conversation actions')"
+			:aria-label="t('spreed', 'Conversation actions')"
+			:container="container"
+			@shortkey.native="toggleFullscreen">
+			<!-- Menu icon: white if in call -->
+			<template v-if="isInCall" #icon>
+				<DotsHorizontal :size="20"
+					fill-color="#ffffff" />
+			</template>
+			<template v-if="showActions && isInCall">
+				<!-- Raise hand -->
+				<NcActionButton close-after-click
+					@click="toggleHandRaised">
+					<!-- The following icon is much bigger than all the others
+					so we reduce its size -->
+					<template #icon>
+						<HandBackLeft :size="16" />
+					</template>
+					{{ raiseHandButtonLabel }}
+				</NcActionButton>
+
+				<!-- Mute others -->
+				<template v-if="!isOneToOneConversation && canFullModerate">
+					<NcActionButton close-after-click
+						@click="forceMuteOthers">
+						<template #icon>
+							<MicrophoneOff :size="20" />
+						</template>
+						{{ t('spreed', 'Mute others') }}
+					</NcActionButton>
 				</template>
-				{{ raiseHandButtonLabel }}
-			</NcActionButton>
 
-			<!-- Mute others -->
-			<template v-if="!isOneToOneConversation && canFullModerate">
-				<NcActionButton :close-after-click="true"
-					@click="forceMuteOthers">
+				<!-- Device settings -->
+				<NcActionButton close-after-click
+					@click="showMediaSettings">
 					<template #icon>
-						<MicrophoneOff :size="20" />
+						<VideoIcon :size="20" />
 					</template>
-					{{ t('spreed', 'Mute others') }}
+					{{ t('spreed', 'Media settings') }}
 				</NcActionButton>
+				<NcActionSeparator />
 			</template>
 
-			<!-- Device settings -->
-			<NcActionButton :close-after-click="true"
-				@click="showMediaSettings">
+			<!-- Call layout switcher -->
+			<NcActionButton v-if="showActions && isInCall"
+				close-after-click
+				@click="changeView">
 				<template #icon>
-					<VideoIcon :size="20" />
+					<GridView v-if="!isGrid"
+						:size="20" />
+					<PromotedView v-else
+						:size="20" />
 				</template>
-				{{ t('spreed', 'Media settings') }}
+				{{ changeViewText }}
 			</NcActionButton>
-			<NcActionSeparator />
-		</template>
-
-		<!-- Call layout switcher -->
-		<NcActionButton v-if="showActions && isInCall"
-			:close-after-click="true"
-			@click="changeView">
-			<template #icon>
-				<GridView v-if="!isGrid"
-					:size="20" />
-				<PromotedView v-else
-					:size="20" />
-			</template>
-			{{ changeViewText }}
-		</NcActionButton>
-
-		<!-- Fullscreen -->
-		<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
-			:close-after-click="true"
-			@click="toggleFullscreen">
-			<template #icon>
-				<Fullscreen v-if="!isFullscreen" :size="20" />
-				<FullscreenExit v-else :size="20" />
-			</template>
-			{{ labelFullscreen }}
-		</NcActionButton>
 
-		<!-- Go to file -->
-		<NcActionLink v-if="isFileConversation"
-			:href="linkToFile">
-			<template #icon>
-				<File :size="20" />
-			</template>
-			{{ t('spreed', 'Go to file') }}
-		</NcActionLink>
-		<!-- Call recording -->
-		<template v-if="canModerateRecording">
-			<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
-				:close-after-click="true"
-				@click="startRecording">
+			<!-- Fullscreen -->
+			<NcActionButton :aria-label="t('spreed', 'Toggle full screen')"
+				close-after-click
+				@click="toggleFullscreen">
 				<template #icon>
-					<RecordCircle :size="20" />
+					<Fullscreen v-if="!isFullscreen" :size="20" />
+					<FullscreenExit v-else :size="20" />
 				</template>
-				{{ t('spreed', 'Start recording') }}
+				{{ labelFullscreen }}
 			</NcActionButton>
-			<NcActionButton v-else-if="isStartingRecording && isInCall"
-				:close-after-click="true"
-				@click="stopRecording">
+
+			<!-- Go to file -->
+			<NcActionLink v-if="isFileConversation"
+				:href="linkToFile">
 				<template #icon>
-					<NcLoadingIcon :size="20" />
+					<File :size="20" />
 				</template>
-				{{ t('spreed', 'Cancel recording start') }}
-			</NcActionButton>
-			<NcActionButton v-else-if="isRecording && isInCall"
-				:close-after-click="true"
-				@click="stopRecording">
+				{{ t('spreed', 'Go to file') }}
+			</NcActionLink>
+			<!-- Call recording -->
+			<template v-if="canModerateRecording">
+				<NcActionButton v-if="!isRecording && !isStartingRecording && isInCall"
+					close-after-click
+					@click="startRecording">
+					<template #icon>
+						<RecordCircle :size="20" />
+					</template>
+					{{ t('spreed', 'Start recording') }}
+				</NcActionButton>