fixup! Fix(PresenterOverlay): move PresenterOverlay to a different co…

…mponent and add grabbing effects
nextcloud · Mar 22, 2024 · 7e8ca76 · 7e8ca76
1 parent 9159c0f
commit 7e8ca76
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 26 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -75,12 +75,11 @@
 							:shared-data="sharedDatas[shownRemoteScreenPeerId]"
 							is-big />
 						<!-- presenter overlay -->
-						<PresenterOverlay v-if="shouldShowPresenterOverlay || isPresenterCollapsed"
-							:class="{'presenter-overlay--collapsed': isPresenterCollapsed }"
+						<PresenterOverlay v-if="shouldShowPresenterOverlay"
 							:token="token"
 							:model="shownRemoteScreenCallParticipantModel"
 							:shared-data="sharedDatas[shownRemoteScreenPeerId]"
-							:is-collapsed="isPresenterCollapsed"
+							:is-collapsed="!showPresenterOverlay"
 							@click="toggleShowPresenterOverlay" />
 					</template>
 					<!-- Promoted "autopilot" mode -->
@@ -339,12 +338,8 @@ export default {
 			})
 		},
 
-		isPresenterCollapsed() {
-			return !this.showPresenterOverlay && this.shownRemoteScreenCallParticipantModel.attributes.videoAvailable
-		},
-
 		shouldShowPresenterOverlay() {
-			return this.showPresenterOverlay && this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)
+			return this.shownRemoteScreenCallParticipantModel.attributes.videoAvailable || this.isModelWithVideo(this.shownRemoteScreenCallParticipantModel)
 
 		},
 
@@ -766,23 +761,6 @@ export default {
 	}
 }
 
-.presenter-overlay--collapsed {
-	position: absolute !important;
-	opacity: .7;
-	bottom: 48px;
-	right: 0;
-
-	#call-container:hover & {
-		background-color: rgba(0, 0, 0, 0.1) !important;
-
-		&:hover,
-		&:focus {
-			opacity: 1;
-			background-color: rgba(0, 0, 0, 0.2) !important;
-		}
-	}
-}
-
 #videos {
 	position: absolute;
 	width: 100%;

diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
@@ -42,7 +42,7 @@
 	<NcButton v-else
 		:aria-label="t('spreed', 'Show presenter')"
 		:title="t('spreed', 'Show presenter')"
-		class="presenter-overlay--collapse"
+		class="presenter-overlay--collapsed"
 		type="tertiary-no-background"
 		@click="$emit('click')">
 		<template #icon>
@@ -140,6 +140,23 @@ export default {
     }
 }
 
+.presenter-overlay--collapsed {
+	position: absolute !important;
+	opacity: .7;
+	bottom: 48px;
+	right: 0;
+
+	#call-container:hover & {
+		background-color: rgba(0, 0, 0, 0.1) !important;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+			background-color: rgba(0, 0, 0, 0.2) !important;
+		}
+	}
+}
+
 :deep(div) {
     cursor: inherit;
 }

diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -727,6 +727,7 @@ export default {
 	content: '';
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
+	z-index: 1;
 }
 
 .presenter-icon__hide {
@@ -739,6 +740,7 @@ export default {
 	border-radius: 50%;
 	padding: 6px;
 	width: 44px;
+	z-index: 2;
 
 	&:hover {
 		cursor: pointer;