@x12i/pocket-videos 0.0.0-stage → 1.1.0

package/app.js

@@ -0,0 +1,959 @@
+// Pocket Videos. One media element plays a playlist, track after track.
+import {
+  featuredIndex, dailyCardIndex, formatTime, normalizeCatalog, lowerFirst,
+  emptyMarks, applyMark, trackMarkKey, playlistVisible, visibleTrackIndexes,
+  stepVisible, likedQueue, stepQueue,
+} from './logic.js';
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const media = $('#media');
+
+const LS = { endMode: 'pv.endMode', last: 'pv.last', iosTip: 'pv.iosTipDismissed', marks: 'pv.marks' };
+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: {}, playlists: [], cards: [],
+  playlistIndex: -1, trackIndex: 0,
+  playing: false,
+  finished: false,        // the playlist 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,
+  listPlaylistId: null,
+  queue: null,            // 'liked' while the cross-playlist liked list is what plays next
+  marks: emptyMarks(),
+  homeFilter: 'all',      // 'all' hides disliked; 'liked' shows only likes
+  trackFilter: 'all',
+  showDislikedHome: false,
+  showDislikedTracks: false,
+  lyricsOpen: false,
+};
+
+const term = (key) => (state.app.terms && state.app.terms[key]) || key;
+const termLower = (key) => lowerFirst(term(key));
+
+/* ---------------------------------------------------------------- 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"/>',
+  back: '<path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>',
+};
+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 currentPlaylist = () => state.playlists[state.playlistIndex] || 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(playlist, cls = '') {
+  const fallback = () => h('div', { class: `cover-fallback ${cls}`.trim(), 'aria-hidden': 'true', text: playlist.title.slice(0, 1) });
+  if (!playlist.cover) return fallback();
+  const img = h('img', { src: playlist.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;
+}
+
+function applyTerms() {
+  $('#home').setAttribute('aria-label', term('playlists'));
+  $('#backLabel').textContent = state.queue === 'liked' ? 'Liked' : `All ${termLower('playlists')}`;
+  $('#sideTitle').textContent = state.queue === 'liked' ? 'Liked' : term('tracks');
+  $('#endLabel').textContent = `When the ${termLower('playlist')} ends`;
+  $('#errText').textContent = `This ${termLower('track')} won't load.`;
+  $('#prevBtn').setAttribute('aria-label', `Previous ${termLower('track')}`);
+  $('#nextBtn').setAttribute('aria-label', `Next ${termLower('track')}`);
+}
+
+/* ---------------------------------------------------------------- marks */
+
+function loadMarks() {
+  try {
+    const raw = JSON.parse(store.get(LS.marks) || 'null');
+    const marks = emptyMarks();
+    if (!raw || typeof raw !== 'object') return marks;
+    for (const scope of ['playlists', 'tracks']) {
+      const bag = raw[scope];
+      if (!bag || typeof bag !== 'object') continue;
+      for (const [k, v] of Object.entries(bag)) {
+        if (v === 'liked' || v === 'disliked') marks[scope][k] = v;
+      }
+    }
+    return marks;
+  } catch { return emptyMarks(); }
+}
+function saveMarks() { store.set(LS.marks, JSON.stringify(state.marks)); }
+function playlistMark(id) { return state.marks.playlists[id] || 'none'; }
+function trackMark(playlistId, src) { return state.marks.tracks[trackMarkKey(playlistId, src)] || 'none'; }
+
+function markButtons(scope, key) {
+  const mark = (state.marks[scope] && state.marks[scope][key]) || 'none';
+  const press = (action) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    state.marks = applyMark(state.marks, scope, key, action);
+    saveMarks();
+    refreshAfterMark();
+  };
+  return h('span', { class: 'marks' },
+    h('button', {
+      class: 'mark like', type: 'button',
+      'aria-pressed': String(mark === 'liked'),
+      'aria-label': mark === 'liked' ? 'Remove like' : 'Like',
+      onclick: press('like'),
+    }, 'Like'),
+    h('button', {
+      class: 'mark dislike', type: 'button',
+      'aria-pressed': String(mark === 'disliked'),
+      'aria-label': mark === 'disliked' ? 'Remove dislike' : 'Dislike',
+      onclick: press('dislike'),
+    }, 'Dislike'));
+}
+
+function refreshAfterMark() {
+  if (state.view === 'home') renderHome();
+  else if (state.view === 'liked') renderLiked();
+  else if (state.view === 'player') renderPlayer();
+  renderMini();
+}
+
+function trackIndexes(playlist, { showDisliked }) {
+  return visibleTrackIndexes(playlist.tracks, (_i, t) => trackMark(playlist.id, t.src), {
+    filter: state.trackFilter,
+    showDisliked,
+  });
+}
+function playableIndexes(playlist) {
+  return trackIndexes(playlist, { showDisliked: false });
+}
+function firstOpenIndex(playlist) {
+  const vis = visibleTrackIndexes(playlist.tracks, (_i, t) => trackMark(playlist.id, t.src), { filter: 'all' });
+  return vis.length ? vis[0] : -1;
+}
+function nothingHere() { return `Nothing left to play in this ${termLower('playlist')}.`; }
+function nothingLiked() { return `No liked ${termLower('tracks')} to play.`; }
+
+function filterBar(filter, showDisliked, setFilter, setShow) {
+  return h('div', { class: 'filters' },
+    h('div', { class: 'seg', role: 'group', 'aria-label': 'Filter' },
+      h('button', { type: 'button', 'aria-pressed': String(filter === 'all'), onclick: () => setFilter('all') }, 'All'),
+      h('button', { type: 'button', 'aria-pressed': String(filter === 'liked'), onclick: () => setFilter('liked') }, 'Liked')),
+    filter === 'all' ? h('button', {
+      class: 'linkbtn show-disliked', type: 'button',
+      'aria-pressed': String(showDisliked),
+      onclick: () => setShow(!showDisliked),
+    }, showDisliked ? 'Hide disliked' : 'Show disliked') : null);
+}
+
+/* ---------------------------------------------------------------- views */
+
+let navDepth = 0;
+
+function setView(view, { push = true } = {}) {
+  const was = state.view;
+  state.view = view;
+  $('#home').hidden = view !== 'home';
+  $('#liked').hidden = view !== 'liked';
+  $('#player').hidden = view !== 'player';
+  if (view === 'home') {
+    if (state.app.name) document.title = state.app.name;
+    renderHome();
+  } else if (view === 'liked') {
+    document.title = `Liked · ${state.app.name || 'Pocket Videos'}`;
+    renderLiked();
+  }
+  if (push && was !== view && (view === 'player' || view === 'liked')) {
+    navDepth += 1;
+    history.pushState({ v: view, depth: navDepth }, '');
+  }
+  if (!push) navDepth = (history.state && history.state.depth) || 0;
+  renderMini();
+  if (was !== view) window.scrollTo(0, 0);
+}
+
+window.addEventListener('popstate', () => {
+  navDepth = (history.state && history.state.depth) || 0;
+  const v = history.state && history.state.v;
+  if (v === 'player' || v === 'liked') setView(v, { push: false });
+  else setView('home', { push: false });
+});
+
+function backOne() {
+  if (navDepth > 0) history.back();
+  else setView('home', { push: false });
+}
+function backHome() {
+  if (navDepth > 0) history.go(-navDepth);
+  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 countLabel(n, singular, plural) {
+  return `${n} ${n === 1 ? singular : plural}`;
+}
+
+function renderHome() {
+  applyTerms();
+  const home = $('#home');
+  const now = new Date();
+  const fi = featuredIndex(state.app.featuredStartDate, now, state.playlists.length);
+  const feat = state.playlists[fi];
+  const metaLine = [
+    `${term('playlist')} of the week`,
+    feat.artist,
+    feat.year,
+    countLabel(feat.tracks.length, termLower('track'), termLower('tracks')),
+  ].filter(Boolean).join(' · ');
+  const play = () => startPlaylist(fi, firstOpenIndex(feat));
+
+  const resume = state.playlistIndex < 0 ? state.resume : null;
+  const resumeBtn = resume
+    ? h('button', {
+      class: 'btn quiet', type: 'button',
+      onclick: () => startPlaylist(resume.playlistIndex, resume.trackIndex, { startAt: resume.time }),
+    }, `Continue: ${state.playlists[resume.playlistIndex].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 ${termLower('playlist')}`),
+          resumeBtn,
+          markButtons('playlists', feat.id)))),
+  ];
+
+  if (state.cards.length) {
+    const card = state.cards[dailyCardIndex(now, state.cards.length)];
+    const ai = card.playlist ? state.playlists.findIndex((a) => a.id === card.playlist) : -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: () => startPlaylist(ai, firstOpenIndex(state.playlists[ai])) }, `Play ${state.playlists[ai].title}`) : null));
+  }
+
+  const shown = state.playlists
+    .map((p, i) => ({ p, i }))
+    .filter(({ p }) => playlistVisible(playlistMark(p.id), { filter: state.homeFilter, showDisliked: state.showDislikedHome }));
+  const empty = state.homeFilter === 'liked'
+    ? `No liked ${termLower('playlists')}.`
+    : `Every ${termLower('playlist')} is hidden. Show disliked to bring one back.`;
+
+  nodes.push(
+    h('h2', { class: 'h2', text: term('playlists') }),
+    filterBar(state.homeFilter, state.showDislikedHome,
+      (f) => { state.homeFilter = f; renderHome(); },
+      (s) => { state.showDislikedHome = s; renderHome(); }),
+    shown.length
+      ? h('ul', { class: 'grid' }, shown.map(({ p, i }) => {
+        const locked = p.access === 'locked';
+        const mark = playlistMark(p.id);
+        return h('li', {},
+          h('div', { class: `album${locked ? ' locked' : ''}${mark === 'disliked' ? ' is-disliked' : ''}` },
+            h('button', {
+              class: 'album-open', type: 'button',
+              'aria-label': `${locked ? 'Locked. ' : 'Play '}${p.title}`,
+              'aria-current': i === state.playlistIndex ? 'true' : null,
+              onclick: () => startPlaylist(i, firstOpenIndex(p)),
+            },
+            h('span', { class: 'cover' }, coverEl(p), locked ? h('span', { class: 'badge', text: 'Locked' }) : null),
+            h('span', { class: 't', text: p.title }),
+            h('span', { class: 'y', text: [p.artist, p.year].filter(Boolean).join(' · ') })),
+            markButtons('playlists', p.id)));
+      }))
+      : h('p', { class: 'empty', text: empty }),
+  );
+
+  home.replaceChildren(...nodes.filter(Boolean));
+}
+
+/* ---------------------------------------------------------------- liked, across playlists */
+
+function renderLiked() {
+  applyTerms();
+  const items = likedQueue(state.playlists, (id, src) => trackMark(id, src));
+  const rows = items.map((item, n) => {
+    const playlist = state.playlists[item.playlistIndex];
+    const track = playlist.tracks[item.trackIndex];
+    const current = state.playlistIndex === item.playlistIndex && state.trackIndex === item.trackIndex;
+    return h('li', { class: 'track-row' },
+      h('button', {
+        class: 'track', type: 'button',
+        'aria-current': current ? 'true' : null,
+        onclick: () => startPlaylist(item.playlistIndex, item.trackIndex, { queue: 'liked' }),
+      },
+      h('span', { class: 'n', text: String(n + 1) }),
+      h('span', { class: 'who' },
+        h('span', { text: track.title }),
+        h('span', { class: 'st', text: playlist.title }))),
+      markButtons('tracks', trackMarkKey(playlist.id, track.src)));
+  });
+  $('#liked').replaceChildren(
+    h('button', { class: 'back', type: 'button', onclick: backOne }, svg(PATH.back, 22), 'Home'),
+    h('h1', { text: 'Liked' }),
+    h('p', { class: 'meta', text: items.length
+      ? countLabel(items.length, termLower('track'), termLower('tracks'))
+      : `No liked ${termLower('tracks')} yet.` }),
+    items.length ? h('ol', { class: 'tracklist' }, rows) : null,
+  );
+}
+
+/* ---------------------------------------------------------------- mini player */
+
+function renderMini() {
+  const mini = $('#mini');
+  const playlist = currentPlaylist();
+  if (!playlist || state.view === 'player') { mini.hidden = true; return; }
+  const track = playlist.tracks[state.trackIndex];
+  mini.hidden = false;
+  mini.replaceChildren(
+    h('button', { class: 'open', type: 'button', 'aria-label': 'Open the player', onclick: () => setView('player') },
+      coverEl(playlist, 'mini-cover'),
+      h('span', { class: 'txt' },
+        h('span', { class: 'tt', text: state.finished ? `${playlist.title} finished` : track.title }),
+        h('span', { class: 'st', text: state.finished ? 'Tap to choose what is next' : playlist.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 openTrack(playlist, index) {
+  const playlistIndex = state.playlists.indexOf(playlist);
+  if (state.queue === 'liked') {
+    if (state.finished) startPlaylist(playlistIndex, index, { queue: 'liked' });
+    else {
+      state.playlistIndex = playlistIndex;
+      setTrack(index);
+      play();
+    }
+    return;
+  }
+  jumpTo(index);
+}
+
+function trackRow(playlist, index, { subtitle } = {}) {
+  const track = playlist.tracks[index];
+  const mark = trackMark(playlist.id, track.src);
+  return h('li', { class: `track-row${mark === 'disliked' ? ' is-disliked' : ''}` },
+    h('button', {
+      class: 'track', type: 'button',
+      'aria-current': index === state.trackIndex && playlist === currentPlaylist() && !state.finished ? 'true' : null,
+      onclick: () => openTrack(playlist, index),
+    },
+    h('span', { class: 'n', text: String(index + 1) }),
+    subtitle
+      ? h('span', { class: 'who' }, h('span', { text: track.title }), h('span', { class: 'st', text: subtitle }))
+      : h('span', { text: track.title })),
+    markButtons('tracks', trackMarkKey(playlist.id, track.src)));
+}
+
+function renderPlayer() {
+  const playlist = currentPlaylist();
+  if (!playlist) return;
+  applyTerms();
+  const track = playlist.tracks[state.trackIndex];
+  applyKind(track.kind);
+
+  const cover = $('#pCover');
+  const coverSrc = playlist.cover || 'icons/icon-512.png';
+  if (cover.getAttribute('src') !== coverSrc) cover.setAttribute('src', coverSrc);
+  $('#pTrack').textContent = track.title;
+  $('#pAlbum').textContent = [playlist.title, playlist.artist].filter(Boolean).join(' · ');
+  $('#nowMarks').replaceChildren(markButtons('tracks', trackMarkKey(playlist.id, track.src)));
+  document.title = `${track.title} · ${playlist.title} · ${state.app.name}`;
+
+  $('#deck').hidden = state.finished;
+  $('#upnext').hidden = !state.finished;
+  if (state.finished) renderUpNext();
+
+  if (state.listPlaylistId !== playlist.id) {
+    state.listPlaylistId = playlist.id;
+    state.lyricsOpen = false;
+  }
+  $('#albumLinks').replaceChildren(...playlist.links.map((l) => h('li', {},
+    h('a', { href: l.url, target: '_blank', rel: 'noopener noreferrer', text: l.label }))));
+
+  let rows;
+  if (state.queue === 'liked') {
+    $('#listTools').replaceChildren();
+    $('#sideTitle').textContent = 'Liked';
+    rows = likedQueue(state.playlists, (id, src) => trackMark(id, src)).map((item) => {
+      const owner = state.playlists[item.playlistIndex];
+      return trackRow(owner, item.trackIndex, { subtitle: owner.title });
+    });
+  } else {
+    $('#sideTitle').textContent = term('tracks');
+    $('#listTools').replaceChildren(filterBar(state.trackFilter, state.showDislikedTracks,
+      (f) => { state.trackFilter = f; renderPlayer(); },
+      (s) => { state.showDislikedTracks = s; renderPlayer(); }));
+    const indexes = trackIndexes(playlist, { showDisliked: state.showDislikedTracks });
+    rows = indexes.map((i) => trackRow(playlist, i));
+  }
+  const emptyList = state.queue === 'liked'
+    ? `No liked ${termLower('tracks')} yet.`
+    : state.trackFilter === 'liked'
+      ? `No liked ${termLower('tracks')} in this ${termLower('playlist')}.`
+      : `Every ${termLower('track')} here is disliked.`;
+  $('#tracklist').replaceChildren(...(rows.length ? rows : [h('li', { class: 'empty', text: emptyList })]));
+
+  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 suggestionIndexes(current) {
+  const out = [];
+  const count = state.playlists.length;
+  for (let step = 1; step < count && out.length < 3; step++) {
+    const i = (current + step) % count;
+    if (!playlistVisible(playlistMark(state.playlists[i].id), { filter: 'all', showDisliked: state.showDislikedHome })) continue;
+    out.push(i);
+  }
+  return out;
+}
+
+function renderUpNext() {
+  const playlist = currentPlaylist();
+  const picks = suggestionIndexes(state.playlistIndex);
+  const liked = state.queue === 'liked';
+  const box = $('#upnext');
+  box.replaceChildren(
+    h('h3', { tabindex: '-1', text: picks.length ? 'Up next' : (liked ? 'That was everything you liked' : `That was the ${termLower('playlist')}`) }),
+    h('p', { class: 'done', text: liked ? 'Those were the liked ones.' : `${playlist.title} has finished.` }),
+    picks.length ? h('ul', {}, picks.map((i) => {
+      const a = state.playlists[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: () => startPlaylist(i, firstOpenIndex(a)),
+        },
+        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: () => {
+        if (liked) {
+          const items = likedQueue(state.playlists, (id, src) => trackMark(id, src));
+          if (!items.length) { toast(nothingLiked()); return; }
+          startPlaylist(items[0].playlistIndex, items[0].trackIndex, { queue: 'liked' });
+          return;
+        }
+        startPlaylist(state.playlistIndex, firstOpenIndex(playlist));
+      },
+    }, liked ? `Play liked ${termLower('tracks')} again` : `Play ${playlist.title} again`),
+  );
+}
+
+function syncEndMode() {
+  document.querySelectorAll('.endmode .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);
+  $('.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 startPlaylist(playlistIndex, trackIndex = 0, { startAt = 0, queue = null } = {}) {
+  const playlist = state.playlists[playlistIndex];
+  if (!playlist) return;
+  if (playlist.access === 'locked') { toast(`${playlist.title} is locked for now.`); return; }
+  if (trackIndex < 0) { toast(queue === 'liked' ? nothingLiked() : nothingHere()); return; }
+  state.queue = queue;
+  if (queue !== 'liked') {
+    state.trackFilter = 'all';
+    state.showDislikedTracks = false;
+  }
+  state.playlistIndex = playlistIndex;
+  setTrack(trackIndex, { startAt });
+  setView('player');
+  await play();
+}
+
+function setTrack(index, { startAt = 0 } = {}) {
+  const playlist = currentPlaylist();
+  state.trackIndex = index;
+  state.finished = false;
+  state.retried = false;
+  showError(false);
+  const track = playlist.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(playlist, 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) { play(); return; }
+  if (state.queue === 'liked') {
+    const items = likedQueue(state.playlists, (id, src) => trackMark(id, src));
+    if (!items.length) { toast(nothingLiked()); return; }
+    state.playlistIndex = items[0].playlistIndex;
+    setTrack(items[0].trackIndex);
+    play();
+    return;
+  }
+  const playlist = currentPlaylist();
+  const vis = playlist ? playableIndexes(playlist) : [];
+  if (!vis.length) { toast(nothingHere()); return; }
+  setTrack(vis[0]);
+  play();
+}
+
+function jumpTo(index) {
+  if (state.finished) { startPlaylist(state.playlistIndex, index, { queue: state.queue }); return; }
+  setTrack(index);
+  play();
+}
+
+function follow(action, { ended = false } = {}) {
+  if (action.type === 'empty') { toast(state.queue === 'liked' ? nothingLiked() : nothingHere()); return; }
+  if (action.type === 'end') {
+    if (!ended) media.pause();
+    finishPlaylist();
+    return;
+  }
+  if (action.type === 'edge') { media.currentTime = 0; return; }
+  if (action.item) state.playlistIndex = action.item.playlistIndex;
+  setTrack(action.item ? action.item.trackIndex : action.index);
+  play();
+}
+
+function next() {
+  if (state.queue === 'liked') {
+    follow(stepQueue(likedQueue(state.playlists, (id, src) => trackMark(id, src)), { playlistIndex: state.playlistIndex, trackIndex: state.trackIndex }, 1, state.endMode));
+    return;
+  }
+  const playlist = currentPlaylist();
+  if (!playlist) return;
+  follow(stepVisible(state.trackIndex, playableIndexes(playlist), 1, state.endMode));
+}
+
+function previous() {
+  if (!currentPlaylist()) return;
+  if (media.currentTime > 3) { media.currentTime = 0; return; }
+  if (state.queue === 'liked') {
+    follow(stepQueue(likedQueue(state.playlists, (id, src) => trackMark(id, src)), { playlistIndex: state.playlistIndex, trackIndex: state.trackIndex }, -1, state.endMode));
+    return;
+  }
+  follow(stepVisible(state.trackIndex, playableIndexes(currentPlaylist()), -1, state.endMode));
+}
+
+function onEnded() {
+  if (state.queue === 'liked') {
+    follow(stepQueue(likedQueue(state.playlists, (id, src) => trackMark(id, src)), { playlistIndex: state.playlistIndex, trackIndex: state.trackIndex }, 1, state.endMode), { ended: true });
+    return;
+  }
+  const playlist = currentPlaylist();
+  if (!playlist) return;
+  follow(stepVisible(state.trackIndex, playableIndexes(playlist), 1, state.endMode), { ended: true });
+}
+
+function finishPlaylist() {
+  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;
+  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 || !currentPlaylist()) 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 playlist = currentPlaylist();
+  if (!playlist) return;
+  store.set(LS.last, JSON.stringify({
+    id: playlist.id,
+    track: state.finished ? 0 : state.trackIndex,
+    time: state.finished ? 0 : Math.floor(media.currentTime || 0),
+    queue: state.queue,
+  }));
+}
+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 || last.queue === 'liked') return null;
+    const playlistIndex = state.playlists.findIndex((a) => a.id === last.id);
+    if (playlistIndex < 0) return null;
+    const trackIndex = Number.isInteger(last.track) ? last.track : 0;
+    if (trackIndex < 0 || trackIndex >= state.playlists[playlistIndex].tracks.length) return null;
+    return { playlistIndex, 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 playlist = currentPlaylist();
+  if (!playlist) return;
+  const track = playlist.tracks[state.trackIndex];
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: track.title,
+    artist: playlist.artist || state.app.name,
+    album: playlist.title,
+    artwork: playlist.cover ? [{ src: abs(playlist.cover), sizes: '640x640', type: mimeFor(playlist.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 playlist in play is copied into the Cache API, next track first, so it keeps playing
+// if the connection drops. Only the current playlist is kept; others are removed.
+
+const MEDIA_CACHE = 'pv-media';
+let warmToken = 0;
+
+async function warmCache(playlist, 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 = playlist.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(); if (state.view !== 'home') backHome(); });
+  $('#likedBtn').addEventListener('click', () => setView('liked'));
+  $('#backBtn').addEventListener('click', backOne);
+  $('#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('.endmode .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.playlistIndex < 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();
+  state.marks = loadMarks();
+
+  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 playlist 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));
+  state.app = catalog.app;
+  if (!catalog.playlists.length) {
+    showStatus(`catalog.json has no playable ${termLower('playlists')}. Each ${termLower('playlist')} needs a title and at least one ${termLower('track')} with a title and a media file.`);
+    return;
+  }
+
+  state.playlists = catalog.playlists;
+  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();