npm - @tb.p/serve-media - Versions diffs - 1.0.0 → 1.2.0 - Mend

@tb.p/serve-media 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -13,6 +13,7 @@ npx @tb.p/serve-media <path>
 - 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.
+- **Single viewer, self-terminating** — only one page may connect at a time (others get a "busy" page). Once the viewer connects, closing that page shuts the server down; no orphaned servers left running. Refreshing the page is fine (5-second grace window). Disable with `--no-exit`.
 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).
@@ -25,6 +26,7 @@ serve-media [path] [options]
   -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
+  --no-exit         Allow multiple viewers; keep running after the page closes
 ```
 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.

package/bin/cli.js CHANGED Viewed

@@ -15,18 +15,22 @@ 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
+  --no-exit         Allow multiple viewers and keep running after the page closes
+                    (by default only one viewer is allowed, and the server exits
+                    when that page disconnects)
   -h, --help        Show this help
 `);
 }
 function parseArgs(argv) {
-  const opts = { dir: null, port: 4321, host: '127.0.0.1', open: true };
+  const opts = { dir: null, port: 4321, host: '127.0.0.1', open: true, single: 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 === '--no-exit') { opts.single = 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); }
@@ -60,10 +64,11 @@ async function main() {
     process.exit(1);
   }
-  const { port } = await startServer({ root, port: opts.port, host: opts.host });
+  const { port } = await startServer({ root, port: opts.port, host: opts.host, single: opts.single });
   const url = `http://${opts.host === '0.0.0.0' ? 'localhost' : opts.host}:${port}/`;
   console.log(`Serving  ${root}`);
   console.log(`Browse   ${url}`);
+  if (opts.single) console.log('Single-viewer mode: the server exits when the page closes (--no-exit to disable).');
   console.log('Press Ctrl+C to stop.');
   if (opts.open) openBrowser(url);
 }

package/lib/server.js CHANGED Viewed

@@ -153,9 +153,23 @@ function serveFile(req, res, abs, stat, cacheControl) {
   stream.pipe(res);
 }
-function createServer(root) {
+const BUSY_PAGE = `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>serve-media — busy</title>
+<style>body{background:#1c1c1c;color:#e8e8e8;font-family:"Segoe UI",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}
+div{text-align:center;color:#9a9a9a}h1{color:#e8e8e8;font-size:20px;margin-bottom:8px}</style></head>
+<body><div><h1>Another viewer is already connected</h1><p>This server allows a single viewer at a time.</p></div></body></html>`;
+/** Grace window after the viewer disconnects before exiting — long enough to survive F5. */
+const GRACE_MS = 5000;
+function createServer(root, opts = {}) {
   root = path.resolve(root);
   const indexPath = path.join(__dirname, '..', 'public', 'index.html');
+  const single = opts.single !== false;
+  // Single-viewer watchdog: the page holds an SSE connection to /api/watch.
+  // First connection arms the shutdown; when it closes and no viewer returns
+  // within GRACE_MS, onViewerGone fires.
+  const watch = { viewer: null, armed: false, timer: null };
   return http.createServer(async (req, res) => {
     let url;
@@ -180,6 +194,36 @@ function createServer(root) {
       return sendError(res, 405, 'Method not allowed');
     }
+    if (p === '/api/watch') {
+      if (single && watch.viewer) return sendError(res, 409, 'Another viewer is already connected.');
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      });
+      res.write('event: armed\ndata: {}\n\n');
+      const hb = setInterval(() => res.write(':hb\n\n'), 15000);
+      if (single) {
+        watch.viewer = res;
+        clearTimeout(watch.timer);
+        if (!watch.armed) {
+          watch.armed = true;
+          if (opts.onArm) opts.onArm();
+        }
+      }
+      res.on('close', () => {
+        clearInterval(hb);
+        if (single && watch.viewer === res) {
+          watch.viewer = null;
+          clearTimeout(watch.timer);
+          watch.timer = setTimeout(() => {
+            if (!watch.viewer && opts.onViewerGone) opts.onViewerGone();
+          }, GRACE_MS);
+        }
+      });
+      return;
+    }
     try {
       if (p === '/api/prefs') {
         let prefs = {};
@@ -188,6 +232,10 @@ function createServer(root) {
       }
       if (p === '/' || p === '/index.html') {
+        if (single && watch.viewer) {
+          res.writeHead(409, { 'Content-Type': 'text/html; charset=utf-8' });
+          return res.end(BUSY_PAGE);
+        }
         const st = await fsp.stat(indexPath);
         return serveFile(req, res, indexPath, st, 'no-cache');
       }
@@ -224,8 +272,27 @@ function createServer(root) {
 }
 /** Listen, auto-incrementing the port if it's taken (up to 50 tries). */
-function startServer({ root, port, host }) {
-  const server = createServer(root);
+function startServer({ root, port, host, single }) {
+  const server = createServer(root, {
+    single,
+    onArm() {
+      console.log('Viewer connected — server will exit when the page closes.');
+    },
+    onViewerGone() {
+      console.log('Viewer disconnected — shutting down.');
+      server.close();
+      // When attached to a console, keep the window open (it would close with
+      // the process if the tool was launched via double-click / a shortcut).
+      if (process.stdin.isTTY) {
+        console.log('Press any key to close.');
+        process.stdin.setRawMode(true);
+        process.stdin.resume();
+        process.stdin.once('data', () => process.exit(0));
+      } else {
+        process.exit(0);
+      }
+    },
+  });
   return new Promise((resolve, reject) => {
     let attempts = 0;
     const tryListen = (p) => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tb.p/serve-media",
-  "version": "1.0.0",
+  "version": "1.2.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": {

package/public/index.html CHANGED Viewed

@@ -221,6 +221,18 @@
   }
   #lb-close:hover { background: rgba(255, 80, 80, .5); }
+  #lockout {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, .88);
+    display: none;
+    align-items: center; justify-content: center;
+    text-align: center;
+    z-index: 20;
+  }
+  #lockout.show { display: flex; }
+  #lockout h1 { font-size: 20px; margin-bottom: 8px; }
+  #lockout p { color: var(--muted); }
   ::-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; }
@@ -254,6 +266,13 @@
     <div id="statusbar"></div>
   </div>
+  <div id="lockout">
+    <div>
+      <h1>Disconnected</h1>
+      <p>The server has stopped, or another viewer is already connected.</p>
+    </div>
+  </div>
   <div id="lb">
     <div id="lb-stage"></div>
     <div id="lb-bar"><span id="lb-caption"></span></div>
@@ -268,6 +287,15 @@
   const $ = (id) => document.getElementById(id);
   const BATCH = 120;
+  /* ---------- viewer watch channel ----------
+     Held open for the whole session; the server exits when it closes.
+     Opened first thing so a refresh re-arms within the server's grace window. */
+  const es = new EventSource('/api/watch');
+  es.onerror = () => {
+    es.close();
+    $('lockout').classList.add('show');
+  };
   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>';