@x12i/pocket-videos 1.0.0 → 1.1.0

package/app.js

@@ -1,29 +1,41 @@
-// Pocket Videos. One media element plays the whole album, track after track.
+// Pocket Videos. One media element plays a playlist, track after track.
 import {
-  featuredIndex, dailyCardIndex, upNextIndexes, afterTrack, formatTime, normalizeCatalog,
+  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' };
+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: {}, albums: [], cards: [],
-  albumIndex: -1, trackIndex: 0,
+  app: {}, playlists: [], cards: [],
+  playlistIndex: -1, trackIndex: 0,
   playing: false,
-  finished: false,        // the album ended in Pause mode, so Up next is showing
+  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,
-  listAlbumId: null,      // which album the track list was last built for
+  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) {
@@ -46,6 +58,7 @@ function h(tag, props, ...kids) {
 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');
@@ -55,14 +68,14 @@ function svg(path, size = 24) {
 
 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 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(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 });
+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;
 }
@@ -85,35 +98,135 @@ function showStatus(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 pushedPlayer = false;
+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 (view === 'player' && was !== 'player' && push) {
-    history.pushState({ v: 'player' }, '');
-    pushedPlayer = true;
+  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', () => {
-  pushedPlayer = false;
-  if (state.view === 'player') setView('home', { push: false });
+  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 goHome() {
-  if (state.view !== 'player') return;
-  if (pushedPlayer) history.back();
+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 });
 }
 
@@ -134,21 +247,30 @@ function installTip() {
     }, '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.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 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: () => startAlbum(resume.albumIndex, resume.trackIndex, { startAt: resume.time }),
-    }, `Continue: ${state.albums[resume.albumIndex].tracks[resume.trackIndex].title}`)
+      onclick: () => startPlaylist(resume.playlistIndex, resume.trackIndex, { startAt: resume.time }),
+    }, `Continue: ${state.playlists[resume.playlistIndex].tracks[resume.trackIndex].title}`)
     : null;
 
   const nodes = [
@@ -160,54 +282,101 @@ function renderHome() {
         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))),
