s8n
508fc42a1e
Adds web-overrides/popup-designs/ with the 4-up preview (preview.html) and three standalone candidate designs (a-strip.html / b-terminal.html / c-minimal.html) so we can revisit the alternates later without re-running the design generator. Owner picked A. Design A is wired into Jellyfin's stock .upNextDialog by overriding its CSS to a full-bleed bottom 26 % strip with white 'Start Now' CTA and a custom SVG countdown ring that mirrors .upNextDialog-countdownText. The DOM stays intact so Jellyfin's own countdown timer and click handlers on .btnStartNow / .btnHide keep working untouched. Shim is bracketed by NEXT-EP-POPUP-BEGIN / NEXT-EP-POPUP-END markers inside the existing ARRFLIX-SHIM block in web-overrides/index-dev.html. Only deployed to dev (dev.arrflix.s8n.ru) for spot-check; promote to prod once verified by editing prod's index.html the same way and redeploying via the nsenter trick. Adds bin/revert-next-ep-popup.sh — sed-deletes between markers, defaults to dev with --prod flag for prod target. Saves a timestamped backup and prints the redeploy command.
37 lines
1.7 KiB
Markdown
37 lines
1.7 KiB
Markdown
# 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`.
|