Merge pull request #14044 from nextcloud/fix/12187/presenter-overlay-…

…borders
nextcloud · Jan 10, 2025 · 342c165 · 342c165
2 parents 07ebe85 + d6eeb98
commit 342c165
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
@@ -4,8 +4,9 @@
 -->
 <template>
 	<VueDraggableResizable v-if="!isCollapsed"
-		:key="presenterOverlaySize"
+		ref="presenterOverlay"
 		parent
+		class="presenter-overlay"
 		:resizable="false"
 		:h="presenterOverlaySize"
 		:w="presenterOverlaySize"
@@ -107,40 +108,64 @@ export default {
 
 	data() {
 		return {
+			resizeObserver: null,
 			presenterOverlaySize: 128,
 			isDragging: false,
 		}
 	},
 
 	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)
+			}
 		},
 	},
 }
 </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
@@ -165,6 +165,11 @@ export default {
 
 <style lang="scss" scoped>
 
+.screenContainer {
+	width: 100%;
+	height: 100%;
+}
+
 .screen {
 	width: 100%;
 	height: 100%;