frontend/src/assets/main.css

@@ -91,7 +91,8 @@
   }
   .headermain,
   .menu,
-  .rename-button {
+  .rename-button,
+  .suggest-gallery {
     display: none !important;
   }
   .breadcrumb > a {

frontend/src/repositories/Document.ts

@@ -37,24 +37,21 @@ export class Doc {
     return this.url.replace(/^\/#/, '')
   }
   get img(): boolean {
-    // Folders cannot be images
-    if (this.dir) return false
-    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'heic', 'heif', 'svg'].includes(this.ext)
+    const ext = this.name.split('.').pop()?.toLowerCase() || ''
+    return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'heic', 'heif', 'svg'].includes(ext)
   }
   get previewable(): boolean {
-    // Folders cannot be previewable
-    if (this.dir) return false
     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(this.ext)
+    return ['mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf'].includes(ext)
   }
   get previewurl(): string {
     return this.url.replace(/^\/files/, '/preview')
   }
   get ext(): string {
-    const dotIndex = this.name.lastIndexOf('.')
-    if (dotIndex === -1 || dotIndex === this.name.length - 1) return ''
-    return this.name.slice(dotIndex + 1).toLowerCase()
+    const ext = this.name.split('.').pop()
+    return ext ? ext.toLowerCase() : ''
   }
 }
 export type errorEvent = {

frontend/src/utils/index.ts

@@ -50,11 +50,12 @@ export function formatUnixDate(t: number) {
 }
 
 export function getFileExtension(filename: string) {
-  const dotIndex = filename.lastIndexOf('.')
-  if (dotIndex === -1 || dotIndex === filename.length - 1) {
-    return '' // No extension
+  const parts = filename.split('.')
+  if (parts.length > 1) {
+    return parts[parts.length - 1]
+  } else {
+    return '' // No hay extensión
   }
-  return filename.slice(dotIndex + 1)
 }
 interface FileTypes {
   [key: string]: string[]
@@ -67,9 +68,8 @@ const filetypes: FileTypes = {
 }
 
 export function getFileType(name: string): string {
-  const dotIndex = name.lastIndexOf('.')
-  if (dotIndex === -1 || dotIndex === name.length - 1) return 'unknown'
-  const ext = name.slice(dotIndex + 1).toLowerCase()
+  const ext = name.split('.').pop()?.toLowerCase()
+  if (!ext || ext.length === name.length) return 'unknown'
   return Object.keys(filetypes).find(type => filetypes[type].includes(ext)) || 'unknown'
 }
 

frontend/src/views/ExplorerView.vue

@@ -13,6 +13,10 @@
     :path="props.path"
     :documents="documents"
   />
+  <div v-if="!store.prefs.gallery && documents.some(doc => doc.previewable)" class="suggest-gallery">
+    <SvgButton name="eye" taborder=0 @click="() => { store.prefs.gallery = true }"></SvgButton>
+    Gallery View
+  </div>
   <EmptyFolder :documents=documents :path=props.path />
 </template>
 
@@ -89,4 +93,15 @@ watch(documents, (docs) => {
   text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
   color: var(--accent-color);
 }
+.suggest-gallery p {
+  font-size: 2rem;
+  color: var(--accent-color);
+}
+.suggest-gallery {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 </style>