Skip to content

Login background: 14 MB video, and a black gap before it starts #76

Description

@Bielcx

The finding

assets/videos/background.mp4 — the collage behind every sign-in screen — is 14 MB: 1080×1920, 60fps, 10.4 Mbps, for 10.8 seconds that play blurred behind a dark scrim.

Two costs come out of that:

A black gap on every sign-in screen. components/auth/AuthBackground.tsx renders a VideoView with no poster. Until the player produces its first frame the screen is flat black, and since each screen creates its own player, the gap repeats at every step of the login flow — entry, code, sign-up, and now onboarding.

14 MB of app size for a decorative loop. It ships in the bundle, so it is paid by every download.

Noticed while testing #68: the coach's PNG loaded late and the background took a moment to start. The PNG was fixed there (1295 KB → 167 KB); the video was left alone on purpose, since it belongs to the login screens (#60) rather than to onboarding.

Two fixes, independent

A poster frame. Extract frame 0 as a small JPEG and draw it behind the video. The still appears instantly, the video covers it when it starts, and nobody sees black. Additive — it does not touch the video itself. This is the one that fixes what the user actually feels.

Re-encode. 60fps buys nothing behind a scrim, and neither does 10 Mbps. At 30fps and ~2 Mbps this is roughly 2.5 MB, about a sixth of the size, and starts faster because there is less to buffer. Worth checking the result on device before committing to a bitrate — the collage has motion, and banding in a dark scene is the failure mode to watch for.

Not urgent

Nobody has complained; this is the app being heavier and blacker than it needs to be, not broken. Worth doing next time the login screens are open anyway.

Suggested label: performance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions