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

@@ -27,7 +27,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
appBar: AppBar(
title: Text(
'Select Playlist',
style: GoogleFonts.roboto(
style: GoogleFonts.karla(
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
@@ -97,7 +97,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const SizedBox(height: 16),
Text(
'Error loading playlists',
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 18,
color: AppColors.textSecondary,
),
@@ -109,7 +109,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
backgroundColor: AppColors.primary,
foregroundColor: AppColors.textPrimary,
),
child: Text('Retry', style: GoogleFonts.instrumentSans()),
child: Text('Retry', style: GoogleFonts.karla()),
),
],
),
@@ -123,14 +123,14 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const Icon(
Icons.playlist_remove,
size: 64,
color: Colors.white24,
color: AppColors.onSurface24,
),
const SizedBox(height: 16),
Text(
'No playlists available',
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 18,
color: Colors.white60,
color: AppColors.onSurface54,
),
),
const SizedBox(height: 8),
@@ -138,9 +138,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
currentUser?.isAdmin ?? false
? 'Add playlists in Admin Panel'
: 'Contact administrator',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 14,
color: Colors.white38,
color: AppColors.onSurface38,
),
),
],
@@ -209,13 +209,13 @@ class _PlaylistCardState extends State<_PlaylistCard> {
duration: const Duration(milliseconds: 200),
decoration: BoxDecoration(
color: _isHovered
? Colors.white.withOpacity(0.1)
: Colors.white.withOpacity(0.03),
? AppColors.onSurface.withOpacity(0.1)
: AppColors.onSurface.withOpacity(0.03),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: _isHovered
? AppColors.primary.withOpacity(0.5)
: Colors.white.withOpacity(0.08),
: AppColors.onSurface.withOpacity(0.08),
width: 1.5,
),
boxShadow: _isHovered
@@ -245,8 +245,8 @@ class _PlaylistCardState extends State<_PlaylistCard> {
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.1),
Colors.white.withOpacity(0.05),
AppColors.onSurface.withOpacity(0.1),
AppColors.onSurface.withOpacity(0.05),
],
),
shape: BoxShape.circle,
@@ -263,16 +263,16 @@ class _PlaylistCardState extends State<_PlaylistCard> {
child: Icon(
Icons.playlist_play_rounded,
size: 32,
color: _isHovered ? Colors.white : Colors.white70,
color: _isHovered ? AppColors.onSurface : AppColors.onSurfaceVariant,
),
),
const SizedBox(height: 20),
Text(
widget.playlist.name,
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
height: 1.2,
),
maxLines: 2,
@@ -281,9 +281,9 @@ class _PlaylistCardState extends State<_PlaylistCard> {
const SizedBox(height: 8),
Text(
Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 13,
color: Colors.white38,
color: AppColors.onSurface38,
letterSpacing: 0.5,
),
maxLines: 1,