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

feat(theme): complete redesign to Cyber-Cinematic Glass (Stitch)

Browse Source 
Replace the legacy Apple TV-style purple/cyan theme with the full
Google Stitch Cyber-Cinematic Glass design system across the
entire app (desktop + mobile).

- New Material 3 dark ColorScheme: background #121317, primary
  #adc6ff, primaryContainer #4b8eff, surface containers, etc.
- Typography: Space Grotesk (headlines) + Inter (body/labels)
- 3-level glassmorphism via GlassContainer: base, glass, floating
- Primary gradient: #007AFF → #00C6FF with blue glow effects
- Removed old compatibility aliases (focusColor, border, textPrimary,
  textSecondary); all code now uses semantic Stitch tokens
- Systematically replaced all Colors.white/black/red/grey and
  GoogleFonts.roboto/outfit with Stitch equivalents
- All 36 lib/ files updated, zero compilation errors

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed 2026-04-27 22:06:29 +02:00
1 parent a9a1127d6b
commit f7eaa724e2
36 files changed
+1651 -986
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/screens/dashboard_screen.dart
+29 -22
View File
@@ -49,15 +49,15 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF0F1014), // Deep Space Blue-Grey
Color(0xFF181920), // Darker shade
Color(0xFF0F1014),
Color(0xFF121317),
],
),
),
),
),
// Ambient Glow (Subtle accent)
// Ambient Glow — primary accent diffuse
Positioned(
top: -100,
left: -100,
@@ -68,7 +68,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColors.primary.withOpacity(0.2),
AppColors.primary.withOpacity(0.06),
Colors.transparent,
],
),
@@ -91,19 +91,15 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
),
),
// 3. Vertical Glass Sidebar
// 3. Vertical Glass Sidebar (Stitch Level 2)
Positioned(
left: 24,
top: 24,
bottom: 24,
width: 80,
child: GlassContainer(
child: GlassContainer.floating(
borderRadius: 24,
opacity: 0.1,
// blur is hardcoded in GlassContainer (15), so we don't pass it
// border is bool, borderColor allows customization
border: true,
borderColor: Colors.white.withOpacity(0.1),
padding: EdgeInsets.zero,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
@@ -118,7 +114,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColors.primary.withOpacity(0.4),
color: AppColors.glowPrimary(0.4),
blurRadius: 10,
offset: const Offset(0, 4),
),
@@ -126,7 +122,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
),
child: const Icon(
Icons.play_arrow_rounded,
color: Colors.white,
color: AppColors.onSurface,
size: 28,
),
),
@@ -143,27 +139,37 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
onTap: () => setState(() => _selectedIndex = index),
scaleFactor: 1.2,
borderRadius: 16,
focusColor: AppColors.primary,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 48,
height: 48,
decoration: BoxDecoration(
color: isSelected
? AppColors.primary.withOpacity(0.2)
? AppColors.primary.withOpacity(0.15)
: Colors.transparent,
borderRadius: BorderRadius.circular(16),
border: isSelected
? Border.all(
color: AppColors.primary.withOpacity(0.5),
color: AppColors.primaryContainer
.withOpacity(0.5),
width: 2,
)
: null,
boxShadow: isSelected
? [
BoxShadow(
color: AppColors.glowPrimary(0.2),
blurRadius: 12,
spreadRadius: 1,
),
]
: null,
),
child: Icon(
_icons[index],
color: isSelected
? Colors.white
: AppColors.textSecondary,
? AppColors.onSurface
: AppColors.onSurfaceVariant,
size: 24,
),
),
@@ -173,7 +179,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
const Spacer(),
// Settings / Profile
// Profile
Padding(
padding: const EdgeInsets.only(bottom: 24),
child: TvFocusableCard(
@@ -182,10 +188,11 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
scaleFactor: 1.1,
child: CircleAvatar(
radius: 20,
backgroundColor: Colors.white.withOpacity(0.1),
child: const Icon(
backgroundColor: AppColors.surfaceContainerHigh
.withOpacity(0.5),
child: Icon(
Icons.person,
color: Colors.white70,
color: AppColors.onSurfaceVariant,
size: 20,
),
),
lib/features/iptv/screens/player_screen.dart
+32 -36
View File
@@ -379,7 +379,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
// LITE PLAYER MODE for Live TV - Simplified UI (no BackdropFilter)
if (isLiveTV) {
return Scaffold(
backgroundColor: Colors.black,
backgroundColor: AppColors.background,
body: Stack(
fit: StackFit.expand,
children: [
@@ -420,7 +420,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(0.8),
AppColors.background.withOpacity(0.8),
Colors.transparent,
],
),
@@ -450,8 +450,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
'Unknown')
.toString()
: widget.title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.inter(
color: AppColors.onSurface,
fontSize: 18,
fontWeight: FontWeight.w600,
),
@@ -494,7 +494,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
color: AppColors.background.withOpacity(0.3),
blurRadius: 10,
spreadRadius: 2,
),
@@ -510,7 +510,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
// EPG Info (top in mobile)
_buildInlineEpg(),
const SizedBox(height: 12),
const Divider(color: Colors.white10),
const Divider(color: AppColors.outlineVariant),
const SizedBox(height: 8),
// Control Buttons
Row(
@@ -554,7 +554,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
// STANDARD PLAYER MODE (VOD/Series)
return Scaffold(
backgroundColor: Colors.black,
backgroundColor: AppColors.background,
body: Stack(
fit: StackFit.expand,
children: [
@@ -585,7 +585,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
Positioned.fill(
child: PointerInterceptor(
child: Container(
color: Colors.black.withOpacity(0.4),
color: AppColors.background.withOpacity(0.4),
child: Stack(
children: [
// Top Bar
@@ -593,10 +593,9 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
top: 24,
left: 24,
right: 24,
child: GlassContainer(
child: GlassContainer.glass(
height: 72,
borderRadius: 24,
opacity: 0.1,
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
@@ -608,10 +607,10 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
Expanded(
child: Text(
widget.title,
style: GoogleFonts.outfit(
style: GoogleFonts.inter(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.white,
color: AppColors.onSurface,
),
),
),
@@ -633,11 +632,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
bottom: 40,
left: 40,
right: 40,
child: GlassContainer(
child: GlassContainer.glass(
borderRadius: 24,
opacity: 0.2, // Slightly more opaque for controls
border: true,
borderColor: Colors.white.withOpacity(0.1),
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -652,7 +648,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
),
),
style: GoogleFonts.inter(
color: Colors.white70,
color: AppColors.onSurfaceVariant,
),
),
const SizedBox(width: 16),
@@ -663,7 +659,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
activeTrackColor: AppColors.primary,
inactiveTrackColor:
Colors.white.withOpacity(0.2),
thumbColor: Colors.white,
thumbColor: AppColors.onSurface,
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 8,
),
@@ -704,7 +700,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
),
),
style: GoogleFonts.inter(
color: Colors.white70,
color: AppColors.onSurfaceVariant,
),
),
],
@@ -800,7 +796,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
? null
: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Icon(icon, color: Colors.white, size: iconSize),
child: Icon(icon, color: AppColors.onSurface, size: iconSize),
),
),
);
@@ -891,7 +887,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
),
child: Icon(
icon,
color: highlighted ? AppColors.primary : Colors.white,
color: highlighted ? AppColors.primary : AppColors.onSurface,
size: iconSize,
),
),
@@ -923,13 +919,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.red,
color: AppColors.error,
borderRadius: BorderRadius.circular(4),
),
child: const Text(
'LIVE',
style: TextStyle(
color: Colors.white,
color: AppColors.onSurface,
fontSize: 11,
fontWeight: FontWeight.bold,
),
@@ -941,8 +937,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
widget.channels != null
? widget.channels![_currentIndex].name
: widget.title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.inter(
color: AppColors.onSurface,
fontSize: 16,
fontWeight: FontWeight.w600,
),
@@ -971,13 +967,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.red,
color: AppColors.error,
borderRadius: BorderRadius.circular(4),
),
child: const Text(
'LIVE',
style: TextStyle(
color: Colors.white,
color: AppColors.onSurface,
fontSize: 11,
fontWeight: FontWeight.bold,
),
@@ -991,8 +987,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
children: [
Text(
currentProgram.title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.inter(
color: AppColors.onSurface,
fontSize: 15,
fontWeight: FontWeight.w600,
),
@@ -1003,7 +999,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
Text(
currentProgram.description,
style: GoogleFonts.inter(
color: Colors.white60,
color: AppColors.onSurfaceVariant,
fontSize: 12,
),
maxLines: 1,
@@ -1020,13 +1016,13 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.red,
color: AppColors.error,
borderRadius: BorderRadius.circular(4),
),
child: const Text(
'LIVE',
style: TextStyle(
color: Colors.white,
color: AppColors.onSurface,
fontSize: 11,
fontWeight: FontWeight.bold,
),
@@ -1037,8 +1033,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
widget.channels != null
? widget.channels![_currentIndex].name
: widget.title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.inter(
color: AppColors.onSurface,
fontSize: 16,
fontWeight: FontWeight.w600,
),
@@ -1049,8 +1045,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
widget.channels != null
? widget.channels![_currentIndex].name
: widget.title,
style: GoogleFonts.outfit(
color: Colors.white,
style: GoogleFonts.inter(
color: AppColors.onSurface,
fontSize: 16,
fontWeight: FontWeight.w600,
),
lib/features/iptv/screens/playlist_selection_screen.dart
+15 -15
View File
@@ -27,9 +27,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
appBar: AppBar(
title: Text(
'Select Playlist',
style: GoogleFonts.roboto(
style: GoogleFonts.inter(
fontWeight: FontWeight.w600,
color: Colors.white,
color: AppColors.onSurface,
),
),
backgroundColor: Colors.transparent,
@@ -38,12 +38,12 @@ class PlaylistSelectionScreen extends ConsumerWidget {
if (currentUser?.isAdmin ?? false)
IconButton(
icon:
const Icon(Icons.admin_panel_settings, color: Colors.white70),
const Icon(Icons.admin_panel_settings, color: AppColors.onSurfaceVariant),
onPressed: () => context.go('/admin'),
tooltip: 'Admin Panel',
),
IconButton(
icon: const Icon(Icons.logout, color: Colors.white70),
icon: const Icon(Icons.logout, color: AppColors.onSurfaceVariant),
onPressed: () async {
await ref.read(authProvider.notifier).logout();
if (context.mounted) {
@@ -78,9 +78,9 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const SizedBox(height: 16),
Text(
'Error loading playlists',
style: GoogleFonts.outfit(
style: GoogleFonts.inter(
fontSize: 18,
color: Colors.white70,
color: AppColors.onSurfaceVariant,
),
),
const SizedBox(height: 8),
@@ -88,7 +88,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
onPressed: () => ref.refresh(playlistsProvider),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primary,
foregroundColor: Colors.white,
foregroundColor: AppColors.onSurface,
),
child: Text('Retry', style: GoogleFonts.inter()),
),
@@ -104,14 +104,14 @@ class PlaylistSelectionScreen extends ConsumerWidget {
const Icon(
Icons.playlist_remove,
size: 64,
color: Colors.white24,
color: AppColors.outlineVariant,
),
const SizedBox(height: 16),
Text(
'No playlists available',
style: GoogleFonts.outfit(
style: GoogleFonts.inter(
fontSize: 18,
color: Colors.white60,
color: AppColors.onSurfaceVariant,
),
),
const SizedBox(height: 8),
@@ -121,7 +121,7 @@ class PlaylistSelectionScreen extends ConsumerWidget {
: 'Contact administrator',
style: GoogleFonts.inter(
fontSize: 14,
color: Colors.white38,
color: AppColors.outline,
),
),
],
@@ -246,16 +246,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.outfit(
style: GoogleFonts.inter(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
height: 1.2,
),
maxLines: 2,
@@ -266,7 +266,7 @@ class _PlaylistCardState extends State<_PlaylistCard> {
Uri.tryParse(widget.playlist.dns)?.host ?? widget.playlist.dns,
style: GoogleFonts.inter(
fontSize: 13,
color: Colors.white38,
color: AppColors.outline,
letterSpacing: 0.5,
),
maxLines: 1,
lib/features/iptv/screens/series_detail_screen.dart
+30 -29
View File
@@ -6,6 +6,7 @@ import '../../../core/models/playlist_config.dart';
import '../models/xtream_models.dart';
import '../providers/xtream_provider.dart';
import '../providers/watch_history_provider.dart';
import '../../../core/theme/app_colors.dart';
import 'player_screen.dart';
/// Series detail screen showing seasons and episodes
@@ -75,13 +76,13 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
return Scaffold(
appBar: AppBar(
title: Text(widget.series.name),
backgroundColor: Colors.black87,
backgroundColor: AppColors.background,
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.white),
icon: const Icon(Icons.arrow_back, color: AppColors.onSurface),
onPressed: () => Navigator.pop(context),
),
),
backgroundColor: Colors.grey.shade900,
backgroundColor: AppColors.surfaceContainerLow,
body: _isLoading
? const Center(child: CircularProgressIndicator())
: _error != null
@@ -89,9 +90,9 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.error_outline, size: 48, color: Colors.red),
const Icon(Icons.error_outline, size: 48, color: AppColors.error),
const SizedBox(height: 16),
Text('Error: $_error', style: const TextStyle(color: Colors.white70)),
Text('Error: $_error', style: const TextStyle(color: AppColors.onSurfaceVariant)),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _loadSeriesInfo,
@@ -132,8 +133,8 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
errorWidget: (_, __, ___) => Container(
width: 248,
height: 350,
color: Colors.grey.shade800,
child: const Icon(Icons.tv, size: 64, color: Colors.white54),
color: AppColors.surfaceContainer,
child: const Icon(Icons.tv, size: 64, color: AppColors.onSurfaceVariant),
),
),
),
@@ -142,10 +143,10 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
// Title
Text(
_seriesInfo!.name,
style: GoogleFonts.roboto(
style: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
),
),
const SizedBox(height: 8),
@@ -158,7 +159,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
const SizedBox(width: 4),
Text(
_formatRating(_seriesInfo!.rating!)!,
style: GoogleFonts.roboto(fontSize: 13, color: Colors.white70),
style: GoogleFonts.roboto(fontSize: 13, color: AppColors.onSurfaceVariant),
),
],
),
@@ -168,7 +169,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
if (_seriesInfo!.plot != null && _seriesInfo!.plot!.isNotEmpty)
Text(
_seriesInfo!.plot!,
style: GoogleFonts.roboto(fontSize: 12, color: Colors.white60),
style: GoogleFonts.roboto(fontSize: 12, color: AppColors.onSurfaceVariant),
maxLines: 5,
overflow: TextOverflow.ellipsis,
),
@@ -177,10 +178,10 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
// Season selector
Text(
'Seasons',
style: GoogleFonts.roboto(
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.white,
color: AppColors.onSurface,
),
),
const SizedBox(height: 8),
@@ -197,10 +198,10 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
setState(() => _selectedSeason = seasonNum);
}
},
selectedColor: Colors.blue.shade700,
backgroundColor: Colors.grey.shade800,
labelStyle: GoogleFonts.roboto(
color: isSelected ? Colors.white : Colors.white70,
selectedColor: AppColors.primaryContainer,
backgroundColor: AppColors.surfaceContainer,
labelStyle: GoogleFonts.inter(
color: isSelected ? AppColors.onPrimary : AppColors.onSurfaceVariant,
fontSize: 12,
),
);
@@ -212,7 +213,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
),
// Divider
Container(width: 1, color: Colors.grey.shade700),
Container(width: 1, color: AppColors.surfaceContainerHigh),
// Right panel: Episodes list
Expanded(
@@ -223,10 +224,10 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
padding: const EdgeInsets.all(16),
child: Text(
'Season $_selectedSeason - ${currentEpisodes.length} Episodes',
style: GoogleFonts.roboto(
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white,
color: AppColors.onSurface,
),
),
),
@@ -235,7 +236,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
? Center(
child: Text(
'No episodes found',
style: GoogleFonts.roboto(color: Colors.white54),
style: GoogleFonts.roboto(color: AppColors.onSurfaceVariant),
),
)
: ListView.builder(
@@ -264,7 +265,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
final isWatched = watchHistory.isEpisodeWatched(episodeKey);
return Card(
color: Colors.grey.shade800,
color: AppColors.surfaceContainer,
margin: const EdgeInsets.only(bottom: 8),
child: InkWell(
onTap: () async {
@@ -314,18 +315,18 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
width: 40,
height: 40,
decoration: BoxDecoration(
color: isWatched ? Colors.green : Colors.blue.shade700,
color: isWatched ? AppColors.success : AppColors.primaryContainer,
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: isWatched
? const Icon(Icons.check, color: Colors.white, size: 20)
? const Icon(Icons.check, color: AppColors.onSurface, size: 20)
: Text(
'${episode.episodeNum}',
style: GoogleFonts.roboto(
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
color: AppColors.onSurface,
),
),
),
@@ -342,7 +343,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
style: GoogleFonts.roboto(
fontSize: 14,
fontWeight: FontWeight.w500,
color: isWatched ? Colors.white54 : Colors.white,
color: isWatched ? AppColors.onSurfaceVariant : AppColors.onSurface,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
@@ -352,7 +353,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
_formatDuration(episode.durationSecs!),
style: GoogleFonts.roboto(
fontSize: 12,
color: Colors.white54,
color: AppColors.onSurfaceVariant,
),
),
],
@@ -362,7 +363,7 @@ class _SeriesDetailScreenState extends ConsumerState<SeriesDetailScreen> {
// Play icon
Icon(
isWatched ? Icons.replay : Icons.play_circle_outline,
color: Colors.white70,
color: AppColors.onSurfaceVariant,
size: 28,
),
],