From a7644abe8f8a174ccfccc0828b402a14da45cd0e 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 1/2] fix(PresenterOverlay): fix relative positioning

- do not rely on CSS to set element size

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

diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
index 4ab92656c8a..52b20232be3 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,17 +131,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.presenter-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
 .presenter-overlay__video {
 	position: relative;
 	--max-size: 242px;
 	--min-size: 100px;
-	width: 10vw;
-	height: 10vw;
 	max-width: var(--max-size);
 	max-height: var(--max-size);
 	min-width: var(--min-size);
 	min-height: var(--min-size);
 	z-index: 10;
+	aspect-ratio: 1;
 
 	&:hover {
 		cursor: grab;
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 d6eeb9805254f353bbf922afcc41e954ed9c2aa6 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 23 Dec 2024 23:16:56 +0100
Subject: [PATCH 2/2] fix(PresenterOverlay): limit overlay position to parent
 bounds

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../CallView/shared/PresenterOverlay.vue      | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
index 52b20232be3..2aaa5c0ae8b 100644
--- a/src/components/CallView/shared/PresenterOverlay.vue
+++ b/src/components/CallView/shared/PresenterOverlay.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<VueDraggableResizable v-if="!isCollapsed"
-		:key="presenterOverlaySize"
+		ref="presenterOverlay"
 		parent
 		class="presenter-overlay"
 		:resizable="false"
@@ -108,6 +108,7 @@ export default {
 
 	data() {
 		return {
+			resizeObserver: null,
 			presenterOverlaySize: 128,
 			isDragging: false,
 		}
@@ -115,16 +116,34 @@ export default {
 
 	mounted() {
 		window.addEventListener('resize', this.updateSize)
+
+		this.resizeObserver = new ResizeObserver(this.updateSize)
+		this.resizeObserver.observe(this.$refs.presenterOverlay.$el.parentElement)
 	},
 
 	beforeDestroy() {
 		window.removeEventListener('resize', this.updateSize)
+
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect()
+		}
 	},
 
 	methods: {
 		t,
 		updateSize() {
-			this.presenterOverlaySize = Math.min(Math.max(window.innerWidth * 0.1, 100), 242)
+			// Size should be proportionate to the screen share size
+			const newSize = Math.round(this.$refs.presenterOverlay.$el.parentElement.clientWidth * 0.1)
+			this.presenterOverlaySize = Math.min(Math.max(newSize, 100), 242)
+			// FIXME: inner method should be triggered to re-parent element
+			this.$refs.presenterOverlay.checkParentSize()
+			// FIXME: if it stays out of bounds (right and bottom), bring it back
+			if (this.$refs.presenterOverlay.right < 0) {
+				this.$refs.presenterOverlay.moveHorizontally(this.$refs.presenterOverlay.parentWidth - this.presenterOverlaySize)
+			}
+			if (this.$refs.presenterOverlay.bottom < 0) {
+				this.$refs.presenterOverlay.moveVertically(this.$refs.presenterOverlay.parentHeight - this.presenterOverlaySize)
+			}
 		},
 	},
 }