diff --git a/static/app.js b/static/app.js index 41cfe73..cbc25f9 100644 --- a/static/app.js +++ b/static/app.js @@ -300,6 +300,12 @@ async function showAnime(slug_id, opts = {}) { player.append(videoEl()); main.append(player); + // "now playing" line: E-number + MAL episode title (name arrives async + // from Jikan, so setNowEp() refreshes it whenever the name lands) + const nowEp = el("div", "now-ep"); + nowEp.id = "now-ep"; + main.append(nowEp); + const controls = el("div", "controls"); const langBtn = el("button", null, langLabel()); langBtn.onclick = () => { @@ -668,7 +674,7 @@ function attachEpNames() { 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(); + if (changed) { renderEps(); if (currentEp) setNowEp(currentEp.ep_id, currentEp.ep_no); } }); } @@ -798,8 +804,16 @@ function nextCountdown(nxt) { draw(); } +function setNowEp(ep_id, ep_no) { + const n = document.getElementById("now-ep"); + if (!n) return; + const e = epsList.find(x => String(x.id) === String(ep_id)); + n.textContent = "E" + ep_no + (e && e.name ? " — " + e.name : ""); +} + async function play(ep_id, ep_no) { playerBroken = false; + setNowEp(ep_id, ep_no); localStorage.setItem("aniweb_lang_" + detail.slug_id, lang); try { const s = await api(`/api/episode/${ep_id}/stream?lang=${lang}`); diff --git a/static/index.html b/static/index.html index 16a0952..c532876 100644 --- a/static/index.html +++ b/static/index.html @@ -6,7 +6,7 @@ ani-web - +
@@ -30,6 +30,6 @@ max-age=300 in browser AND possibly in your HTTPS proxy, and a stale copy is exactly how users keep seeing an old UI after a deploy --> - + diff --git a/static/style.css b/static/style.css index 20c415e..849118c 100644 --- a/static/style.css +++ b/static/style.css @@ -163,6 +163,8 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); } .del:hover { border-color: #f87171; color: #f87171; } .eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; } +.now-ep { font-size: .95rem; color: var(--muted); margin: .1rem 0 .45rem; } + .ep { position: relative; font-size: 0.9rem; } .ep.filler { opacity: 0.55; } .ep.done { opacity: 0.5; }