fixup! fixup! Add presenter overlay when sharing screen

src/components/CallView/CallView.vue

@@ -80,8 +80,8 @@
 										hide-bottom-bar
 										@click-video="toggleShowPresenterOverlay" />
 								</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"
@@ -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,7 +401,19 @@ export default {
 			return callParticipantModel => {
 				return callParticipantModel.attributes.peerId === this.shownRemoteScreenPeerId
 				&& this.showPresenterOverlay
-				&& callParticipantModel.attributes.videoAvailable
+				&& this.callParticipantModelsWithVideo.includes(callParticipantModel)
+			}
+		},
+
+		presenterVideoBlockerEnabled() {
+			return this.sharedDatas[this.shownRemoteScreenPeerId]?.remoteVideoBlocker?.isVideoEnabled()
+		},
+
+		isPresenterCollapsed() {
+			return callParticipantModel => {
+				return (callParticipantModel.attributes.peerId === this.shownRemoteScreenPeerId
+				&& !this.showPresenterOverlay
+				&& callParticipantModel.attributes.videoAvailable)
 			}
 		},
 
@@ -483,6 +491,11 @@ export default {
 				this.$store.dispatch('setCallViewMode', { isGrid: false })
 			}
 		},
+
+		presenterVideoBlockerEnabled(value) {
+			this.showPresenterOverlay = value
+
+		},
 	},
 	created() {
 		// Ensure that data is properly initialized before mounting the
@@ -762,7 +775,11 @@ export default {
 		},
 
 		toggleShowPresenterOverlay() {
-			this.showPresenterOverlay = !this.showPresenterOverlay
+			if (!this.presenterVideoBlockerEnabled) {
+				this.sharedDatas[this.shownRemoteScreenPeerId].remoteVideoBlocker.setVideoEnabled(true)
+			} else {
+				this.showPresenterOverlay = !this.showPresenterOverlay
+			}
 		}
 	},
 }
@@ -789,14 +806,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;
 }
 

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;
 }