Audiobooks: Newly added shelf, New badges, library filters and sorting, narrator and length details

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/audiobooks-view.js

@@ -7,6 +7,11 @@ const abId = b => String(abPick(b, 'id', 'asin', 'ASIN', 'book_id'));
 const abTitle = b => abPick(b, 'title', 'title_short', 'name') || '(untitled)';
 const abAuthor = b => { const a = abPick(b, 'author', 'author_name', 'authors', 'author_display') || ''; return Array.isArray(a) ? a.join(', ') : a; };
 const abSeries = b => abPick(b, 'series_name', 'series') || '';
+const abNarr = b => { const a = abPick(b, 'narrated_by', 'narrator', 'narrators', 'narrator_name') || ''; return Array.isArray(a) ? a.join(', ') : a; };
+const abSecs = b => { const d = Number(abPick(b, 'seconds', 'duration', 'duration_sec', 'length_sec', 'runtime_seconds')); return d > 0 ? (d > 1e5 ? d / 1000 : d) : 0; }; // (some servers give milliseconds)
+/** When the book was added to the library (ms), from whichever date the server gives; 0 when it gives none. */
+const abAdded = b => { for (const k of ['added', 'added_at', 'date_added', 'created_at', 'created', 'purchase_date', 'mtime']) { const v = b && b[k]; if (v == null || v === '') continue; const t = typeof v === 'number' ? (v < 1e11 ? v * 1000 : v) : Date.parse(v); if (t > 0) return t; } return 0; };
+const abLen = s => { const h = Math.floor(s / 3600), m = Math.round(s % 3600 / 60); return h ? `${h} h${m ? ' ' + m + ' m' : ''}` : `${m} m`; };
 const abCover = b => `/api/ab/books/${encodeURIComponent(abId(b))}/cover`;
 const abFmt = s => { s = Math.max(0, Math.floor(s || 0)); const h = Math.floor(s / 3600), m = Math.floor(s % 3600 / 60), x = s % 60; return (h ? h + ':' + String(m).padStart(2, '0') : m) + ':' + String(x).padStart(2, '0'); };
 const abHue = t => { let h = 0; for (const c of t) h = (h * 31 + c.charCodeAt(0)) % 360; return h; };
