Revert "Add PDF viewer modal with @vue-pdf-viewer"

This reverts commit 85e2a7b28c.
This commit is contained in:
Michael Winter 2026-02-18 22:05:02 +01:00
parent 85e2a7b28c
commit 58c10d98c3
6 changed files with 7 additions and 42 deletions

View file

@ -2,17 +2,17 @@
<div class="inline-flex p-1 min-w-[25px]">
<div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
<button v-if="type === 'score' && !newTab" @click="modalStore.setModalProps('pdf', 'aspect-[8.5/11]', true, '', '', '', link)" class="inline-flex p-1">
<NuxtLink v-if="type === 'score' && !newTab" :to="link" class="inline-flex p-1">
<Icon name="ion:book-sharp" style="color: white" />
</button>
</NuxtLink>
<a v-else-if="type === 'score' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
<Icon name="ion:book-sharp" style="color: white" />
</a>
<button v-else-if="type === 'document' && !newTab" @click="modalStore.setModalProps('pdf', 'aspect-[8.5/11]', true, '', '', '', link)" class="inline-flex p-1">
<NuxtLink v-else-if="type === 'document' && !newTab" class="inline-flex p-1" :to="link">
<Icon name="ion:book-sharp" style="color: white" />
</button>
</NuxtLink>
<a v-else-if="type === 'document' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
<Icon name="ion:book-sharp" style="color: white" />

View file

@ -1,19 +0,0 @@
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import pdfWorker from 'pdfjs-dist/build/pdf.worker?url'
defineProps<{
src: string
}>()
</script>
<template>
<ClientOnly>
<VPdfViewer :src="src" :workerUrl="pdfWorker" class="h-[80vh] w-full" />
<template #fallback>
<div class="flex items-center justify-center h-[80vh]">
<p>Loading PDF...</p>
</div>
</template>
</ClientOnly>
</template>

View file

@ -37,9 +37,6 @@
<ModalBody :class="modalStore.aspect">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
<iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div v-if="modalStore.type === 'pdf'" class="w-[90vw] max-w-[90vw]">
<PdfViewer :src="modalStore.pdfUrl" />
</div>
</ModalBody>
</Modal>
</template>

View file

@ -28,15 +28,5 @@ export default defineNuxtConfig({
},
experimental: {
payloadExtraction: true
},
vite: {
optimizeDeps: {
include: ['pdfjs-dist'],
},
esbuildOptions: {
supported: {
topLevelAwait: true,
},
},
},
}
})

View file

@ -25,12 +25,10 @@
},
"dependencies": {
"@pinia/nuxt": "^0.11.3",
"@vue-pdf-viewer/viewer": "^3.8.0",
"mongodb": "^7.1.0",
"nuxt": "^4.3.1",
"nuxt-swiper": "^1.2.2",
"nuxt-umami": "^3.2.1",
"pdfjs-dist": "^5.4.624",
"pinia": "^3.0.4",
"sharp": "^0.34.5"
}

View file

@ -1,16 +1,15 @@
import {defineStore} from "pinia";
export const useModalStore = defineStore("ModalStore", {
state: () => ({ "type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid":"", "pdfUrl":""}),
state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid":""}),
actions: {
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl = '') {
setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid) {
this.type = type
this.aspect = aspect
this.isOpen = isOpen
this.bucket = bucket
this.gallery = gallery
this.vimeo_trackid = vimeo_trackid
this.pdfUrl = pdfUrl
}
}
})