Fix pdf inline preview not rendering

cortezaproject · Feb 26, 2025 · 69d9ee6 · 69d9ee6
1 parent 8b0b6da
commit 69d9ee6
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 66 deletions.
diff --git a/client/web/compose/src/components/Public/Page/Attachment/Link.vue b/client/web/compose/src/components/Public/Page/Attachment/Link.vue
@@ -33,14 +33,18 @@ export default {
     canPreview () {
       const meta = this.attachment.meta || {}
       const type = (meta.preview || meta.original || {}).mimetype
-      const src = (this.attachment.meta.original && this.attachment.meta.original.ext === 'pdf' ? this.attachment.download : this.attachment.url)
+      const src = this.attachment.url
       return canPreview({ type, src, name: this.attachment.name })
     },
   },
 
   methods: {
     openLightbox (e) {
-      this.$root.$emit('showAttachmentsModal', e)
+      if (this.attachment.meta.original.ext === 'pdf') {
+        window.open(this.attachment.url, '_blank')
+      } else {
+        this.$root.$emit('showAttachmentsModal', e)
+      }
     },
   },
 }

diff --git a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
@@ -73,13 +73,13 @@
 
     <div
       v-else
-      class="d-flex align-items-center justify-content-around flex-wrap h-100"
+      class="d-flex align-items-center justify-content-around gap-3 flex-wrap h-100"
     >
       <div
         v-for="a in attachments"
         :key="a.attachmentID"
         :class="{ 'h-100': attachments.length === 1, 'w-100': !canPreview(a) }"
-        class="item mb-2"
+        class="item"
       >
         <c-preview-inline
           v-if="canPreview(a)"
@@ -90,16 +90,14 @@
           :preview-style="{ width: 'unset', ...inlineCustomStyles(a) }"
           :preview-class="[
             !previewOptions.clickToView ? 'disable-zoom-cursor' : '',
-
           ]"
           :labels="previewLabels"
-          class="mb-1"
           @openPreview="openLightbox({ ...a, ...$event })"
         />
 
         <div
           v-if="!hideFileName"
-          class="d-flex align-items-start justify-content-between"
+          class="d-flex align-items-center justify-content-center gap-1"
           :class="{ 'w-100': canPreview(a) }"
         >
           <div
@@ -115,6 +113,7 @@
             v-if="a.download"
             :href="a.download"
             variant="outline-light"
+            size="sm"
             class="border-0 text-primary px-2"
           >
             <font-awesome-icon :icon="['fas', 'download']" />
