fix(PresenterOverlay): limit overlay position to parent bounds

Signed-off-by: Maksim Sukharev <[email protected]>

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,23 +108,42 @@ 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)
+			}
 		},
 	},
 }