Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-23 23:18:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(design): Warm Cinema redesign + fast-start players

Browse Source 
Full visual overhaul from Cyber-Cinematic Glass to "Warm Cinema":
warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F).
Fraunces (editorial serif) for display, Karla for body/UI.

Design
- app_colors: new palette, all existing token names preserved,
  plus posterScrim/heroScrim gradients and lift()/emberFocus() shadows
- app_theme: new type scale, tighter radii, 20+ component themes
- mobile_theme aligned on the same tokens
- glass_container: opaque layered surfaces replace glassmorphism;
  adds GlassCard (hover + remote-focus states) and CinemaBackdrop
- players and boot splash restyled (film-leader motif, no web fonts)

Performance
- remove every BackdropFilter (33 call sites): backdrop blur forced a
  full framebuffer read per frame per card, the main scroll jank source
- bundle Fraunces/Karla as assets: google_fonts no longer fetches from
  fonts.gstatic.com at startup
- drop the blocking hls.js CDN script from index.html; no Dart code
  ever used it, only the player iframes need it
- self-host hls.js/mpegts.js and load them on demand, so ~213 KB of
  mpegts is never downloaded for HLS streams
- bound image decode size on 10 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)
- event-driven start instead of a 200 ms buffer poll plus a 1.5 s wait
- initialLiveManifestSize 3 -> 1, liveSyncDurationCount 10 -> 2,
  startFragPrefetch on, testBandwidth off
- MPEG-TS initial stash 512 KB -> 64 KB
- adaptive escalation fast -> balanced -> safe on repeated stalls
  (60 s rolling window), applied live for HLS so there is no visible cut

Pre-existing build breakage fixed along the way
- undefined AppColors.shimmer, AppTheme.durationXs and spacing8/12/16/32
- broken relative imports in channel_card and quality_selector_widget
- missing GlassCard widget and hasBorder/showShadow parameters

Also resolves a leftover unmerged .claude/settings.local.json by
keeping the remote version.

