diff --git a/SPEC.md b/SPEC.md index 880c162..5e2b7b7 100644 --- a/SPEC.md +++ b/SPEC.md @@ -86,8 +86,8 @@ Flow: search box → results grid (poster + title, click) → detail view - Default play: opening an anime resumes the last watched episode of the season (seeking to the saved position unless ≥95% through), - else autoplays episode 1. If the browser blocks autoplay, a - "click to play" overlay appears. + else autoplays episode 1. If the browser blocks autoplay, the native + play button on the video is the way to start. - Watch position saved to `/api/history` every ~10s + on pause/unload; home page lists the 5 most recent entries with timecode. diff --git a/static/app.js b/static/app.js index 7e2d87f..fa79222 100644 --- a/static/app.js +++ b/static/app.js @@ -463,7 +463,7 @@ async function play(ep_id, ep_no) { if (currentEp && !playerBroken && !v.ended) playerOverlay("Buffering\u2026"); }); v.addEventListener("ended", onEnded); - v.play().catch(() => showPlayOverlay(v)); // autoplay blocked (no user gesture) -> visible prompt + v.play().catch(() => {}); // autoplay blocked -> user uses the native play button watchPos(v); postHistory({...meta(v), title: detail.name, slug_id: detail.slug_id, season_id: seasonId, ep_id, lang, ep: ep_no, pos: saved?.pos || 0}); @@ -489,14 +489,6 @@ function watchPos(v) { window.addEventListener("pagehide", save); } -function showPlayOverlay(v) { - if (playerBroken) return; // failure overlay (with Retry) takes precedence - playerHideOverlay(); - const o = el("button", "play-overlay", "▶ click to play"); - o.onclick = () => { v.play(); o.remove(); }; - v.parentElement.append(o); -} - // ---------- boot ---------- (async () => { document.querySelector(".logo").href = BASE; diff --git a/static/style.css b/static/style.css index a27428b..02797af 100644 --- a/static/style.css +++ b/static/style.css @@ -63,8 +63,6 @@ h2 { margin: 0.4rem 0; } .player { position: relative; } .player video { width: 100%; max-height: 70vh; background: #000; border-radius: 10px; aspect-ratio: 16/9; } -.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 1.1rem; padding: 0.8rem 1.4rem; background: rgba(0, 0, 0, 0.75); } .controls { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0; flex-wrap: wrap; } button { background: var(--card); color: var(--fg); border: 1px solid var(--bd); border-radius: 8px; padding: 0.4rem 0.7rem; cursor: pointer; }