From de771166f9d1f7220c903e980dc56d70f6f62cc1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 10 Jan 2025 17:46:10 +0100
Subject: [PATCH] feat(Screen): allow to zoom and pan screenshare content in
 Speaker View

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/shared/Screen.vue     | 28 +++++++++++++++++--
 .../SettingsDialog/SettingsDialog.vue         |  6 ++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
index 941778be6f2..bb4eae2ed8c 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'
 
@@ -62,9 +64,31 @@ export default {
 		},
 	},
 
-	setup() {
+	setup(props) {
 		const guestNameStore = useGuestNameStore()
-		return { guestNameStore }
+
+		const screen = ref(null)
+		const screenPanzoomInstance = ref(null)
+
+		onMounted(() => {
+			if (props.isBig) {
+				screenPanzoomInstance.value = panzoom(screen.value, {
+					minZoom: 1,
+					maxZoom: 8,
+					bounds: true,
+					boundsPadding: 1,
+				})
+			}
+		})
+		onBeforeUnmount(() => {
+			screenPanzoomInstance.value?.dispose()
+		})
+
+		return {
+			guestNameStore,
+			screen,
+			screenPanzoomInstance,
+		}
 	},
 
 	computed: {
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 1b78b23e557..a047867becd 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -203,6 +203,12 @@
 						{{ t('spreed', 'Raise or lower hand') }}
 					</dd>
 				</div>
+				<div>
+					<dt><kbd>{{ t('spreed', 'Mouse wheel') }}</kbd></dt>
+					<dd class="shortcut-description">
+						{{ t('spreed', 'Zoom-in / zoom-out a screen share') }}
+					</dd>
+				</div>
 			</dl>
 		</NcAppSettingsSection>
 	</NcAppSettingsDialog>