@@ -195,7 +194,7 @@ export default {
 
   computed: {
     inlineUrl () {
-      return (a) => (this.ext(a) === 'pdf' ? a.download : a.url)
+      return (a) => a.url
     },
 
     previewLabels () {
@@ -284,7 +283,11 @@ export default {
     openLightbox (e) {
       if (!this.previewOptions.clickToView) return
 
-      this.$root.$emit('showAttachmentsModal', e)
+      if (this.ext(e) === 'pdf') {
+        window.open(e.url, '_blank')
+      } else {
+        this.$root.$emit('showAttachmentsModal', e)
+      }
     },
 
     deleteAttachment (index) {

diff --git a/lib/vue/src/components/filePreview/common/base.vue b/lib/vue/src/components/filePreview/common/base.vue
@@ -7,6 +7,7 @@ export default {
   props: {
     inline: {
       type: Boolean,
+      default: true,
     },
   },
 

diff --git a/lib/vue/src/components/filePreview/common/types/IMG/InlineIMG.vue b/lib/vue/src/components/filePreview/common/types/IMG/InlineIMG.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex inline h-100">
+  <div class="d-flex inline h-100 mb-1">
     <img
       ref="image"
       :key="src"

diff --git a/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue b/lib/vue/src/components/filePreview/common/types/PDF/PDF.vue
@@ -15,35 +15,30 @@
       v-if="loadError"
       class="doc-msg doc-err"
     >
-      <div>
-        <h4 class="err-message">
-          {{ loadError.message }}
-        </h4>
-        <p v-if="labels.clickToRetry">
-          {{ labels.clickToRetry }}
-        </p>
-      </div>
+      <p class="err-message">
+        {{ loadError.message }}
+      </p>
     </div>
+
     <div
       v-else-if="!show && labels.loading"
-      class="doc-msg doc-err"
+      class="doc-msg"
     >
-      <p>{{ labels.loading }}</p>
+      <p class="d-flex align-items-center gap-1">
+        <b-spinner
+          variant="primary"
+          small
+        />
+        {{ labels.loading }}
+      </p>
     </div>
+
     <div
       v-else-if="!pageCount && labels.noPages"
       class="doc-msg doc-err"
     >
       <p>{{ labels.noPages }}</p>
     </div>
-    <template v-else>
-      <div v-if="!inline && labels.downloadForAll && show && hasMore">
-        <p>{{ labels.downloadForAll }}</p>
-      </div>
-      <div v-else-if="inline && labels.firstPagePreview && show">
-        <p>{{ labels.firstPagePreview }}</p>
-      </div>
-    </template>
   </div>
 </template>
 
@@ -257,6 +252,7 @@ export default {
         const viewport = np.page.getViewport({ scale })
         const canvasContext = canvas.getContext('2d')
         const renderContext = { canvasContext, viewport }
+
         canvas.height = viewport.height
         canvas.width = viewport.width
 
@@ -305,22 +301,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$white: #FFFFFF !default;
-$danger: #E54122 !default;
 
 .doc-msg {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
-  background-color: $white;
+  background-color: var(--white);
 }
 .doc-err {
   cursor: pointer;
 
   .err-message {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -331,32 +325,23 @@ $danger: #E54122 !default;
 
 .pdf-preview {
   text-align: center;
-  &:not(.inline) {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    canvas {
-      box-shadow: 0 0 3px #1E1E1E41;
-    }
-  }
+  width: 100%;
+  height: auto;
+
   &.inline {
-    height: 200px;
-    overflow-y: scroll;
-    display: inline-block;
     cursor: zoom-in;
-    width: 100%;
-    max-width: 500px;
-  }
 
-  canvas {
-    margin-bottom: 10px;
-    &.inline {
+    canvas {
       width: 100%;
+      height: auto;
     }
+  }
 
-    &:not(.inline) {
-      margin: 0 auto 10px auto;
-      display: block;
-    }
+  canvas {
+    margin-bottom: 10px;
+    box-shadow: 0 0 3px #1E1E1E41;
+    width: 80%;
+    height: auto;
 
     &:last-of-type {
       margin-bottom: unset;

diff --git a/lib/vue/src/components/filePreview/common/types/PDF/helpers.js b/lib/vue/src/components/filePreview/common/types/PDF/helpers.js
@@ -8,13 +8,13 @@ export class Page {
   }
 
   merge ({ index, page, loading, loaded, rendered, failed, node }) {
-    this.index = index || this.index
-    this.page = page || this.page
-    this.loading = loading || this.loading
-    this.loaded = loaded || this.loaded
-    this.rendered = rendered || this.rendered
-    this.failed = failed || this.failed
-    this.node = node || this.node
+    this.index = index
+    this.page = page
+    this.loading = loading
+    this.loaded = loaded
+    this.rendered = rendered
+    this.failed = failed
+    this.node = node
   }
 }
 
@@ -27,12 +27,12 @@ export class Document {
   }
 
   merge ({ src, pdf, loading, loaded, failed, scale }) {
-    this.src = src || this.src
-    this.pdf = pdf || this.pdf
-    this.loading = loading || this.loading
-    this.loaded = loaded || this.loaded
-    this.failed = failed || this.failed
-    this.scale = scale || this.scale
+    this.src = src
+    this.pdf = pdf
+    this.loading = loading
+    this.loaded = loaded
+    this.failed = failed
+    this.scale = scale
   }
 }
 

diff --git a/lib/vue/src/components/filePreview/common/types/base.vue b/lib/vue/src/components/filePreview/common/types/base.vue
@@ -8,7 +8,7 @@ export default {
 
     src: {
       required: true,
-      type: [ String, Object ],
+      type: [String, Object],
       default: undefined,
     },
 
@@ -39,6 +39,7 @@ export default {
 
     inline: {
       type: Boolean,
+      default: false,
     },
   },
 }