Still broken (pre-existing, dead code, not reachable from main.dart):
recommendations_provider.dart and continue_watching_widget.dart import
a models/playlist.dart that no longer exists.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed 2026-08-10 21:26:25 +02:00
1 parent cb5eca7547
commit 6f0f51384a
54 files changed
+2425 -1775
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/widgets/recordings_tab.dart
+78 -76
View File
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart' as http;
import '../../../core/theme/app_colors.dart';
import '../../../core/models/iptv_models.dart';
import '../../../core/models/playlist_config.dart';
import '../providers/xtream_provider.dart';
@@ -25,22 +26,22 @@ class _RecordingsTabState extends State<RecordingsTab> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
color: AppColors.background,
child: Column(
children: [
Container(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
color: Colors.grey[900],
color: AppColors.surfaceContainerLow,
child: const Row(
children: [
Icon(Icons.videocam, color: Colors.white, size: 28),
Icon(Icons.videocam, color: AppColors.onSurface, size: 28),
SizedBox(width: 12),
Text(
'Enregistrements',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
),
),
],
@@ -182,8 +183,8 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
children: [
Text(
'GROUPES',
style: GoogleFonts.outfit(
color: Colors.white38,
style: GoogleFonts.karla(
color: AppColors.onSurface38,
fontSize: 10,
fontWeight: FontWeight.bold,
letterSpacing: 1.2,
@@ -210,16 +211,16 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(
color: isSelected
? Colors.white.withOpacity(0.1)
? AppColors.onSurface.withOpacity(0.1)
: Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Text(
cat,
style: GoogleFonts.outfit(
style: GoogleFonts.karla(
color: isSelected
? Colors.white
: Colors.white60,
? AppColors.onSurface
: AppColors.onSurface54,
fontSize: 12,
fontWeight: isSelected
? FontWeight.bold
@@ -237,7 +238,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
),
),
const VerticalDivider(width: 32, color: Colors.white10),
const VerticalDivider(width: 32, color: AppColors.onSurface06),
// ── Colonne 2 : CHAÎNES ──
SizedBox(
@@ -247,20 +248,20 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
// Barre de recherche
TextField(
controller: _searchCtrl,
style: const TextStyle(color: Colors.white, fontSize: 13),
style: const TextStyle(color: AppColors.onSurface, fontSize: 13),
decoration: InputDecoration(
hintText: 'Rechercher...',
hintStyle: const TextStyle(
color: Colors.white38,
color: AppColors.onSurface38,
fontSize: 13,
),
prefixIcon: const Icon(
Icons.search,
color: Colors.white38,
color: AppColors.onSurface38,
size: 18,
),
filled: true,
fillColor: Colors.white.withOpacity(0.07),
fillColor: AppColors.onSurface.withOpacity(0.07),
contentPadding: const EdgeInsets.symmetric(vertical: 8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
@@ -275,7 +276,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
child: Text(
'Aucune chaîne',
style: TextStyle(
color: Colors.white24,
color: AppColors.onSurface24,
fontSize: 12,
),
),
@@ -298,7 +299,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
decoration: BoxDecoration(
color: isSelected
? Colors.redAccent.withOpacity(0.2)
: Colors.white.withOpacity(0.05),
: AppColors.onSurface.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: isSelected
@@ -314,26 +315,27 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
width: 24,
height: 16,
fit: BoxFit.contain,
cacheWidth: 64,
errorBuilder: (_, __, ___) =>
const Icon(
Icons.tv,
color: Colors.white24,
color: AppColors.onSurface24,
size: 16,
),
)
: const Icon(
Icons.tv,
color: Colors.white24,
color: AppColors.onSurface24,
size: 16,
),
const SizedBox(width: 10),
Expanded(
child: Text(
ch.name,
style: GoogleFonts.outfit(
style: GoogleFonts.karla(
color: isSelected
? Colors.white
: Colors.white70,
? AppColors.onSurface
: AppColors.onSurfaceVariant,
fontSize: 12,
),
maxLines: 1,
@@ -351,7 +353,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
),
),
const VerticalDivider(width: 32, color: Colors.white10),
const VerticalDivider(width: 32, color: AppColors.onSurface06),
// ── Colonne droite : programmes EPG ──
Expanded(
@@ -369,8 +371,8 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
Text(
'Sélectionnez une chaîne\npour voir son guide des programmes',
textAlign: TextAlign.center,
style: GoogleFonts.outfit(
color: Colors.white38,
style: GoogleFonts.karla(
color: AppColors.onSurface38,
fontSize: 15,
),
),
@@ -384,8 +386,8 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
children: [
Text(
_selectedChannel!.name,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.bold,
fontSize: 16,
),
@@ -394,7 +396,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
IconButton(
icon: const Icon(
Icons.refresh,
color: Colors.white54,
color: AppColors.onSurface54,
size: 18,
),
tooltip: 'Recharger l\'EPG',
@@ -402,7 +404,7 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
),
],
),
const Divider(color: Colors.white12),
const Divider(color: AppColors.onSurface12),
Expanded(
child: _loadingEpg
? const Center(
@@ -424,8 +426,8 @@ class _EpgGuideViewState extends ConsumerState<_EpgGuideView>
child: Text(
'Aucun programme EPG disponible\npour cette chaîne',
textAlign: TextAlign.center,
style: GoogleFonts.outfit(
color: Colors.white38,
style: GoogleFonts.karla(
color: AppColors.onSurface38,
),
),
)
@@ -524,7 +526,7 @@ class _ProgrammeCard extends StatelessWidget {
Expanded(
child: Text(
'Enregistrer',
style: GoogleFonts.outfit(color: Colors.white),
style: GoogleFonts.karla(color: AppColors.onSurface),
),
),
],
@@ -535,8 +537,8 @@ class _ProgrammeCard extends StatelessWidget {
children: [
Text(
title.isEmpty ? channel.name : title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.bold,
fontSize: 16,
),
@@ -544,7 +546,7 @@ class _ProgrammeCard extends StatelessWidget {
const SizedBox(height: 8),
Text(
'${_fmt(_start)} → ${_fmt(_end)}',
style: const TextStyle(color: Colors.white70),
style: const TextStyle(color: AppColors.onSurfaceVariant),
),
if (_description.isNotEmpty) ...[
const SizedBox(height: 8),
@@ -552,7 +554,7 @@ class _ProgrammeCard extends StatelessWidget {
_description,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Colors.white38, fontSize: 12),
style: const TextStyle(color: AppColors.onSurface38, fontSize: 12),
),
],
],
@@ -631,13 +633,13 @@ class _ProgrammeCard extends StatelessWidget {
color: isNow
? Colors.red.withOpacity(0.15)
: isPast
? Colors.white.withOpacity(0.03)
: Colors.white.withOpacity(0.06),
? AppColors.onSurface.withOpacity(0.03)
: AppColors.onSurface.withOpacity(0.06),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isNow
? Colors.redAccent.withOpacity(0.4)
: Colors.white.withOpacity(0.07),
: AppColors.onSurface.withOpacity(0.07),
),
),
child: ListTile(
@@ -657,8 +659,8 @@ class _ProgrammeCard extends StatelessWidget {
),
child: Text(
'LIVE',
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 8,
fontWeight: FontWeight.bold,
),
@@ -667,8 +669,8 @@ class _ProgrammeCard extends StatelessWidget {
else
Text(
_fmt(_start),
style: GoogleFonts.outfit(
color: isPast ? Colors.white24 : Colors.white70,
style: GoogleFonts.karla(
color: isPast ? AppColors.onSurface24 : AppColors.onSurfaceVariant,
fontSize: 13,
fontWeight: FontWeight.w600,
),
@@ -677,15 +679,15 @@ class _ProgrammeCard extends StatelessWidget {
Text(
_fmt(_end),
style:
GoogleFonts.outfit(color: Colors.white24, fontSize: 10),
GoogleFonts.karla(color: AppColors.onSurface24, fontSize: 10),
),
],
),
),
title: Text(
_title.isEmpty ? '—' : _title,
style: GoogleFonts.outfit(
color: isPast ? Colors.white38 : Colors.white,
style: GoogleFonts.karla(
color: isPast ? AppColors.onSurface38 : AppColors.onSurface,
fontWeight: isNow ? FontWeight.bold : FontWeight.normal,
),
maxLines: 2,
@@ -696,7 +698,7 @@ class _ProgrammeCard extends StatelessWidget {
_description,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Colors.white38, fontSize: 11),
style: const TextStyle(color: AppColors.onSurface38, fontSize: 11),
)
: null,
trailing: !isPast
@@ -826,7 +828,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
backgroundColor: const Color(0xFF1E1E2E),
title: Text(
title,
style: GoogleFonts.outfit(color: Colors.white, fontSize: 14),
style: GoogleFonts.karla(color: AppColors.onSurface, fontSize: 14),
),
content: SizedBox(
width: 500,
@@ -835,7 +837,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
child: Text(
content,
style: const TextStyle(
color: Colors.white70,
color: AppColors.onSurfaceVariant,
fontSize: 11,
fontFamily: 'monospace',
),
@@ -862,7 +864,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
'recording' => Colors.redAccent,
'completed' => Colors.green,
'failed' => Colors.orangeAccent,
_ => Colors.blueAccent,
_ => AppColors.primary,
};
String _statusLabel(String status) => switch (status) {
@@ -894,7 +896,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: const Icon(Icons.refresh, color: Colors.white70),
icon: const Icon(Icons.refresh, color: AppColors.onSurfaceVariant),
onPressed: _fetchRecordings,
tooltip: 'Rafraîchir',
),
@@ -923,8 +925,8 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
const SizedBox(height: 16),
Text(
'Aucun enregistrement',
style: GoogleFonts.outfit(
color: Colors.white38,
style: GoogleFonts.karla(
color: AppColors.onSurface38,
fontSize: 16,
),
),
@@ -941,10 +943,10 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
return Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.05),
color: AppColors.onSurface.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.white.withOpacity(0.1),
color: AppColors.onSurface.withOpacity(0.1),
),
),
child: ListTile(
@@ -961,8 +963,8 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
),
title: Text(
rec['title'] ?? '—',
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
),
),
@@ -973,7 +975,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
Text(
'${_fmtDate(rec['start_time'])} → ${_fmtDate(rec['end_time'])}',
style: const TextStyle(
color: Colors.white54,
color: AppColors.onSurface54,
fontSize: 12,
),
),
@@ -1038,7 +1040,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
IconButton(
icon: const Icon(
Icons.description_outlined,
color: Colors.blueAccent,
color: AppColors.primary,
size: 20,
),
tooltip: 'Logs',
@@ -1050,7 +1052,7 @@ class _RecordingsListViewState extends State<_RecordingsListView> {
IconButton(
icon: const Icon(
Icons.delete_outline,
color: Colors.white38,
color: AppColors.onSurface38,
size: 20,
),
tooltip: 'Supprimer',
@@ -1131,7 +1133,7 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
const SizedBox(width: 8),
Text(
'Nouveau Season Pass',
style: GoogleFonts.outfit(color: Colors.white),
style: GoogleFonts.karla(color: AppColors.onSurface),
),
],
),
@@ -1142,7 +1144,7 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
children: [
Text(
'Enregistre automatiquement toutes les nouvelles diffusions d\'une émission.',
style: GoogleFonts.outfit(color: Colors.white54, fontSize: 13),
style: GoogleFonts.karla(color: AppColors.onSurface54, fontSize: 13),
),
const SizedBox(height: 16),
_buildField(
@@ -1205,12 +1207,12 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
Widget _buildField(TextEditingController c, String label) {
return TextField(
controller: c,
style: const TextStyle(color: Colors.white),
style: const TextStyle(color: AppColors.onSurface),
decoration: InputDecoration(
labelText: label,
labelStyle: const TextStyle(color: Colors.white54, fontSize: 12),
labelStyle: const TextStyle(color: AppColors.onSurface54, fontSize: 12),
enabledBorder: const UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white24),
borderSide: BorderSide(color: AppColors.onSurface24),
),
focusedBorder: const UnderlineInputBorder(
borderSide: BorderSide(color: Colors.purpleAccent),
@@ -1230,7 +1232,7 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
children: [
Text(
'Enregistrements automatiques',
style: GoogleFonts.outfit(color: Colors.white54, fontSize: 13),
style: GoogleFonts.karla(color: AppColors.onSurface54, fontSize: 13),
),
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
@@ -1261,7 +1263,7 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
Expanded(
child: Text(
'Scanne l\'EPG toutes les 4h et programme automatiquement les nouvelles diffusions. Seuls les nouveaux épisodes sont enregistrés.',
style: GoogleFonts.outfit(
style: GoogleFonts.karla(
color: Colors.purpleAccent.shade100,
fontSize: 12,
),
@@ -1287,16 +1289,16 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
const SizedBox(height: 16),
Text(
'Aucun Season Pass actif',
style: GoogleFonts.outfit(
color: Colors.white38,
style: GoogleFonts.karla(
color: AppColors.onSurface38,
fontSize: 16,
),
),
const SizedBox(height: 8),
Text(
'Créez-en un pour enregistrer automatiquement vos émissions préférées',
style: GoogleFonts.outfit(
color: Colors.white24,
style: GoogleFonts.karla(
color: AppColors.onSurface24,
fontSize: 12,
),
textAlign: TextAlign.center,
@@ -1324,8 +1326,8 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
),
title: Text(
p['show_title'] ?? '—',
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
),
),
@@ -1335,14 +1337,14 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
Text(
'Chaîne : ${p['channel_id']}',
style: const TextStyle(
color: Colors.white54,
color: AppColors.onSurface54,
fontSize: 11,
),
),
Text(
'Flux : ${p['stream_url']}',
style: const TextStyle(
color: Colors.white38,
color: AppColors.onSurface38,
fontSize: 10,
),
),
@@ -1351,7 +1353,7 @@ class _SeasonPassesViewState extends State<_SeasonPassesView> {
trailing: IconButton(
icon: const Icon(
Icons.delete_outline,
color: Colors.white38,
color: AppColors.onSurface38,
),
tooltip: 'Supprimer',
onPressed: () =>