feat(design): Warm Cinema theme + event-driven adaptive players

Replaces the Projector Noir palette with "Warm Cinema" and rebuilds the
web players around a shared, event-driven engine.

Design
- app_colors: warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F);
  adds posterScrim/heroScrim gradients, lift()/emberFocus() shadows,
  const cream-alpha tokens replacing Colors.whiteNN, and primaryFill,
  a deeper ember reserved for text-bearing fills so white labels clear
  the 4.5:1 AA threshold that #D9541F alone does not
- app_theme / mobile_theme: Fraunces (display serif) + Karla (body),
  tighter radii, 20+ component themes
- glass_container: opaque layered surfaces replace the blurred glass
- themed_loading_screen restyled; players and boot splash follow

Performance
- drop every BackdropFilter: backdrop blur forced a full framebuffer
  read per frame per card, the main source of scroll jank
- bundle Fraunces/Karla as assets so google_fonts stops fetching from
  fonts.gstatic.com at startup
- bound image decode size on 12 sites: a 40-poster grid drops from
  ~240 MB to a few tens of MB of GPU memory

Players (new shared engine: web/xf-player-core.js)
- start on media events instead of polling the buffer every 100-200 ms
- hls.js/mpegts.js loaded on demand, so ~213 KB of mpegts is never
  fetched for HLS streams
- liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth
  off, MPEG-TS initial stash 512 KB -> 64 KB
- adaptive escalation fast -> balanced -> safe after repeated stalls in
  a 60 s window, applied live for HLS so there is no visible cut

Preserved from the recent streaming work on main: server-side quality
selection, stable player viewId, the turbo direct MPEG-TS path, vendored
library cache headers and the CI/Docker changes. Only the theme layer and
the player front-end were replaced; GlassCard stays in ui_components.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed 2026-08-10 21:42:56 +02:00
1 parent e332895d7d
commit 1feeaae78a
49 files changed
+2341 -1751

No files matched your search

@@ -107,6 +107,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
CachedNetworkImage(
imageUrl: item.imageUrl,
fit: BoxFit.cover,
memCacheWidth: 1280,
placeholder: (context, url) => Container(color: AppColors.surfaceContainerLow),
errorWidget: (context, url, error) => Container(
color: AppColors.surfaceContainerLow,
@@ -140,7 +141,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
children: [
Text(
item.title,
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 32,
fontWeight: FontWeight.bold,
color: AppColors.onSurface,
@@ -152,7 +153,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
const SizedBox(height: 8),
Text(
item.subtitle!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
color: AppColors.onSurface,
),
@@ -245,7 +246,7 @@ class _HeroButtonState extends State<_HeroButton> {
const SizedBox(width: 8),
Text(
widget.label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
),
@@ -149,7 +149,7 @@ class _GradientButtonState extends State<GradientButton>
],
Text(
widget.label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
fontSize: 14,
@@ -253,7 +253,7 @@ class LiveBadge extends StatelessWidget {
const SizedBox(width: 4),
Text(
'LIVE',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 10,
fontWeight: FontWeight.w700,
@@ -302,7 +302,7 @@ class CategoryChip extends StatelessWidget {
),
child: Text(
label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? AppColors.primary : AppColors.onSurfaceVariant,
@@ -413,6 +413,7 @@ class _MediaCardState extends State<MediaCard>
CachedNetworkImage(
imageUrl: widget.imageUrl!,
fit: BoxFit.cover,
memCacheWidth: 400,
placeholder: (context, url) => Container(
color: AppColors.surfaceContainerLow,
child: Center(
@@ -458,7 +459,7 @@ class _MediaCardState extends State<MediaCard>
const SizedBox(width: 4),
Text(
widget.rating!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 10,
fontWeight: FontWeight.w700,
@@ -502,7 +503,7 @@ class _MediaCardState extends State<MediaCard>
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: _isHovered
? AppColors.primary
: AppColors.onSurface,
@@ -518,7 +519,7 @@ class _MediaCardState extends State<MediaCard>
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurfaceVariant,
fontSize: 11,
),