index.html: inline critical-path black bg + red button to kill pre-bundle flash
This commit is contained in:
parent
88296d892b
commit
0fa723e482
2 changed files with 79 additions and 2 deletions
|
|
@ -131,7 +131,69 @@ private invite-only service.
|
||||||
more code, add it to the IIFE in `bin/inject-shim.py` and re-run.
|
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
|
- **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
|
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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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(){
|
(function(){
|
||||||
var TITLE = 'ARRFLIX';
|
var TITLE = 'ARRFLIX';
|
||||||
var BARE_RE = /^Jellyfin$/i;
|
var BARE_RE = /^Jellyfin$/i;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue