feat(Screen): allow to zoom and pan screenshare content

package.json

@@ -56,6 +56,7 @@
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "mockconsole": "0.0.1",
+    "panzoom": "^9.4.3",
     "pinia": "^2.3.0",
     "ua-parser-js": "^2.0.0",
     "util": "^0.12.5",

src/components/CallView/CallView.vue

@@ -17,6 +17,7 @@
 
 			<div id="videos">
 				<div v-if="devMode ? !isGrid : (!isGrid || !callParticipantModels.length)"
+					ref="videoPromotedWrapper"
 					class="video__promoted"
 					:class="{'full-page': showFullPage}">
 					<!-- Selected video override mode -->
@@ -73,6 +74,7 @@
 						@force-promote-video="forcePromotedModel = $event" />
 					<!-- presenter overlay -->
 					<PresenterOverlay v-if="shouldShowPresenterOverlay"
+						:key="promotedWrapperDimensions"
 						:token="token"
 						:model="presenterModel"
 						:shared-data="presenterSharedData"
@@ -237,6 +239,8 @@ export default {
 			showPresenterOverlay: true,
 			debounceFetchPeers: () => {},
 			forcePromotedModel: null,
+			resizeObserver: null,
+			promotedWrapperDimensions: null,
 		}
 	},
 
@@ -495,6 +499,9 @@ export default {
 
 		subscribe('switch-screen-to-id', this._switchScreenToId)
 		subscribe('set-background-blurred', this.setBackgroundBlurred)
+
+		this.resizeObserver = new ResizeObserver(this.updatePromotedWrapperDimensions)
+		this.resizeObserver.observe(this.$refs.videoPromotedWrapper)
 	},
 
 	beforeDestroy() {
@@ -506,6 +513,10 @@ export default {
 
 		unsubscribe('switch-screen-to-id', this._switchScreenToId)
 		unsubscribe('set-background-blurred', this.setBackgroundBlurred)
+
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -800,6 +811,9 @@ export default {
 			}
 		},
 
+		updatePromotedWrapperDimensions([entry]) {
+			this.promotedWrapperDimensions = `${entry.contentRect.width}:${entry.contentRect.height}`
+		},
 	},
 }
 </script>

src/components/CallView/shared/PresenterOverlay.vue

@@ -6,6 +6,7 @@
 	<VueDraggableResizable v-if="!isCollapsed"
 		:key="presenterOverlaySize"
 		parent
+		class="presenter-overlay"
 		:resizable="false"
 		:h="presenterOverlaySize"
 		:w="presenterOverlaySize"
@@ -130,6 +131,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.presenter-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
 .presenter-overlay__video {
 	position: relative;
 	--max-size: 242px;

src/components/CallView/shared/Screen.vue

@@ -23,6 +23,8 @@
 <script>
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
+import panzoom from 'panzoom'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 import { t } from '@nextcloud/l10n'
 
@@ -64,7 +66,27 @@ export default {
 
 	setup() {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+
+		const screen = ref(null)
+		const screenPanzoomInstance = ref(null)
+
+		onMounted(() => {
+			screenPanzoomInstance.value = panzoom(screen.value, {
+				minZoom: 1,
+				maxZoom: 8,
+				bounds: true,
+				boundsPadding: 1,
+			})
+		})
+		onBeforeUnmount(() => {
+			screenPanzoomInstance.value?.dispose()
+		})
+
+		return {
+			guestNameStore,
+			screen,
+			screenPanzoomInstance,
+		}
 	},
 
 	computed: {
@@ -111,11 +133,10 @@ export default {
 			return remoteParticipantName
 		},
 		screenClass() {
-			if (this.isBig) {
-				return 'screen--fit'
-			} else {
-				return 'screen--fill'
-			}
+			return [
+				this.isBig ? 'screen--fit' : 'screen--fill',
+				this.screenPanzoomInstance ? 'screen--magnify' : '',
+			]
 		},
 
 	},
@@ -165,6 +186,11 @@ export default {
 
 <style lang="scss" scoped>
 
+.screenContainer {
+	width: 100%;
+	height: 100%;
+}
+
 .screen {
 	width: 100%;
 	height: 100%;
@@ -177,6 +203,9 @@ export default {
 	&--fill {
 		object-fit: cover;
 	}
+	&--magnify {
+		cursor: zoom-in;
+	}
 }
 
 </style>