@tb.p/serve-media 1.0.0

package/README.md

@@ -0,0 +1,36 @@
+# @tb.p/serve-media
+
+Spin up a local single-page media browser for any directory:
+
+```
+npx @tb.p/serve-media <path>
+```
+
+- **Explorer-style folder tree** on the left — only folders that (recursively) contain media are shown, with item counts. Clicking a folder shows all media under it, recursively.
+- **Tile grid** on the right — images and videos only; everything else is ignored.
+- **Resizable tiles** — toolbar slider or `Ctrl` + mouse wheel, just like Windows Explorer.
+- Videos stream with range-request support, show duration, and **play on hover**; click any tile for a full-size lightbox (arrow keys / `Esc`).
+- Filter by name, sort by name / newest / oldest / largest / shuffle.
+- A status bar lists the extensions of files that were **not** served in the current folder (recursively), with counts — so you always know what was skipped.
+- Draggable sidebar splitter; tile size and sidebar width persist across sessions.
+
+Recognized extensions — images: `jpg jpeg jfif png apng gif webp avif bmp svg ico`; video: `mp4 m4v webm mov mkv ogv ogg 3gp`. This is the set latest Chrome renders natively; formats Chrome can't decode (heic, tiff, jxl, avi, wmv, …) are intentionally excluded so they don't appear as broken tiles. Note containers like `mov`/`mkv` still depend on the codec inside (H.264/VP9/AV1 play; e.g. ProRes won't).
+
+## Options
+
+```
+serve-media [path] [options]
+
+  path              Directory to serve (default: current directory)
+  -p, --port <n>    Port (default: 4321; auto-increments if busy)
+  --host <host>     Host to bind (default: 127.0.0.1)
+  --no-open         Don't open the browser automatically
+```
+
+Zero dependencies. Binds to `127.0.0.1` by default, so it is only reachable from this machine; pass `--host 0.0.0.0` to expose it on your LAN.
+
+## Publish
+
+```
+npm publish --access public
+```

package/bin/cli.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const { startServer } = require('../lib/server');
+
+function usage() {
+  console.log(`
+Usage: serve-media [path] [options]
+
+  path              Directory to serve (default: current directory)
+
+Options:
+  -p, --port <n>    Port to listen on (default: 4321, auto-increments if busy)
+  --host <host>     Host to bind (default: 127.0.0.1)
+  --no-open         Don't open the browser automatically
+  -h, --help        Show this help
+`);
+}
+
+function parseArgs(argv) {
+  const opts = { dir: null, port: 4321, host: '127.0.0.1', open: true };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '-h' || a === '--help') { usage(); process.exit(0); }
+    else if (a === '-p' || a === '--port') { opts.port = parseInt(argv[++i], 10); }
+    else if (a === '--host') { opts.host = argv[++i]; }
+    else if (a === '--no-open') { opts.open = false; }
+    else if (a.startsWith('-')) { console.error(`Unknown option: ${a}`); usage(); process.exit(1); }
+    else if (opts.dir === null) { opts.dir = a; }
+    else { console.error(`Unexpected argument: ${a}`); usage(); process.exit(1); }
+  }
+  if (!Number.isInteger(opts.port) || opts.port < 0 || opts.port > 65535) {
+    console.error('Invalid port.');
+    process.exit(1);
+  }
+  return opts;
+}
+
+function openBrowser(url) {
+  const { spawn } = require('child_process');
+  let cmd, args;
+  if (process.platform === 'win32') { cmd = 'cmd'; args = ['/c', 'start', '', url]; }
+  else if (process.platform === 'darwin') { cmd = 'open'; args = [url]; }
+  else { cmd = 'xdg-open'; args = [url]; }
+  try {
+    spawn(cmd, args, { detached: true, stdio: 'ignore' }).unref();
+  } catch { /* opening the browser is best-effort */ }
+}
+
+async function main() {
+  const opts = parseArgs(process.argv.slice(2));
+  const root = path.resolve(opts.dir || '.');
+
+  let stat;
+  try { stat = fs.statSync(root); } catch { stat = null; }
+  if (!stat || !stat.isDirectory()) {
+    console.error(`Not a directory: ${root}`);
+    process.exit(1);
+  }
+
+  const { port } = await startServer({ root, port: opts.port, host: opts.host });
+  const url = `http://${opts.host === '0.0.0.0' ? 'localhost' : opts.host}:${port}/`;
+  console.log(`Serving  ${root}`);
+  console.log(`Browse   ${url}`);
+  console.log('Press Ctrl+C to stop.');
+  if (opts.open) openBrowser(url);
+}
+
+main().catch((err) => {
+  console.error(err.message || err);
+  process.exit(1);
+});

