Implement media preview thumbnails for Gallery

frontend/src/App.vue

@@ -93,7 +93,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
   }
   // G toggles Gallery
   else if (!input && keyup && event.key === 'g') {
-    store.gallery = !store.gallery
+    store.prefs.gallery = !store.prefs.gallery
   }
   // Keys Backquote-1-2-3 to sort columns
   else if (

frontend/src/components/HeaderMain.vue

@@ -23,7 +23,7 @@
       />
     </template>
     <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-    <SvgButton name="eye" @click="store.gallery = !store.gallery" />
+    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" />
     <SvgButton name="cog" @click="settingsMenu" />
   </nav>
 </template>

frontend/src/components/MediaPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <img v-if=doc.img :src=doc.url alt="">
+  <img v-if=doc.img :src="preview() ? doc.previewurl : 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>
@@ -32,8 +32,11 @@ defineExpose({
 
 const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext)
 const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext)
-const embed = () => ['txt', 'py', 'html', 'css', 'js', 'json', 'xml', 'csv', 'tsv'].includes(props.doc.ext)
 const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext)
+const preview = () => (
+  props.doc.size > 500000 &&
+  ['png', 'bmp', 'ico', 'webp', 'avif', 'jpg', 'jpeg'].includes(props.doc.ext)
+)
 </script>
 
 <style scoped>

frontend/src/repositories/Document.ts

@@ -40,6 +40,9 @@ export class Doc {
     const ext = this.name.split('.').pop()?.toLowerCase()
     return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg'].includes(ext || '')
   }
+  get previewurl(): string {
+    return this.url.replace(/^\/files/, '/preview')
+  }
   get ext(): string {
     const ext = this.name.split('.').pop()
     return ext ? ext.toLowerCase() : ''

frontend/src/stores/main.ts

@@ -23,10 +23,10 @@ export const useMainStore = defineStore({
     fileExplorer: null as any,
     error: '' as string,
     connected: false,
-    gallery: false,
     cursor: '' as string,
     server: {} as Record<string, any>,
     prefs: {
+      gallery: false,
       sortListing: '' as SortOrder,
       sortFiltered: '' as SortOrder,
     },

frontend/src/views/ExplorerView.vue

@@ -8,7 +8,7 @@
     <p v-else>Empty folder</p>
   </div>
   <Gallery
-    v-else-if="store.gallery"
+    v-else-if="store.prefs.gallery"
     ref="fileExplorer"
     :key="`gallery-${Router.currentRoute.value.path}`"
     :path="props.path"
@@ -21,9 +21,9 @@
     :path="props.path"
     :documents="documents"
   />
-  <div v-if="!store.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
+  <div v-if="!store.prefs.gallery && documents.some(doc => doc.img)" class="suggest-gallery">
     <p>Media files found. Would you like a gallery view?</p>
-    <SvgButton name="eye" taborder=0 @click="() => { store.gallery = true }">Gallery</SvgButton>
+    <SvgButton name="eye" taborder=0 @click="() => { store.prefs.gallery = true }">Gallery</SvgButton>
   </div>
 </template>
 

frontend/vite.config.ts

@@ -45,6 +45,7 @@ export default defineConfig({
       "/login": dev_backend,
       "/logout": dev_backend,
       "/zip": dev_backend,
+      "/preview": dev_backend,
     }
   },
   build: {