s8n/legacy-arrflix
s8n/legacy-arrflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
legacy-arrflix/web-overrides/popup-designs
History
s8n 508fc42a1e next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 
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.
2026-05-10 02:44:40 +01:00
..
a-strip.html next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 2026-05-10 02:44:40 +01:00
b-terminal.html next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 2026-05-10 02:44:40 +01:00
c-minimal.html next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 2026-05-10 02:44:40 +01:00
preview.html next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 2026-05-10 02:44:40 +01:00
README.md next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived 2026-05-10 02:44:40 +01:00

README.md

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.