# Next-episode popup designs

Side-by-side preview of the 4 candidate popup designs evaluated 2026-05-10.
Owner picked **A · Cinematic Strip** for prod-bound shim. **B · Terminal**
and **C · Minimal Bar** archived as standalone files for future re-evaluation
(e.g. when ARRFLIX visual direction shifts or owner gets bored of A).

## Files

- `preview.html` — full 4-up preview page (drop into `python3 -m http.server`
  to compare). Designed at 1920×1080 in a faux Star-Wars-credits backdrop.
- `a-strip.html` — standalone A. Full-bleed bottom strip, big countdown
  ring, white "Start Now" CTA, "Hide" secondary. Netflix-grade muscle
  memory. **Currently shipped to dev.**
- `b-terminal.html` — standalone B. Bottom-right card with JetBrains
  Mono, dashed dividers, red accent line. Edgy, ARRFLIX-distinct.
- `c-minimal.html` — standalone C. Thin progress bar across bottom + small
  text strip, no card. Disappears into UX. Power-user.

D · Poster Card was discarded — too similar to Jellyfin stock to justify
shipping.

## Wiring (current state)

Design A is shipped to **dev only** (`dev.arrflix.s8n.ru`) as a CSS+JS
shim bracketed in `/opt/docker/jellyfin-dev/web-overrides/index-dev.html`
between `NEXT-EP-POPUP-BEGIN` and `NEXT-EP-POPUP-END` markers. The shim
keeps Jellyfin's `.upNextDialog` DOM intact (so its countdown timer keeps
ticking and clicking the underlying buttons stays wired) and overlays
Design A's visual via CSS + a small countdown-ring SVG that mirrors
`.upNextDialog-countdownText`.

Promote to prod when satisfied: copy the shim block into prod's
`web-overrides/index.html` between the same markers, then deploy via
the same nsenter trick documented in `bin/revert-sub-label-shim.sh`.

Revert (dev): `bin/revert-next-ep-popup.sh`.