package/lib/server.js

@@ -0,0 +1,249 @@
+'use strict';
+
+const http = require('http');
+const fs = require('fs');
+const fsp = fs.promises;
+const path = require('path');
+const os = require('os');
+
+const PREFS_FILE = path.join(os.homedir(), '.serve-media.json');
+
+const IMAGE_EXT = new Set(['.jpg', '.jpeg', '.jfif', '.png', '.apng', '.gif', '.webp', '.avif', '.bmp', '.svg', '.ico']);
+const VIDEO_EXT = new Set(['.mp4', '.m4v', '.webm', '.mov', '.mkv', '.ogv', '.ogg', '.3gp']);
+
+const MIME = {
+  '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.jfif': 'image/jpeg',
+  '.png': 'image/png', '.apng': 'image/apng', '.gif': 'image/gif', '.webp': 'image/webp',
+  '.avif': 'image/avif', '.bmp': 'image/bmp', '.svg': 'image/svg+xml', '.ico': 'image/x-icon',
+  '.mp4': 'video/mp4', '.m4v': 'video/mp4', '.webm': 'video/webm',
+  '.mov': 'video/quicktime', '.mkv': 'video/x-matroska', '.ogv': 'video/ogg',
+  '.ogg': 'video/ogg', '.3gp': 'video/3gpp',
+  '.html': 'text/html; charset=utf-8', '.json': 'application/json; charset=utf-8',
+};
+
+const SKIP_DIRS = new Set(['node_modules', '$RECYCLE.BIN', 'System Volume Information']);
+
+function mediaKind(name) {
+  const ext = path.extname(name).toLowerCase();
+  if (IMAGE_EXT.has(ext)) return 'image';
+  if (VIDEO_EXT.has(ext)) return 'video';
+  return null;
+}
+
+function naturalCompare(a, b) {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+}
+
+/** Folder tree containing only directories that (recursively) hold media. */
+async function buildTree(abs, rel, name) {
+  let count = 0;
+  const children = [];
+  let entries = [];
+  try { entries = await fsp.readdir(abs, { withFileTypes: true }); } catch { /* unreadable dir */ }
+  for (const e of entries) {
+    if (e.name.startsWith('.') || SKIP_DIRS.has(e.name)) continue;
+    if (e.isDirectory()) {
+      const child = await buildTree(path.join(abs, e.name), rel ? `${rel}/${e.name}` : e.name, e.name);
+      if (child.count > 0) children.push(child);
+      count += child.count;
+    } else if (e.isFile() && mediaKind(e.name)) {
+      count++;
+    }
+  }
+  children.sort((a, b) => naturalCompare(a.name, b.name));
+  return { name, rel, count, children };
+}
+
+/**
+ * Recursive scan under absDir: collects media files into out.files and
+ * tallies the extensions of files that are NOT served into out.ignored.
+ */
+async function listMedia(absDir, relDir, out) {
+  let entries = [];
+  try { entries = await fsp.readdir(absDir, { withFileTypes: true }); } catch { return out; }
+  for (const e of entries) {
+    if (e.name.startsWith('.') || SKIP_DIRS.has(e.name)) continue;
+    const rel = relDir ? `${relDir}/${e.name}` : e.name;
+    if (e.isDirectory()) {
+      await listMedia(path.join(absDir, e.name), rel, out);
+    } else if (e.isFile()) {
+      const kind = mediaKind(e.name);
+      if (!kind) {
+        const ext = path.extname(e.name).toLowerCase() || '(no ext)';
+        out.ignored[ext] = (out.ignored[ext] || 0) + 1;
+        continue;
+      }
+      let st;
+      try { st = await fsp.stat(path.join(absDir, e.name)); } catch { continue; }
+      out.files.push({ rel, name: e.name, kind, size: st.size, mtime: st.mtimeMs });
+    }
+  }
+  return out;
+}
+
+function sendJson(res, obj) {
+  const body = JSON.stringify(obj);
+  res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-cache' });
+  res.end(body);
+}
+
+function sendError(res, code, msg) {
+  res.writeHead(code, { 'Content-Type': 'text/plain; charset=utf-8' });
+  res.end(msg);
+}
+
+/** Resolve a URL-style relative path safely inside root; null if it escapes. */
+function safeResolve(root, rel) {
+  if (rel.includes('\\') || rel.includes('\0')) return null;
+  const parts = rel.split('/').filter(Boolean);
+  if (parts.some((p) => p === '..' || p === '.')) return null;
+  const abs = path.join(root, ...parts);
+  if (abs !== root && !abs.startsWith(root + path.sep)) return null;
+  return abs;
+}
+
+function serveFile(req, res, abs, stat, cacheControl) {
+  const ext = path.extname(abs).toLowerCase();
+  const type = MIME[ext] || 'application/octet-stream';
+  const lastMod = stat.mtime.toUTCString();
+
+  if (req.headers['if-modified-since'] === lastMod) {
+    res.writeHead(304);
+    return res.end();
+  }
+
+  const headers = {
+    'Content-Type': type,
+    'Accept-Ranges': 'bytes',
+    'Last-Modified': lastMod,
+    'Cache-Control': cacheControl || 'private, max-age=3600',
+  };
+
+  const range = req.headers.range;
+  if (range) {
+    const m = /^bytes=(\d*)-(\d*)$/.exec(range);
+    if (m && (m[1] || m[2])) {
+      let start, end;
+      if (m[1] === '') { // suffix range: last N bytes
+        start = Math.max(0, stat.size - parseInt(m[2], 10));
+        end = stat.size - 1;
+      } else {
+        start = parseInt(m[1], 10);
+        end = m[2] === '' ? stat.size - 1 : Math.min(parseInt(m[2], 10), stat.size - 1);
+      }
+      if (start > end || start >= stat.size) {
+        res.writeHead(416, { 'Content-Range': `bytes */${stat.size}` });
+        return res.end();
+      }
+      headers['Content-Range'] = `bytes ${start}-${end}/${stat.size}`;
+      headers['Content-Length'] = end - start + 1;
+      res.writeHead(206, headers);
+      if (req.method === 'HEAD') return res.end();
+      const stream = fs.createReadStream(abs, { start, end });
+      stream.on('error', () => res.destroy());
+      return stream.pipe(res);
+    }
+  }
+
+  headers['Content-Length'] = stat.size;
+  res.writeHead(200, headers);
+  if (req.method === 'HEAD') return res.end();
+  const stream = fs.createReadStream(abs);
+  stream.on('error', () => res.destroy());
+  stream.pipe(res);
+}
+
+function createServer(root) {
+  root = path.resolve(root);
+  const indexPath = path.join(__dirname, '..', 'public', 'index.html');
+
+  return http.createServer(async (req, res) => {
+    let url;
+    try { url = new URL(req.url, 'http://localhost'); } catch { return sendError(res, 400, 'Bad request'); }
+    const p = url.pathname;
+
+    if (req.method === 'POST' && p === '/api/prefs') {
+      let body = '';
+      req.on('data', (c) => { body += c; if (body.length > 16384) req.destroy(); });
+      req.on('end', async () => {
+        try {
+          JSON.parse(body); // validate before persisting
+          await fsp.writeFile(PREFS_FILE, body);
+          sendJson(res, { ok: true });
+        } catch {
+          sendError(res, 400, 'Bad prefs');
+        }
+      });
+      return;
+    }
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+      return sendError(res, 405, 'Method not allowed');
+    }
+
+    try {
+      if (p === '/api/prefs') {
+        let prefs = {};
+        try { prefs = JSON.parse(await fsp.readFile(PREFS_FILE, 'utf8')); } catch { /* no prefs yet */ }
+        return sendJson(res, prefs);
+      }
+
+      if (p === '/' || p === '/index.html') {
+        const st = await fsp.stat(indexPath);
+        return serveFile(req, res, indexPath, st, 'no-cache');
+      }
+
+      if (p === '/api/tree') {
+        const tree = await buildTree(root, '', path.basename(root) || root);
+        return sendJson(res, tree);
+      }
+
+      if (p === '/api/media') {
+        const rel = url.searchParams.get('dir') || '';
+        const abs = safeResolve(root, rel);
+        if (!abs) return sendError(res, 400, 'Bad path');
+        const out = await listMedia(abs, rel, { files: [], ignored: {} });
+        return sendJson(res, { dir: rel, files: out.files, ignored: out.ignored });
+      }
+
+      if (p.startsWith('/file/')) {
+        let rel;
+        try { rel = decodeURIComponent(p.slice('/file/'.length)); } catch { return sendError(res, 400, 'Bad path'); }
+        const abs = safeResolve(root, rel);
+        if (!abs || !mediaKind(abs)) return sendError(res, 404, 'Not found');
+        let st;
+        try { st = await fsp.stat(abs); } catch { return sendError(res, 404, 'Not found'); }
+        if (!st.isFile()) return sendError(res, 404, 'Not found');
+        return serveFile(req, res, abs, st);
+      }
+
+      return sendError(res, 404, 'Not found');
+    } catch (err) {
+      return sendError(res, 500, 'Server error: ' + (err.message || err));
+    }
+  });
+}
+
+/** Listen, auto-incrementing the port if it's taken (up to 50 tries). */
+function startServer({ root, port, host }) {
+  const server = createServer(root);
+  return new Promise((resolve, reject) => {
+    let attempts = 0;
+    const tryListen = (p) => {
+      server.once('error', (err) => {
+        if (err.code === 'EADDRINUSE' && attempts < 50) {
+          attempts++;
+          tryListen(p + 1);
+        } else {
+          reject(err);
+        }
+      });
+      server.listen(p, host, () => {
+        server.removeAllListeners('error');
+        resolve({ server, port: server.address().port });
+      });
+    };
+    tryListen(port);
+  });
+}
+
+module.exports = { startServer, createServer };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tb.p/serve-media",
+  "version": "1.0.0",
+  "description": "Spin up a local web page that browses the media (images/video) in a directory — Explorer-style folder tree, resizable tile grid.",
+  "license": "MIT",
+  "bin": {
+    "serve-media": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "public"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "media",
+    "gallery",
+    "server",
+    "images",
+    "video",
+    "explorer"
+  ]
+}

