@x12i/pocket-videos 0.0.0-stage → 1.0.0

package/app.js

@@ -0,0 +1,682 @@
+// Pocket Videos. One media element plays the whole album, track after track.
+import {
+  featuredIndex, dailyCardIndex, upNextIndexes, afterTrack, formatTime, normalizeCatalog,
+} from './logic.js';
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const media = $('#media');
+
+const LS = { endMode: 'pv.endMode', last: 'pv.last', iosTip: 'pv.iosTipDismissed' };
+const store = {
+  get(key) { try { return localStorage.getItem(key); } catch { return null; } },
+  set(key, value) { try { localStorage.setItem(key, value); } catch { /* private mode: fine */ } },
+};
+
+const state = {
+  app: {}, albums: [], cards: [],
+  albumIndex: -1, trackIndex: 0,
+  playing: false,
+  finished: false,        // the album ended in Pause mode, so Up next is showing
+  endMode: 'repeat',
+  view: 'home',
+  resume: null,           // last position from the previous visit, offered as "Continue"
+  retried: false,
+  listAlbumId: null,      // which album the track list was last built for
+};
+
+/* ---------------------------------------------------------------- tiny DOM helpers */
+
+function h(tag, props, ...kids) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(props || {})) {
+    if (v == null || v === false) continue;
+    if (k === 'class') el.className = v;
+    else if (k === 'text') el.textContent = v;
+    else if (k === 'dataset') Object.assign(el.dataset, v);
+    else if (k.startsWith('on')) el.addEventListener(k.slice(2), v);
+    else el.setAttribute(k, v === true ? '' : v);
+  }
+  for (const kid of kids.flat()) {
+    if (kid == null || kid === false) continue;
+    el.append(kid.nodeType ? kid : document.createTextNode(kid));
+  }
+  return el;
+}
+
+const PATH = {
+  play: '<path d="M8 5.2v13.6a.6.6 0 0 0 .92.5l10.4-6.8a.6.6 0 0 0 0-1L8.92 4.7a.6.6 0 0 0-.92.5z" fill="currentColor"/>',
+  pause: '<rect x="6" y="5" width="4.2" height="14" rx="1.2" fill="currentColor"/><rect x="13.8" y="5" width="4.2" height="14" rx="1.2" fill="currentColor"/>',
+};
+function svg(path, size = 24) {
+  const t = document.createElement('template');
+  t.innerHTML = `<svg viewBox="0 0 24 24" width="${size}" height="${size}" aria-hidden="true">${path}</svg>`;
+  return t.content.firstChild;
+}
+
+const abs = (url) => new URL(url, document.baseURI).href;
+const mimeFor = (url) => (/\.png(\?|$)/i.test(url) ? 'image/png' : /\.webp(\?|$)/i.test(url) ? 'image/webp' : 'image/jpeg');
+const currentAlbum = () => state.albums[state.albumIndex] || null;
+const isStandalone = () => window.matchMedia('(display-mode: standalone)').matches || navigator.standalone === true;
+const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+function coverEl(album, cls = '') {
+  const fallback = () => h('div', { class: `cover-fallback ${cls}`.trim(), 'aria-hidden': 'true', text: album.title.slice(0, 1) });
+  if (!album.cover) return fallback();
+  const img = h('img', { src: album.cover, alt: '', width: 640, height: 640, decoding: 'async', class: cls });
+  img.addEventListener('error', () => img.replaceWith(fallback()), { once: true });
+  return img;
+}
+
+let toastTimer;
+function toast(message, { action, timeout = 4500 } = {}) {
+  const el = $('#toast');
+  el.replaceChildren(
+    h('span', { text: message }),
+    action ? h('button', { class: 'linkbtn', type: 'button', onclick: action.fn }, action.label) : null,
+  );
+  el.hidden = false;
+  clearTimeout(toastTimer);
+  if (timeout) toastTimer = setTimeout(() => { el.hidden = true; }, timeout);
+}
+
+function showStatus(message) {
+  const el = $('#status');
+  el.textContent = message;
+  el.hidden = false;
+}
+
+/* ---------------------------------------------------------------- views */
+
+let pushedPlayer = false;
+
+function setView(view, { push = true } = {}) {
+  const was = state.view;
+  state.view = view;
+  $('#home').hidden = view !== 'home';
+  $('#player').hidden = view !== 'player';
+  if (view === 'home') {
+    if (state.app.name) document.title = state.app.name;
+    renderHome();
+  }
+  if (view === 'player' && was !== 'player' && push) {
+    history.pushState({ v: 'player' }, '');
+    pushedPlayer = true;
+  }
+  renderMini();
+  if (was !== view) window.scrollTo(0, 0);
+}
+
+window.addEventListener('popstate', () => {
+  pushedPlayer = false;
+  if (state.view === 'player') setView('home', { push: false });
+});
+
+function goHome() {
+  if (state.view !== 'player') return;
+  if (pushedPlayer) history.back();
+  else setView('home', { push: false });
+}
+
+/* ---------------------------------------------------------------- home */
+
+function installTip() {
+  if (isStandalone() || store.get(LS.iosTip) === '1' || !isIOS()) return null;
+  const name = state.app.name || 'Pocket Videos';
+  const safari = !/CriOS|FxiOS|EdgiOS|OPiOS|DuckDuckGo/i.test(navigator.userAgent);
+  const message = safari
+    ? `To add ${name} to your Home Screen, tap Share, then Add to Home Screen.`
+    : `To add ${name} to your Home Screen, open this page in Safari, tap Share, then Add to Home Screen.`;
+  return h('div', { class: 'tip', role: 'note' },
+    h('p', { text: message }),
+    h('button', {
+      class: 'btn small', type: 'button',
+      onclick: (e) => { store.set(LS.iosTip, '1'); e.currentTarget.closest('.tip').remove(); },
+    }, 'Got it'));
+}
+
+function renderHome() {
+  const home = $('#home');
+  const now = new Date();
+  const fi = featuredIndex(state.app.featuredStartDate, now, state.albums.length);
+  const feat = state.albums[fi];
+  const metaLine = ['Album of the week', feat.artist, feat.year, `${feat.tracks.length} tracks`].filter(Boolean).join(' · ');
+  const play = () => startAlbum(fi);
+
+  // "Continue" is for a fresh visit; once something is loaded the mini player covers it.
+  const resume = state.albumIndex < 0 ? state.resume : null;
+  const resumeBtn = resume
+    ? h('button', {
+      class: 'btn quiet', type: 'button',
+      onclick: () => startAlbum(resume.albumIndex, resume.trackIndex, { startAt: resume.time }),
+    }, `Continue: ${state.albums[resume.albumIndex].tracks[resume.trackIndex].title}`)
+    : null;
+
+  const nodes = [
+    installTip(),
+    h('div', { class: 'featured' },
+      h('button', { class: 'tablet', type: 'button', 'aria-label': `Play ${feat.title}`, onclick: play },
+        coverEl(feat), h('span', { class: 'fab' }, svg(PATH.play, 34))),
+      h('div', {},
+        h('h1', { text: feat.title }),
+        h('p', { class: 'meta', text: metaLine }),
+        h('div', { class: 'actions' },
+          h('button', { class: 'btn', type: 'button', onclick: play }, svg(PATH.play, 22), 'Play album'),
+          resumeBtn))),
+  ];
+
+  if (state.cards.length) {
+    const card = state.cards[dailyCardIndex(now, state.cards.length)];
+    const ai = card.album ? state.albums.findIndex((a) => a.id === card.album) : -1;
+    nodes.push(h('section', { class: 'today', 'aria-label': "Today" },
+      h('p', { class: 'when', text: 'Today' }),
+      h('p', { class: 'hook', text: card.hook }),
+      h('p', { class: 'pivot', text: card.pivot }),
+      ai >= 0 ? h('button', { class: 'linkbtn', type: 'button', onclick: () => startAlbum(ai) }, `Play ${state.albums[ai].title}`) : null));
+  }
+
+  nodes.push(
+    h('h2', { class: 'h2', text: 'All albums' }),
+    h('ul', { class: 'grid' }, state.albums.map((a, i) => {
+      const locked = a.access === 'locked';
+      return h('li', {},
+        h('button', {
+          class: `album${locked ? ' locked' : ''}`, type: 'button',
+          'aria-label': `${locked ? 'Locked. ' : 'Play '}${a.title}`,
+          'aria-current': i === state.albumIndex ? 'true' : null,
+          onclick: () => startAlbum(i),
+        },
+        h('span', { class: 'cover' }, coverEl(a), locked ? h('span', { class: 'badge', text: 'Locked' }) : null),
+        h('span', { class: 't', text: a.title }),
+        h('span', { class: 'y', text: [a.artist, a.year].filter(Boolean).join(' · ') })));
+    })),
+  );
+
+  home.replaceChildren(...nodes.filter(Boolean));
+}
+
+/* ---------------------------------------------------------------- mini player */
+
+function renderMini() {
+  const mini = $('#mini');
+  const album = currentAlbum();
+  if (!album || state.view !== 'home') { mini.hidden = true; return; }
+  const track = album.tracks[state.trackIndex];
+  mini.hidden = false;
+  mini.replaceChildren(
+    h('button', { class: 'open', type: 'button', 'aria-label': 'Open the player', onclick: () => setView('player') },
+      coverEl(album, 'mini-cover'),
+      h('span', { class: 'txt' },
+        h('span', { class: 'tt', text: state.finished ? `${album.title} finished` : track.title }),
+        h('span', { class: 'st', text: state.finished ? 'Tap to choose what is next' : album.title }))),
+    h('button', {
+      class: 'ctl', type: 'button', 'aria-label': state.playing ? 'Pause' : 'Play',
+      onclick: () => (media.paused ? playAction() : media.pause()),
+    }, svg(state.playing ? PATH.pause : PATH.play, 26)),
+  );
+}
+
+/* ---------------------------------------------------------------- player UI */
+
+function applyKind(kind) {
+  const video = kind === 'video';
+  $('#art').classList.toggle('is-video', video);
+  $('#art').classList.toggle('is-audio', !video);
+  $('#stage').classList.toggle('is-video', video);
+}
+
+function renderPlayer() {
+  const album = currentAlbum();
+  if (!album) return;
+  const track = album.tracks[state.trackIndex];
+  applyKind(track.kind);
+
+  const cover = $('#pCover');
+  const coverSrc = album.cover || 'icons/icon-512.png';
+  if (cover.getAttribute('src') !== coverSrc) cover.setAttribute('src', coverSrc);
+  $('#pTrack').textContent = track.title;
+  $('#pAlbum').textContent = [album.title, album.artist].filter(Boolean).join(' · ');
+  document.title = `${track.title} · ${album.title} · ${state.app.name}`;
+
+  $('#deck').hidden = state.finished;
+  $('#upnext').hidden = !state.finished;
+  if (state.finished) renderUpNext();
+
+  if (state.listAlbumId !== album.id) {
+    state.listAlbumId = album.id;
+    $('#tracklist').replaceChildren(...album.tracks.map((t, i) => h('li', {},
+      h('button', { class: 'track', type: 'button', dataset: { i }, onclick: () => jumpTo(i) },
+        h('span', { class: 'n', text: String(i + 1) }),
+        h('span', { text: t.title })))));
+    $('#albumLinks').replaceChildren(...album.links.map((l) => h('li', {},
+      h('a', { href: l.url, target: '_blank', rel: 'noopener noreferrer', text: l.label }))));
+    state.lyricsOpen = false;
+  }
+  $('#tracklist').querySelectorAll('.track').forEach((b, i) => {
+    if (i === state.trackIndex && !state.finished) b.setAttribute('aria-current', 'true');
+    else b.removeAttribute('aria-current');
+  });
+
+  const lyrics = track.lyrics;
+  $('#lyricsWrap').hidden = !lyrics;
+  $('#lyricsText').textContent = lyrics;
+  $('#lyricsText').hidden = !state.lyricsOpen || !lyrics;
+  const lb = $('#lyricsBtn');
+  lb.textContent = state.lyricsOpen ? 'Hide lyrics' : 'Show lyrics';
+  lb.setAttribute('aria-expanded', String(state.lyricsOpen && !!lyrics));
+
+  syncEndMode();
+  syncPlaying();
+}
+
+function renderUpNext() {
+  const album = currentAlbum();
+  const picks = upNextIndexes(state.albumIndex, state.albums.length, 3);
+  const box = $('#upnext');
+  box.replaceChildren(
+    h('h3', { tabindex: '-1', text: picks.length ? 'Up next' : 'That was the album' }),
+    h('p', { class: 'done', text: `${album.title} has finished.` }),
+    picks.length ? h('ul', {}, picks.map((i) => {
+      const a = state.albums[i];
+      const locked = a.access === 'locked';
+      return h('li', {},
+        h('button', {
+          class: 'un', type: 'button', disabled: locked,
+          'aria-label': `${locked ? 'Locked. ' : 'Play '}${a.title}`,
+          onclick: () => startAlbum(i),
+        },
+        coverEl(a),
+        h('span', {}, h('span', { class: 't', text: a.title }), h('span', { class: 'y', text: [a.artist, a.year].filter(Boolean).join(' · ') })),
+        h('span', { class: 'go' }, svg(PATH.play, 22))));
+    })) : null,
+    h('button', { class: 'btn quiet again', type: 'button', onclick: () => startAlbum(state.albumIndex, 0) }, `Play ${album.title} again`),
+  );
+}
+
+function syncEndMode() {
+  document.querySelectorAll('.seg button').forEach((b) => {
+    b.setAttribute('aria-pressed', String(b.dataset.mode === state.endMode));
+  });
+}
+
+function syncPlaying() {
+  const playing = state.playing;
+  document.body.classList.toggle('is-playing', playing);
+  // SVG elements have no .hidden property, so toggle the attribute directly.
+  $('.i-play').toggleAttribute('hidden', playing);
+  $('.i-pause').toggleAttribute('hidden', !playing);
+  $('#playBtn').setAttribute('aria-label', playing ? 'Pause' : 'Play');
+  if ('mediaSession' in navigator) navigator.mediaSession.playbackState = playing ? 'playing' : 'paused';
+  renderMini();
+}
+
+function showError(show) {
+  $('#pErr').hidden = !show;
+}
+
+/* ---------------------------------------------------------------- playback */
+
+async function startAlbum(albumIndex, trackIndex = 0, { startAt = 0 } = {}) {
+  const album = state.albums[albumIndex];
+  if (!album) return;
+  if (album.access === 'locked') { toast(`${album.title} is locked for now.`); return; }
+  state.albumIndex = albumIndex;
+  setTrack(trackIndex, { startAt });
+  setView('player');
+  await play();
+}
+
+function setTrack(index, { startAt = 0 } = {}) {
+  const album = currentAlbum();
+  state.trackIndex = index;
+  state.finished = false;
+  state.retried = false;
+  showError(false);
+  const track = album.tracks[index];
+  applyKind(track.kind);
+  media.src = track.src;
+  if (startAt > 0) {
+    media.addEventListener('loadedmetadata', () => { try { media.currentTime = startAt; } catch { /* ignore */ } }, { once: true });
+  }
+  resetSeek();
+  updateMediaSession();
+  renderPlayer();
+  saveLast();
+  warmCache(album, index);
+}
+
+async function play() {
+  try {
+    await media.play();
+  } catch (err) {
+    if (err && err.name === 'NotAllowedError') {
+      state.playing = false; syncPlaying();
+      toast('Tap play to start.');
+    } else if (err && err.name !== 'AbortError') {
+      console.warn('play() failed', err);
+    }
+  }
+}
+
+function playAction() {
+  if (state.finished) startAlbum(state.albumIndex, 0);
+  else play();
+}
+
+function jumpTo(index) {
+  if (state.finished) { startAlbum(state.albumIndex, index); return; }
+  setTrack(index);
+  play();
+}
+
+function next() {
+  const album = currentAlbum();
+  if (!album) return;
+  const action = afterTrack(state.trackIndex, album.tracks.length, state.endMode);
+  if (action.type === 'end') { media.pause(); finishAlbum(); return; }
+  setTrack(action.index);
+  play();
+}
+
+function previous() {
+  if (!currentAlbum()) return;
+  if (media.currentTime > 3 || state.trackIndex === 0) { media.currentTime = 0; return; }
+  setTrack(state.trackIndex - 1);
+  play();
+}
+
+function onEnded() {
+  const album = currentAlbum();
+  if (!album) return;
+  const action = afterTrack(state.trackIndex, album.tracks.length, state.endMode);
+  if (action.type === 'end') { finishAlbum(); return; }
+  setTrack(action.index);   // 'next' or 'repeat'
+  play();
+}
+
+function finishAlbum() {
+  state.finished = true;
+  state.playing = false;
+  saveLast();
+  renderPlayer();
+  if (state.view === 'player') $('#upnext h3')?.focus({ preventScroll: true });
+}
+
+/* ---------------------------------------------------------------- media events */
+
+let seeking = false;
+let lastSave = 0;
+let lastPos = 0;
+
+function setProgress(fraction) {
+  const seek = $('#seek');
+  seek.value = String(Math.round(fraction * 1000));
+  seek.style.setProperty('--p', `${fraction * 100}%`);
+}
+function resetSeek() {
+  setProgress(0);
+  $('#tCur').textContent = '0:00';
+  $('#tDur').textContent = '0:00';
+}
+
+media.addEventListener('play', () => { state.playing = true; syncPlaying(); });
+media.addEventListener('pause', () => {
+  if (media.ended) return;   // the browser fires pause just before ended; ignore it
+  state.playing = false; syncPlaying(); saveLast();
+});
+media.addEventListener('ended', onEnded);
+media.addEventListener('loadedmetadata', () => { $('#tDur').textContent = formatTime(media.duration); });
+media.addEventListener('timeupdate', () => {
+  const d = media.duration;
+  const t = media.currentTime;
+  if (!seeking && Number.isFinite(d) && d > 0) {
+    setProgress(Math.min(t / d, 1));
+    $('#tCur').textContent = formatTime(t);
+    $('#seek').setAttribute('aria-valuetext', `${formatTime(t)} of ${formatTime(d)}`);
+  }
+  const now = performance.now();
+  if (now - lastSave > 3000) { lastSave = now; saveLast(); }
+  if ('mediaSession' in navigator && navigator.mediaSession.setPositionState && Number.isFinite(d) && d > 0 && now - lastPos > 1000) {
+    lastPos = now;
+    try { navigator.mediaSession.setPositionState({ duration: d, playbackRate: media.playbackRate || 1, position: Math.min(t, d) }); } catch { /* ignore */ }
+  }
+});
+media.addEventListener('error', () => {
+  if (!media.error || !currentAlbum()) return;
+  if (!state.retried) {
+    state.retried = true;
+    const at = media.currentTime || 0;
+    setTimeout(() => {
+      media.load();
+      if (at > 0) media.addEventListener('loadedmetadata', () => { try { media.currentTime = at; } catch { /* ignore */ } }, { once: true });
+      play();
+    }, 600);
+    return;
+  }
+  state.playing = false;
+  syncPlaying();
+  showError(true);
+});
+
+const seekEl = $('#seek');
+seekEl.addEventListener('input', () => {
+  seeking = true;
+  const d = media.duration;
+  seekEl.style.setProperty('--p', `${seekEl.value / 10}%`);
+  if (Number.isFinite(d)) $('#tCur').textContent = formatTime((seekEl.value / 1000) * d);
+});
+seekEl.addEventListener('change', () => {
+  const d = media.duration;
+  if (Number.isFinite(d)) media.currentTime = (seekEl.value / 1000) * d;
+  seeking = false;
+});
+
+/* ---------------------------------------------------------------- resume */
+
+function saveLast() {
+  const album = currentAlbum();
+  if (!album) return;
+  store.set(LS.last, JSON.stringify({
+    id: album.id,
+    track: state.finished ? 0 : state.trackIndex,
+    time: state.finished ? 0 : Math.floor(media.currentTime || 0),
+  }));
+}
+document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') saveLast(); });
+window.addEventListener('pagehide', saveLast);
+
+function loadLast() {
+  try {
+    const last = JSON.parse(store.get(LS.last) || 'null');
+    if (!last) return null;
+    const albumIndex = state.albums.findIndex((a) => a.id === last.id);
+    if (albumIndex < 0) return null;
+    const trackIndex = Number.isInteger(last.track) ? last.track : 0;
+    if (trackIndex < 0 || trackIndex >= state.albums[albumIndex].tracks.length) return null;
+    return { albumIndex, trackIndex, time: Math.max(0, Number(last.time) || 0) };
+  } catch { return null; }
+}
+
+/* ---------------------------------------------------------------- lock screen + headphones */
+
+function updateMediaSession() {
+  if (!('mediaSession' in navigator) || typeof MediaMetadata === 'undefined') return;
+  const album = currentAlbum();
+  if (!album) return;
+  const track = album.tracks[state.trackIndex];
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: track.title,
+    artist: album.artist || state.app.name,
+    album: album.title,
+    artwork: album.cover ? [{ src: abs(album.cover), sizes: '640x640', type: mimeFor(album.cover) }] : [],
+  });
+}
+
+function bindMediaSession() {
+  if (!('mediaSession' in navigator)) return;
+  const set = (action, fn) => { try { navigator.mediaSession.setActionHandler(action, fn); } catch { /* unsupported action */ } };
+  set('play', () => playAction());
+  set('pause', () => media.pause());
+  set('previoustrack', () => previous());
+  set('nexttrack', () => next());
+  set('seekto', (d) => {
+    if (typeof d.seekTime !== 'number') return;
+    if (d.fastSeek && 'fastSeek' in media) media.fastSeek(d.seekTime);
+    else media.currentTime = d.seekTime;
+  });
+}
+
+/* ---------------------------------------------------------------- offline media cache */
+// The album in play is copied into the Cache API, next track first, so it keeps playing
+// if the connection drops. Only the current album is kept; others are removed.
+
+const MEDIA_CACHE = 'pv-media';
+let warmToken = 0;
+
+async function warmCache(album, current) {
+  const token = ++warmToken;
+  if (!('caches' in window)) return;
+  if (navigator.connection && navigator.connection.saveData) return;
+  try {
+    const cache = await caches.open(MEDIA_CACHE);
+    const urls = album.tracks.map((t) => abs(t.src));
+    const keep = new Set(urls);
+    for (const req of await cache.keys()) if (!keep.has(req.url)) await cache.delete(req);
+    const order = [...urls.slice(current + 1), ...urls.slice(0, current + 1)];
+    for (const url of order) {
+      if (token !== warmToken) return;
+      if (await cache.match(url)) continue;
+      const res = await fetch(url);
+      if (res.status === 200) await cache.put(url, res);
+    }
+  } catch { /* offline or storage full: streaming still works */ }
+}
+
+/* ---------------------------------------------------------------- install + updates */
+
+let installPrompt = null;
+function setupInstall() {
+  const btn = $('#installBtn');
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    installPrompt = e;
+    btn.hidden = false;
+  });
+  btn.addEventListener('click', async () => {
+    if (!installPrompt) return;
+    installPrompt.prompt();
+    try { await installPrompt.userChoice; } catch { /* ignore */ }
+    installPrompt = null;
+    btn.hidden = true;
+  });
+  window.addEventListener('appinstalled', () => {
+    btn.hidden = true;
+    document.querySelector('.tip')?.remove();
+  });
+}
+
+function registerServiceWorker() {
+  if (!('serviceWorker' in navigator)) return;
+  const hadController = !!navigator.serviceWorker.controller;
+  window.addEventListener('load', async () => {
+    try {
+      const reg = await navigator.serviceWorker.register('sw.js');
+      const offer = (worker) => toast('A new version is ready.', {
+        timeout: 0,
+        action: { label: 'Reload', fn: () => worker.postMessage({ type: 'SKIP_WAITING' }) },
+      });
+      if (reg.waiting && navigator.serviceWorker.controller) offer(reg.waiting);
+      reg.addEventListener('updatefound', () => {
+        const worker = reg.installing;
+        if (!worker) return;
+        worker.addEventListener('statechange', () => {
+          if (worker.state === 'installed' && navigator.serviceWorker.controller) offer(worker);
+        });
+      });
+      let reloaded = false;
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (!hadController || reloaded) return;
+        reloaded = true;
+        location.reload();
+      });
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') reg.update().catch(() => {});
+      });
+    } catch (err) {
+      console.warn('Service worker not registered:', err);
+    }
+  });
+}
+
+/* ---------------------------------------------------------------- wiring + start */
+
+function wire() {
+  $('#brand').addEventListener('click', (e) => { e.preventDefault(); goHome(); });
+  $('#backBtn').addEventListener('click', goHome);
+  $('#playBtn').addEventListener('click', () => (media.paused ? playAction() : media.pause()));
+  $('#prevBtn').addEventListener('click', previous);
+  $('#nextBtn').addEventListener('click', next);
+  $('#retryBtn').addEventListener('click', () => {
+    state.retried = false;
+    showError(false);
+    media.load();
+    play();
+  });
+  document.querySelectorAll('.seg button').forEach((b) => b.addEventListener('click', () => {
+    state.endMode = b.dataset.mode;
+    store.set(LS.endMode, state.endMode);
+    syncEndMode();
+  }));
+  $('#lyricsBtn').addEventListener('click', () => {
+    state.lyricsOpen = !state.lyricsOpen;
+    renderPlayer();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || state.albumIndex < 0) return;
+    const t = e.target;
+    if (t instanceof Element && t.closest('input, textarea, select, [contenteditable]')) return;
+    if (e.code === 'Space' && !(t instanceof Element && t.closest('button, a'))) {
+      e.preventDefault();
+      if (media.paused) playAction(); else media.pause();
+    } else if (e.key === 'ArrowRight') next();
+    else if (e.key === 'ArrowLeft') previous();
+  });
+}
+
+async function init() {
+  registerServiceWorker();
+  setupInstall();
+  bindMediaSession();
+  wire();
+
+  let raw;
+  try {
+    const res = await fetch('catalog.json', { cache: 'no-cache' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    raw = await res.json();
+  } catch (err) {
+    console.error('catalog.json failed to load:', err);
+    showStatus("The album list didn't load. Check your connection and reload. If you edited catalog.json, check it for a missing comma or quote.");
+    return;
+  }
+
+  const catalog = normalizeCatalog(raw);
+  catalog.warnings.forEach((w) => console.warn('[catalog]', w));
+  if (!catalog.albums.length) {
+    showStatus('catalog.json has no playable albums. Each album needs a title and at least one track with a title and a media file.');
+    return;
+  }
+
+  state.app = catalog.app;
+  state.albums = catalog.albums;
+  state.cards = catalog.cards;
+  $('#brand').textContent = state.app.name;
+  document.title = state.app.name;
+  const savedMode = store.get(LS.endMode);
+  state.endMode = savedMode === 'pause' || savedMode === 'repeat' ? savedMode : catalog.app.defaultEndMode;
+  state.resume = loadLast();
+
+  $('#status').hidden = true;
+  setView('home', { push: false });
+}
+
+init();

package/client-dir.js

@@ -0,0 +1,5 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/** Absolute path of this package: the static Pocket Videos app. */
+export const clientDir = path.dirname(fileURLToPath(import.meta.url));