diff options
| author | Paul Buetow <paul@buetow.org> | 2026-05-02 22:40:34 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-05-02 22:40:34 +0300 |
| commit | e80e81f4a47a201074f12c6bcd7cf1591a6722e3 (patch) | |
| tree | b4b224b64ea7d439922e0d1e57abbfa1bcc90e92 /web | |
| parent | 7c72b818a4ec87e4895eb6fff28b8869ef9f4615 (diff) | |
show audiobook covers as cards
Diffstat (limited to 'web')
| -rw-r--r-- | web/js/app.js | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/web/js/app.js b/web/js/app.js index 104c89e..a0e8893 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -479,23 +479,23 @@ function renderItem(m, index) { </div> `; } - const coverHtml = m.thumbnail_path - ? `<img src="/api/media/${m.id}/thumbnail" alt="" loading="lazy" class="row-cover">` - : '<span class="row-icon">🎵</span>'; return ` - <div class="media-row" data-id="${m.id}" data-index="${index}" tabindex="0" role="button" aria-label="${escapeHtml(m.file_name)}"> - ${coverHtml} - <div class="row-body"> - <div class="row-title">${escapeHtml(m.file_name)}</div> - <div class="row-meta">${escapeHtml(m.codec || '')} ${m.bitrate ? Math.round(m.bitrate/1000)+'kbps' : ''} ${sizeText ? '• ' + sizeText : ''}</div> + <div class="media-card audio-card" data-id="${m.id}" data-index="${index}" tabindex="0" role="button" aria-label="${escapeHtml(m.file_name)}"> + <div class="thumb-wrap"> + ${m.thumbnail_path ? `<img src="/api/media/${m.id}/thumbnail" alt="" loading="lazy">` : `<span class="placeholder">No cover</span>`} + <span class="badge">${fmtDur(m.duration)}${sizeText ? ' • ' + sizeText : ''}</span> + <div class="card-actions"> + <button class="icon-btn btn-sm" data-action="play" title="Play">▶</button> + <button class="icon-btn btn-sm" data-action="favorite" title="Favorite">♥</button> + <button class="icon-btn btn-sm" data-action="notes" title="Notes">📝</button> + <button class="icon-btn btn-sm" data-action="download" title="Download">⬇</button> + <button class="icon-btn btn-sm" data-action="tags" title="Tags">🏷</button> + </div> + </div> + <div class="meta"> + <div class="title">${escapeHtml(m.file_name)}</div> + <div class="subtitle">${escapeHtml(m.codec || '')} ${m.bitrate ? Math.round(m.bitrate/1000)+'kbps' : ''}</div> </div> - <span class="row-duration">${fmtDur(m.duration)}</span> - <button class="icon-btn btn-sm" data-action="play" title="Play">▶</button> - <button class="icon-btn btn-sm" data-action="favorite" title="Favorite">♥</button> - <button class="icon-btn btn-sm" data-action="notes" title="Notes">📝</button> - <button class="icon-btn btn-sm" data-action="download" title="Download">⬇</button> - <button class="icon-btn btn-sm" data-action="tags" title="Tags">🏷</button> - <button class="icon-btn btn-sm" data-action="regen-thumb" title="Regenerate thumbnail">🔄</button> </div> `; } |