feat: introduce core mobile UI components including login screen, IPTV tabs, theme, and scaffold.

This commit is contained in:
Michael committed 2025-12-13 09:04:09 +01:00
1 parent 985a46f777
commit 33fcfe12db
7 files changed
+710 -435

No files matched your search

@@ -8,8 +8,7 @@ import '../screens/mobile_player_screen.dart';
import '../../../../core/models/iptv_models.dart';
import '../../../../core/models/playlist_config.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../theme/mobile_theme.dart';
import '../../../../core/widgets/components/ui_components.dart'; // For images/CachedNetworkImage if needed
import '../../../../core/widgets/glass_container.dart';
class MobileLiveTVTab extends ConsumerStatefulWidget {
final PlaylistConfig playlist;
@@ -29,18 +28,10 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
void initState() {
super.initState();
_searchController.addListener(() {
setState(() {
_searchQuery = _searchController.text.toLowerCase();
});
setState(() => _searchQuery = _searchController.text.toLowerCase());
});
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final channelsAsync = ref.watch(liveChannelsByPlaylistProvider(widget.playlist));
@@ -48,19 +39,17 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
final settings = ref.watch(iptvSettingsProvider);
return Scaffold(
backgroundColor: AppColors.background,
backgroundColor: Colors.transparent, // Handled by MobileScaffold
body: channelsAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (e, s) => Center(child: Text('Error: $e')),
error: (e, s) => Center(child: Text('Error: $e', style: const TextStyle(color: Colors.white))),
data: (groupedChannels) {
// Prepare categories
var categories = groupedChannels.keys.toList();
if (settings.liveTvKeywords.isNotEmpty) {
categories = categories.where((cat) => settings.matchesLiveTvFilter(cat)).toList();
}
categories.sort();
// Prepare channels
List<Channel> displayedChannels = [];
if (_searchQuery.isNotEmpty) {
displayedChannels = groupedChannels.values.expand((l) => l)
@@ -71,7 +60,6 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
.where((c) => favorites.contains(c.streamId))
.toList();
} else {
// Default to first category if none selected
if (_selectedCategory == null && categories.isNotEmpty) {
_selectedCategory = categories.first;
}
@@ -81,45 +69,42 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
}
return SafeArea(
bottom: false, // For bottom nav
bottom: false,
child: Column(
children: [
// Search Bar
// Header & Search
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Container(
height: 48,
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(horizontal: 12),
padding: const EdgeInsets.all(16),
child: GlassContainer(
borderRadius: 16,
opacity: 0.1,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.search, color: AppColors.textSecondary),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _searchController,
style: const TextStyle(color: AppColors.textPrimary),
decoration: const InputDecoration(
hintText: 'Search channels',
border: InputBorder.none,
isDense: true,
),
),
),
if (_searchQuery.isNotEmpty)
GestureDetector(
onTap: () => _searchController.clear(),
child: const Icon(Icons.close, color: AppColors.textSecondary),
),
Expanded(
child: TextField(
controller: _searchController,
style: GoogleFonts.inter(color: Colors.white),
decoration: InputDecoration(
hintText: 'Search channels...',
hintStyle: GoogleFonts.inter(color: Colors.white54),
border: InputBorder.none,
prefixIcon: const Icon(Icons.search, color: Colors.white54),
isDense: true,
),
),
),
if (_searchQuery.isNotEmpty)
GestureDetector(
onTap: () => _searchController.clear(),
child: const Icon(Icons.close, color: Colors.white54),
),
],
),
),
),
// Categories (Chips)
// Categories
if (_searchQuery.isEmpty && !_showFavoritesOnly)
SizedBox(
height: 40,
@@ -131,71 +116,85 @@ class _MobileLiveTVTabState extends ConsumerState<MobileLiveTVTab> {
itemBuilder: (context, index) {
final category = categories[index];
final isSelected = category == _selectedCategory;
return ChoiceChip(
label: Text(category),
selected: isSelected,
onSelected: (bool selected) {
if (selected) {
setState(() {
_selectedCategory = category;
});
}
},
backgroundColor: AppColors.surface,
selectedColor: AppColors.primary,
labelStyle: TextStyle(
color: isSelected ? Colors.white : AppColors.textSecondary,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
fontSize: 12,
return GestureDetector(
onTap: () => setState(() => _selectedCategory = category),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: BoxDecoration(
color: isSelected ? Colors.white : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
category,
style: GoogleFonts.inter(
color: isSelected ? Colors.black : Colors.white70,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
fontSize: 13,
),
),
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
side: BorderSide.none,
showCheckmark: false,
);
},
),
),
// Content Switcher (Favorites button etc)
// Sub-header
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
child: Row(
children: [
Text(
_searchQuery.isNotEmpty ? 'Search Results' :
_searchQuery.isNotEmpty ? 'Results' :
_showFavoritesOnly ? 'Favorites' :
_selectedCategory ?? 'All Channels',
style: const TextStyle(
color: AppColors.textPrimary,
_selectedCategory ?? 'Channels',
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16,
fontSize: 18,
),
),
const Spacer(),
IconButton(
icon: Icon(
_showFavoritesOnly ? Icons.favorite : Icons.favorite_border,
color: _showFavoritesOnly ? AppColors.error : AppColors.textSecondary,
GestureDetector(
onTap: () => setState(() => _showFavoritesOnly = !_showFavoritesOnly),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: _showFavoritesOnly ? AppColors.live.withOpacity(0.2) : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
border: _showFavoritesOnly ? Border.all(color: AppColors.live) : null,
),
child: Icon(
_showFavoritesOnly ? Icons.favorite : Icons.favorite_border,
color: _showFavoritesOnly ? AppColors.live : Colors.white,
size: 20,
),
),
onPressed: () => setState(() => _showFavoritesOnly = !_showFavoritesOnly),
),
],
),
),
// Channel List
// List
Expanded(
child: displayedChannels.isEmpty
? Center(
child: Text(
'No channels found',
style: GoogleFonts.inter(color: AppColors.textSecondary),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.tv_off, color: Colors.white24, size: 48),
const SizedBox(height: 16),
Text(
'No channels found',
style: GoogleFonts.inter(color: Colors.white38),
),
],
),
)
: ListView.separated(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 80), // Bottom padding for FAB/Nav
padding: const EdgeInsets.fromLTRB(16, 0, 16, 100),
itemCount: displayedChannels.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
separatorBuilder: (_, __) => const SizedBox(height: 8),
itemBuilder: (context, index) {
final channel = displayedChannels[index];
return _MobileChannelTile(
@@ -239,50 +238,68 @@ class _MobileChannelTile extends StatelessWidget {
? '/api/xtream/${channel.streamIcon}'
: null;
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
// Icon
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(8),
),
child: iconUrl != null
? Image.network(
iconUrl,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Icon(Icons.tv, color: Colors.white24),
)
: const Icon(Icons.tv, color: Colors.white24),
),
const SizedBox(width: 12),
// Name
Expanded(
child: Text(
channel.name,
style: const TextStyle(
color: AppColors.textPrimary,
fontWeight: FontWeight.w500,
fontSize: 14,
return GlassContainer(
borderRadius: 12,
opacity: 0.15, // Slightly more visible
padding: EdgeInsets.zero,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
padding: const EdgeInsets.all(4),
child: iconUrl != null
? Image.network(
iconUrl,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Icon(Icons.tv, color: Colors.white24),
)
: const Icon(Icons.tv, color: Colors.white24),
),
),
// Play Icon
const Icon(Icons.play_circle_outline, color: AppColors.primary),
],
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
channel.name,
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 14,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
'#${channel.num}',
style: GoogleFonts.inter(
color: Colors.white38,
fontSize: 12,
),
),
],
),
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
shape: BoxShape.circle,
),
child: const Icon(Icons.play_arrow_rounded, color: Colors.white, size: 16),
),
],
),
),
),
);
@@ -1,10 +1,11 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../../core/models/playlist_config.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/widgets/components/hero_carousel.dart';
import '../../../../core/widgets/components/ui_components.dart';
import '../../../../core/widgets/glass_container.dart';
import '../../../../features/iptv/providers/watch_history_provider.dart';
import '../../../../features/iptv/models/xtream_models.dart';
import '../../../../features/iptv/providers/xtream_provider.dart';
@@ -29,7 +30,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
bool _isSearching = false;
bool _hasMore = true;
int _currentOffset = 0;
static const int _pageSize = 50; // Smaller page size for mobile
static const int _pageSize = 50;
Timer? _searchDebounce;
@override
@@ -48,7 +49,6 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
}
void _onScroll() {
// Only trigger load when near bottom and not already loading
if (!_isLoading && _hasMore &&
_scrollController.position.pixels >=
_scrollController.position.maxScrollExtent * 0.8) {
@@ -93,7 +93,6 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
}
Future<void> _loadMoreMovies() async {
// Prevent race conditions
if (_isLoading || !_hasMore || !mounted) return;
setState(() => _isLoading = true);
@@ -129,7 +128,6 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
return rating;
}
/// Proxy HTTP images through backend to avoid CORS/mixed-content issues
String _getProxiedImageUrl(String? originalUrl) {
if (originalUrl == null || originalUrl.isEmpty) return '';
if (originalUrl.startsWith('http://')) {
@@ -169,7 +167,6 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
: _movies.where((m) => settings.matchesMoviesFilter(m.categoryName)).toList();
}
// Hero Items (use filtered movies)
final heroItems = displayMovies.take(3).map((m) => HeroItem(
id: m.streamId,
title: m.name,
@@ -183,44 +180,41 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
child: CustomScrollView(
controller: _scrollController,
slivers: [
// Header & Search
// Glass Header & Search
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: Container(
height: 40,
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColors.border),
),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: GlassContainer(
borderRadius: 100,
opacity: 0.1, // Glass
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.search, size: 20, color: AppColors.textSecondary),
const Icon(Icons.search, size: 20, color: Colors.white54),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _searchController,
style: const TextStyle(fontSize: 14, color: AppColors.textPrimary),
decoration: const InputDecoration(
hintText: 'Search Movies',
style: GoogleFonts.inter(fontSize: 14, color: Colors.white),
decoration: InputDecoration(
hintText: 'Search Movies...',
hintStyle: GoogleFonts.inter(color: Colors.white54),
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.only(bottom: 11),
contentPadding: const EdgeInsets.only(bottom: 11),
),
onChanged: _onSearchChanged,
),
),
if (_isSearching)
const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2)),
const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white)),
if (_searchQuery.isNotEmpty)
GestureDetector(
onTap: () {
_searchController.clear();
_onSearchChanged('');
},
child: const Icon(Icons.close, size: 16, color: AppColors.textSecondary),
child: const Icon(Icons.close, size: 16, color: Colors.white),
),
],
),
@@ -228,13 +222,13 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
),
),
// Hero Section (Only if not searching)
// Hero Section
if (_searchQuery.isEmpty && heroItems.isNotEmpty)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.only(bottom: 24),
child: SizedBox(
height: 250, // Reduced height for mobile hero
height: 250,
child: HeroCarousel(
items: heroItems,
onTap: (item) {
@@ -248,13 +242,13 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
// Grid
SliverPadding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 80), // Bottom padding for nav
padding: const EdgeInsets.fromLTRB(16, 0, 16, 80),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 2 columns for mobile
crossAxisSpacing: 12,
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.65, // Standard poster ratio
childAspectRatio: 0.65,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
@@ -262,17 +256,85 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
final movie = displayMovies[index];
final isWatched = watchHistory.isMovieWatched(movie.streamId);
return MediaCard(
title: movie.name,
imageUrl: _getProxiedImageUrl(movie.streamIcon),
subtitle: movie.rating != null ? '${_formatRating(movie.rating)} ★' : null,
rating: _formatRating(movie.rating),
isWatched: isWatched,
return GestureDetector(
onTap: () => _playMovie(movie),
onLongPress: () {
ref.read(watchHistoryProvider.notifier).toggleMovieWatched(movie.streamId);
ref.read(watchHistoryProvider.notifier).toggleMovieWatched(movie.streamId);
},
child: Stack(
fit: StackFit.expand,
children: [
// Poster
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: movie.streamIcon != null && movie.streamIcon!.isNotEmpty
? Image.network(
_getProxiedImageUrl(movie.streamIcon),
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(color: Colors.white10),
)
: Container(color: Colors.white10, child: const Icon(Icons.movie, color: Colors.white24)),
),
// Gradient Overlay
Positioned(
bottom: 0, left: 0, right: 0,
height: 80,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.black.withOpacity(0.9)],
),
borderRadius: const BorderRadius.vertical(bottom: Radius.circular(16)),
),
),
),
// Title
Positioned(
bottom: 12, left: 12, right: 12,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
movie.name,
style: GoogleFonts.inter(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w600),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
if (isWatched)
Text('WATCHED', style: GoogleFonts.inter(color: AppColors.primary, fontSize: 10, fontWeight: FontWeight.bold)),
],
),
),
// Rating
if (movie.rating != null && movie.rating!.isNotEmpty)
Positioned(
top: 8, right: 8,
child: GlassContainer(
borderRadius: 4,
opacity: 0.6,
color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.star, size: 10, color: Colors.amber),
const SizedBox(width: 4),
Text(
_formatRating(movie.rating)!,
style: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
),
],
),
);
},
childCount: displayMovies.length,
@@ -284,7 +346,7 @@ class _MobileMoviesTabState extends ConsumerState<MobileMoviesTab> {
const SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.all(24),
child: Center(child: CircularProgressIndicator()),
child: Center(child: CircularProgressIndicator(color: Colors.white)),
),
),
],
@@ -1,11 +1,11 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../../../core/models/playlist_config.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/widgets/components/hero_carousel.dart';
import '../../../../core/widgets/components/ui_components.dart';
import '../../../../core/widgets/glass_container.dart';
import '../../../../features/iptv/models/xtream_models.dart';
import '../../../../features/iptv/providers/xtream_provider.dart';
import '../../../../features/iptv/providers/settings_provider.dart';
@@ -48,7 +48,6 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
}
void _onScroll() {
// Only trigger load when near bottom and not already loading
if (!_isLoading && _hasMore &&
_scrollController.position.pixels >=
_scrollController.position.maxScrollExtent * 0.8) {
@@ -93,7 +92,6 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
}
Future<void> _loadMoreSeries() async {
// Prevent race conditions
if (_isLoading || !_hasMore || !mounted) return;
setState(() => _isLoading = true);
@@ -129,7 +127,6 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
return rating;
}
/// Proxy HTTP images through backend to avoid CORS/mixed-content issues
String _getProxiedImageUrl(String? originalUrl) {
if (originalUrl == null || originalUrl.isEmpty) return '';
if (originalUrl.startsWith('http://')) {
@@ -163,7 +160,6 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
: _series.where((s) => settings.matchesSeriesFilter(s.categoryName)).toList();
}
// Hero Items (use filtered series)
final heroItems = displaySeries.take(3).map((s) => HeroItem(
id: s.seriesId.toString(),
title: s.name,
@@ -177,44 +173,41 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
child: CustomScrollView(
controller: _scrollController,
slivers: [
// Header & Search
// Glass Header & Search
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: Container(
height: 40,
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColors.border),
),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: GlassContainer(
borderRadius: 100,
opacity: 0.1,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.search, size: 20, color: AppColors.textSecondary),
const Icon(Icons.search, size: 20, color: Colors.white54),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _searchController,
style: const TextStyle(fontSize: 14, color: AppColors.textPrimary),
decoration: const InputDecoration(
hintText: 'Search Series',
style: GoogleFonts.inter(fontSize: 14, color: Colors.white),
decoration: InputDecoration(
hintText: 'Search Series...',
hintStyle: GoogleFonts.inter(color: Colors.white54),
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.only(bottom: 11),
contentPadding: const EdgeInsets.only(bottom: 11),
),
onChanged: _onSearchChanged,
),
),
if (_isSearching)
const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2)),
const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white)),
if (_searchQuery.isNotEmpty)
GestureDetector(
onTap: () {
_searchController.clear();
_onSearchChanged('');
},
child: const Icon(Icons.close, size: 16, color: AppColors.textSecondary),
child: const Icon(Icons.close, size: 16, color: Colors.white),
),
],
),
@@ -226,21 +219,17 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
if (_searchQuery.isEmpty && heroItems.isNotEmpty)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.only(bottom: 24),
child: SizedBox(
height: 250,
child: HeroCarousel(
items: heroItems,
onTap: (item) {
// Find series by title fallback if ID logic differs (Series ID is int usually, Hero is Str)
// But here we rely on passing the correct string ID or using the closure directly if possible.
// HeroCarousel onTap returns HeroItem.
// We must map it back.
try {
final series = _series.firstWhere((s) => s.seriesId.toString() == item.id);
_openSeries(series);
} catch (e) {
// Fallback logic not critical for now, assume ID matches
// Fallback
}
},
),
@@ -263,14 +252,74 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
if (index >= displaySeries.length) return null;
final series = displaySeries[index];
return MediaCard(
title: series.name,
imageUrl: _getProxiedImageUrl(series.cover),
subtitle: series.rating != null ? '${_formatRating(series.rating)} ★' : null,
rating: _formatRating(series.rating),
placeholderIcon: Icons.tv,
return GestureDetector(
onTap: () => _openSeries(series),
child: Stack(
fit: StackFit.expand,
children: [
// Poster
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: series.cover != null && series.cover!.isNotEmpty
? Image.network(
_getProxiedImageUrl(series.cover),
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(color: Colors.white10),
)
: Container(color: Colors.white10, child: const Icon(Icons.tv, color: Colors.white24)),
),
// Gradient Overlay
Positioned(
bottom: 0, left: 0, right: 0,
height: 80,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.black.withOpacity(0.9)],
),
borderRadius: const BorderRadius.vertical(bottom: Radius.circular(16)),
),
),
),
// Title
Positioned(
bottom: 12, left: 12, right: 12,
child: Text(
series.name,
style: GoogleFonts.inter(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w600),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
// Rating
if (series.rating != null && series.rating!.isNotEmpty)
Positioned(
top: 8, right: 8,
child: GlassContainer(
borderRadius: 4,
opacity: 0.6,
color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.star, size: 10, color: Colors.amber),
const SizedBox(width: 4),
Text(
_formatRating(series.rating)!,
style: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
),
],
),
);
},
childCount: displaySeries.length,
@@ -282,7 +331,7 @@ class _MobileSeriesTabState extends ConsumerState<MobileSeriesTab> {
const SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.all(24),
child: Center(child: CircularProgressIndicator()),
child: Center(child: CircularProgressIndicator(color: Colors.white)),
),
),
],