Fixed File Preview (#5923)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/presentation/src/components/FilePreview.svelte

@@ -27,6 +27,7 @@
   export let name: string
   export let metadata: BlobMetadata | undefined
   export let props: Record<string, any> = {}
+  export let fit: boolean = false
 
   let download: HTMLAnchorElement
   let parentWidth: number
@@ -44,6 +45,7 @@
     pT: FilePreviewExtension | undefined,
     mD: BlobMetadata | undefined
   ): void => {
+    if (fit) return
     if (pT === undefined || mD?.originalWidth === undefined || mD?.originalHeight === undefined) {
       minHeight = undefined
       return
@@ -72,13 +74,15 @@
     minHeight = scale === 1 ? fHeight : mHeight
   }
   $: updateHeight(parentWidth, parentHeight, previewType, metadata)
+  $: audio = previewType && Array.isArray(previewType) && previewType[0].contentType === 'audio/*'
   $: srcRef = getBlobSrcFor(file, name)
 </script>
 
 <div
   use:resizeObserver={(element) => (parentWidth = element.clientWidth)}
-  class="content flex-col items-center w-full h-full"
+  class="content w-full h-full"
-  style:min-height={`${minHeight ?? 0}px`}
+  class:flex-center={fit && !audio}
+  style:min-height={fit ? '100%' : `${minHeight ?? 0}px`}
 >
   {#await srcRef then src}
     {#if src === ''}
@@ -88,7 +92,7 @@
     {:else if previewType !== undefined}
       <Component
         is={previewType.component}
-        props={{ value: file, name, contentType: file.contentType, metadata, ...props }}
+        props={{ value: file, name, contentType: file.contentType, metadata, ...props, fit }}
       />
     {:else}
       <div class="centered flex-col flex-gap-3">

packages/presentation/src/components/FilePreviewPopup.svelte

@@ -102,7 +102,7 @@
   </svelte:fragment>
 
   {#if blob !== undefined}
-    <FilePreview file={blob} {name} {metadata} {props} />
+    <FilePreview file={blob} {name} {metadata} {props} fit />
   {/if}
 </Dialog>
 

packages/theme/styles/dialogs.scss

@@ -338,6 +338,9 @@
     min-height: 0;
 
     &.rounded { border-radius: 0 0 .5rem .5rem; }
+    &:has(audio) {
+      flex-grow: 0;
+    }
   }
 
   .footer {

packages/ui/src/components/CircleButton.svelte

@@ -54,7 +54,7 @@
   {#if $$slots.content}
     <slot name="content" />
   {:else if icon}
-    <div class="content">
+    <div class="flex-center content">
       <Icon {icon} size={'full'} />
     </div>
   {/if}

plugins/view-resources/src/components/viewer/ImageViewer.svelte

@@ -19,23 +19,20 @@
   export let value: Blob | Ref<Blob>
   export let name: string
   export let metadata: BlobMetadata | undefined
+  export let fit: boolean = false
 
   $: p = typeof value === 'string' ? getBlobRef(undefined, value, name) : getBlobRef(value, value._id)
-  $: maxWidth =
+  $: width = metadata?.originalWidth ? `min(${metadata.originalWidth / metadata?.pixelRatio ?? 1}px, 100%)` : '100%'
-    metadata?.originalWidth && metadata?.pixelRatio
+  $: height = metadata?.originalHeight
-      ? `min(${metadata.originalWidth / metadata.pixelRatio}px, 100%)`
+    ? `min(${metadata.originalHeight / metadata?.pixelRatio ?? 1}px, ${fit ? '100%' : '80vh'})`
-      : undefined
+    : '100%'
-  $: maxHeight =
-    metadata?.originalHeight && metadata?.pixelRatio
-      ? `min(${metadata.originalHeight / metadata.pixelRatio}px, 80vh)`
-      : undefined
 </script>
 
 {#await p then blobRef}
   <img
-    class="object-contain"
+    class="object-contain mx-auto"
-    style:max-width={maxWidth}
+    style:max-width={width}
-    style:max-height={maxHeight}
+    style:max-height={height}
     src={blobRef.src}
     srcset={blobRef.srcset}
     alt={name}

plugins/view-resources/src/components/viewer/PDFViewer.svelte

@@ -19,17 +19,24 @@
   export let value: Blob | Ref<Blob>
   export let name: string
   export let metadata: BlobMetadata | undefined
+  export let fit: boolean = false
 </script>
 
 {#await getBlobSrcFor(value, name) then href}
-  <iframe src={href + '#view=FitH&navpanes=0'} title={name} />
+  <iframe class:fit src={href + '#view=FitH&navpanes=0'} title={name} />
 {/await}
 
 <style lang="scss">
   iframe {
     width: 100%;
-    height: 80vh;
-    min-height: 20rem;
     border: none;
+
+    &.fit {
+      min-height: 100%;
+    }
+    &:not(.fit) {
+      height: 80vh;
+      min-height: 20rem;
+    }
   }
 </style>

plugins/view-resources/src/components/viewer/VideoViewer.svelte

@@ -19,13 +19,19 @@
   export let value: Blob | Ref<Blob>
   export let name: string
   export let metadata: BlobMetadata | undefined
+  export let fit: boolean = false
 
   $: maxWidth = metadata?.originalWidth ? `min(${metadata.originalWidth}px, 100%)` : undefined
   $: maxHeight = metadata?.originalHeight ? `min(${metadata.originalHeight}px, 80vh)` : undefined
 </script>
 
 {#await getBlobSrcFor(value, name) then src}
-  <video style:max-width={maxWidth} style:max-height={maxHeight} controls preload={'auto'}>
+  <video
+    style:max-width={fit ? '100%' : maxWidth}
+    style:max-height={fit ? '100%' : maxHeight}
+    controls
+    preload={'auto'}
+  >
     <source {src} />
     <track kind="captions" label={name} />
   </video>