bak

public/js/modules/gallery.js

@@ -1,6 +1,21 @@
 // ── Image gallery ──
 
 import { $, esc, api, getCsrf } from './util.js';
+
+const AUDIO_EXT = /\.(mp3|ogg|wav|m4a)$/i;
+function isAudio(url) { return AUDIO_EXT.test(url); }
+
+function mediaTile(url, extraClass = '') {
+    if (isAudio(url)) {
+        return `<div class="aspect-square bg-t-bg border ${extraClass} rounded overflow-hidden flex flex-col items-center justify-center gap-2 p-2">
+            <i class="ph ph-music-note text-2xl text-t-dim"></i>
+            <audio controls preload="metadata" src="${url}" class="w-full" style="height:28px"></audio>
+        </div>`;
+    }
+    return `<div class="aspect-square bg-t-bg border ${extraClass} rounded overflow-hidden">
+        <img src="${url}" class="w-full h-full object-cover${extraClass.includes('danger') ? ' opacity-60' : ''}" loading="lazy">
+    </div>`;
+}
 import { state } from './state.js';
 import { showDialog } from './dialog.js';
 
@@ -59,9 +74,7 @@ export async function openGallery() {
             html += `<div class="col-span-full font-pixel text-[10px] text-t-danger flex items-center gap-1.5 pt-2"><i class="ph ph-warning text-xs"></i>orphaned (not used by any card)</div>`;
             html += orphaned.map(f => `
                 <div class="gallery-item group relative" data-orphan="${f.name}">
-                    <div class="aspect-square bg-t-bg border border-t-danger/30 rounded overflow-hidden">
-                        <img src="${f.url}" class="w-full h-full object-cover opacity-60" loading="lazy">
-                    </div>
+                    ${mediaTile(f.url, 'border-t-danger/30')}
                     <div class="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                         <button class="w-6 h-6 rounded bg-t-accent text-t-bg flex items-center justify-center text-xs" data-create="${f.url}" title="create card">
                             <i class="ph ph-plus"></i>
@@ -78,9 +91,7 @@ export async function openGallery() {
             if (orphaned.length) html += `<div class="col-span-full font-pixel text-[10px] text-t-muted flex items-center gap-1.5 pt-3"><i class="ph ph-link text-xs"></i>linked to cards</div>`;
             html += linked.map(img => `
                 <div class="gallery-item group relative cursor-pointer" data-card-id="${img.cardId}" data-gallery-origin="${encodeURIComponent(img.url)}">
-                    <div class="aspect-square bg-t-bg border border-t-border rounded overflow-hidden">
-                        <img src="${img.url}" class="w-full h-full object-cover" loading="lazy">
-                    </div>
+                    ${mediaTile(img.url, 'border-t-border')}
                     <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded flex flex-col justify-end p-2">
                         <div class="flex items-center gap-1.5">
                             <span class="w-2 h-2 rounded-full shrink-0" style="background:${img.cardColor}"></span>