Add photo counts, EXIF details, video duration badges, slideshow launcher UI

- Album cards show recursive photo count (bubbles up through sub-albums).
- Lightbox info panel shows camera, aperture, shutter speed, and ISO;
  update.rb now extracts and stores these EXIF fields.
- Video thumbnail cards show a duration badge (e.g. "1:23").
- Slideshow launcher redesigned: button on its own line, with Shuffle /
  Full screen / Interval options on a second line, all inside a rounded
  border to make the grouping clear.
- Fixed album-actions alignment so Interval sits level with the checkboxes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 9 insertions, 2 deletions

diff --git a/public/css/style.css b/public/css/style.css
index b0c73dd..b5d713e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -81,7 +81,8 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
 .breadcrumbs .sep { margin: 0 4px; }
 
 .album-desc { color: var(--text-dim); margin-bottom: 10px; }
-.album-actions { margin-top: 10px; }
+.ss-launcher { margin-top: 10px; display: inline-flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
+.ss-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
 
 /* ── Grid ──────────────────────────────────────────────────────────────── */
 .grid-section { margin-bottom: 32px; }
@@ -147,7 +148,9 @@ main { max-width: 1400px; margin: 0 auto; padding: 24px; }
   pointer-events: none;
 }
 
-.album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); }
+.album-label { padding: 6px 8px; font-size: .88rem; font-weight: 500; color: var(--text); display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
+.album-count { font-size: .75rem; font-weight: 400; color: var(--text-dim); white-space: nowrap; }
+.duration-badge { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: 2px 5px; border-radius: 3px; pointer-events: none; }
 #album-search { display: block; width: 100%; max-width: 280px; margin-bottom: 14px; padding: 5px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; }
 .card-meta { padding: 6px 8px; }
 .card-caption { font-size: .8rem; color: var(--text-dim); }
diff --git a/public/js/album.js b/public/js/album.js
index c3f775f..3fca29b 100644
--- a/public/js/album.js
+++ b/public/js/album.js
@@ -45,6 +45,10 @@ function lbBuildInfo(e) {
     rows.push(['Date', d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })]);
   }
   if (e.width && e.height) rows.push(['Dimensions', `${e.width} × ${e.height}`]);
+  if (e.camera)   rows.push(['Camera',   e.camera]);
+  if (e.aperture) rows.push(['Aperture', e.aperture]);
+  if (e.shutter)  rows.push(['Shutter',  e.shutter]);
+  if (e.iso)      rows.push(['ISO',      e.iso]);
   document.getElementById('lb-info-dl').innerHTML =
     rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('');
   document.getElementById('lb-info-panel').classList.add('hidden');