From 508fc42a1ec611bf58b5122c4c12b8847835ad34 Mon Sep 17 00:00:00 2001 From: s8n Date: Sun, 10 May 2026 02:44:30 +0100 Subject: [PATCH] next-ep popup: design A (Cinematic Strip) shipped to dev + designs A/B/C archived MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- bin/revert-next-ep-popup.sh | 54 ++ web-overrides/index-dev.html | 735 +++++++++++++++++++ web-overrides/popup-designs/README.md | 37 + web-overrides/popup-designs/a-strip.html | 42 ++ web-overrides/popup-designs/b-terminal.html | 40 ++ web-overrides/popup-designs/c-minimal.html | 36 + web-overrides/popup-designs/preview.html | 760 ++++++++++++++++++++ 7 files changed, 1704 insertions(+) create mode 100755 bin/revert-next-ep-popup.sh create mode 100644 web-overrides/index-dev.html create mode 100644 web-overrides/popup-designs/README.md create mode 100644 web-overrides/popup-designs/a-strip.html create mode 100644 web-overrides/popup-designs/b-terminal.html create mode 100644 web-overrides/popup-designs/c-minimal.html create mode 100644 web-overrides/popup-designs/preview.html diff --git a/bin/revert-next-ep-popup.sh b/bin/revert-next-ep-popup.sh new file mode 100755 index 0000000..78129ff --- /dev/null +++ b/bin/revert-next-ep-popup.sh @@ -0,0 +1,54 @@ +#!/usr/bin/env bash +# Revert the NEXT-EP-POPUP shim injected into dev's index-dev.html on 2026-05-10. +# +# What it removes: +# /* NEXT-EP-POPUP-BEGIN ... */ ... /* NEXT-EP-POPUP-END */ +# +# Defaults to dev. Pass --prod to remove from prod's index.html instead. +# Idempotent: safe to re-run. +# +# After local edit, redeploy to nullstone via the same nsenter cp trick used +# for sub-label-shim revert (see comment at end). + +set -euo pipefail + +REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)" +TARGET_DEV="$REPO_ROOT/web-overrides/index-dev.html" +TARGET_PROD="$REPO_ROOT/web-overrides/index.html" + +TARGET="$TARGET_DEV" +ENV="dev" +if [[ "${1:-}" == "--prod" ]]; then + TARGET="$TARGET_PROD" + ENV="prod" +fi + +if [[ ! -f "$TARGET" ]]; then + echo "ERROR: $TARGET not found" >&2 + exit 1 +fi + +if ! grep -q "NEXT-EP-POPUP-BEGIN" "$TARGET"; then + echo "shim already absent in $ENV — nothing to do" + exit 0 +fi + +cp "$TARGET" "$TARGET.bak.$(date -u +%Y%m%dT%H%M%SZ)" +sed -i '/NEXT-EP-POPUP-BEGIN/,/NEXT-EP-POPUP-END/d' "$TARGET" + +if grep -q "NEXT-EP-POPUP" "$TARGET"; then + echo "ERROR: revert left orphan markers in $TARGET" >&2 + exit 2 +fi + +echo "reverted ($ENV). backup at $TARGET.bak.*" +echo +echo "Now redeploy to nullstone:" +if [[ "$ENV" == "dev" ]]; then + echo " scp $TARGET user@192.168.0.100:/tmp/index-dev-new.html" + echo " ssh user@192.168.0.100 'docker run --rm --privileged --pid=host --userns=host -v /opt:/opt -v /tmp:/tmp alpine nsenter -t 1 -m -u -i -n cp /tmp/index-dev-new.html /opt/docker/jellyfin-dev/web-overrides/index-dev.html'" +else + echo " scp $TARGET user@192.168.0.100:/tmp/arrflix-index.html" + echo " ssh user@192.168.0.100 'docker run --rm --privileged --pid=host --userns=host -v /opt:/opt -v /tmp:/tmp alpine nsenter -t 1 -m -u -i -n cp /tmp/arrflix-index.html /opt/docker/jellyfin/web-overrides/index.html'" +fi +echo "Then hard-refresh the browser (Ctrl+Shift+R)." diff --git a/web-overrides/index-dev.html b/web-overrides/index-dev.html new file mode 100644 index 0000000..f80cc29 --- /dev/null +++ b/web-overrides/index-dev.html @@ -0,0 +1,735 @@ +ARRFLIX
\ No newline at end of file diff --git a/web-overrides/popup-designs/README.md b/web-overrides/popup-designs/README.md new file mode 100644 index 0000000..0228bcf --- /dev/null +++ b/web-overrides/popup-designs/README.md @@ -0,0 +1,37 @@ +# 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`. diff --git a/web-overrides/popup-designs/a-strip.html b/web-overrides/popup-designs/a-strip.html new file mode 100644 index 0000000..a401814 --- /dev/null +++ b/web-overrides/popup-designs/a-strip.html @@ -0,0 +1,42 @@ + +ARRFLIX popup — A · Cinematic Strip + + + +
+ + diff --git a/web-overrides/popup-designs/b-terminal.html b/web-overrides/popup-designs/b-terminal.html new file mode 100644 index 0000000..fbc5e76 --- /dev/null +++ b/web-overrides/popup-designs/b-terminal.html @@ -0,0 +1,40 @@ + +ARRFLIX popup — B · Terminal Card + + + +
+ + diff --git a/web-overrides/popup-designs/c-minimal.html b/web-overrides/popup-designs/c-minimal.html new file mode 100644 index 0000000..8edbefb --- /dev/null +++ b/web-overrides/popup-designs/c-minimal.html @@ -0,0 +1,36 @@ + +ARRFLIX popup — C · Minimal Bar + + + +
+ + diff --git a/web-overrides/popup-designs/preview.html b/web-overrides/popup-designs/preview.html new file mode 100644 index 0000000..41b2956 --- /dev/null +++ b/web-overrides/popup-designs/preview.html @@ -0,0 +1,760 @@ + + + + +ARRFLIX — Next-Episode popup designs + + + + + + + +
+

ARRFLIX · NEXT-EPISODE POPUP

+
+ + + + +
+
PICK ONE · 2026-05-10
+
+ +
+
+
+
+ Production Services Provided by CGCG, Inc. +
+
+
Lighting Director
Lighting Lead
Lighting Artists
+
Chung-Kai Hsueh
Yin-Jung Huang
Jung-Tzu Chang · Po-Jui Chiu
Char Ho · Luna Jiang
Chuan-Sheng Lan · Po-Yu Li
+
+
+
Special Effects Director
Special Effects Artists
+
Chia-Hung Chu
Jia-You Cai · Lin-Chi Chen
Cai-Jhu Li · Zhi-Hao Liu
+
+
+
Production Technology
+
Indigo Tang · Joe Chang
I Chiang · Chih-Chiang Tsai
+
+
+ +
+ A · CINEMATIC STRIP +
Full-bleed bottom strip. Big countdown ring. White CTA = Netflix muscle memory. Grand.
+
+ + +
+ + + + + +