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

@@ -47,6 +47,7 @@
 <style lang="scss">
   .button {
     color: inherit;
+    border: none;
     border-radius: 0.125rem;
     cursor: pointer;
 

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 {
+  function checkSize (): void {
-    if (drag) return
+    const rect = modalHTML.getBoundingClientRect()
-    const newParams: PopupParams = popupParams
+    const newParams: PopupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
-    if (windowSize.width < $deviceInfo.docWidth) {
+    if (popupParams.width === 0 && popupParams.height === 0) popupParams = newParams
-      // Increase Window Width
+    newParams.x =
-      if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
+      popupParams.x < WINDOW_PADDING
-        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
+        ? WINDOW_PADDING
-      }
+        : popupParams.x + popupParams.width > windowSize.width - WINDOW_PADDING * 2
-    } else if (windowSize.width > $deviceInfo.docWidth) {
+          ? $deviceInfo.docWidth - WINDOW_PADDING - popupParams.width
-      // Decrease Window Width
+          : popupParams.x
-      if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
+    newParams.y =
-        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
+      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) {
+    if (newParams.height > windowSize.height - WINDOW_PADDING * 2) {
-      // Increase Window Height
+      newParams.height = windowSize.height - WINDOW_PADDING * 2
-      if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
+      newParams.y = WINDOW_PADDING
-        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
+    }
-      }
+    const bottomFree: number = $deviceInfo.docHeight - WINDOW_PADDING - popupParams.y - popupParams.height
-    } else if (windowSize.height > $deviceInfo.docHeight) {
+    const topFree: number = popupParams.y - WINDOW_PADDING
-      // Decrease Window Height
+    if (notFit && bottomFree > 0) {
-      if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
+      const dFit: number = bottomFree - notFit
-        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
+      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 (element === 'movable' && !locked) {
-      if (popupParams.width === 0 && popupParams.height === 0) {
+      locked = true
-        const rect = modalHTML.getBoundingClientRect()
+      checkSize()
-        popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+      windowSize.width = $deviceInfo.docWidth
-      }
+      windowSize.height = $deviceInfo.docHeight
-      checkMovable()
     }
-    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>