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

@@ -124,7 +124,7 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
const SizedBox(height: 24),
Text(
'XtremFlow',
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 32,
fontWeight: FontWeight.w700,
color: AppColors.onSurface,
@@ -133,7 +133,7 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
),
Text(
'Mobile Edition',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 14,
color: AppColors.onSurfaceVariant,
letterSpacing: 0.5,
@@ -173,7 +173,7 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
),
child: Text(
authState.errorMessage!,
style: GoogleFonts.instrumentSans(color: AppColors.error, fontSize: 13),
style: GoogleFonts.karla(color: AppColors.error, fontSize: 13),
textAlign: TextAlign.center,
),
),
@@ -199,7 +199,7 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
onPressed: authState.isLoading ? null : _handleLogin,
style: FilledButton.styleFrom(
backgroundColor: Colors.transparent,
foregroundColor: Colors.white,
foregroundColor: AppColors.onSurface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 0,
).copyWith(
@@ -209,11 +209,11 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
? const SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
child: CircularProgressIndicator(strokeWidth: 2, color: AppColors.onSurface),
)
: Text(
'Sign In',
style: GoogleFonts.instrumentSans(fontWeight: FontWeight.w600, fontSize: 16, color: Colors.white),
style: GoogleFonts.karla(fontWeight: FontWeight.w600, fontSize: 16, color: AppColors.onSurface),
),
),
),
@@ -243,10 +243,10 @@ class _MobileLoginScreenState extends ConsumerState<MobileLoginScreen> {
return TextFormField(
controller: controller,
obscureText: obscureText,
style: GoogleFonts.instrumentSans(color: AppColors.onSurface),
style: GoogleFonts.karla(color: AppColors.onSurface),
decoration: InputDecoration(
labelText: label,
labelStyle: GoogleFonts.instrumentSans(color: AppColors.onSurfaceVariant),
labelStyle: GoogleFonts.karla(color: AppColors.onSurfaceVariant),
prefixIcon: Icon(icon, color: AppColors.onSurfaceVariant),
suffixIcon: isPassword
? IconButton(
@@ -70,7 +70,7 @@ class MobilePlaylistSelectionScreen extends ConsumerWidget {
color: AppColors.error,
),
const SizedBox(height: 16),
Text('Error loading playlists', style: GoogleFonts.instrumentSans()),
Text('Error loading playlists', style: GoogleFonts.karla()),
TextButton(
onPressed: () => ref.refresh(playlistsProvider),
child: const Text('Retry'),
@@ -92,7 +92,7 @@ class MobilePlaylistSelectionScreen extends ConsumerWidget {
const SizedBox(height: 16),
Text(
'No playlists available',
style: GoogleFonts.instrumentSans(color: AppColors.textSecondary),
style: GoogleFonts.karla(color: AppColors.textSecondary),
),
],
),
@@ -177,7 +177,7 @@ class _MobilePlaylistCard extends StatelessWidget {
children: [
Text(
playlist.name,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
@@ -188,7 +188,7 @@ class _MobilePlaylistCard extends StatelessWidget {
const SizedBox(height: 4),
Text(
Uri.tryParse(playlist.dns)?.host ?? playlist.dns,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 13,
color: AppColors.textSecondary,
),
@@ -110,7 +110,7 @@ class _MobileSeriesDetailScreenState
const SizedBox(height: 16),
Text(
'Error: $_error',
style: GoogleFonts.instrumentSans(color: AppColors.onSurfaceVariant),
style: GoogleFonts.karla(color: AppColors.onSurfaceVariant),
),
TextButton(
onPressed: _loadSeriesInfo,
@@ -157,6 +157,7 @@ class _MobileSeriesDetailScreenState
CachedNetworkImage(
imageUrl: _seriesInfo!.cover!,
fit: BoxFit.cover,
memCacheWidth: 800,
errorWidget: (_, __, ___) =>
Container(color: AppColors.surfaceContainerLow),
),
@@ -186,7 +187,7 @@ class _MobileSeriesDetailScreenState
children: [
Text(
_seriesInfo!.name,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColors.onSurface,
@@ -204,7 +205,7 @@ class _MobileSeriesDetailScreenState
const SizedBox(width: 4),
Text(
_formatRating(_seriesInfo!.rating!)!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurfaceVariant,
fontSize: 13,
),
@@ -213,7 +214,7 @@ class _MobileSeriesDetailScreenState
],
Text(
'${_seriesInfo!.episodes.keys.length} Seasons',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurfaceVariant,
fontSize: 13,
),
@@ -235,7 +236,7 @@ class _MobileSeriesDetailScreenState
padding: const EdgeInsets.all(16.0),
child: Text(
_seriesInfo!.plot!,
style: GoogleFonts.instrumentSans(color: AppColors.onSurfaceVariant, height: 1.4),
style: GoogleFonts.karla(color: AppColors.onSurfaceVariant, height: 1.4),
maxLines: 4,
overflow: TextOverflow.ellipsis,
),
@@ -262,7 +263,7 @@ class _MobileSeriesDetailScreenState
},
backgroundColor: AppColors.surfaceContainer,
selectedColor: AppColors.primary,
labelStyle: GoogleFonts.instrumentSans(
labelStyle: GoogleFonts.karla(
color: isSelected ? AppColors.onPrimary : AppColors.onSurfaceVariant,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
),
@@ -357,7 +358,7 @@ class _MobileSeriesDetailScreenState
children: [
Text(
'E${episode.episodeNum} - ${episode.title}',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
fontSize: 14,
@@ -369,7 +370,7 @@ class _MobileSeriesDetailScreenState
episode.durationSecs! > 0)
Text(
_formatDuration(episode.durationSecs!),
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurfaceVariant,
fontSize: 12,
),
@@ -50,7 +50,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
const SizedBox(height: 16),
const Text(
'Loading channels...',
style: TextStyle(color: Colors.white70),
style: TextStyle(color: AppColors.onSurfaceVariant),
),
const SizedBox(height: 24),
FutureBuilder(
@@ -80,8 +80,8 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
const SizedBox(height: 16),
Text(
'Failed to load channels',
style: GoogleFonts.instrumentSans(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 18,
fontWeight: FontWeight.bold,
),
@@ -89,7 +89,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
const SizedBox(height: 8),
Text(
'$e',
style: const TextStyle(color: Colors.white54),
style: const TextStyle(color: AppColors.onSurface54),
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
@@ -153,15 +153,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
Expanded(
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),
GoogleFonts.karla(color: AppColors.onSurface54),
border: InputBorder.none,
prefixIcon: const Icon(
Icons.search,
color: Colors.white54,
color: AppColors.onSurface54,
),
isDense: true,
),
@@ -171,7 +171,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
GestureDetector(
onTap: () => _searchController.clear(),
child:
const Icon(Icons.close, color: Colors.white54),
const Icon(Icons.close, color: AppColors.onSurface54),
),
],
),
@@ -201,15 +201,15 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
),
decoration: BoxDecoration(
color: isSelected
? Colors.white
? AppColors.onSurface
: Colors.black.withOpacity(0.4),
borderRadius: BorderRadius.circular(20),
),
child: Text(
category,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color:
isSelected ? Colors.black : Colors.white70,
isSelected ? Colors.black : AppColors.onSurfaceVariant,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w500,
@@ -233,8 +233,8 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
: _showFavoritesOnly
? 'Favorites'
: _selectedCategory ?? 'Channels',
style: GoogleFonts.instrumentSans(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.bold,
fontSize: 18,
),
@@ -249,7 +249,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
decoration: BoxDecoration(
color: _showFavoritesOnly
? AppColors.live.withOpacity(0.2)
: Colors.white.withOpacity(0.1),
: AppColors.onSurface.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
border: _showFavoritesOnly
? Border.all(color: AppColors.live)
@@ -261,7 +261,7 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
: Icons.favorite_border,
color: _showFavoritesOnly
? AppColors.live
: Colors.white,
: AppColors.onSurface,
size: 20,
),
),
@@ -279,13 +279,13 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
children: [
const Icon(
Icons.tv_off,
color: Colors.white24,
color: AppColors.onSurface24,
size: 48,
),
const SizedBox(height: 16),
Text(
'No channels found',
style: GoogleFonts.instrumentSans(color: Colors.white38),
style: GoogleFonts.karla(color: AppColors.onSurface38),
),
],
),
@@ -365,7 +365,7 @@ class _MobileChannelTile extends StatelessWidget {
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.onSurface.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
padding: const EdgeInsets.all(4),
@@ -373,17 +373,19 @@ class _MobileChannelTile extends StatelessWidget {
? Image.network(
iconUrl,
fit: BoxFit.contain,
cacheWidth: 120,
filterQuality: FilterQuality.low,
errorBuilder: (_, __, ___) =>
const Icon(Icons.tv, color: Colors.white24),
const Icon(Icons.tv, color: AppColors.onSurface24),
)
: const Icon(Icons.tv, color: Colors.white24),
: const Icon(Icons.tv, color: AppColors.onSurface24),
),
const SizedBox(width: 16),
Expanded(
child: Text(
channel.name,
style: GoogleFonts.instrumentSans(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w500,
fontSize: 14,
),
@@ -394,12 +396,12 @@ class _MobileChannelTile extends StatelessWidget {
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.play_arrow_rounded,
color: Colors.white,
color: AppColors.onSurface,
size: 16,
),
),
@@ -206,13 +206,13 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 14,
color: AppColors.onSurface,
),
decoration: InputDecoration(
hintText: 'Search Movies...',
hintStyle: GoogleFonts.instrumentSans(color: AppColors.onSurfaceVariant),
hintStyle: GoogleFonts.karla(color: AppColors.onSurfaceVariant),
border: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.only(bottom: 11),
@@ -300,6 +300,8 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
? Image.network(
_getProxiedImageUrl(movie.streamIcon, ref),
fit: BoxFit.cover,
cacheWidth: 360,
filterQuality: FilterQuality.low,
errorBuilder: (_, __, ___) =>
Container(color: AppColors.surfaceContainerLow),
)
@@ -346,7 +348,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
children: [
Text(
movie.name,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 13,
fontWeight: FontWeight.w600,
@@ -357,7 +359,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
if (isWatched)
Text(
'WATCHED',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.primary,
fontSize: 10,
fontWeight: FontWeight.bold,
@@ -389,7 +391,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
const SizedBox(width: 4),
Text(
_formatRating(movie.rating)!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 10,
fontWeight: FontWeight.bold,
color: AppColors.onSurface,
@@ -197,13 +197,13 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 14,
color: AppColors.onSurface,
),
decoration: InputDecoration(
hintText: 'Search Series...',
hintStyle: GoogleFonts.instrumentSans(color: AppColors.onSurfaceVariant),
hintStyle: GoogleFonts.karla(color: AppColors.onSurfaceVariant),
border: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.only(bottom: 11),
@@ -290,6 +290,8 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
? Image.network(
_getProxiedImageUrl(series.cover, ref),
fit: BoxFit.cover,
cacheWidth: 360,
filterQuality: FilterQuality.low,
errorBuilder: (_, __, ___) =>
Container(color: AppColors.surfaceContainerLow),
)
@@ -332,7 +334,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
right: 12,
child: Text(
series.name,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 13,
fontWeight: FontWeight.w600,
@@ -364,7 +366,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
const SizedBox(width: 4),
Text(
_formatRating(series.rating)!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 10,
fontWeight: FontWeight.bold,
color: AppColors.onSurface,
@@ -398,7 +398,7 @@ class _SectionHeader extends StatelessWidget {
padding: const EdgeInsets.only(left: 8, bottom: 8),
child: Text(
title,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.onSurfaceVariant,