From a251f39b424a11e0e94838eff5c54ea721e71e3f Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Mon, 24 Jun 2024 08:33:34 +0300
Subject: [PATCH] Reserving height for content in FilePreview (#5902)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 .../src/components/FilePreview.svelte         | 100 ++++++++++++------
 packages/ui/src/components/Panel.svelte       |   2 +-
 .../ui/src/components/calendar/Month.svelte   |   6 +-
 .../src/components/viewer/ImageViewer.svelte  |  10 +-
 4 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/packages/presentation/src/components/FilePreview.svelte b/packages/presentation/src/components/FilePreview.svelte
index 1d47a89870..31a8f8ccc4 100644
--- a/packages/presentation/src/components/FilePreview.svelte
+++ b/packages/presentation/src/components/FilePreview.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { type Blob } from '@hcengineering/core'
-  import { Button, Component, Label } from '@hcengineering/ui'
+  import { Button, Component, Label, resizeObserver, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   import presentation from '../plugin'
 
@@ -29,42 +29,84 @@
   export let props: Record<string, any> = {}
 
   let download: HTMLAnchorElement
+  let parentWidth: number
+  let minHeight: number | undefined
+  $: parentHeight = ($deviceInfo.docHeight * 80) / 100
 
   let previewType: FilePreviewExtension | undefined = undefined
   $: void getPreviewType(file.contentType, $previewTypes).then((res) => {
     previewType = res
   })
+
+  const updateHeight = (
+    pWidth: number,
+    pHeight: number,
+    pT: FilePreviewExtension | undefined,
+    mD: BlobMetadata | undefined
+  ): void => {
+    if (pT === undefined || mD?.originalWidth === undefined || mD?.originalHeight === undefined) {
+      minHeight = undefined
+      return
+    }
+    if (pT.contentType === 'audio/*') {
+      minHeight = $deviceInfo.fontSize * 3.375
+      return
+    }
+    if (Array.isArray(pT.contentType) && pT.contentType[0] === 'application/pdf') {
+      minHeight = parentHeight
+      return
+    }
+    const pR: number = mD?.pixelRatio ?? 1
+    const fWidth: number = mD.originalWidth / pR
+    const fHeight: number = mD.originalHeight / pR
+    let mHeight: number = 0
+    let scale: number = 1
+    if (fWidth > pWidth) {
+      scale = fWidth / pWidth
+      mHeight = fHeight / scale
+    }
+    if (fHeight > pHeight && fHeight / pHeight > scale) {
+      scale = fHeight / pHeight
+      mHeight = fHeight / scale
+    }
+    minHeight = scale === 1 ? fHeight : mHeight
+  }
+  $: updateHeight(parentWidth, parentHeight, previewType, metadata)
   $: srcRef = getBlobSrcFor(file, name)
 </script>
 
-{#await srcRef then src}
-  {#if src === ''}
-    <div class="centered">
-      <Label label={presentation.string.FailedToPreview} />
-    </div>
-  {:else if previewType !== undefined}
-    <div class="content flex-col flex-grow items-center">
+<div
+  use:resizeObserver={(element) => (parentWidth = element.clientWidth)}
+  class="content flex-col items-center w-full h-full"
+  style:min-height={`${minHeight ?? 0}px`}
+>
+  {#await srcRef then src}
+    {#if src === ''}
+      <div class="centered">
+        <Label label={presentation.string.FailedToPreview} />
+      </div>
+    {:else if previewType !== undefined}
       <Component
         is={previewType.component}
         props={{ value: file, name, contentType: file.contentType, metadata, ...props }}
       />
-    </div>
-  {:else}
-    <div class="centered flex-col flex-gap-3">
-      <Label label={presentation.string.ContentTypeNotSupported} />
-      <a class="no-line" href={src} download={name} bind:this={download}>
-        <Button
-          label={presentation.string.Download}
-          kind={'primary'}
-          on:click={() => {
-            download.click()
-          }}
-          showTooltip={{ label: presentation.string.Download }}
-        />
-      </a>
-    </div>
-  {/if}
-{/await}
+    {:else}
+      <div class="centered flex-col flex-gap-3">
+        <Label label={presentation.string.ContentTypeNotSupported} />
+        <a class="no-line" href={src} download={name} bind:this={download}>
+          <Button
+            label={presentation.string.Download}
+            kind={'primary'}
+            on:click={() => {
+              download.click()
+            }}
+            showTooltip={{ label: presentation.string.Download }}
+          />
+        </a>
+      </div>
+    {/if}
+  {/await}
+</div>
 
 <style lang="scss">
   .content {
@@ -72,12 +114,4 @@
     overflow: auto;
     border: none;
   }
-  .centered {
-    flex-grow: 1;
-    width: 100;
-    height: 100;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 </style>
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index f623be77ee..3cbc427fbb 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -176,7 +176,7 @@
       {#if !withoutTitle}<slot name="title" />{/if}
     </div>
     <slot name="pre-utils" />
-    <div class="flex-row-center ml-3 no-print">
+    <div class="flex-row-center flex-no-shrink ml-3 no-print">
       <slot name="utils" />
       {#if $$slots.aside && isAside}
         {#if customAside}
diff --git a/packages/ui/src/components/calendar/Month.svelte b/packages/ui/src/components/calendar/Month.svelte
index bfa47e6c65..52337508e5 100644
--- a/packages/ui/src/components/calendar/Month.svelte
+++ b/packages/ui/src/components/calendar/Month.svelte
@@ -42,6 +42,7 @@
   let monthYear: string
   const today: Date = new Date(Date.now())
   const viewDate: Date = new Date(currentDate ?? today)
+  let selectedDate: Date = new Date(currentDate ?? today)
   $: firstDayOfCurrentMonth = firstDay(viewDate, mondayStart)
   const isToday = (n: number): boolean => {
     if (areDatesEqual(today, new Date(viewDate.getFullYear(), viewDate.getMonth(), n))) return true
@@ -50,8 +51,8 @@
 
   let days: ICell[] = []
   const getDateStyle = (date: Date): TCellStyle => {
-    if (currentDate != null) {
-      const zonedTime = fromCurrentToTz(currentDate, timeZone)
+    if (selectedDate != null) {
+      const zonedTime = fromCurrentToTz(selectedDate, timeZone)
       if (areDatesEqual(zonedTime, date)) {
         return 'selected'
       }
@@ -129,6 +130,7 @@
               : day.dayOfWeek + 2};"
           on:click|stopPropagation={() => {
             viewDate.setDate(i + 1)
+            selectedDate = new Date(viewDate)
             dispatch('update', viewDate)
           }}
         >
diff --git a/plugins/view-resources/src/components/viewer/ImageViewer.svelte b/plugins/view-resources/src/components/viewer/ImageViewer.svelte
index 8a0846399c..d21abd7179 100644
--- a/plugins/view-resources/src/components/viewer/ImageViewer.svelte
+++ b/plugins/view-resources/src/components/viewer/ImageViewer.svelte
@@ -21,8 +21,14 @@
   export let metadata: BlobMetadata | undefined
 
   $: p = typeof value === 'string' ? getBlobRef(undefined, value, name) : getBlobRef(value, value._id)
-  $: maxWidth = metadata?.originalWidth ? `min(${metadata.originalWidth}px, 100%)` : undefined
-  $: maxHeight = metadata?.originalHeight ? `min(${metadata.originalHeight}px, 80vh)` : undefined
+  $: maxWidth =
+    metadata?.originalWidth && metadata?.pixelRatio
+      ? `min(${metadata.originalWidth / metadata.pixelRatio}px, 100%)`
+      : undefined
+  $: maxHeight =
+    metadata?.originalHeight && metadata?.pixelRatio
+      ? `min(${metadata.originalHeight / metadata.pixelRatio}px, 80vh)`
+      : undefined
 </script>
 
 {#await p then blobRef}