mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-20 13:38:05 +02:00
feat(design): Warm Cinema redesign + fast-start players
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:
1 parent
cb5eca7547
commit
6f0f51384a
54 files changed
+2425
-1775
No files matched your search
@@ -140,7 +140,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
|
||||
children: [
|
||||
Text(
|
||||
item.title,
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
style: GoogleFonts.fraunces(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.onSurface,
|
||||
@@ -152,7 +152,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
item.subtitle!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 16,
|
||||
color: AppColors.onSurface,
|
||||
),
|
||||
@@ -245,7 +245,7 @@ class _HeroButtonState extends State<_HeroButton> {
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
widget.label,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
color: AppColors.onSurface,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
|
||||
@@ -149,7 +149,7 @@ class _GradientButtonState extends State<GradientButton>
|
||||
],
|
||||
Text(
|
||||
widget.label,
|
||||
style: GoogleFonts.inter(
|
||||
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.inter(
|
||||
style: GoogleFonts.karla(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
@@ -302,7 +302,7 @@ class CategoryChip extends StatelessWidget {
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 13,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
|
||||
color: isSelected ? AppColors.primary : AppColors.onSurfaceVariant,
|
||||
@@ -458,7 +458,7 @@ class _MediaCardState extends State<MediaCard>
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
widget.rating!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
@@ -502,7 +502,7 @@ class _MediaCardState extends State<MediaCard>
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
color: _isHovered
|
||||
? AppColors.primary
|
||||
: AppColors.onSurface,
|
||||
@@ -518,7 +518,7 @@ class _MediaCardState extends State<MediaCard>
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
),
|
||||
|
||||
@@ -32,13 +32,13 @@ class _DigitalClockState extends State<DigitalClock> {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(0.1),
|
||||
color: AppColors.onSurface.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(color: Colors.white.withOpacity(0.05)),
|
||||
border: Border.all(color: AppColors.onSurface.withOpacity(0.05)),
|
||||
),
|
||||
child: Text(
|
||||
timeString,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
color: AppColors.onSurface,
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
|
||||
/// Glassmorphism container with 3 depth levels (Stitch Design System)
|
||||
/// Conteneur de surface « Warm Cinema » — 3 niveaux de profondeur.
|
||||
///
|
||||
/// Level 0: Pure base background (#0F1014), no blur.
|
||||
/// Level 1: Translucent layer with backdrop blur 20px, 1px border 10% white.
|
||||
/// Level 2: High-blur floating container with subtle inner glow in primary accent.
|
||||
/// Level 0 : socle brut (#0B0908), aucune ombre.
|
||||
/// Level 1 : plaque opaque légèrement éclaircie, liseré crème 8 %, ombre douce.
|
||||
/// Level 2 : bloc flottant, liseré ember sur l'arête haute, ombre profonde.
|
||||
///
|
||||
/// PERF : cette version n'utilise **aucun** `BackdropFilter`. Le flou de fond
|
||||
/// forçait Flutter Web à relire le framebuffer à chaque frame pour chaque
|
||||
/// carte à l'écran (33 sites d'appel ici) — cause principale du jank au
|
||||
/// scroll. La profondeur est désormais rendue par des surfaces opaques
|
||||
/// pré-teintées et des ombres, ce qui coûte quasiment rien au GPU.
|
||||
///
|
||||
/// L'API publique est inchangée : aucun site d'appel n'a besoin d'être modifié.
|
||||
enum GlassLevel { level0, level1, level2 }
|
||||
|
||||
class GlassContainer extends StatelessWidget {
|
||||
@@ -21,6 +28,14 @@ class GlassContainer extends StatelessWidget {
|
||||
final bool border;
|
||||
final List<BoxShadow>? boxShadow;
|
||||
|
||||
/// Alias de [border] (nom utilisé par les widgets de navigation TV).
|
||||
/// Prioritaire sur [border] lorsqu'il est fourni.
|
||||
final bool? hasBorder;
|
||||
|
||||
/// Passer `false` supprime toute ombre portée — utile pour les barres
|
||||
/// collées à un bord, où l'ombre créerait une couture visible.
|
||||
final bool showShadow;
|
||||
|
||||
const GlassContainer({
|
||||
super.key,
|
||||
required this.child,
|
||||
@@ -28,14 +43,18 @@ class GlassContainer extends StatelessWidget {
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.borderRadius = 14.0,
|
||||
this.level = GlassLevel.level1,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
this.hasBorder,
|
||||
this.showShadow = true,
|
||||
});
|
||||
|
||||
/// Convenience constructor for Level 0 (pure base)
|
||||
bool get _showBorder => hasBorder ?? border;
|
||||
|
||||
/// Niveau 0 — socle brut.
|
||||
const GlassContainer.base({
|
||||
super.key,
|
||||
required this.child,
|
||||
@@ -43,13 +62,15 @@ class GlassContainer extends StatelessWidget {
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.borderRadius = 14.0,
|
||||
this.borderColor,
|
||||
this.border = false,
|
||||
this.boxShadow,
|
||||
this.hasBorder,
|
||||
this.showShadow = true,
|
||||
}) : level = GlassLevel.level0;
|
||||
|
||||
/// Convenience constructor for Level 1 (standard glass)
|
||||
/// Niveau 1 — plaque standard.
|
||||
const GlassContainer.glass({
|
||||
super.key,
|
||||
required this.child,
|
||||
@@ -57,13 +78,15 @@ class GlassContainer extends StatelessWidget {
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.borderRadius = 14.0,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
this.hasBorder,
|
||||
this.showShadow = true,
|
||||
}) : level = GlassLevel.level1;
|
||||
|
||||
/// Convenience constructor for Level 2 (floating with inner glow)
|
||||
/// Niveau 2 — bloc flottant (modales, panneaux, overlays).
|
||||
const GlassContainer.floating({
|
||||
super.key,
|
||||
required this.child,
|
||||
@@ -71,10 +94,12 @@ class GlassContainer extends StatelessWidget {
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 24.0,
|
||||
this.borderRadius = 20.0,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
this.hasBorder,
|
||||
this.showShadow = true,
|
||||
}) : level = GlassLevel.level2;
|
||||
|
||||
@override
|
||||
@@ -98,12 +123,13 @@ class GlassContainer extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.baseLevel0,
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
border: border
|
||||
border: _showBorder
|
||||
? Border.all(
|
||||
color: borderColor ?? Colors.transparent,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
boxShadow: showShadow ? boxShadow : null,
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
@@ -114,34 +140,29 @@ class GlassContainer extends StatelessWidget {
|
||||
width: width,
|
||||
height: height,
|
||||
margin: margin,
|
||||
child: ClipRRect(
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.glassLevel1Bg,
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Container(
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
color: AppColors.glassLevel1Bg,
|
||||
border: border
|
||||
? Border.all(
|
||||
color: borderColor ?? AppColors.glassLevel1Border,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
boxShadow: boxShadow ??
|
||||
[
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
border: _showBorder
|
||||
? Border.all(
|
||||
color: borderColor ?? AppColors.glassLevel1Border,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
boxShadow: !showShadow
|
||||
? null
|
||||
: boxShadow ??
|
||||
const [
|
||||
BoxShadow(
|
||||
color: Color(0x59000000), // noir 35 %
|
||||
blurRadius: 18,
|
||||
spreadRadius: -6,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -150,54 +171,222 @@ class GlassContainer extends StatelessWidget {
|
||||
width: width,
|
||||
height: height,
|
||||
margin: margin,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
|
||||
child: Container(
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
color: AppColors.glassLevel2Bg,
|
||||
border: border
|
||||
? Border(
|
||||
top: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2InnerGlow,
|
||||
width: 1,
|
||||
),
|
||||
left: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2InnerGlow,
|
||||
width: 1,
|
||||
),
|
||||
right: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2Border,
|
||||
width: 1,
|
||||
),
|
||||
bottom: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2Border,
|
||||
width: 1,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
boxShadow: boxShadow ??
|
||||
[
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.5),
|
||||
blurRadius: 30,
|
||||
spreadRadius: -10,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
BoxShadow(
|
||||
color: AppColors.primary.withOpacity(0.1),
|
||||
blurRadius: 40,
|
||||
spreadRadius: -10,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
// Dégradé très court : arête haute captant la « lumière du projecteur ».
|
||||
gradient: const LinearGradient(
|
||||
colors: [Color(0xFF262019), Color(0xFF1F1815)],
|
||||
stops: [0.0, 0.45],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
border: _showBorder
|
||||
? Border(
|
||||
top: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2InnerGlow,
|
||||
width: 1,
|
||||
),
|
||||
left: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2Border,
|
||||
width: 1,
|
||||
),
|
||||
right: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2Border,
|
||||
width: 1,
|
||||
),
|
||||
bottom: BorderSide(
|
||||
color: borderColor ?? AppColors.glassLevel2Border,
|
||||
width: 1,
|
||||
),
|
||||
)
|
||||
: null,
|
||||
boxShadow: !showShadow
|
||||
? null
|
||||
: boxShadow ??
|
||||
const [
|
||||
BoxShadow(
|
||||
color: Color(0xA6000000), // noir 65 %
|
||||
blurRadius: 40,
|
||||
spreadRadius: -12,
|
||||
offset: Offset(0, 20),
|
||||
),
|
||||
BoxShadow(
|
||||
color: Color(0x1FD9541F), // halo ember 12 %
|
||||
blurRadius: 48,
|
||||
spreadRadius: -18,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Carte de surface interactive — variante cliquable de [GlassContainer].
|
||||
///
|
||||
/// Survol : la carte se soulève et son liseré passe à la braise.
|
||||
/// Focus clavier / télécommande : halo ember net, indispensable en usage TV.
|
||||
class GlassCard extends StatefulWidget {
|
||||
final Widget child;
|
||||
final double? width;
|
||||
final double? height;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final EdgeInsetsGeometry? margin;
|
||||
final double borderRadius;
|
||||
final GlassLevel level;
|
||||
|
||||
/// Active les réactions au survol et au focus.
|
||||
final bool interactive;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const GlassCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.width,
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 14.0,
|
||||
this.level = GlassLevel.level1,
|
||||
this.interactive = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<GlassCard> createState() => _GlassCardState();
|
||||
}
|
||||
|
||||
class _GlassCardState extends State<GlassCard> {
|
||||
bool _hovered = false;
|
||||
bool _focused = false;
|
||||
|
||||
bool get _active => widget.interactive && (_hovered || _focused);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final surface = AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 180),
|
||||
curve: Curves.easeOutCubic,
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
margin: widget.margin,
|
||||
padding: widget.padding,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.level == GlassLevel.level0
|
||||
? AppColors.baseLevel0
|
||||
: (_active
|
||||
? AppColors.surfaceContainerHigh
|
||||
: AppColors.glassLevel1Bg),
|
||||
borderRadius: BorderRadius.circular(widget.borderRadius),
|
||||
border: Border.all(
|
||||
color: _active
|
||||
? AppColors.primaryContainer
|
||||
: AppColors.glassLevel1Border,
|
||||
width: _active ? 2 : 1,
|
||||
),
|
||||
boxShadow: _active
|
||||
? AppColors.emberFocus()
|
||||
: const [
|
||||
BoxShadow(
|
||||
color: Color(0x59000000),
|
||||
blurRadius: 18,
|
||||
spreadRadius: -6,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Le contenu est rogné pour que les affiches épousent le rayon.
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(
|
||||
(widget.borderRadius - 1).clamp(0.0, widget.borderRadius),
|
||||
),
|
||||
child: widget.child,
|
||||
),
|
||||
);
|
||||
|
||||
if (!widget.interactive && widget.onTap == null) return surface;
|
||||
|
||||
return FocusableActionDetector(
|
||||
onShowFocusHighlight: (v) => setState(() => _focused = v),
|
||||
onShowHoverHighlight: (v) => setState(() => _hovered = v),
|
||||
mouseCursor: SystemMouseCursors.click,
|
||||
actions: <Type, Action<Intent>>{
|
||||
ActivateIntent: CallbackAction<ActivateIntent>(
|
||||
onInvoke: (_) {
|
||||
widget.onTap?.call();
|
||||
return null;
|
||||
},
|
||||
),
|
||||
},
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: surface,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Fond de scène « Warm Cinema ».
|
||||
///
|
||||
/// Dégradé chaud + vignettage, sans image ni flou. Sert de toile de fond aux
|
||||
/// écrans principaux pour éviter les aplats plats et sans atmosphère.
|
||||
class CinemaBackdrop extends StatelessWidget {
|
||||
final Widget child;
|
||||
|
||||
/// Halo ember diffus en haut à gauche (lueur de projection).
|
||||
final bool projectorGlow;
|
||||
|
||||
const CinemaBackdrop({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.projectorGlow = true,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: AppColors.backgroundGradient,
|
||||
),
|
||||
child: projectorGlow
|
||||
? Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
center: const Alignment(-0.75, -0.95),
|
||||
radius: 1.25,
|
||||
colors: [
|
||||
AppColors.primaryContainer.withValues(alpha: 0.10),
|
||||
Colors.transparent,
|
||||
],
|
||||
stops: const [0.0, 1.0],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Vignettage bas : ancre le contenu, style projection.
|
||||
Positioned.fill(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.center,
|
||||
colors: [
|
||||
Colors.black.withValues(alpha: 0.35),
|
||||
Colors.transparent,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
child,
|
||||
],
|
||||
)
|
||||
: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -179,6 +179,9 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
Image.network(
|
||||
item.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
// Le heros est plein ecran : plafond a 1280 px, au-dela le gain
|
||||
// visuel est nul et le cout de decodage explose.
|
||||
cacheWidth: 1280,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
color: AppColors.surface,
|
||||
@@ -220,7 +223,7 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
),
|
||||
child: Text(
|
||||
item.badge!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primary,
|
||||
@@ -233,7 +236,7 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
item.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.outfit(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 48,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: AppColors.textPrimary,
|
||||
@@ -247,7 +250,7 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
item.subtitle!,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textSecondary,
|
||||
@@ -292,7 +295,7 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Play',
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primary,
|
||||
@@ -330,7 +333,7 @@ class _HeroCarouselState extends State<HeroCarousel>
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'More Info',
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
|
||||
@@ -2,43 +2,48 @@ import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
|
||||
/// Stitch-themed loading screen with dark gradient and blue accent.
|
||||
/// Écran de chargement « Warm Cinema » — salle qui s'éteint avant projection.
|
||||
class ThemedLoading extends StatelessWidget {
|
||||
const ThemedLoading({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Color(0xFF0F1014), // Deep Space Dark
|
||||
Color(0xFF121317), // Stitch background
|
||||
],
|
||||
),
|
||||
),
|
||||
return const DecoratedBox(
|
||||
decoration: BoxDecoration(gradient: AppColors.backgroundGradient),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const CircularProgressIndicator(
|
||||
color: Color(0xFF4b8eff), // AppColors.primaryContainer
|
||||
strokeWidth: 3,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Loading...',
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
SizedBox(
|
||||
width: 34,
|
||||
height: 34,
|
||||
child: CircularProgressIndicator(
|
||||
color: AppColors.primaryContainer,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
_LoadingLabel(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LoadingLabel extends StatelessWidget {
|
||||
const _LoadingLabel();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
'PROJECTION',
|
||||
style: GoogleFonts.karla(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 3.2,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -131,7 +131,7 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
),
|
||||
child: Text(
|
||||
widget.badge!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
@@ -208,7 +208,7 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
widget.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
@@ -229,7 +229,7 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
widget.rating!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
@@ -241,7 +241,7 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
if (widget.year != null)
|
||||
Text(
|
||||
widget.year!,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textTertiary,
|
||||
@@ -273,6 +273,11 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
return CachedNetworkImage(
|
||||
imageUrl: widget.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
// Decodage borne a la taille d'affichage : une grille de 40 affiches
|
||||
// passe de ~240 Mo a quelques dizaines de Mo en memoire GPU.
|
||||
memCacheWidth: 400,
|
||||
fadeInDuration: const Duration(milliseconds: 180),
|
||||
fadeOutDuration: Duration.zero,
|
||||
placeholder: (context, url) => Container(
|
||||
color: AppColors.shimmer,
|
||||
child: const Center(
|
||||
@@ -326,7 +331,7 @@ class _TvModernCardState extends State<TvModernCard>
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
|
||||
@@ -62,7 +62,7 @@ class _TvTopNavBarState extends State<TvTopNavBar> {
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.outfit(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
@@ -152,10 +152,10 @@ class _TvTopNavBarState extends State<TvTopNavBar> {
|
||||
),
|
||||
child: Text(
|
||||
badge,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white,
|
||||
color: AppColors.onSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -256,7 +256,7 @@ class _TvSideNavState extends State<TvSideNav> {
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.label,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isSelected ? Colors.black : AppColors.textPrimary,
|
||||
@@ -364,7 +364,7 @@ class _TvFloatingMenuState extends State<TvFloatingMenu>
|
||||
const SizedBox(width: AppTheme.spacing12),
|
||||
Text(
|
||||
widget.actions[index].label,
|
||||
style: GoogleFonts.inter(
|
||||
style: GoogleFonts.karla(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textPrimary,
|
||||
|
||||
Reference in new issue
Block a user