From 07554e4aa84070ec193d0980af4d831fd2c6acab Mon Sep 17 00:00:00 2001
From: Josue Zamudio <josuezamudio1@gmail.com>
Date: Mon, 31 Aug 2026 02:05:00 +0000
Subject: [PATCH] =?UTF-8?q?Playback=20page:=20show=20'E{n}=20=E2=80=94=20e?=
 =?UTF-8?q?pisode=20title'=20line=20under=20the=20video?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The name was only in the grid tooltip (hover-only, invisible on touch).
Add a persistent now-playing line between the player and controls:
'E1 — Ryomen Sukuna'. setNowEp() runs on every play() and refreshes
when the async Jikan name lands late. Bumped asset version to v=3.
---
 static/app.js     | 16 +++++++++++++++-
 static/index.html |  4 ++--
 static/style.css  |  2 ++
 3 files changed, 19 insertions(+), 3 deletions(-)

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 @@
 <title>ani-web</title>
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f97316'/%3E%3Ctext x='32' y='45' font-family='sans-serif' font-size='42' font-weight='700' text-anchor='middle' fill='%230e0f13'%3Ea%3C/text%3E%3C/svg%3E">
 
-<link rel="stylesheet" href="style.css?v=2">
+<link rel="stylesheet" href="style.css?v=3">
 </head>
 <body>
 <header>
@@ -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 -->
 <script src="hls.min.js"></script>
-<script src="app.js?v=2"></script>
+<script src="app.js?v=3"></script>
 </body>
 </html>
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; }