frontend/src/repositories/Document.ts

@@ -44,7 +44,10 @@ export class Doc {
     if (this.img) return true
     const ext = this.name.split('.').pop()?.toLowerCase()
     // Not a comprehensive list, but good enough for now
-    return ['mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf'].includes(ext || '')
+    return [
+      'mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf',
+      'avif', 'heic', 'heif', 'jpg', 'jpeg', 'png'
+    ].includes(ext || '')
   }
   get previewurl(): string {
     return this.url.replace(/^\/files/, '/preview')

frontend/src/views/ExplorerView.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref, computed } from 'vue'
+import { watchEffect, ref, computed, watch } from 'vue'
 import { useMainStore } from '@/stores/main'
 import Router from '@/router/index'
 import { needleFormat, localeIncludes, collator } from '@/utils'
@@ -76,6 +76,10 @@ watchEffect(() => {
   store.fileExplorer = fileExplorer.value
   store.query = props.query
 })
+
+watch(() => props.path, () => {
+  store.prefs.gallery = documents.value.some(d => d.previewable)
+}, { immediate: true })
 </script>
 
 <style scoped>