fixup! fixup! Add presenter overlay when sharing screen

nextcloud · Oct 13, 2023 · 8e6c3e0 · 8e6c3e0
1 parent 56e0bb5
commit 8e6c3e0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 32 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -78,16 +78,16 @@
 										is-presenter-overlay
 										un-selectable
 										hide-bottom-bar
-										@click-video="toggleShowPresenterOverlay" />
+										@click-video="toggleShowPresenterOverlay(callParticipantModel)" />
 								</TransitionWrapper>
-								<!-- presenter button when it is collapsed -->
-								<NcButton v-else-if="!showPresenterOverlay && callParticipantModel.attributes.videoAvailable"
+								<!-- presenter button when presenter overlay is collapsed -->
+								<NcButton v-else-if="isPresenterCollapsed(callParticipantModel)"
 									:key="'presenter-overlay-button' + callParticipantModel.attributes.peerId"
 									:aria-label="t('spreed', 'Show presenter')"
 									title="Show presenter"
 									class="presenter-overlay--collapse"
 									type="tertiary-no-background"
-									@click="toggleShowPresenterOverlay">
+									@click="toggleShowPresenterOverlay(callParticipantModel)">
 									<template #icon>
 										<AccountBox fill-color="#ffffff" :size="20" />
 									</template>
@@ -295,10 +295,6 @@ export default {
 			return this.$store.getters.isViewerOverlay
 		},
 
-		isStripeOpen() {
-			return this.$store.getters.isStripeOpen
-		},
-
 		isGrid() {
 			return this.$store.getters.isGrid && !this.isSidebar
 		},
@@ -405,10 +401,17 @@ export default {
 			return callParticipantModel => {
 				return callParticipantModel.attributes.peerId === this.shownRemoteScreenPeerId
 				&& this.showPresenterOverlay
-				&& callParticipantModel.attributes.videoAvailable
+				&& this.callParticipantModelsWithVideo.includes(callParticipantModel)
 			}
 		},
 
+		isPresenterCollapsed() {
+			return callParticipantModel => {
+				return (!this.showPresenterOverlay && callParticipantModel.attributes.videoAvailable)
+				|| !this.sharedDatas[callParticipantModel.attributes.peerId].remoteVideoBlocker.isVideoEnabled()
+			}
+		}
+
 	},
 	watch: {
 		'localCallParticipantModel.attributes.peerId'(newValue, previousValue) {
@@ -761,8 +764,13 @@ export default {
 			this.isBackgroundBlurred = value
 		},
 
-		toggleShowPresenterOverlay() {
-			this.showPresenterOverlay = !this.showPresenterOverlay
+		toggleShowPresenterOverlay(callParticipantModel) {
+			const presenterVideoBlocker = this.sharedDatas[callParticipantModel.attributes.peerId].remoteVideoBlocker
+			if (!presenterVideoBlocker.isVideoEnabled()) {
+				presenterVideoBlocker.setVideoEnabled(true)
+			} else {
+				this.showPresenterOverlay = !this.showPresenterOverlay
+			}
 		}
 	},
 }
@@ -789,14 +797,14 @@ export default {
 }
 
 .presenter-overlay__video {
-	position : absolute;
+	position: absolute;
 	bottom: 48px;
 	right: 8px;
-	--max-width: 242px;
+	--max-size: 242px;
 	width: 10vw;
 	height: 10vw;
-	max-width: var(--max-width);
-	max-height: var(--max-width);
+	max-width: var(--max-size);
+	max-height: var(--max-size);
 	z-index: 10;
 }
 

diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -24,8 +24,8 @@
 		ref="videoContainer"
 		class="video-container"
 		:class="[containerClass, {
-			speaking: isSpeaking,
-			hover: mouseover && !unSelectable,
+			speaking: isSpeaking && !isBig,
+			hover: mouseover && !unSelectable && !isBig,
 			presenter: isPresenterOverlay && mouseover
 		}]"
 		@mouseover="showShadow"
@@ -689,42 +689,32 @@ export default {
 	top: calc(50% + 80px);
 }
 
-.video-container.speaking::after {
-	content: '';
+.video-container::after {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	top: 0;
 	left: 0;
-	box-shadow: inset 0 0 0 2px white;
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
+.video-container.speaking::after {
+	content: '';
+	box-shadow: inset 0 0 0 2px white;
+}
 
 .video-container.hover::after {
 	content: '';
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	top: 0;
-	left: 0;
 	box-shadow: inset 0 0 0 3px white;
 	cursor: pointer;
-	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
 .video-container.presenter::after {
 	content: '' ;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	top: 0;
-	left: 0;
 	background-color: rgba(0, 0, 0, 0.5);
 	background-image: var(--icon-toggle-white);
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: 25% 25%;
-	border-radius: calc(var(--default-clickable-area) / 2);
 	cursor: pointer;
 }