Episode names: render MAL titles on the episode grid

anidb's episodes API has no names (id/number/filler only), but the
Jikan call we already make for intro timings carries them (title +
title_japanese). _parse_intros now keeps one entry per episode with
title and optional start/length (entries are never null anymore).

Client: attachEpNames() reuses the introCache promise, stamps
epsList[i].name, re-renders; buttons show the name (3-line clamp) +
full tooltip. Jikan down => no names, no error (same graceful
degradation as the skip-intro button).

Verified headless: Jujutsu Kaisen S1 24/24 buttons named
('E1 | Ryomen Sukuna' ...); S2 (Jikan 504 at the time) rendered
gracefully without names. 17/17 API tests.
This commit is contained in:
jozamudi committed 2026-08-31 01:52:38 +00:00
1 parent d60524815f
commit 343628a2e3
4 files changed
+35 -11

No files matched your search

+17
View File
@@ -382,6 +382,7 @@ async function showAnime(slug_id, opts = {}) {
// (ponytail: "first unwatched in list order" is wrong if you skip around;
// good enough for sequential viewing)
epsList = await api(`/api/anime/${seasonId}/episodes`);
attachEpNames();
watchDone = new Set();
epProg = new Map();
let started = false;
@@ -657,6 +658,20 @@ function markActive(b) {
b.classList.add("active");
}
// episode names (and intro timings) come from the same Jikan call the
// skip-intro button uses; server caches it 30d and the failure is silent
function attachEpNames() {
const mid = detail && detail.mal_id;
if (!mid) return;
let p = introCache.get(mid);
if (!p) { p = api(`/api/intros/${mid}`).then(t => t || []).catch(() => []); introCache.set(mid, p); }
p.then(list => {
let changed = false;
list.forEach((t, i) => { if (t && t.title && epsList[i]) { epsList[i].name = t.title; changed = true; } });
if (changed) renderEps();
});
}
let epsList = [], hideFiller = localStorage.getItem("aniweb_ff") === "1";
let autoNext = localStorage.getItem("aniweb_auto") !== "0";
let watchDone = new Set(), watchNext = null, epProg = new Map();
@@ -670,6 +685,8 @@ function renderEps() {
const b = el("button", "ep" + (e.filler ? " filler" : ""));
const done = watchDone.has(String(e.id));
b.textContent = done ? "E" + e.number + " \u2713" : "E" + e.number;
if (e.name) b.append(el("span", "ep-name", e.name));
b.title = `E${e.number}${e.name ? " — " + e.name : ""}`;
if (done) b.classList.add("done");
const pct = epProg.get(String(e.id));
if (!done && pct != null && pct > 5) {
+2
View File
@@ -164,6 +164,8 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); }
.eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; }
.ep { position: relative; font-size: 0.9rem; }
.ep-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; font-size: .68rem; color: var(--muted); margin-top: .2rem; line-height: 1.2; }
.ep.filler { opacity: 0.55; }
.ep.done { opacity: 0.5; }
.ep.nextup { border-color: #4b5568; background: #1f2130; }