From 54886569b18e5c4c88664935968df9c679d39393 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 23 Dec 2024 12:57:10 +0100
Subject: [PATCH 1/4] fix(PresenterOverlay): limit overlay to video_promoted
 wrapper borders

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

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index 8a8ed51db0d..901c3ebee50 100644
--- a/src/components/CallView/CallView.vue
+++ b/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>

From 9c95b70e0fd10fa9bb0473900e5edc211667db7c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 23 Dec 2024 12:57:52 +0100
Subject: [PATCH 2/4] fix(PresenterOverlay): fix relative positioning

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/shared/PresenterOverlay.vue | 7 +++++++
 src/components/CallView/shared/Screen.vue           | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
index 4ab92656c8a..5d496f47585 100644
--- a/src/components/CallView/shared/PresenterOverlay.vue
+++ b/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;
diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
index 657fff561ea..941778be6f2 100644
--- a/src/components/CallView/shared/Screen.vue
+++ b/src/components/CallView/shared/Screen.vue
@@ -165,6 +165,11 @@ export default {
 
 <style lang="scss" scoped>
 
+.screenContainer {
+	width: 100%;
+	height: 100%;
+}
+
 .screen {
 	width: 100%;
 	height: 100%;

From 2e25edc886e92705e9b2f6faeb45a6eed5867098 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 19 Dec 2024 11:20:01 +0100
Subject: [PATCH 3/4] chore(deps): install panzoom library v9.4.3

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 package-lock.json | 72 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 73 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index bd099fc5b4d..8a8e364f225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,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",
@@ -5622,6 +5623,15 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "license": "MIT",
+      "dependencies": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -6230,6 +6240,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -15385,6 +15401,12 @@
       "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
     },
+    "node_modules/ngraph.events": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
+      "integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -15971,6 +15993,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/panzoom": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
+      "integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
+      "license": "MIT",
+      "dependencies": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -21168,6 +21201,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -25495,6 +25534,14 @@
       "dev": true,
       "requires": {}
     },
+    "amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "requires": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -25953,6 +26000,11 @@
       "dev": true,
       "peer": true
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -32704,6 +32756,11 @@
       "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
     },
+    "ngraph.events": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
+      "integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ=="
+    },
     "node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -33126,6 +33183,16 @@
       "dev": true,
       "peer": true
     },
+    "panzoom": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
+      "integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
+      "requires": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -36953,6 +37020,11 @@
         }
       }
     },
+    "wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 6219237fc18..82ee906b172 100644
--- a/package.json
+++ b/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",

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 4/4] 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>