fixup! Add presenter overlay when sharing screen

nextcloud · Oct 10, 2023 · 0689a6c · 0689a6c
1 parent a34397f
commit 0689a6c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 37 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -67,31 +67,29 @@
 									:shared-data="sharedDatas[shownRemoteScreenPeerId]"
 									:is-big="true" />
 								<!-- presenter overlay -->
-								<TransitionWrapper v-if="callParticipantModel.attributes.peerId === shownRemoteScreenPeerId && shouldShowPresenterOverlay
-										&& callParticipantModel.attributes.videoAvailable "
-									:key="'video-overlay-wrapper' + callParticipantModel.attributes.peerId"
+								<TransitionWrapper v-if="shouldShowPresenterOverlay(callParticipantModel)"
+									:key="'presenter-overlay-video' + callParticipantModel.attributes.peerId"
 									name="slide-down">
 									<VideoVue :key="'video-overlay-' + callParticipantModel.attributes.peerId"
-										class="viewer-overlay__video"
+										class="presenter-overlay__video"
 										:token="token"
 										:model="callParticipantModel"
 										:shared-data="sharedDatas[shownRemoteScreenPeerId]"
-										:show-talking-highlight="false"
 										is-presenter-overlay
 										un-selectable
 										hide-bottom-bar
 										@click-video="toggleShowPresenterOverlay" />
 								</TransitionWrapper>
 								<!-- presenter button when it is collapsed -->
 								<NcButton v-else-if="!showPresenterOverlay && callParticipantModel.attributes.videoAvailable"
-									:key="'video-overlay-collapsed' + callParticipantModel.attributes.peerId"
+									:key="'presenter-overlay-button' + callParticipantModel.attributes.peerId"
 									:aria-label="t('spreed', 'Show presenter')"
-									class="presentar-overlay--collapse"
+									title="Show presenter"
+									class="presenter-overlay--collapse"
 									type="tertiary-no-background"
 									@click="toggleShowPresenterOverlay">
 									<template #icon>
-										<AccountBox fill-color="#ffffff"
-											:size="20" />
+										<AccountBox fill-color="#ffffff" :size="20" />
 									</template>
 								</NcButton>
 							</template>
@@ -404,8 +402,13 @@ export default {
 		},
 
 		shouldShowPresenterOverlay() {
-			return this.showPresenterOverlay && !this.isStripeOpen
-		}
+			return callParticipantModel => {
+				return callParticipantModel.attributes.peerId === this.shownRemoteScreenPeerId
+				&& this.showPresenterOverlay
+				&& callParticipantModel.attributes.videoAvailable
+			}
+		},
+
 	},
 	watch: {
 		'localCallParticipantModel.attributes.peerId'(newValue, previousValue) {
@@ -785,23 +788,19 @@ export default {
 	}
 }
 
-.viewer-overlay__video {
+.presenter-overlay__video {
 	position : absolute;
 	bottom: 48px;
 	right: 8px;
-	--min-width: 130px;
-	--max-width: 180px;
-	--max-height: 180px;
-	width: 15vw;
-	height: 15vw;
-	min-width: var(--min-width);
+	--max-width: 242px;
+	width: 10vw;
+	height: 10vw;
 	max-width: var(--max-width);
-	min-height: var(--min-width);
 	max-height: var(--max-width);
-	z-index: 110;
+	z-index: 10;
 }
 
-.presentar-overlay--collapse {
+.presenter-overlay--collapse {
 	position : absolute !important;
 	opacity: .7;
 	bottom: 48px;

diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -22,8 +22,12 @@
 	<div v-show="!placeholderForPromoted || sharedData.promoted"
 		:id="(placeholderForPromoted ? 'placeholder-' : '') + 'container_' + peerId + '_video_incoming'"
 		ref="videoContainer"
-		class="videoContainer"
-		:class="containerClass"
+		class="video-container"
+		:class="[containerClass, {
+			speaking: isSpeaking,
+			hover: mouseover && !unSelectable,
+			presenter: isPresenterOverlay && mouseover
+		}]"
 		@mouseover="showShadow"
 		@mouseleave="hideShadow"
 		@click="handleClickVideo">
@@ -77,11 +81,6 @@
 				:has-shadow="hasVideo"
 				:participant-name="participantName" />
 		</slot>
-		<div v-if="isSpeaking && !isStripe && !isBig" class="speaking-shadow" />
-		<div v-if="!unSelectable && mouseover && !isBig" class="hover-shadow" />
-		<div v-if="isPresenterOverlay && mouseover" class="hover-presenter">
-			<HideIcon fill-color="#ffffff" @click="handleClickVideo" />
-		</div>
 	</div>
 </template>
 
@@ -91,7 +90,6 @@ import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 
 import AccountCircle from 'vue-material-design-icons/AccountCircle.vue'
-import HideIcon from 'vue-material-design-icons/EyeOffOutline.vue'
 
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import TransitionWrapper from '../../TransitionWrapper.vue'
@@ -117,7 +115,6 @@ export default {
 		VideoBottomBar,
 		// icons
 		AccountCircle,
-		HideIcon,
 	},
 
 	mixins: [video],
@@ -692,7 +689,8 @@ export default {
 	top: calc(50% + 80px);
 }
 
-.speaking-shadow {
+.video-container.speaking::after {
+	content: '';
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -702,7 +700,8 @@ export default {
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
-.hover-shadow {
+.video-container.hover::after {
+	content: '';
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -713,18 +712,20 @@ export default {
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
 
-.hover-presenter {
+.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;
-		height:100%;
-	}
+	cursor: pointer;
 }
 
 </style>