@@ -74,21 +79,38 @@ async function viewBooks(args = []) {
   if (!location.hash.startsWith('#/audio')) return;
   const pct = b => { const p = abProg[abId(b)]; return p && p.dur ? Math.min(100, p.pos / p.dur * 100) : 0; };
   const card = (b, wide) => `<button class="vcard${wide ? ' wide' : ''}" data-id="${esc(abId(b))}" style="text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;${wide ? 'width:140px;flex:none' : ''}">
-    <span class="vimg" style="aspect-ratio:1/1;background:linear-gradient(135deg,hsl(${abHue(abTitle(b))} 55% 40%),hsl(${abHue(abTitle(b)) + 40} 55% 28%))"><img loading="lazy" alt="" src="${abCover(b)}" onerror="this.remove()">${pct(b) > 1 ? `<i class="vprog"><b style="width:${pct(b)}%"></b></i>` : ''}</span>
-    <b>${esc(abTitle(b))}</b><small>${esc(abAuthor(b))}</small></button>`;
+    <span class="vimg" style="aspect-ratio:1/1;background:linear-gradient(135deg,hsl(${abHue(abTitle(b))} 55% 40%),hsl(${abHue(abTitle(b)) + 40} 55% 28%))"><img loading="lazy" alt="" src="${abCover(b)}" onerror="this.remove()">${pct(b) > 1 ? `<i class="vprog"><b style="width:${pct(b)}%"></b></i>` : ''}${isNew(b) ? '<em class="abnew">New</em>' : ''}</span>
+    <b>${esc(abTitle(b))}</b><small>${esc(abAuthor(b))}</small>${!wide && abSecs(b) ? `<small>${esc(abLen(abSecs(b)))}${abSeries(b) ? ' · ' + esc(abSeries(b)) : ''}</small>` : ''}</button>`;
+  const WEEKS = 3 * 7 * 864e5, isNew = b => { const t = abAdded(b); return t && Date.now() - t < WEEKS && pct(b) < 1; };
+  const dated = abBooks.some(abAdded), newest = [...abBooks].sort(dated ? (a, b) => abAdded(b) - abAdded(a) : () => 0).slice(0, 12); // (no dates: the server's own order, newest last)
+  if (!dated) newest.splice(0, newest.length, ...abBooks.slice(-12).reverse());
+  const stat = b => { const p = abProg[abId(b)]; return !p || !p.dur || p.pos <= 10 ? 'new' : p.pos >= p.dur - 30 ? 'done' : 'going'; };
+  const view = (() => { try { return JSON.parse(localStorage.getItem('ab_view')) || {}; } catch { return {}; } })();
+  let sort = view.sort || 'title', filt = view.filt || 'all';
   const cont = abBooks.filter(b => { const p = abProg[abId(b)]; return p && p.pos > 10 && p.dur && p.pos < p.dur - 30; }).sort((a, b) => abProg[abId(b)].t - abProg[abId(a)].t).slice(0, 10);
   const contFree = lvShelf.filter(b => lvLeft(b.id)).sort((a, b) => lvProg['lv:' + b.id].t - lvProg['lv:' + a.id].t).slice(0, 10);
   v.innerHTML = `<div class="wrap"><div class="ptop"><h1>Audiobooks</h1><span class="pspace grow"></span><a class="btn ghost" href="#/audio/free">Free audiobooks</a><a class="btn ghost" href="#/audio/classic" title="The audiobook player's own page">Classic player</a></div>
     ${cont.length || contFree.length ? `<h2>Continue listening</h2><div class="vrow">${[...cont.map(b => ({ t: abProg[abId(b)].t, h: card(b, true) })), ...contFree.map(b => ({ t: lvProg['lv:' + b.id].t, h: lvCard(b, true) }))].sort((a, b) => b.t - a.t).map(x => x.h).join('')}</div>` : ''}
+    ${newest.length > 1 ? `<h2>Newly added</h2><div class="vrow">${newest.map(b => card(b, true)).join('')}</div>` : ''}
     ${lvShelf.length ? `<h2>My free audiobooks</h2><div class="vgrid">${lvRecent().map(b => lvCard(b)).join('')}</div>` : ''}
     <input type="search" id="abq" placeholder="Search your books" autocomplete="off" autocapitalize="off" style="margin-top:14px">
-    <h2>Library</h2><div class="vgrid" id="abgrid"></div></div>`;
+    <h2>Library <small id="abn" style="color:var(--muted);font-weight:400"></small></h2>
+    <div class="bar" style="flex-wrap:wrap;margin-top:6px">${[['all', 'All'], ['going', 'In progress'], ['new', 'Not started'], ['done', 'Finished']].map(([k, l]) => `<button class="btn ghost abf" data-f="${k}">${l}</button>`).join('')}
+      <span class="pspace grow"></span><label class="sub" style="display:flex;gap:6px;align-items:center">Sort <select id="abs0"><option value="title">Title</option><option value="author">Author</option><option value="added">Recently added</option><option value="series">Series</option><option value="length">Longest</option></select></label></div>
+    <div class="vgrid" id="abgrid"></div></div>`;
   const draw = () => {
-    const q = $('#abq').value.trim().toLowerCase(), list = abBooks.filter(b => !q || (abTitle(b) + ' ' + abAuthor(b) + ' ' + abSeries(b)).toLowerCase().includes(q))
-      .sort((a, b) => abTitle(a).localeCompare(abTitle(b)));
+    const q = $('#abq').value.trim().toLowerCase(), by = { title: (a, b) => abTitle(a).localeCompare(abTitle(b)), author: (a, b) => abAuthor(a).localeCompare(abAuthor(b)) || abTitle(a).localeCompare(abTitle(b)),
+      added: (a, b) => abAdded(b) - abAdded(a) || abTitle(a).localeCompare(abTitle(b)), length: (a, b) => abSecs(b) - abSecs(a),
+      series: (a, b) => (abSeries(a) || '\uffff').localeCompare(abSeries(b) || '\uffff') || (Number(abPick(a, 'series_sequence', 'series_index')) || 0) - (Number(abPick(b, 'series_sequence', 'series_index')) || 0) || abTitle(a).localeCompare(abTitle(b)) }[sort],
+      list = abBooks.filter(b => (filt === 'all' || stat(b) === filt) && (!q || (abTitle(b) + ' ' + abAuthor(b) + ' ' + abSeries(b) + ' ' + abNarr(b)).toLowerCase().includes(q))).sort(by);
     $('#abgrid').innerHTML = list.map(b => card(b)).join('') || `<p class="empty">${abBooks.length ? 'No books match.' : 'No books in the library yet.'}</p>`;
+    $('#abn').textContent = list.length === abBooks.length ? `${abBooks.length} books` : `${list.length} of ${abBooks.length}`;
+    v.querySelectorAll('.abf').forEach(x => x.classList.toggle('on', x.dataset.f === filt));
+    $('#abs0').value = sort;
+    try { localStorage.setItem('ab_view', JSON.stringify({ sort, filt })); } catch {}
   };
-  draw(); $('#abq').oninput = draw;
+  draw(); $('#abq').oninput = draw; $('#abs0').onchange = e => { sort = e.target.value; draw(); };
+  v.querySelectorAll('.abf').forEach(x => x.onclick = () => { filt = x.dataset.f; draw(); });
   const byId = new Map(abBooks.map(b => [abId(b), b]));
   v.onclick = e => { const c = e.target.closest('button[data-id]'); if (c) abSheet(byId.get(c.dataset.id)); };
   lvBind(v, () => route());
@@ -98,7 +120,7 @@ async function viewBooks(args = []) {
 function abSheet(b) {
   const id = abId(b), p = abProg[id], left = p && p.dur ? p.dur - p.pos : 0, resumable = p && p.pos > 10 && p.dur && p.pos < p.dur - 30;
   const el = openSheet(abTitle(b), [abAuthor(b), abSeries(b)].filter(Boolean).join(' · '), `<div style="display:flex;gap:14px;align-items:flex-start"><span class="vimg" style="width:96px;flex:none;aspect-ratio:1/1"><img alt="" src="${abCover(b)}" onerror="this.remove()"></span>
-      <div style="min-width:0"><p class="sub" style="margin:0">${resumable ? esc(abFmt(p.pos) + ' of ' + abFmt(p.dur) + ' · ' + abFmt(left) + ' left') : p && p.dur && p.pos >= p.dur - 30 ? 'Finished' : 'Not started'}</p></div></div>
+      <div style="min-width:0">${abNarr(b) ? `<p class="sub" style="margin:0 0 4px">Read by ${esc(abNarr(b))}</p>` : ''}${abSecs(b) ? `<p class="sub" style="margin:0 0 4px">${esc(abLen(abSecs(b)))}${abAdded(b) ? ' · added ' + new Date(abAdded(b)).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : ''}</p>` : ''}<p class="sub" style="margin:0">${resumable ? esc(abFmt(p.pos) + ' of ' + abFmt(p.dur) + ' · ' + abFmt(left) + ' left') : p && p.dur && p.pos >= p.dur - 30 ? 'Finished' : 'Not started'}</p></div></div>
     <div class="bar"><button class="btn" id="abp">${icon('play')}${resumable ? 'Resume' : 'Play'}</button>${resumable ? '<button class="btn ghost" id="abs">From the start</button>' : ''}<button class="btn ghost" id="abc">Chapters</button>${allowed('chat') ? `<button class="btn ghost" id="abh">${icon('send')}Share</button>` : ''}</div><div class="err" id="abe"></div><div id="abch" class="list" style="max-height:40vh;overflow:auto"></div>`);
   const go = async at => { try { await abPlay(b, at); closeSheet(); } catch (e) { el.querySelector('#abe').textContent = e.message; } };
   el.querySelector('#abp').onclick = () => go();