package/public/index.html

@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>serve-media</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🖼️</text></svg>">
+<style>
+  :root {
+    --bg: #1c1c1c;
+    --panel: #242424;
+    --border: #333;
+    --fg: #e8e8e8;
+    --muted: #9a9a9a;
+    --accent: #4cc2ff;
+    --hover: rgba(255, 255, 255, .07);
+    --sel: rgba(255, 255, 255, .13);
+    --tile: 200px;
+    --side: 270px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    display: grid;
+    grid-template-columns: var(--side) 5px 1fr;
+    background: var(--bg);
+    color: var(--fg);
+    font-family: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
+    font-size: 14px;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  /* ---- sidebar / tree ---- */
+  #sidebar {
+    background: var(--panel);
+    overflow: auto;
+    padding: 8px 4px 24px;
+    border-right: 1px solid var(--border);
+  }
+  #split { cursor: col-resize; }
+  #split:hover { background: var(--accent); opacity: .4; }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 28px;
+    padding: 0 8px 0 calc(6px + var(--d, 0) * 16px);
+    border-radius: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .row:hover { background: var(--hover); }
+  .row.sel { background: var(--sel); }
+  .row.sel::before {
+    content: "";
+    position: absolute;
+    width: 3px; height: 16px;
+    margin-left: -8px;
+    border-radius: 2px;
+    background: var(--accent);
+  }
+  .chev {
+    width: 16px; height: 16px;
+    flex: none;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--muted);
+    transition: transform .12s;
+  }
+  .open > .row > .chev { transform: rotate(90deg); }
+  .chev.leaf { visibility: hidden; }
+  .fico { flex: none; width: 16px; height: 16px; color: #eac054; }
+  .lbl { overflow: hidden; text-overflow: ellipsis; }
+  .cnt { margin-left: auto; padding-left: 8px; font-size: 11px; color: var(--muted); }
+  .kids { display: none; }
+  .open > .kids { display: block; }
+
+  /* ---- main ---- */
+  #main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
+  #toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 14px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    flex: none;
+  }
+  #crumbs { display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; }
+  .crumb { padding: 3px 7px; border-radius: 4px; cursor: pointer; color: var(--fg); }
+  .crumb:hover { background: var(--hover); }
+  .crumb-sep { color: var(--muted); font-size: 11px; }
+  #count { color: var(--muted); font-size: 12px; flex: none; }
+  #search {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    color: var(--fg);
+    padding: 5px 9px;
+    width: 170px;
+    outline: none;
+    font: inherit; font-size: 13px;
+  }
+  #search:focus { border-color: var(--accent); }
+  select {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    color: var(--fg);
+    padding: 5px 6px;
+    outline: none;
+    font: inherit; font-size: 13px;
+  }
+  #zoomwrap { display: flex; align-items: center; gap: 7px; flex: none; color: var(--muted); }
+  #zoom { width: 110px; accent-color: var(--accent); }
+
+  #scroller { flex: 1; overflow: auto; }
+  #grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
+    gap: 8px;
+    padding: 12px;
+    align-content: start;
+  }
+  .tile { padding: 6px; border-radius: 7px; cursor: pointer; }
+  .tile:hover { background: var(--hover); }
+  .thumb {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 5px;
+    overflow: hidden;
+    background: #141414;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .badge {
+    position: absolute;
+    left: 6px; bottom: 6px;
+    background: rgba(0, 0, 0, .65);
+    border-radius: 4px;
+    padding: 2px 6px;
+    font-size: 11px;
+    display: flex; align-items: center; gap: 4px;
+    pointer-events: none;
+  }
+  .tname {
+    margin-top: 6px;
+    font-size: 12px;
+    line-height: 1.3;
+    text-align: center;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    color: #d6d6d6;
+  }
+  #empty { padding: 60px 20px; text-align: center; color: var(--muted); display: none; }
+
+  #statusbar {
+    flex: none;
+    display: none;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 14px;
+    background: var(--panel);
+    border-top: 1px solid var(--border);
+    font-size: 12px;
+    color: var(--muted);
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+  #statusbar.show { display: flex; }
+  .ig {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1px 7px;
+    flex: none;
+  }
+
+  /* ---- lightbox ---- */
+  #lb {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, .92);
+    display: none;
+    flex-direction: column;
+    z-index: 10;
+  }
+  #lb.show { display: flex; }
+  #lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 12px; }
+  #lb-stage img, #lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
+  #lb-bar {
+    flex: none;
+    display: flex; align-items: center; justify-content: center; gap: 14px;
+    padding: 10px;
+    color: var(--muted); font-size: 13px;
+  }
+  .lb-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px; height: 80px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(255, 255, 255, .06);
+    border: none; border-radius: 8px;
+    color: var(--fg); font-size: 26px;
+    cursor: pointer;
+  }
+  .lb-btn:hover { background: rgba(255, 255, 255, .15); }
+  #lb-prev { left: 12px; }
+  #lb-next { right: 12px; }
+  #lb-close {
+    position: absolute;
+    top: 12px; right: 12px;
+    width: 40px; height: 40px;
+    background: rgba(255, 255, 255, .06);
+    border: none; border-radius: 8px;
+    color: var(--fg); font-size: 20px;
+    cursor: pointer;
+  }
+  #lb-close:hover { background: rgba(255, 80, 80, .5); }
+
+  ::-webkit-scrollbar { width: 12px; height: 12px; }
+  ::-webkit-scrollbar-thumb { background: #444; border-radius: 6px; border: 3px solid var(--bg); }
+  ::-webkit-scrollbar-thumb:hover { background: #555; }
+</style>
+</head>
+<body>
+  <div id="sidebar"><div id="tree"></div></div>
+  <div id="split"></div>
+  <div id="main">
+    <div id="toolbar">
+      <div id="crumbs"></div>
+      <span id="count"></span>
+      <input id="search" type="search" placeholder="Filter names…">
+      <select id="sort">
+        <option value="name">Name</option>
+        <option value="new">Newest</option>
+        <option value="old">Oldest</option>
+        <option value="big">Largest</option>
+        <option value="rand">Shuffle</option>
+      </select>
+      <div id="zoomwrap">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
+        <input id="zoom" type="range" min="90" max="480" step="10" title="Tile size (Ctrl+scroll also works)">
+      </div>
+    </div>
+    <div id="scroller">
+      <div id="grid"></div>
+      <div id="empty">No media in this folder.</div>
+      <div id="sentinel"></div>
+    </div>
+    <div id="statusbar"></div>
+  </div>
+
+  <div id="lb">
+    <div id="lb-stage"></div>
+    <div id="lb-bar"><span id="lb-caption"></span></div>
+    <button class="lb-btn" id="lb-prev" title="Previous (←)">‹</button>
+    <button class="lb-btn" id="lb-next" title="Next (→)">›</button>
+    <button id="lb-close" title="Close (Esc)">✕</button>
+  </div>
+
+<script>
+(() => {
+  'use strict';
+  const $ = (id) => document.getElementById(id);
+  const BATCH = 120;
+
+  const CHEV = '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M5 2l7 6-7 6V2z"/></svg>';
+  const FOLDER = '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M1.5 3A1.5 1.5 0 0 1 3 1.5h3.2c.4 0 .8.16 1.08.44L8.4 3H13a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5V3z"/></svg>';
+  const PLAY = '<svg width="10" height="10" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2l10 6-10 6V2z"/></svg>';
+
+  const state = {
+    tree: null,
+    sel: null,        // selected folder rel path ('' = root)
+    files: [],        // raw list from server
+    view: [],         // sorted + filtered
+    shown: 0,
+    expanded: new Set(),
+    rows: new Map(),  // rel -> row element
+  };
+
+  const fileUrl = (rel) => '/file/' + rel.split('/').map(encodeURIComponent).join('/');
+  const fmtDur = (s) => {
+    if (!isFinite(s)) return '';
+    s = Math.round(s);
+    const m = Math.floor(s / 60), sec = String(s % 60).padStart(2, '0');
+    return m >= 60 ? `${Math.floor(m / 60)}:${String(m % 60).padStart(2, '0')}:${sec}` : `${m}:${sec}`;
+  };
+
+  /* ---------- prefs (persisted server-side in ~/.serve-media.json) ---------- */
+  let saveTimer;
+  function savePrefs() {
+    clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+      const prefs = {
+        tile: parseInt(zoom.value, 10),
+        side: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--side'), 10),
+      };
+      fetch('/api/prefs', { method: 'POST', body: JSON.stringify(prefs) }).catch(() => {});
+    }, 400);
+  }
+
+  /* ---------- tile size ---------- */
+  const zoom = $('zoom');
+  const setTile = (px) => {
+    px = Math.min(480, Math.max(90, px));
+    document.documentElement.style.setProperty('--tile', px + 'px');
+    zoom.value = px;
+    localStorage.setItem('sm-tile', px);
+  };
+  setTile(parseInt(localStorage.getItem('sm-tile'), 10) || 200);
+  zoom.addEventListener('input', () => { setTile(+zoom.value); savePrefs(); });
+  $('scroller').addEventListener('wheel', (e) => {
+    if (!e.ctrlKey) return;
+    e.preventDefault();
+    setTile(+zoom.value + (e.deltaY < 0 ? 20 : -20));
+    savePrefs();
+  }, { passive: false });
+
+  /* ---------- sidebar resize ---------- */
+  const split = $('split');
+  split.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    split.setPointerCapture(e.pointerId);
+    const move = (ev) => {
+      const w = Math.min(600, Math.max(160, ev.clientX));
+      document.documentElement.style.setProperty('--side', w + 'px');
+      localStorage.setItem('sm-side', w);
+    };
+    const up = () => {
+      split.removeEventListener('pointermove', move);
+      split.removeEventListener('pointerup', up);
+      savePrefs();
+    };
+    split.addEventListener('pointermove', move);
+    split.addEventListener('pointerup', up);
+  });
+  const savedSide = parseInt(localStorage.getItem('sm-side'), 10);
+  if (savedSide) document.documentElement.style.setProperty('--side', savedSide + 'px');
+
+  /* ---------- tree ---------- */
+  function nodeEl(node, depth) {
+    const wrap = document.createElement('div');
+    if (state.expanded.has(node.rel)) wrap.classList.add('open');
+
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.style.setProperty('--d', depth);
+    row.title = node.name;
+
+    const chev = document.createElement('span');
+    chev.className = 'chev' + (node.children.length ? '' : ' leaf');
+    chev.innerHTML = CHEV;
+
+    const ico = document.createElement('span');
+    ico.className = 'fico';
+    ico.innerHTML = FOLDER;
+
+    const lbl = document.createElement('span');
+    lbl.className = 'lbl';
+    lbl.textContent = node.name;
+
+    const cnt = document.createElement('span');
+    cnt.className = 'cnt';
+    cnt.textContent = node.count;
+
+    row.append(chev, ico, lbl, cnt);
+    wrap.append(row);
+
+    const kids = document.createElement('div');
+    kids.className = 'kids';
+    for (const c of node.children) kids.append(nodeEl(c, depth + 1));
+    wrap.append(kids);
+
+    const toggle = () => {
+      wrap.classList.toggle('open');
+      if (wrap.classList.contains('open')) state.expanded.add(node.rel);
+      else state.expanded.delete(node.rel);
+    };
+    chev.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });
+    row.addEventListener('click', () => {
+      if (node.children.length && !wrap.classList.contains('open')) toggle();
+      select(node.rel);
+    });
+
+    state.rows.set(node.rel, row);
+    return wrap;
+  }
+
+  function renderTree() {
+    state.rows.clear();
+    const tree = $('tree');
+    tree.textContent = '';
+    state.expanded.add('');
+    tree.append(nodeEl(state.tree, 0));
+  }
+
+  /* ---------- breadcrumbs ---------- */
+  function renderCrumbs() {
+    const el = $('crumbs');
+    el.textContent = '';
+    const parts = state.sel ? state.sel.split('/') : [];
+    const mk = (label, rel) => {
+      const c = document.createElement('span');
+      c.className = 'crumb';
+      c.textContent = label;
+      c.addEventListener('click', () => select(rel));
+      return c;
+    };
+    el.append(mk(state.tree ? state.tree.name : '…', ''));
+    let acc = '';
+    for (const p of parts) {
+      acc = acc ? `${acc}/${p}` : p;
+      const sep = document.createElement('span');
+      sep.className = 'crumb-sep';
+      sep.textContent = '›';
+      el.append(sep, mk(p, acc));
+    }
+  }
+
+  /* ---------- grid ---------- */
+  const grid = $('grid');
+  let hoverVideo = null;
+
+  const mountObserver = new IntersectionObserver((entries) => {
+    for (const en of entries) {
+      if (!en.isIntersecting) continue;
+      mountObserver.unobserve(en.target);
+      mountThumb(en.target);
+    }
+  }, { root: $('scroller'), rootMargin: '600px' });
+
+  function mountThumb(thumb) {
+    const f = state.view[+thumb.dataset.i];
+    if (!f) return;
+    if (f.kind === 'image') {
+      const img = document.createElement('img');
+      img.loading = 'lazy';
+      img.decoding = 'async';
+      img.src = fileUrl(f.rel);
+      img.alt = f.name;
+      thumb.prepend(img);
+    } else {
+      const v = document.createElement('video');
+      v.muted = true;
+      v.playsInline = true;
+      v.preload = 'metadata';
+      v.src = fileUrl(f.rel) + '#t=0.1';
+      v.addEventListener('loadedmetadata', () => {
+        const b = thumb.querySelector('.badge span');
+        if (b) b.textContent = fmtDur(v.duration);
+      });
+      thumb.prepend(v);
+      thumb.addEventListener('mouseenter', () => {
+        hoverVideo = v;
+        v.play().catch(() => {});
+      });
+      thumb.addEventListener('mouseleave', () => {
+        v.pause();
+        v.currentTime = 0.1;
+        if (hoverVideo === v) hoverVideo = null;
+      });
+    }
+  }
+
+  function makeTile(i) {
+    const f = state.view[i];
+    const tile = document.createElement('div');
+    tile.className = 'tile';
+    tile.title = f.rel;
+
+    const thumb = document.createElement('div');
+    thumb.className = 'thumb';
+    thumb.dataset.i = i;
+    if (f.kind === 'video') {
+      const badge = document.createElement('div');
+      badge.className = 'badge';
+      badge.innerHTML = PLAY + '<span></span>';
+      thumb.append(badge);
+    }
+
+    const name = document.createElement('div');
+    name.className = 'tname';
+    name.textContent = f.name;
+
+    tile.append(thumb, name);
+    tile.addEventListener('click', () => openLb(i));
+    mountObserver.observe(thumb);
+    return tile;
+  }
+
+  function showMore() {
+    const end = Math.min(state.view.length, state.shown + BATCH);
+    const frag = document.createDocumentFragment();
+    for (let i = state.shown; i < end; i++) frag.append(makeTile(i));
+    grid.append(frag);
+    state.shown = end;
+  }
+
+  new IntersectionObserver((entries) => {
+    if (entries.some((e) => e.isIntersecting) && state.shown < state.view.length) showMore();
+  }, { root: $('scroller'), rootMargin: '900px' }).observe($('sentinel'));
+
+  function applyView() {
+    const q = $('search').value.trim().toLowerCase();
+    let v = q ? state.files.filter((f) => f.name.toLowerCase().includes(q)) : state.files.slice();
+    const mode = $('sort').value;
+    if (mode === 'name') v.sort((a, b) => a.rel.localeCompare(b.rel, undefined, { numeric: true, sensitivity: 'base' }));
+    else if (mode === 'new') v.sort((a, b) => b.mtime - a.mtime);
+    else if (mode === 'old') v.sort((a, b) => a.mtime - b.mtime);
+    else if (mode === 'big') v.sort((a, b) => b.size - a.size);
+    else if (mode === 'rand') {
+      for (let i = v.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [v[i], v[j]] = [v[j], v[i]];
+      }
+    }
+    state.view = v;
+    state.shown = 0;
+    grid.textContent = '';
+    $('empty').style.display = v.length ? 'none' : 'block';
+    $('count').textContent = `${v.length.toLocaleString()} item${v.length === 1 ? '' : 's'}`;
+    $('scroller').scrollTop = 0;
+    showMore();
+  }
+
+  $('search').addEventListener('input', applyView);
+  $('sort').addEventListener('change', applyView);
+
+  /* ---------- selection ---------- */
+  function renderIgnored(ignored) {
+    const bar = $('statusbar');
+    bar.textContent = '';
+    const exts = Object.keys(ignored || {}).sort((a, b) => ignored[b] - ignored[a] || a.localeCompare(b));
+    if (!exts.length) { bar.classList.remove('show'); return; }
+    const total = exts.reduce((s, e) => s + ignored[e], 0);
+    const lead = document.createElement('span');
+    lead.textContent = `Not served (${total.toLocaleString()}):`;
+    bar.append(lead);
+    for (const e of exts) {
+      const chip = document.createElement('span');
+      chip.className = 'ig';
+      chip.textContent = `${e} ×${ignored[e].toLocaleString()}`;
+      bar.append(chip);
+    }
+    bar.classList.add('show');
+  }
+
+  async function select(rel) {
+    state.sel = rel;
+    for (const [r, row] of state.rows) row.classList.toggle('sel', r === rel);
+    renderCrumbs();
+    const res = await fetch('/api/media?dir=' + encodeURIComponent(rel));
+    const data = await res.json();
+    if (state.sel !== rel) return; // a newer selection won
+    state.files = data.files;
+    renderIgnored(data.ignored);
+    applyView();
+  }
+
+  /* ---------- lightbox ---------- */
+  const lb = $('lb');
+  let lbIndex = -1;
+
+  function openLb(i) {
+    if (hoverVideo) { hoverVideo.pause(); hoverVideo = null; }
+    lbIndex = i;
+    const f = state.view[i];
+    if (!f) return;
+    const stage = $('lb-stage');
+    stage.textContent = '';
+    let el;
+    if (f.kind === 'image') {
+      el = document.createElement('img');
+      el.src = fileUrl(f.rel);
+      el.alt = f.name;
+    } else {
+      el = document.createElement('video');
+      el.src = fileUrl(f.rel);
+      el.controls = true;
+      el.autoplay = true;
+      el.loop = true;
+    }
+    stage.append(el);
+    $('lb-caption').textContent = `${f.rel}  ·  ${i + 1} / ${state.view.length}`;
+    lb.classList.add('show');
+  }
+
+  function closeLb() {
+    lb.classList.remove('show');
+    $('lb-stage').textContent = '';
+    lbIndex = -1;
+  }
+  const lbStep = (d) => {
+    if (lbIndex < 0) return;
+    const n = (lbIndex + d + state.view.length) % state.view.length;
+    openLb(n);
+  };
+
+  $('lb-close').addEventListener('click', closeLb);
+  $('lb-prev').addEventListener('click', () => lbStep(-1));
+  $('lb-next').addEventListener('click', () => lbStep(1));
+  lb.addEventListener('click', (e) => { if (e.target === lb || e.target === $('lb-stage')) closeLb(); });
+  document.addEventListener('keydown', (e) => {
+    if (!lb.classList.contains('show')) return;
+    if (e.key === 'Escape') closeLb();
+    else if (e.key === 'ArrowLeft') lbStep(-1);
+    else if (e.key === 'ArrowRight') lbStep(1);
+  });
+
+  /* ---------- boot ---------- */
+  (async () => {
+    try {
+      const prefs = await (await fetch('/api/prefs')).json();
+      if (prefs.tile) setTile(prefs.tile);
+      if (prefs.side) {
+        const w = Math.min(600, Math.max(160, prefs.side));
+        document.documentElement.style.setProperty('--side', w + 'px');
+        localStorage.setItem('sm-side', w);
+      }
+    } catch { /* prefs are best-effort */ }
+    const res = await fetch('/api/tree');
+    state.tree = await res.json();
+    document.title = state.tree.name + ' — serve-media';
+    renderTree();
+    select('');
+  })();
+})();
+</script>
+</body>
+</html>