Fixed File Preview (#5923)

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

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 =
-    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
+  $: width = metadata?.originalWidth ? `min(${metadata.originalWidth / metadata?.pixelRatio ?? 1}px, 100%)` : '100%'
+  $: height = metadata?.originalHeight
+    ? `min(${metadata.originalHeight / metadata?.pixelRatio ?? 1}px, ${fit ? '100%' : '80vh'})`
+    : '100%'
 </script>
 
 {#await p then blobRef}
   <img
-    class="object-contain"
-    style:max-width={maxWidth}
-    style:max-height={maxHeight}
+    class="object-contain mx-auto"
+    style:max-width={width}
+    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>