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

+34 -32
View File
@@ -63,7 +63,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
body: channelsAsync.when(
loading: () => const ThemedLoading(),
error: (e, s) => Center(
child: Text('Error: $e', style: const TextStyle(color: Colors.white)),
child: Text('Error: $e', style: const TextStyle(color: AppColors.onSurface)),
),
data: (groupedChannels) {
var categories = groupedChannels.keys.toList();
@@ -118,12 +118,12 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.onSurface.withOpacity(0.1),
shape: BoxShape.circle,
),
child: const Icon(
Icons.arrow_back,
color: Colors.white,
color: AppColors.onSurface,
),
),
),
@@ -137,10 +137,10 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
: _showFavoritesOnly
? 'Favorites'
: _selectedCategory ?? 'Live TV',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.white,
color: AppColors.onSurface,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
@@ -152,17 +152,17 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
width: 250,
height: 44,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.onSurface.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: TextField(
controller: _searchController,
style: GoogleFonts.instrumentSans(color: Colors.white),
style: GoogleFonts.karla(color: AppColors.onSurface),
decoration: InputDecoration(
hintText: 'Search channels...',
hintStyle: GoogleFonts.instrumentSans(color: Colors.white54),
hintStyle: GoogleFonts.karla(color: AppColors.onSurface54),
prefixIcon:
const Icon(Icons.search, color: Colors.white54),
const Icon(Icons.search, color: AppColors.onSurface54),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
@@ -172,7 +172,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
? IconButton(
icon: const Icon(
Icons.clear,
color: Colors.white,
color: AppColors.onSurface,
),
onPressed: _searchController.clear,
)
@@ -197,7 +197,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
decoration: BoxDecoration(
color: _showFavoritesOnly
? AppColors.live.withOpacity(0.2)
: Colors.white.withOpacity(0.1),
: AppColors.onSurface.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: _showFavoritesOnly
? Border.all(color: AppColors.live)
@@ -209,7 +209,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
: Icons.favorite_border,
color: _showFavoritesOnly
? AppColors.live
: Colors.white,
: AppColors.onSurface,
),
),
),
@@ -230,13 +230,13 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
Icon(
Icons.tv_off,
size: 64,
color: Colors.white.withOpacity(0.3),
color: AppColors.onSurface.withOpacity(0.3),
),
const SizedBox(height: 16),
Text(
'No channels found',
style: GoogleFonts.instrumentSans(
color: Colors.white54,
style: GoogleFonts.karla(
color: AppColors.onSurface54,
fontSize: 18,
),
),
@@ -310,7 +310,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
children: [
Icon(
Icons.folder_copy_outlined,
color: Colors.white.withOpacity(0.9),
color: AppColors.onSurface.withOpacity(0.9),
size: 32,
),
const SizedBox(height: 12),
@@ -319,10 +319,10 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
child: Text(
category,
textAlign: TextAlign.center,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white,
color: AppColors.onSurface,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
@@ -331,9 +331,9 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
const SizedBox(height: 4),
Text(
'$count Channels',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 13,
color: Colors.white54,
color: AppColors.onSurface54,
),
),
],
@@ -386,7 +386,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(
color: AppColors.onSurface.withOpacity(
0.05,
), // Subtle transparent background
borderRadius: const BorderRadius.vertical(
@@ -398,18 +398,20 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
child: channel.streamIcon.isNotEmpty
? Image.network(
_getProxiedIconUrl(channel.streamIcon)!,
cacheWidth: 160,
filterQuality: FilterQuality.low,
errorBuilder: (_, __, ___) => Icon(
Icons.tv,
color: Colors.white.withOpacity(0.3),
color: AppColors.onSurface.withOpacity(0.3),
size: 40,
),
)
: Text(
channel.name.characters.first.toUpperCase(),
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white24,
color: AppColors.onSurface24,
),
),
),
@@ -427,8 +429,8 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
children: [
Text(
channel.name,
style: GoogleFonts.instrumentSans(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 13,
fontWeight: FontWeight.w500,
),
@@ -452,8 +454,8 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
if (epgList.isEmpty) {
return Text(
'No Info',
style: GoogleFonts.instrumentSans(
color: Colors.white54,
style: GoogleFonts.karla(
color: AppColors.onSurface54,
fontSize: 10,
),
);
@@ -480,7 +482,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
return Text(
currentProgram.title,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.ratingGold,
fontSize: 10,
fontWeight: FontWeight.w600,
@@ -491,14 +493,14 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
},
loading: () => Text(
'...',
style: GoogleFonts.instrumentSans(
color: Colors.white24,
style: GoogleFonts.karla(
color: AppColors.onSurface24,
fontSize: 10,
),
),
error: (_, __) => Text(
'Err',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: Colors.red,
fontSize: 10,
),