s8n/ARRFLIX
s8n/ARRFLIX
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

index.html: inline critical-path black bg + red button to kill pre-bundle flash

Browse source
This commit is contained in:
s8n 2026-05-08 03:44:24 +01:00
parent 88296d892b
commit 0fa723e482
2 changed files with 79 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
docs/10-spa-runtime-shim.md
View file

@ -131,7 +131,69 @@ private invite-only service.
more code, add it to the IIFE in `bin/inject-shim.py` and re-run.
- **First-paint flash.** Because the SPA still loads its own bundle, you may
briefly see "Jellyfin" in the tab title before the observer kicks in. Sub-100ms
on a fast connection - acceptable.
on a fast connection - acceptable. For the colour flash (dark blue / grey
before Cineplex CSS arrives), see "Pre-bundle critical-path styles" below.
---
## Pre-bundle critical-path styles
A second inline block — a `<style>` tag — sits immediately AFTER `<head>` and
BEFORE the shim `<script>`. It exists to kill the ~500ms-1s flash of Jellyfin
default chrome (dark blue + grey + MUI blue submit button) that was visible on
first paint at `https://arrflix.s8n.ru` before the Cineplex `@import` from
`/Branding/Configuration` (CustomCss) finished arriving.
### Why CustomCss alone is too slow
CustomCss is fetched via the SPA bundle's call to `/Branding/Configuration` —
i.e. AFTER the JS bundle parses, executes, and hydrates. So the network
sequence is:
1. HTML parses → first paint uses Jellyfin built-in CSS (dark blue / grey).
2. JS bundle downloads, parses, executes.
3. Bundle calls `/Branding/Configuration`, gets `CustomCss` body.
4. `CustomCss` does `@import url("...jsdelivr.net/...cineplex.css")`.
5. jsDelivr round-trip → Cineplex CSS arrives → re-paint to ARRFLIX brand.
Steps 1-4 are dead time. The inline `<style>` runs at step 1 and pre-paints the
black background + Netflix-red submit button so the gap is invisible.
### What's in the block
Lives between `<head>` and the `<script>` shim. Contents:
- `:root` overrides for `--primary-background-color` / `--background-color`
to `#000000`.
- `html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages`
forced to black bg / white text.
- `.raised, .button-submit, .emby-button[type=submit], button[type=submit]`
forced to Netflix red `#E50914` so the login submit button doesn't flash MUI
blue before the bundle skins it.
It is INTENTIONALLY tiny. It only handles the "kill the wrong colours"
critical-path goal. All real branding (logos, fonts, posters, header layout,
hover states, etc.) still comes from Cineplex + ARRFLIX CustomCss as before.
### Maintenance warning on Jellyfin upgrade
This block targets specific Jellyfin class names. If a future Jellyfin web
release renames `.skinBody`, `.skinHeader`, `.preload`, `#reactRoot`,
`.mainAnimatedPages`, `.emby-button`, or the `--primary-background-color`
CSS variable, the pre-bundle paint will regress to defaults until the
selectors here are updated.
After every `jellyfin/jellyfin` image bump:
1. Open `https://arrflix.s8n.ru` in incognito with throttled 3G in DevTools.
2. Confirm the page goes from blank → black (not blue/grey).
3. Confirm the login submit button is red (not blue) before bundle finishes.
4. If either regresses, inspect the new bundle's body class names and update
`web-overrides/index.html` selectors accordingly.
The block does NOT live in `bin/inject-shim.py` — it's a static `<style>`,
not a script. Edit `web-overrides/index.html` directly and redeploy via the
`scp` step in "Deploying changes" above.
---

17
web-overrides/index.html
View file

@ -1,4 +1,19 @@
<!doctype html><html class="preload" dir="ltr"><head><script>/* ARRFLIX-SHIM-BEGIN */
<!doctype html><html class="preload" dir="ltr"><head><style>/* ARRFLIX critical-path styles — render first to avoid pre-bundle flash */
:root {
--primary-background-color: #000000;
--background-color: #000000;
}
html, body, .preload, .skinBody, .skinHeader, #reactRoot, .mainAnimatedPages {
background-color: #000000 !important;
color: #ffffff !important;
}
/* Login form's pre-bundle layout uses MUI default blue button — pre-paint Netflix red */
.raised, .button-submit, .emby-button[type=submit], button[type=submit] {
background-color: #E50914 !important;
color: #ffffff !important;
}
/* Hide pre-bundle Jellyfin logo + replace with .splashLogo (already swapped to ARRFLIX in this index.html) */
</style><script>/* ARRFLIX-SHIM-BEGIN */
(function(){
var TITLE = 'ARRFLIX';
var BARE_RE = /^Jellyfin$/i;