Add presenter overlay when sharing screen

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Oct 9, 2023 · a34397f · a34397f
1 parent 3d4cc86
commit a34397f
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 3 deletions.
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -66,6 +66,34 @@
 									:call-participant-model="callParticipantModel"
 									: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"
+									name="slide-down">
+									<VideoVue :key="'video-overlay-' + callParticipantModel.attributes.peerId"
+										class="viewer-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"
+									:aria-label="t('spreed', 'Show presenter')"
+									class="presentar-overlay--collapse"
+									type="tertiary-no-background"
+									@click="toggleShowPresenterOverlay">
+									<template #icon>
+										<AccountBox fill-color="#ffffff"
+											:size="20" />
+									</template>
+								</NcButton>
 							</template>
 						</template>
 					</div>
@@ -153,32 +181,39 @@ import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 
+import AccountBox from 'vue-material-design-icons/AccountBoxOutline.vue'
+
 import Grid from './Grid/Grid.vue'
 import EmptyCallView from './shared/EmptyCallView.vue'
 import LocalVideo from './shared/LocalVideo.vue'
 import ReactionToaster from './shared/ReactionToaster.vue'
 import Screen from './shared/Screen.vue'
 import VideoVue from './shared/VideoVue.vue'
 import ViewerOverlayCallView from './shared/ViewerOverlayCallView.vue'
+import TransitionWrapper from '../TransitionWrapper.vue'
 
 import { SIMULCAST } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { fetchPeers } from '../../services/callsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import RemoteVideoBlocker from '../../utils/webrtc/RemoteVideoBlocker.js'
 
 export default {
 	name: 'CallView',
 
 	components: {
+		AccountBox,
 		EmptyCallView,
 		ViewerOverlayCallView,
 		Grid,
 		LocalVideo,
+		NcButton,
 		ReactionToaster,
 		Screen,
 		VideoVue,
+		TransitionWrapper,
 	},
 
 	props: {
@@ -214,6 +249,7 @@ export default {
 			},
 			callParticipantCollection,
 			isBackgroundBlurred: true,
+			showPresenterOverlay: true,
 		}
 	},
 	computed: {
@@ -261,6 +297,10 @@ export default {
 			return this.$store.getters.isViewerOverlay
 		},
 
+		isStripeOpen() {
+			return this.$store.getters.isStripeOpen
+		},
+
 		isGrid() {
 			return this.$store.getters.isGrid && !this.isSidebar
 		},
@@ -362,6 +402,10 @@ export default {
 		supportedReactions() {
 			return getCapabilities()?.spreed?.config?.call?.['supported-reactions']
 		},
+
+		shouldShowPresenterOverlay() {
+			return this.showPresenterOverlay && !this.isStripeOpen
+		}
 	},
 	watch: {
 		'localCallParticipantModel.attributes.peerId'(newValue, previousValue) {
@@ -713,6 +757,10 @@ export default {
 		setBackgroundBlurred(value) {
 			this.isBackgroundBlurred = value
 		},
+
+		toggleShowPresenterOverlay() {
+			this.showPresenterOverlay = !this.showPresenterOverlay
+		}
 	},
 }
 </script>
@@ -737,6 +785,39 @@ export default {
 	}
 }
 
+.viewer-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: var(--max-width);
+	min-height: var(--min-width);
+	max-height: var(--max-width);
+	z-index: 110;
+}
+
+.presentar-overlay--collapse {
+	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/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -79,6 +79,9 @@
 		</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>
 
@@ -88,6 +91,7 @@ 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'
@@ -109,9 +113,11 @@ export default {
 		AvatarWrapper,
 		TransitionWrapper,
 		VideoBackground,
-		AccountCircle,
 		Screen,
 		VideoBottomBar,
+		// icons
+		AccountCircle,
+		HideIcon,
 	},
 
 	mixins: [video],
@@ -141,6 +147,12 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		isPresenterOverlay: {
+			type: Boolean,
+			default: false,
+		},
+
 		// True if this video component is used in the promoted view's video stripe
 		isStripe: {
 			type: Boolean,
@@ -449,15 +461,15 @@ export default {
 				// Grid
 			} else {
 				// Always show shared screen if there's one
-				return this.hasSharedScreen
+				return this.hasSharedScreen && !this.isPresenterOverlay
 			}
 		},
 
 		showVideo() {
 			// Screenshare have higher priority so return false if screenshare
 			// is shown
 			if (this.hasSharedScreen) {
-				return !this.showSharedScreen && this.hasVideo && !this.isSelected
+				return (!this.showSharedScreen && this.hasVideo && !this.isSelected) || this.isPresenterOverlay
 			} else {
 				if (this.isStripe) {
 					if (this.hasSelectedVideo) {
@@ -700,4 +712,19 @@ export default {
 	cursor: pointer;
 	border-radius: calc(var(--default-clickable-area) / 2);
 }
+
+.hover-presenter {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	border-radius: calc(var(--default-clickable-area) / 2);
+	& > * {
+		cursor: pointer;
+		height:100%;
+	}
+}
+
 </style>