Added PDF previews. Preview quality configurable. Preview browser caching and cache busting.

frontend/src/components/GalleryFigure.vue

@@ -10,7 +10,7 @@
   >
     <figure>
       <slot></slot>
-      <MediaPreview ref=m :doc="doc" :tabindex=-1 />
+      <MediaPreview ref=m :doc="doc" tabindex=-1 quality="?sz=512" />
       <caption>
         <label>
           <SelectBox :doc=doc />

frontend/src/components/MediaPreview.vue

@@ -1,5 +1,6 @@
 <template>
-  <img v-if=doc.img :src="preview() ? doc.previewurl : doc.url" alt="">
+  <img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt="">
+  <img v-else-if=doc.img :src=doc.url alt="">
   <span v-else-if=doc.dir class="folder icon"></span>
   <video ref=vid v-else-if=video() :src=doc.url controls preload=none @click.prevent>📄</video>
   <audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>📄</audio>
@@ -16,6 +17,7 @@ const vid = ref<HTMLVideoElement | null>(null)
 const media = computed(() => aud.value || vid.value)
 const props = defineProps<{
   doc: Doc
+  quality: string
 }>()
 
 defineExpose({
@@ -34,8 +36,9 @@ const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext)
 const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext)
 const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext)
 const preview = () => (
+  ['bmp', 'ico', 'tif', 'tiff', 'pdf'].includes(props.doc.ext) ||
   props.doc.size > 500000 &&
-  ['png', 'bmp', 'ico', 'webp', 'avif', 'jpg', 'jpeg'].includes(props.doc.ext)
+  ['avif', 'webp', 'png', 'jpg', 'jpeg'].includes(props.doc.ext)
 )
 </script>