From 107c559e3a51e306c2f9a1c1666991db3b014e0e Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 23 Dec 2024 13:29:10 +0100
Subject: [PATCH] feat(Screen): allow to zoom and pan screenshare content

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/shared/Screen.vue | 36 +++++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
index 941778be6f2..472072f36e1 100644
--- a/src/components/CallView/shared/Screen.vue
+++ b/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' : '',
+			]
 		},
 
 	},
@@ -182,6 +203,9 @@ export default {
 	&--fill {
 		object-fit: cover;
 	}
+	&--magnify {
+		cursor: zoom-in;
+	}
 }
 
 </style>