diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 2334231..cf11209 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -27,6 +27,7 @@ v-if="pageVisibility[pageNum]" :source="doc" :page="pageNum" + :width="!util.isMobileOrTabletBrowser() ? 800 : undefined" /> @@ -52,6 +53,7 @@ import { Attachment } from "../../models/attachment"; import ImageWithProgress from "../ImageWithProgress.vue"; import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'; import { Source } from 'vue-pdf-embed/types'; +import util from "@/plugins/utils"; function isEventAttachment(source: EventAttachment | Attachment | undefined): source is EventAttachment { return (source as EventAttachment)?.event !== undefined; @@ -188,11 +190,14 @@ const { doc } = useVuePdfEmbed({ source: pdfSource, }); +const initVuePdfEmbed = computed(()=> props.showInlinePDF && isPDF.value) + const pageNums = computed(() => doc.value ? [...Array(doc.value.numPages + 1).keys()].slice(1) : [] ); const resetPageIntersectionObserver = () => { + if(!initVuePdfEmbed.value) return pageIntersectionObserver?.disconnect() pageIntersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { @@ -212,17 +217,16 @@ const resetPageIntersectionObserver = () => { }; watch(pageNums, (newPageNums) => { + if(!initVuePdfEmbed.value) return pageVisibility.value = { [newPageNums[0]]: true } pageRefs.value = [] nextTick(resetPageIntersectionObserver) }); watch(source, (newSource) => { - if (isPDF.value) { - pdfSource.value = newSource; - } - } -); + if(!initVuePdfEmbed.value) return + pdfSource.value = isPDF.value ? newSource : null; +}); const loadingProgress = computed(() => { if (isEventAttachment(item)) { @@ -283,8 +287,8 @@ onBeforeUnmount(() => { } .pdf-container { - padding: 24px 16px; - margin-top: 200px; + margin-top: 100px; + height: 100vh; & > * { margin: 30px auto 0 auto;