From c8a58d542805be956067a211dd7616bf53d15946 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 2 Apr 2024 10:05:43 +0300
Subject: [PATCH] Fitting the VideoPopup to the height of the window (#5128)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/ui/src/components/ActionIcon.svelte  |  1 +
 .../ui/src/components/PopupInstance.svelte    | 76 +++++++++++--------
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index ed60a7dd3c..af52226e64 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -47,6 +47,7 @@
 <style lang="scss">
   .button {
     color: inherit;
+    border: none;
     border-radius: 0.125rem;
     cursor: pointer;
 
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 96ef80f30b..c2a52b5c5b 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -146,6 +146,7 @@
 
   let drag: boolean = false
   let notFit: number = 0
+  let locked: boolean = false
 
   const windowSize: { width: number, height: number } = { width: 0, height: 0 }
   const dragParams: { offsetX: number, offsetY: number } = { offsetX: 0, offsetY: 0 }
@@ -154,6 +155,7 @@
   const updatedPopupParams = (pp: { x: number, y: number, width: number, height: number }): void => {
     if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
     options.props.left = `${pp.x}px`
+    options.props.right = ''
     options.props.top = `${pp.y}px`
     options.props.maxHeight = `${pp.height}px`
   }
@@ -184,7 +186,6 @@
       newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
     }
     popupParams = { ...popupParams, x: newLeft, y: newTop }
-    options.props.right = ''
   }
 
   function mouseUp (): void {
@@ -193,32 +194,45 @@
     window.removeEventListener('mouseup', mouseUp)
   }
 
-  function checkMovable (): void {
-    if (drag) return
-    const newParams: PopupParams = popupParams
-    if (windowSize.width < $deviceInfo.docWidth) {
-      // Increase Window Width
-      if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
-        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
-      }
-    } else if (windowSize.width > $deviceInfo.docWidth) {
-      // Decrease Window Width
-      if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
-        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
-      }
+  function checkSize (): void {
+    const rect = modalHTML.getBoundingClientRect()
+    const newParams: PopupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+    if (popupParams.width === 0 && popupParams.height === 0) popupParams = newParams
+    newParams.x =
+      popupParams.x < WINDOW_PADDING
+        ? WINDOW_PADDING
+        : popupParams.x + popupParams.width > windowSize.width - WINDOW_PADDING * 2
+          ? $deviceInfo.docWidth - WINDOW_PADDING - popupParams.width
+          : popupParams.x
+    newParams.y =
+      popupParams.y < WINDOW_PADDING
+        ? WINDOW_PADDING
+        : popupParams.y + popupParams.height > $deviceInfo.docHeight - WINDOW_PADDING
+          ? $deviceInfo.docHeight - WINDOW_PADDING - popupParams.height
+          : popupParams.y
+    if (newParams.y < WINDOW_PADDING) {
+      newParams.height -= WINDOW_PADDING - newParams.y
+      newParams.y = WINDOW_PADDING
     }
-    if (windowSize.height < $deviceInfo.docHeight) {
-      // Increase Window Height
-      if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
-        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
-      }
-    } else if (windowSize.height > $deviceInfo.docHeight) {
-      // Decrease Window Height
-      if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
-        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
-      }
+    if (newParams.height > windowSize.height - WINDOW_PADDING * 2) {
+      newParams.height = windowSize.height - WINDOW_PADDING * 2
+      newParams.y = WINDOW_PADDING
+    }
+    const bottomFree: number = $deviceInfo.docHeight - WINDOW_PADDING - popupParams.y - popupParams.height
+    const topFree: number = popupParams.y - WINDOW_PADDING
+    if (notFit && bottomFree > 0) {
+      const dFit: number = bottomFree - notFit
+      newParams.height += dFit >= 0 ? notFit : bottomFree
+      notFit -= dFit >= 0 ? notFit : bottomFree
+    }
+    if (notFit && topFree > 0) {
+      const dFit: number = topFree - notFit
+      newParams.y -= dFit < 0 ? topFree : notFit
+      newParams.height += dFit < 0 ? topFree : notFit
+      notFit -= dFit < 0 ? topFree : notFit
     }
     popupParams = newParams
+    locked = false
   }
 
   export function fitPopupInstance (): void {
@@ -239,15 +253,12 @@
 <svelte:window
   on:resize={() => {
     if (modalHTML) fitPopup(modalHTML, element, contentPanel)
-    if (element === 'movable') {
-      if (popupParams.width === 0 && popupParams.height === 0) {
-        const rect = modalHTML.getBoundingClientRect()
-        popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
-      }
-      checkMovable()
+    if (element === 'movable' && !locked) {
+      locked = true
+      checkSize()
+      windowSize.width = $deviceInfo.docWidth
+      windowSize.height = $deviceInfo.docHeight
     }
-    windowSize.width = $deviceInfo.docWidth
-    windowSize.height = $deviceInfo.docHeight
   }}
   on:keydown={handleKeydown}
 />
@@ -295,6 +306,7 @@
     on:changeContent={(ev) => {
       fitPopup(modalHTML, element, contentPanel)
       if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
+      if (element === 'movable' && showing !== false) checkSize()
     }}
   />
 </div>