+          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.album ? state.albums.findIndex((a) => a.id === card.album) : -1;
-    nodes.push(h('section', { class: 'today', 'aria-label': "Today" },
+    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: () => startAlbum(ai) }, `Play ${state.albums[ai].title}`) : null));
+      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: '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(' · ') })));
-    })),
+    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 album = currentAlbum();
-  if (!album || state.view !== 'home') { mini.hidden = true; return; }
-  const track = album.tracks[state.trackIndex];
+  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(album, 'mini-cover'),
+      coverEl(playlist, '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('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()),
@@ -224,37 +393,84 @@ function applyKind(kind) {
   $('#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 album = currentAlbum();
-  if (!album) return;
-  const track = album.tracks[state.trackIndex];
+  const playlist = currentPlaylist();
+  if (!playlist) return;
+  applyTerms();
+  const track = playlist.tracks[state.trackIndex];
   applyKind(track.kind);
 
   const cover = $('#pCover');
-  const coverSrc = album.cover || 'icons/icon-512.png';
+  const coverSrc = playlist.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}`;
+  $('#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.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 }))));
+  if (state.listPlaylistId !== playlist.id) {
+    state.listPlaylistId = playlist.id;
     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');
-  });
+  $('#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;
@@ -268,32 +484,55 @@ function renderPlayer() {
   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 album = currentAlbum();
-  const picks = upNextIndexes(state.albumIndex, state.albums.length, 3);
+  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' : 'That was the album' }),
-    h('p', { class: 'done', text: `${album.title} has finished.` }),
+    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.albums[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: () => startAlbum(i),
+          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: () => startAlbum(state.albumIndex, 0) }, `Play ${album.title} again`),
+    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('.seg button').forEach((b) => {
+  document.querySelectorAll('.endmode .seg button').forEach((b) => {
     b.setAttribute('aria-pressed', String(b.dataset.mode === state.endMode));
   });
 }
@@ -301,7 +540,6 @@ function syncEndMode() {
 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');
@@ -315,23 +553,29 @@ function showError(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;
+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 album = currentAlbum();
+  const playlist = currentPlaylist();
   state.trackIndex = index;
   state.finished = false;
   state.retried = false;
   showError(false);
-  const track = album.tracks[index];
+  const track = playlist.tracks[index];
   applyKind(track.kind);
   media.src = track.src;
   if (startAt > 0) {
@@ -341,7 +585,7 @@ function setTrack(index, { startAt = 0 } = {}) {
   updateMediaSession();
   renderPlayer();
   saveLast();
-  warmCache(album, index);
+  warmCache(playlist, index);
 }
 
 async function play() {
@@ -358,42 +602,72 @@ async function play() {
 }
 
 function playAction() {
-  if (state.finished) startAlbum(state.albumIndex, 0);
-  else play();
+  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) { startAlbum(state.albumIndex, index); return; }
+  if (state.finished) { startPlaylist(state.playlistIndex, index, { queue: state.queue }); 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);
+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 (!currentAlbum()) return;
-  if (media.currentTime > 3 || state.trackIndex === 0) { media.currentTime = 0; return; }
-  setTrack(state.trackIndex - 1);
-  play();
+  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() {
-  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();
+  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 finishAlbum() {
+function finishPlaylist() {
   state.finished = true;
   state.playing = false;
   saveLast();
@@ -420,7 +694,7 @@ function resetSeek() {
 
 media.addEventListener('play', () => { state.playing = true; syncPlaying(); });
 media.addEventListener('pause', () => {
-  if (media.ended) return;   // the browser fires pause just before ended; ignore it
+  if (media.ended) return;
   state.playing = false; syncPlaying(); saveLast();
 });
 media.addEventListener('ended', onEnded);
@@ -441,7 +715,7 @@ media.addEventListener('timeupdate', () => {
   }
 });
 media.addEventListener('error', () => {
-  if (!media.error || !currentAlbum()) return;
+  if (!media.error || !currentPlaylist()) return;
   if (!state.retried) {
     state.retried = true;
     const at = media.currentTime || 0;
@@ -473,12 +747,13 @@ seekEl.addEventListener('change', () => {
 /* ---------------------------------------------------------------- resume */
 
 function saveLast() {
-  const album = currentAlbum();
-  if (!album) return;
+  const playlist = currentPlaylist();
+  if (!playlist) return;
   store.set(LS.last, JSON.stringify({
-    id: album.id,
+    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(); });
@@ -487,12 +762,12 @@ 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;
+    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.albums[albumIndex].tracks.length) return null;
-    return { albumIndex, trackIndex, time: Math.max(0, Number(last.time) || 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; }
 }
 
@@ -500,14 +775,14 @@ function loadLast() {
 
 function updateMediaSession() {
   if (!('mediaSession' in navigator) || typeof MediaMetadata === 'undefined') return;
-  const album = currentAlbum();
-  if (!album) return;
-  const track = album.tracks[state.trackIndex];
+  const playlist = currentPlaylist();
+  if (!playlist) return;
+  const track = playlist.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) }] : [],
+    artist: playlist.artist || state.app.name,
+    album: playlist.title,
+    artwork: playlist.cover ? [{ src: abs(playlist.cover), sizes: '640x640', type: mimeFor(playlist.cover) }] : [],
   });
 }
 
@@ -526,19 +801,19 @@ function bindMediaSession() {
 }
 
 /* ---------------------------------------------------------------- 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.
+// 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(album, current) {
+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 = album.tracks.map((t) => abs(t.src));
+    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)];
@@ -610,8 +885,9 @@ function registerServiceWorker() {
 /* ---------------------------------------------------------------- wiring + start */
 
 function wire() {
-  $('#brand').addEventListener('click', (e) => { e.preventDefault(); goHome(); });
-  $('#backBtn').addEventListener('click', goHome);
+  $('#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);
@@ -621,7 +897,7 @@ function wire() {
     media.load();
     play();
   });
-  document.querySelectorAll('.seg button').forEach((b) => b.addEventListener('click', () => {
+  document.querySelectorAll('.endmode .seg button').forEach((b) => b.addEventListener('click', () => {
     state.endMode = b.dataset.mode;
     store.set(LS.endMode, state.endMode);
     syncEndMode();
@@ -631,7 +907,7 @@ function wire() {
     renderPlayer();
   });
   document.addEventListener('keydown', (e) => {
-    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey || state.albumIndex < 0) return;
+    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'))) {
@@ -647,6 +923,7 @@ async function init() {
   setupInstall();
   bindMediaSession();
   wire();
+  state.marks = loadMarks();
 
   let raw;
   try {
@@ -655,19 +932,19 @@ async function init() {
     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.");
+    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));
-  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.');
+  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.app = catalog.app;
-  state.albums = catalog.albums;
+  state.playlists = catalog.playlists;
   state.cards = catalog.cards;
   $('#brand').textContent = state.app.name;
   document.title = state.app.name;

package/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Pocket Videos</title>
-  <meta name="description" content="Pick an album and let it play, start to finish.">
+  <meta name="description" content="Pick a playlist and let it play, start to finish.">
   <meta name="theme-color" content="#d6dadc" media="(prefers-color-scheme: light)">
   <meta name="theme-color" content="#141a1c" media="(prefers-color-scheme: dark)">
   <link rel="manifest" href="manifest.webmanifest">
@@ -24,18 +24,23 @@
   <div class="app">
     <header class="bar">
       <a class="brand" href="./" id="brand">Pocket Videos</a>
-      <button class="btn small" id="installBtn" type="button" hidden>Install app</button>
+      <div class="bar-actions">
+        <button class="btn small" id="likedBtn" type="button">Liked</button>
+        <button class="btn small" id="installBtn" type="button" hidden>Install app</button>
+      </div>
     </header>
 
     <main id="main">
       <p class="status" id="status" role="status">Loading the catalog…</p>
 
-      <section id="home" class="view" aria-label="Albums" hidden></section>
+      <section id="home" class="view" aria-label="Playlists" hidden></section>
+
+      <section id="liked" class="view" aria-label="Liked" hidden></section>
 
       <section id="player" class="view player" aria-label="Player" hidden>
         <button class="back" id="backBtn" type="button">
           <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          <span>All albums</span>
+          <span id="backLabel">All playlists</span>
         </button>
 
         <div class="player-grid">
@@ -46,10 +51,13 @@
             </div>
 
             <div class="now">
-              <h2 id="pTrack" class="now-title"></h2>
+              <div class="now-head">
+                <h2 id="pTrack" class="now-title"></h2>
+                <div id="nowMarks" class="marks"></div>
+              </div>
               <p id="pAlbum" class="now-album"></p>
               <p id="pErr" class="err" role="alert" hidden>
-                <span>This track won't load.</span>
+                <span id="errText">This track won't load.</span>
                 <button type="button" id="retryBtn" class="linkbtn">Try again</button>
               </p>
 
@@ -74,7 +82,7 @@
                 </div>
 
                 <div class="endmode" role="group" aria-labelledby="endLabel">
-                  <span class="endmode-label" id="endLabel">When the album ends</span>
+                  <span class="endmode-label" id="endLabel">When the playlist ends</span>
                   <div class="seg">
                     <button type="button" data-mode="repeat" aria-pressed="true">Repeat</button>
                     <button type="button" data-mode="pause" aria-pressed="false">Pause</button>
@@ -87,7 +95,8 @@
           </div>
 
           <aside class="side">
-            <h3 class="side-title">Tracks</h3>
+            <div id="listTools"></div>
+            <h3 class="side-title" id="sideTitle">Tracks</h3>
             <ol id="tracklist" class="tracklist"></ol>
 
             <div class="lyrics-wrap" id="lyricsWrap" hidden>

package/logic.js

@@ -20,7 +20,7 @@ export function parseISODate(str) {
   return real ? date : null;
 }
 
-/** Which album is "Album of the week". Rotates every 7 days counted from startISO. */
+/** Which playlist is featured. Rotates every 7 days counted from startISO. */
 export function featuredIndex(startISO, now, count) {
   if (count < 1) return -1;
   const start = parseISODate(startISO);
@@ -35,7 +35,7 @@ export function dailyCardIndex(now, count) {
   return mod(localDayNumber(now), count);
 }
 
-/** The next `n` albums after `current` in catalog order, wrapping, never including `current`. */
+/** The next `n` playlists after `current` in catalog order, wrapping, never including `current`. */
 export function upNextIndexes(current, count, n = 3) {
   const out = [];
   for (let step = 1; step < count && out.length < n; step++) out.push((current + step) % count);
@@ -58,7 +58,27 @@ export function formatTime(seconds) {
 }
 
 const text = (v) => (typeof v === 'string' ? v.trim() : '');
-const slug = (s) => text(s).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'album';
+const slug = (s) => text(s).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'playlist';
+
+export const DEFAULT_TERMS = {
+  playlist: 'Playlist',
+  playlists: 'Playlists',
+  track: 'Track',
+  tracks: 'Tracks',
+};
+
+/** First letter down, for words that sit in the middle of a sentence. */
+export function lowerFirst(word) {
+  const s = String(word || '');
+  return s ? s.charAt(0).toLowerCase() + s.slice(1) : s;
+}
+
+function normalizeTerms(raw) {
+  const src = raw && typeof raw === 'object' ? raw : {};
+  const terms = {};
+  for (const key of Object.keys(DEFAULT_TERMS)) terms[key] = text(src[key]) || DEFAULT_TERMS[key];
+  return terms;
+}
 const VIDEO_EXT = new Set(['mp4', 'webm', 'mov']);
 
 /** 'video' or 'audio'. An explicit kind wins; otherwise the file extension decides. */
@@ -71,14 +91,20 @@ export function mediaKind(src, explicit) {
 
 /**
  * Validate and tidy the raw catalog.json. Never throws on bad input:
- * bad albums are skipped and reported in `warnings`.
+ * bad playlists are skipped and reported in `warnings`.
+ * `playlists` is the list. `albums` is accepted when `playlists` is absent.
  */
 export function normalizeCatalog(raw) {
   const warnings = [];
-  const app = { name: 'Pocket Videos', defaultEndMode: 'repeat', featuredStartDate: DEFAULT_START, ...((raw && raw.app) || {}) };
-  app.name = text(app.name) || 'Pocket Videos';
+  const rawApp = (raw && raw.app) || {};
+  const app = {
+    name: text(rawApp.name) || 'Pocket Videos',
+    defaultEndMode: rawApp.defaultEndMode,
+    featuredStartDate: rawApp.featuredStartDate || DEFAULT_START,
+    terms: normalizeTerms(rawApp.terms),
+  };
   if (app.defaultEndMode !== 'repeat' && app.defaultEndMode !== 'pause') {
-    warnings.push(`app.defaultEndMode must be "repeat" or "pause"; using "repeat".`);
+    if (rawApp.defaultEndMode != null) warnings.push(`app.defaultEndMode must be "repeat" or "pause"; using "repeat".`);
     app.defaultEndMode = 'repeat';
   }
   if (!parseISODate(app.featuredStartDate)) {
@@ -86,11 +112,13 @@ export function normalizeCatalog(raw) {
     app.featuredStartDate = DEFAULT_START;
   }
 
-  const albums = [];
+  const playlists = [];
   const seen = new Set();
-  const list = Array.isArray(raw && raw.albums) ? raw.albums : [];
+  const usePlaylists = Array.isArray(raw && raw.playlists);
+  const list = usePlaylists ? raw.playlists : (Array.isArray(raw && raw.albums) ? raw.albums : []);
+  const listName = usePlaylists ? 'playlists' : 'albums';
   list.forEach((a, i) => {
-    const where = `albums[${i}]`;
+    const where = `${listName}[${i}]`;
     if (!a || !text(a.title)) { warnings.push(`${where}: no title, skipped.`); return; }
     const id = text(a.id) || slug(a.title);
     if (seen.has(id)) { warnings.push(`${where}: duplicate id "${id}", skipped.`); return; }
@@ -104,7 +132,7 @@ export function normalizeCatalog(raw) {
       .filter(Boolean);
     if (!tracks.length) { warnings.push(`${where} ("${text(a.title)}"): no tracks with a title and a media file, skipped.`); return; }
     seen.add(id);
-    albums.push({
+    playlists.push({
       id,
       title: text(a.title),
       artist: text(a.artist),
@@ -120,7 +148,125 @@ export function normalizeCatalog(raw) {
 
   const cards = (Array.isArray(raw && raw.dailyCards) ? raw.dailyCards : [])
     .filter((c) => c && text(c.hook) && text(c.pivot))
-    .map((c) => ({ hook: text(c.hook), pivot: text(c.pivot), album: text(c.album) }));
+    .map((c) => ({ hook: text(c.hook), pivot: text(c.pivot), playlist: text(c.playlist) || text(c.album) }));
+
+  return { app, playlists, cards, warnings };
+}
+
+/** 'liked' | 'disliked' | 'none'. Pressing the active one clears it; the other one switches. */
+export function toggleMark(current, action) {
+  const cur = current === 'liked' || current === 'disliked' ? current : 'none';
+  if (action === 'like') return cur === 'liked' ? 'none' : 'liked';
+  if (action === 'dislike') return cur === 'disliked' ? 'none' : 'disliked';
+  return cur;
+}
+
+export function emptyMarks() {
+  return { playlists: {}, tracks: {} };
+}
+
+export function trackMarkKey(playlistId, src) {
+  return `${playlistId}\n${src}`;
+}
+
+/** Return a new marks object. A cleared mark is removed. */
+export function applyMark(marks, scope, key, action) {
+  const next = {
+    playlists: { ...(marks && marks.playlists) },
+    tracks: { ...(marks && marks.tracks) },
+  };
+  const value = toggleMark(next[scope][key], action);
+  if (value === 'none') delete next[scope][key];
+  else next[scope][key] = value;
+  return next;
+}
+
+export function playlistVisible(mark, { filter = 'all', showDisliked = false } = {}) {
+  if (filter === 'liked') return mark === 'liked';
+  if (mark === 'disliked' && !showDisliked) return false;
+  return true;
+}
+
+/**
+ * Track indexes the filter shows.
+ * 'all' hides disliked unless showDisliked. 'liked' keeps only likes.
+ * markAt(index, track) returns 'liked', 'disliked', or anything else.
+ */
+export function visibleTrackIndexes(tracks, markAt, { filter = 'all', showDisliked = false } = {}) {
+  const out = [];
+  tracks.forEach((track, i) => {
+    const mark = markAt(i, track);
+    if (filter === 'liked') {
+      if (mark === 'liked') out.push(i);
+      return;
+    }
+    if (mark === 'disliked' && !showDisliked) return;
+    out.push(i);
+  });
+  return out;
+}
+
+/**
+ * Step along visible indexes. dir 1 moves forward, -1 backward.
+ * Forward off the end repeats the first visible track, or ends in pause mode.
+ * 'empty' means nothing is visible. 'edge' means there is no neighbor that way.
+ */
+export function stepVisible(currentIndex, visible, dir, endMode) {
+  if (!visible.length) return { type: 'empty' };
+  const pos = visible.indexOf(currentIndex);
+  if (dir === 1) {
+    if (pos >= 0 && pos < visible.length - 1) return { type: 'next', index: visible[pos + 1] };
+    if (pos < 0) {
+      const ahead = visible.find((i) => i > currentIndex);
+      if (ahead != null) return { type: 'next', index: ahead };
+    }
+    if (endMode === 'pause') return { type: 'end' };
+    return { type: 'repeat', index: visible[0] };
+  }
+  if (pos > 0) return { type: 'next', index: visible[pos - 1] };
+  if (pos < 0) {
+    let behind = -1;
+    for (const i of visible) if (i < currentIndex) behind = i;
+    if (behind >= 0) return { type: 'next', index: behind };
+  }
+  return { type: 'edge' };
+}
 
-  return { app, albums, cards, warnings };
+/** Liked tracks in catalog order. trackMark(playlistId, src) returns the mark. */
+export function likedQueue(playlists, trackMark) {
+  const items = [];
+  playlists.forEach((playlist, playlistIndex) => {
+    playlist.tracks.forEach((track, trackIndex) => {
+      if (trackMark(playlist.id, track.src) === 'liked') items.push({ playlistIndex, trackIndex });
+    });
+  });
+  return items;
+}
+
+/** Step through a liked queue. current is { playlistIndex, trackIndex } or null. */
+export function stepQueue(items, current, dir, endMode) {
+  if (!items.length) return { type: 'empty' };
+  const pos = current
+    ? items.findIndex((it) => it.playlistIndex === current.playlistIndex && it.trackIndex === current.trackIndex)
+    : -1;
+  const after = (it) => !current || it.playlistIndex > current.playlistIndex
+    || (it.playlistIndex === current.playlistIndex && it.trackIndex > current.trackIndex);
+  const before = (it) => current && (it.playlistIndex < current.playlistIndex
+    || (it.playlistIndex === current.playlistIndex && it.trackIndex < current.trackIndex));
+  if (dir === 1) {
+    if (pos >= 0 && pos < items.length - 1) return { type: 'next', item: items[pos + 1] };
+    if (pos < 0 && current) {
+      const ahead = items.find(after);
+      if (ahead) return { type: 'next', item: ahead };
+    }
+    if (endMode === 'pause') return { type: 'end' };
+    return { type: 'repeat', item: items[0] };
+  }
+  if (pos > 0) return { type: 'next', item: items[pos - 1] };
+  if (pos < 0 && current) {
+    let behind = null;
+    for (const it of items) if (before(it)) behind = it;
+    if (behind) return { type: 'next', item: behind };
+  }
+  return { type: 'edge' };
 }

package/manifest.webmanifest

@@ -2,7 +2,7 @@
   "id": "./",
   "name": "Pocket Videos",
   "short_name": "Pocket Videos",
-  "description": "Pick an album and let it play, start to finish.",
+  "description": "Pick a playlist and let it play, start to finish.",
   "start_url": "./",
   "scope": "./",
   "display": "standalone",

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@x12i/pocket-videos",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "UNLICENSED",
   "type": "module",
-  "description": "Pocket Videos: an installable web app that plays an album of audio and video, start to finish.",
+  "description": "Pocket Videos: an installable web app that plays a playlist of audio and video, start to finish.",
   "exports": {
     "./client-dir": "./client-dir.js",
     "./logic.js": "./logic.js"

package/styles.css

@@ -133,8 +133,10 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   min-height: 60px;
 }
+.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
 .brand {
   font-family: var(--display);
   font-weight: 650;
@@ -312,7 +314,9 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
 @media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
 @media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
 
-.album {
+.album { text-align: left; }
+.album.is-disliked .album-open { opacity: 0.55; }
+.album-open {
   display: block;
   width: 100%;
   padding: 0;
@@ -320,6 +324,7 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
   background: none;
   text-align: left;
 }
+.album .marks { margin-top: 8px; }
 .album .cover { position: relative; }
 .album img {
   width: 100%;
@@ -329,7 +334,7 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
   box-shadow: 0 14px 26px -16px rgba(28, 36, 39, 0.6);
   transition: transform 0.18s ease;
 }
-@media (hover: hover) { .album:hover img { transform: translateY(-3px); } }
+@media (hover: hover) { .album-open:hover img { transform: translateY(-3px); } }
 .album .t { display: block; margin-top: 12px; font-weight: 650; line-height: 1.25; }
 .album .y { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }
 .album .badge {
@@ -343,7 +348,7 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
   background: var(--marble);
   color: var(--ink);
 }
-.album[aria-current="true"] .t { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; margin-left: -10px; }
+.album-open[aria-current="true"] .t { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; margin-left: -10px; }
 .album.locked img { filter: grayscale(0.7) brightness(0.9); }
 
 .cover-fallback {
@@ -476,8 +481,12 @@ body.is-playing .fog i:nth-child(3) { animation: drift 52s ease-in-out infinite
 .now { width: min(100%, 520px); min-width: 0; }
 @media (min-width: 720px) { .now { width: 100%; } }
 
+.now-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.now-head .marks { margin-top: 6px; }
 .now-title {
   margin: 0 0 4px;
+  flex: 1;
+  min-width: 0;
   font-family: var(--display);
   font-weight: 650;
   font-size: clamp(1.7rem, 5.4vw, 2.4rem);
@@ -592,6 +601,30 @@ input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; bo
 @media (hover: hover) { .un:not([disabled]):hover { border-color: var(--ink-2); } }
 .upnext .again { margin-top: 16px; }
 
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 16px;
+  margin: 0 0 16px;
+}
+.filters .show-disliked { min-height: 44px; }
+.empty { margin: 8px 0 16px; color: var(--ink-2); }
+
+.marks { display: flex; flex: none; gap: 6px; }
+.mark {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1.5px solid var(--line);
+  border-radius: 999px;
+  background: none;
+  color: var(--ink);
+  font-size: 0.8125rem;
+  font-weight: 650;
+}
+.mark[aria-pressed="true"].like { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
+.mark[aria-pressed="true"].dislike { background: var(--ink); color: var(--fog); border-color: transparent; }
+
 .side { min-width: 0; }
 .side-title {
   margin: 0 0 4px;
@@ -600,21 +633,30 @@ input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; bo
   font-size: 1.25rem;
 }
 .tracklist { list-style: none; margin: 0; padding: 0; }
+.track-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid var(--line);
+}
+.track-row.is-disliked { opacity: 0.55; }
 .track {
   display: grid;
   grid-template-columns: 28px 1fr;
   gap: 12px;
-  align-items: baseline;
+  align-items: center;
   width: 100%;
+  min-width: 0;
   min-height: 48px;
   padding: 11px 8px 11px 10px;
   border: 0;
-  border-bottom: 1px solid var(--line);
   background: none;
   text-align: left;
   font-weight: 500;
   line-height: 1.3;
 }
+.track .who { display: flex; flex-direction: column; min-width: 0; }
+.track .st { color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; }
 .track .n { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
 .track[aria-current="true"] { font-weight: 750; box-shadow: inset 3px 0 0 var(--accent); }
 @media (hover: hover) { .track:hover { background: color-mix(in srgb, var(--marble) 55%, transparent); } }

package/sw.js

@@ -2,10 +2,10 @@
 // - App files: cached on install, served cache-first. Bump VERSION when you change any of them.
 // - catalog.json: network-first, so edits show up right away; the cached copy is used offline.
 // - Covers: shown from cache instantly, refreshed in the background.
-// - Media: served from the media cache when the album is saved there (with Range support,
+// - Media: served from the media cache when the playlist is saved there (with Range support,
 //   which phones need for seeking in MP3 and MP4); otherwise streamed from the network.
 
-const VERSION = 'v1';
+const VERSION = 'v2';
 const SHELL = `pv-shell-${VERSION}`;
 const DATA = 'pv-data';
 const COVERS = 'pv-covers';