feat: add IPTV player screen with basic controls and iframe integration for web playback.

lib/features/iptv/widgets/live_tv_tab.dart

@@ -12,9 +12,10 @@ import '../../../core/theme/app_theme.dart';
 import '../../../core/utils/responsive_layout.dart';
 import '../../../core/widgets/components/ui_components.dart';
 import '../../../core/widgets/themed_loading_screen.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/tv_focusable_card.dart';
 import 'channel_card.dart';
 
-/// Live TV tab - Apple TV Style with Horizontal Category Filter
 class LiveTVTab extends ConsumerStatefulWidget {
   final PlaylistConfig playlist;
 
@@ -27,25 +28,18 @@ class LiveTVTab extends ConsumerStatefulWidget {
 class _LiveTVTabState extends ConsumerState<LiveTVTab>
     with AutomaticKeepAliveClientMixin {
   
-  // State
   String? _selectedCategory;
-  
-  // UI State
   bool _isGridView = true;
   final TextEditingController _searchController = TextEditingController();
   bool _showFavoritesOnly = false;
   String _searchQuery = '';
-  
-  // Scroll Controllers
   final ScrollController _mainScrollController = ScrollController();
 
   @override
   void initState() {
     super.initState();
     _searchController.addListener(() {
-      setState(() {
+      setState(() => _searchQuery = _searchController.text.toLowerCase());
-        _searchQuery = _searchController.text.toLowerCase();
-      });
     });
   }
 
@@ -71,152 +65,151 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
       backgroundColor: Colors.transparent,
       body: channelsAsync.when(
         loading: () => const ThemedLoading(),
-        error: (e, s) => Center(child: Text('Error: $e')),
+        error: (e, s) => Center(child: Text('Error: $e', style: const TextStyle(color: Colors.white))),
         data: (groupedChannels) {
-           // Groups
            var categories = groupedChannels.keys.toList();
            if (settings.liveTvKeywords.isNotEmpty) {
              categories = categories.where((cat) => settings.matchesLiveTvFilter(cat)).toList();
            }
            categories.sort();
            
-           // Filter Logic
            List<Channel> displayedChannels = [];
            bool showingCategoryGrid = false;
            
            if (_searchQuery.isNotEmpty) {
-             // Global Search
              displayedChannels = groupedChannels.values.expand((l) => l)
                  .where((c) => c.name.toLowerCase().contains(_searchQuery))
                  .toList();
            } else if (_showFavoritesOnly) {
-             // Favorites
              displayedChannels = groupedChannels.values.expand((l) => l)
                  .where((c) => favorites.contains(c.streamId))
                  .toList();
            } else if (_selectedCategory != null) {
-              // Selected Category View
               displayedChannels = groupedChannels[_selectedCategory] ?? [];
            } else {
-             // Category Grid View (Default)
              showingCategoryGrid = true;
            }
 
           return Column(
             children: [
-              // Header
+              // HEADER (Glass)
-              Container(
+              Padding(
                 padding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
-                child: Row(
+                child: GlassContainer(
-                  children: [
+                  borderRadius: 16,
-                    // Back Button (if in category view and not searching)
+                  opacity: 0.6,
-                    if (_selectedCategory != null && _searchQuery.isEmpty && !_showFavoritesOnly) ...[
+                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
-                      IconButton(
+                  child: Row(
-                        icon: const Icon(Icons.arrow_back, color: AppColors.textPrimary),
+                    children: [
-                        onPressed: () {
+                      if (_selectedCategory != null && _searchQuery.isEmpty && !_showFavoritesOnly) ...[
-                          setState(() {
+                        TvFocusableCard(
-                            _selectedCategory = null;
+                          onTap: () {
-                            _mainScrollController.jumpTo(0);
+                             setState(() {
-                          });
+                                _selectedCategory = null;
-                        },
+                                _mainScrollController.jumpTo(0);
-                        tooltip: 'Back to Categories',
+                             });
-                      ),
+                          },
-                      const SizedBox(width: 8),
+                          borderRadius: 50,
-                    ],
+                          child: Container(
-
+                            padding: const EdgeInsets.all(8),
-                    Text(
+                            decoration: BoxDecoration(
-                      _searchQuery.isNotEmpty ? 'Search Results' : 
+                              color: Colors.white.withOpacity(0.1),
-                      _showFavoritesOnly ? 'Favorites' :
+                              shape: BoxShape.circle,
-                      _selectedCategory ?? 'Live TV',
-                      style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                        color: Colors.white,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
-                    const Spacer(),
-                    
-                    // Search Pill
-                    Container(
-                      width: 300,
-                      height: 40,
-                      decoration: BoxDecoration(
-                        color: AppColors.surface,
-                        borderRadius: BorderRadius.circular(AppTheme.radiusFull),
-                        border: Border.all(color: AppColors.border),
-                      ),
-                      padding: const EdgeInsets.symmetric(horizontal: 12),
-                      child: Row(
-                        children: [
-                          const Icon(Icons.search, size: 20, color: AppColors.textSecondary),
-                          const SizedBox(width: 8),
-                          Expanded(
-                            child: TextField(
-                              controller: _searchController,
-                              style: const TextStyle(fontSize: 14, color: Colors.white),
-                              decoration: const InputDecoration(
-                                hintText: 'Rechercher...',
-                                hintStyle: TextStyle(color: Colors.white54),
-                                border: InputBorder.none,
-                                isDense: true,
-                                contentPadding: EdgeInsets.only(bottom: 11),
-                              ),
                             ),
+                            child: const Icon(Icons.arrow_back, color: Colors.white),
                           ),
-                          if (_searchQuery.isNotEmpty)
-                          GestureDetector(
-                            onTap: () => _searchController.clear(),
-                            child: const Icon(Icons.close, size: 16, color: AppColors.textSecondary),
-                          ),
-                        ],
-                      ),
-                    ),
-                    const SizedBox(width: 16),
-                    
-                    // Favorites Toggle
-                    IconButton(
-                      icon: Icon(
-                        _showFavoritesOnly ? Icons.favorite : Icons.favorite_border,
-                        color: _showFavoritesOnly ? AppColors.error : AppColors.textSecondary,
-                      ),
-                      onPressed: () {
-                         setState(() {
-                           _showFavoritesOnly = !_showFavoritesOnly;
-                           if (_showFavoritesOnly) _searchController.clear();
-                           _selectedCategory = null; // Reset selection when toggling favorites
-                         });
-                      },
-                      tooltip: 'Favorites Only',
-                    ),
-                    
-                    // View Toggle (Only show when not in category grid)
-                    if (!showingCategoryGrid)
-                      IconButton(
-                        icon: Icon(
-                          _isGridView ? Icons.view_list : Icons.grid_view,
-                          color: AppColors.textSecondary,
                         ),
-                        onPressed: () => setState(() => _isGridView = !_isGridView),
+                        const SizedBox(width: 16),
-                        tooltip: 'Toggle View',
+                      ],
+
+                      Expanded(
+                        child: Text(
+                          _searchQuery.isNotEmpty ? 'Search Results' : 
+                          _showFavoritesOnly ? 'Favorites' :
+                          _selectedCategory ?? 'Live TV',
+                          style: GoogleFonts.inter(
+                            fontSize: 24,
+                            fontWeight: FontWeight.w700,
+                            color: Colors.white,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
                       ),
-                  ],
+                      
+                      // Search Bar
+                      Container(
+                        width: 250,
+                        height: 44,
+                        decoration: BoxDecoration(
+                          color: Colors.white.withOpacity(0.1),
+                          borderRadius: BorderRadius.circular(12),
+                        ),
+                        child: TextField(
+                          controller: _searchController,
+                          style: GoogleFonts.inter(color: Colors.white),
+                          decoration: InputDecoration(
+                            hintText: 'Search channels...',
+                            hintStyle: GoogleFonts.inter(color: Colors.white54),
+                            prefixIcon: const Icon(Icons.search, color: Colors.white54),
+                            border: InputBorder.none,
+                            contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+                            suffixIcon: _searchQuery.isNotEmpty 
+                              ? IconButton(icon: const Icon(Icons.clear, color: Colors.white), onPressed: _searchController.clear)
+                              : null,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      
+                      // Favorites Toggle
+                      TvFocusableCard(
+                        onTap: () {
+                           setState(() {
+                             _showFavoritesOnly = !_showFavoritesOnly;
+                             if (_showFavoritesOnly) _searchController.clear();
+                             _selectedCategory = null;
+                           });
+                        },
+                        borderRadius: 12,
+                        child: Container(
+                          padding: const EdgeInsets.all(10),
+                          decoration: BoxDecoration(
+                            color: _showFavoritesOnly ? AppColors.live.withOpacity(0.2) : Colors.white.withOpacity(0.1),
+                            borderRadius: BorderRadius.circular(12),
+                            border: _showFavoritesOnly ? Border.all(color: AppColors.live) : null,
+                          ),
+                          child: Icon(
+                            _showFavoritesOnly ? Icons.favorite : Icons.favorite_border,
+                            color: _showFavoritesOnly ? AppColors.live : Colors.white,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
                 ),
               ),
 
-              // Content
+              // GRID / LIST AREA
               Expanded(
                 child: showingCategoryGrid
                     ? _buildCategoryGrid(categories, groupedChannels)
                     : displayedChannels.isEmpty
                         ? Center(
-                            child: Text(
+                            child: Column(
-                              _searchQuery.isNotEmpty ? 'No channels found' : 
+                              mainAxisAlignment: MainAxisAlignment.center,
-                              _showFavoritesOnly ? 'No favorites' : 'No channels in this group',
+                              children: [
-                              style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: AppColors.textSecondary),
+                                Icon(Icons.tv_off, size: 64, color: Colors.white.withOpacity(0.3)),
+                                const SizedBox(height: 16),
+                                Text(
+                                  'No channels found',
+                                  style: GoogleFonts.inter(color: Colors.white54, fontSize: 18),
+                                ),
+                              ],
                             ),
                           )
-                        : _isGridView
+                        // Use raw grid for now, but wrapped in focusable cards
-                            ? _buildChannelGrid(displayedChannels)
+                        : _buildChannelGrid(displayedChannels),
-                            : _buildChannelList(displayedChannels),
               ),
             ],
           );
@@ -230,7 +223,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
       context,
       mobile: 2,
       tablet: 3,
-      desktop: 5,
+      desktop: 4,
     );
 
     return GridView.builder(
@@ -238,73 +231,71 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
       padding: const EdgeInsets.all(24),
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: columns,
-        mainAxisSpacing: 16,
+        mainAxisSpacing: 24,
-        crossAxisSpacing: 16,
+        crossAxisSpacing: 24,
-        childAspectRatio: 1.5,
+        childAspectRatio: 1.6,
       ),
       itemCount: categories.length,
       itemBuilder: (context, index) {
         final category = categories[index];
         final count = groupedChannels[category]?.length ?? 0;
         
-        return Card(
+        return TvFocusableCard(
-          clipBehavior: Clip.antiAlias,
+          onTap: () {
-          elevation: 2,
+            setState(() {
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+              _selectedCategory = category;
-          child: InkWell(
+              _mainScrollController.jumpTo(0);
-            onTap: () {
+            });
-              setState(() {
+          },
-                _selectedCategory = category;
+          borderRadius: 16,
-                _mainScrollController.jumpTo(0);
+          child: GlassContainer(
-              });
+            borderRadius: 16,
-            },
+            opacity: 0.2, // Darker glass
-            child: Container(
+            padding: const EdgeInsets.all(0),
-              decoration: BoxDecoration(
+            child: Stack(
-                gradient: LinearGradient(
+              children: [
-                  begin: Alignment.topLeft,
+                // Background Gradient
-                  end: Alignment.bottomRight,
+                Container(
-                  colors: [
+                  decoration: BoxDecoration(
-                    AppColors.surfaceVariant,
+                    gradient: LinearGradient(
-                    AppColors.surfaceVariant.withOpacity(0.8),
+                      begin: Alignment.topLeft,
-                  ],
+                      end: Alignment.bottomRight,
+                      colors: [
+                        Colors.white.withOpacity(0.05),
+                        Colors.blue.withOpacity(0.05),
+                      ],
+                    ),
+                  ),
                 ),
-                border: Border.all(color: Colors.white.withOpacity(0.2)),
+                Center(
-                borderRadius: BorderRadius.circular(12),
+                  child: Column(
-              ),
+                    mainAxisAlignment: MainAxisAlignment.center,
-              padding: const EdgeInsets.all(16),
+                    children: [
-              child: Column(
+                      Icon(Icons.folder_copy_outlined, color: Colors.white.withOpacity(0.9), size: 32),
-                mainAxisAlignment: MainAxisAlignment.center,
+                      const SizedBox(height: 12),
-                children: [
+                      Padding(
-                  Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
-                    padding: const EdgeInsets.all(12),
+                        child: Text(
-                    decoration: BoxDecoration(
+                          category,
-                      color: AppColors.primary.withOpacity(0.1),
+                          textAlign: TextAlign.center,
-                      shape: BoxShape.circle,
+                          style: GoogleFonts.inter(
-                    ),
+                            fontSize: 16,
-                    child: const Icon(Icons.folder_open, color: AppColors.primary, size: 32),
+                            fontWeight: FontWeight.w600,
+                            color: Colors.white,
+                          ),
+                          maxLines: 2,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        '$count Channels',
+                        style: GoogleFonts.inter(fontSize: 13, color: Colors.white54),
+                      ),
+                    ],
                   ),
-                  const SizedBox(height: 12),
+                ),
-                  Text(
+              ],
-                    category,
-                    style: const TextStyle(
-                      fontSize: 16,
-                      fontWeight: FontWeight.bold,
-                      color: AppColors.textPrimary,
-                    ),
-                    textAlign: TextAlign.center,
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                  const SizedBox(height: 4),
-                  Text(
-                    '$count Channels',
-                    style: const TextStyle(
-                      fontSize: 12,
-                      color: AppColors.textSecondary,
-                    ),
-                  ),
-                ],
-              ),
             ),
           ),
         );
@@ -317,7 +308,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
       context,
       mobile: 2,
       tablet: 4,
-      desktop: 6,
+      desktop: 5,
     );
 
     return GridView.builder(
@@ -327,41 +318,65 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
         crossAxisCount: columns,
         mainAxisSpacing: 16,
         crossAxisSpacing: 16,
-        childAspectRatio: 1.3,
+        childAspectRatio: 1.0, // Square-ish cards
       ),
       itemCount: channels.length,
       itemBuilder: (context, index) {
         final channel = channels[index];
-        return ChannelCard(
+        return TvFocusableCard(
-          streamId: channel.streamId,
-          name: channel.name,
-          iconUrl: _getProxiedIconUrl(channel.streamIcon),
-          currentProgram: null,
-          playlist: widget.playlist,
           onTap: () => _playChannel(channel, channels),
-        );
+          borderRadius: 12,
-      },
+          child: Container(
-    );
+            decoration: BoxDecoration(
-  }
+              color: AppColors.surfaceVariant,
-
+              borderRadius: BorderRadius.circular(12),
-  Widget _buildChannelList(List<Channel> channels) {
+            ),
-    return ListView.separated(
+            child: Column(
-      controller: _mainScrollController,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
-      padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
+              children: [
-      itemCount: channels.length,
+                // Icon Area
-      separatorBuilder: (_, __) => const SizedBox(height: 8),
+                Expanded(
-      itemBuilder: (context, index) {
+                  child: Container(
-        final channel = channels[index];
+                    decoration: BoxDecoration(
-        return SizedBox(
+                      color: Colors.white,
-          height: 70,
+                      borderRadius: const BorderRadius.vertical(top: Radius.circular(12)),
-          child: ChannelCard(
+                    ),
-            streamId: channel.streamId,
+                    padding: const EdgeInsets.all(16),
-            name: channel.name,
+                    child: Center(
-            iconUrl: _getProxiedIconUrl(channel.streamIcon),
+                      child: channel.streamIcon.isNotEmpty 
-            height: 70,
+                        ? Image.network(
-            width: double.infinity,
+                            _getProxiedIconUrl(channel.streamIcon)!,
-            playlist: widget.playlist,
+                            errorBuilder: (_,__,___) => const Icon(Icons.tv, color: Colors.grey, size: 40),
-            onTap: () => _playChannel(channel, channels),
+                          )
+                        : Text(
+                            channel.name.characters.first.toUpperCase(),
+                            style: GoogleFonts.inter(fontSize: 40, fontWeight: FontWeight.bold, color: Colors.black12),
+                          ),
+                    ),
+                  ),
+                ),
+                // Footer
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                  color: Colors.black54,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        channel.name,
+                        style: GoogleFonts.inter(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                      Text(
+                        'Channel #${channel.num}',
+                        style: GoogleFonts.inter(color: Colors.white54, fontSize: 10),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
           ),
         );
       },
@@ -377,7 +392,6 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
   }
 
   void _playChannel(Channel channel, List<Channel> contextList) {
-    final index = contextList.indexOf(channel);
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => PlayerScreen(
@@ -386,7 +400,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
           playlist: widget.playlist,
           streamType: StreamType.live,
           channels: contextList,
-          initialIndex: index,
+          initialIndex: contextList.indexOf(channel),
         ),
       ),
     );

lib/features/iptv/widgets/movies_tab.dart

@@ -7,8 +7,9 @@ import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_theme.dart';
 import '../../../core/utils/responsive_layout.dart';
 import '../../../core/widgets/components/hero_carousel.dart';
-import '../../../core/widgets/components/ui_components.dart';
 import '../../../core/widgets/themed_loading_screen.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/tv_focusable_card.dart';
 import '../providers/watch_history_provider.dart';
 import '../models/xtream_models.dart';
 import '../providers/xtream_provider.dart';
@@ -140,7 +141,6 @@ class _MoviesTabState extends ConsumerState<MoviesTab> {
     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://')) {
@@ -180,21 +180,6 @@ class _MoviesTabState extends ConsumerState<MoviesTab> {
           : _movies.where((m) => settings.matchesMoviesFilter(m.categoryName)).toList();
     }
 
-    // Hero Items (Take 5 random or first 5 from filtered list)
-    final heroItems = displayMovies.take(5).map((m) => HeroItem(
-      id: m.streamId,
-      title: m.name,
-      imageUrl: _getProxiedImageUrl(m.streamIcon),
-      subtitle: m.rating != null ? '${_formatRating(m.rating)} ★' : null,
-      onMoreInfo: () {
-         _playMovie(m);
-      },
-    )).toList();
-
-    if (_movies.isEmpty && !_isLoading) {
-      return const Center(child: Text('No movies available'));
-    }
-
     final double gridItemRatio = 0.65;
     final int crossAxisCount = ResponsiveLayout.value(
       context,
@@ -203,128 +188,230 @@ class _MoviesTabState extends ConsumerState<MoviesTab> {
       desktop: 7,
     );
 
-    return CustomScrollView(
+    return Scaffold(
-      controller: _scrollController,
+      backgroundColor: Colors.transparent,
-      slivers: [
+      body: CustomScrollView(
-        // Header
+        controller: _scrollController,
-        SliverToBoxAdapter(
+        slivers: [
-          child: Container(
+          // Header (Floating Glass)
-            padding: const EdgeInsets.fromLTRB(24, 16, 24, 8),
-            child: Row(
-              children: [
-                Text(
-                  'Movies',
-                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                    color: Colors.white,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const Spacer(),
-                Container(
-                  width: 300,
-                  height: 40,
-                  decoration: BoxDecoration(
-                    color: AppColors.surface,
-                    borderRadius: BorderRadius.circular(AppTheme.radiusFull),
-                    border: Border.all(color: AppColors.border),
-                  ),
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Row(
-                    children: [
-                      const Icon(Icons.search, size: 20, color: AppColors.textSecondary),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: TextField(
-                          controller: _searchController,
-                          style: const TextStyle(fontSize: 14, color: Colors.white),
-                          decoration: const InputDecoration(
-                            hintText: 'Rechercher...',
-                            hintStyle: TextStyle(color: Colors.white54),
-                            border: InputBorder.none,
-                            enabledBorder: InputBorder.none,
-                            focusedBorder: InputBorder.none,
-                            contentPadding: EdgeInsets.only(bottom: 12),
-                            isDense: true,
-                          ),
-                          onChanged: _onSearchChanged,
-                        ),
-                      ),
-                      if (_isSearching)
-                        const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2)),
-                      if (_searchQuery.isNotEmpty)
-                        GestureDetector(
-                          onTap: () {
-                             _searchController.clear();
-                             _onSearchChanged('');
-                          },
-                          child: const Icon(Icons.close, size: 16, color: AppColors.textSecondary),
-                        ),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-
-        // Hero Carousel
-        if (_searchQuery.isEmpty && heroItems.isNotEmpty)
           SliverToBoxAdapter(
             child: Padding(
-              padding: const EdgeInsets.only(bottom: 24),
+              padding: const EdgeInsets.fromLTRB(24, 16, 24, 24),
-              child: HeroCarousel(
+              child: GlassContainer(
-                items: heroItems,
+                borderRadius: 100,
-                onTap: (item) {
+                opacity: 0.6,
-                   final movie = _movies.firstWhere((element) => element.streamId == item.id);
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-                   _playMovie(movie);
+                child: Row(
-                },
+                  children: [
+                    Text(
+                      'Movies',
+                      style: GoogleFonts.inter(
+                        fontSize: 24,
+                        fontWeight: FontWeight.w700,
+                        color: Colors.white,
+                      ),
+                    ),
+                    const Spacer(),
+                    
+                    // Search Bar
+                    Container(
+                      width: 300,
+                      height: 40,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withOpacity(0.1),
+                        borderRadius: BorderRadius.circular(100),
+                      ),
+                      padding: const EdgeInsets.symmetric(horizontal: 16),
+                      child: Row(
+                        children: [
+                          const Icon(Icons.search, size: 20, color: Colors.white54),
+                          const SizedBox(width: 8),
+                          Expanded(
+                            child: TextField(
+                              controller: _searchController,
+                              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: const EdgeInsets.only(bottom: 12),
+                              ),
+                              onChanged: _onSearchChanged,
+                            ),
+                          ),
+                          if (_isSearching)
+                             const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white)),
+                          if (_searchQuery.isNotEmpty)
+                             GestureDetector(
+                               onTap: () {
+                                  _searchController.clear();
+                                  _onSearchChanged('');
+                               },
+                               child: const Icon(Icons.close, size: 16, color: Colors.white),
+                             ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               ),
             ),
           ),
 
-        // Grid
+          // Hero Carousel (Only when not searching)
-        SliverPadding(
+          if (_searchQuery.isEmpty && displayMovies.isNotEmpty)
-          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+            SliverToBoxAdapter(
-          sliver: SliverGrid(
+              child: Padding(
-            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                padding: const EdgeInsets.only(bottom: 32),
-              crossAxisCount: crossAxisCount,
+                child: HeroCarousel(
-              crossAxisSpacing: 24,
+                  items: displayMovies.take(5).map((m) => HeroItem(
-              mainAxisSpacing: 32,
+                    id: m.streamId,
-              childAspectRatio: gridItemRatio,
+                    title: m.name,
-            ),
+                    imageUrl: _getProxiedImageUrl(m.streamIcon),
-            delegate: SliverChildBuilderDelegate(
+                    subtitle: m.rating != null ? '${_formatRating(m.rating)} ★' : null,
-              (context, index) {
+                    onMoreInfo: () => _playMovie(m),
-                if (index >= displayMovies.length) return null;
+                  )).toList(),
-                final movie = displayMovies[index];
+                  onTap: (item) {
-                final isWatched = watchHistory.isMovieWatched(movie.streamId);
+                     final movie = _movies.firstWhere((element) => element.streamId == item.id);
-                
+                     _playMovie(movie);
-                return MediaCard(
-                  title: movie.name,
-                  imageUrl: _getProxiedImageUrl(movie.streamIcon),
-
-                  subtitle: movie.rating != null ? '${_formatRating(movie.rating)} ★' : null,
-                  rating: _formatRating(movie.rating),
-                  isWatched: isWatched,
-                  onTap: () => _playMovie(movie),
-                  onLongPress: () {
-                    ref.read(watchHistoryProvider.notifier).toggleMovieWatched(movie.streamId);
                   },
-                );
+                ),
-              },
+              ),
-              childCount: displayMovies.length,
             ),
-          ),
-        ),
           
-        // Loader
+          // Movies Grid
-        if (_isLoading)
+          SliverPadding(
-          const SliverToBoxAdapter(
+            padding: const EdgeInsets.symmetric(horizontal: 24),
-            child: Padding(
+            sliver: SliverGrid(
-              padding: EdgeInsets.all(24),
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              child: ThemedLoading(),
+                crossAxisCount: crossAxisCount,
+                crossAxisSpacing: 20,
+                mainAxisSpacing: 20,
+                childAspectRatio: gridItemRatio,
+              ),
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  if (index >= displayMovies.length) return null;
+                  final movie = displayMovies[index];
+                  final isWatched = watchHistory.isMovieWatched(movie.streamId);
+                  
+                  return TvFocusableCard(
+                    onTap: () => _playMovie(movie),
+                    borderRadius: 12,
+                    child: Stack(
+                      fit: StackFit.expand,
+                      children: [
+                        // Poster Image
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(12),
+                          child: movie.streamIcon != null && movie.streamIcon!.isNotEmpty
+                            ? Image.network(
+                                _getProxiedImageUrl(movie.streamIcon),
+                                fit: BoxFit.cover,
+                                errorBuilder: (ctx, err, stack) => Container(
+                                  color: AppColors.surfaceVariant,
+                                  child: const Center(child: Icon(Icons.movie, size: 48, color: Colors.white24)),
+                                ),
+                              )
+                            : Container(
+                                color: AppColors.surfaceVariant,
+                                child: const Center(child: Icon(Icons.movie, size: 48, color: Colors.white24)),
+                              ),
+                        ),
+                        
+                        // Gradient Overlay
+                        Positioned(
+                          left: 0, right: 0, bottom: 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(12)),
+                            ),
+                          ),
+                        ),
+                        
+                        // Rating Badge
+                        if (movie.rating != null && movie.rating!.isNotEmpty)
+                        Positioned(
+                          top: 8,
+                          right: 8,
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                            decoration: BoxDecoration(
+                              color: Colors.black.withOpacity(0.7),
+                              borderRadius: BorderRadius.circular(4),
+                              border: Border.all(color: Colors.white24),
+                            ),
+                            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),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+
+                        // Title
+                        Positioned(
+                          left: 12, right: 12, bottom: 12,
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              Text(
+                                movie.name,
+                                style: GoogleFonts.inter(
+                                  color: Colors.white,
+                                  fontSize: 13,
+                                  fontWeight: FontWeight.w600,
+                                  shadows: [const Shadow(color: Colors.black, blurRadius: 4)],
+                                ),
+                                maxLines: 2,
+                                overflow: TextOverflow.ellipsis,
+                              ),
+                              if (isWatched)
+                                Padding(
+                                  padding: const EdgeInsets.only(top: 4),
+                                  child: Text(
+                                    'WATCHED',
+                                    style: GoogleFonts.inter(color: AppColors.primary, fontSize: 10, fontWeight: FontWeight.bold),
+                                  ),
+                                ),
+                            ],
+                          ),
+                        ),
+                      ],
+                    ),
+                  );
+                },
+                childCount: displayMovies.length,
+              ),
             ),
           ),
-      ],
+          
+          // Loader
+          if (_isLoading)
+            const SliverToBoxAdapter(
+              child: Padding(
+                padding: EdgeInsets.all(32),
+                child: Center(child: CircularProgressIndicator(color: Colors.white)),
+              ),
+            ),
+            
+          const SliverPadding(padding: EdgeInsets.only(bottom: 50)),
+        ],
+      ),
     );
   }
 }

lib/features/iptv/widgets/series_tab.dart

@@ -7,8 +7,9 @@ import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_theme.dart';
 import '../../../core/utils/responsive_layout.dart';
 import '../../../core/widgets/components/hero_carousel.dart';
-import '../../../core/widgets/components/ui_components.dart';
 import '../../../core/widgets/themed_loading_screen.dart';
+import '../../../core/widgets/glass_container.dart';
+import '../../../core/widgets/tv_focusable_card.dart';
 
 import '../models/xtream_models.dart';
 import '../providers/xtream_provider.dart';
@@ -140,7 +141,6 @@ class _SeriesTabState extends ConsumerState<SeriesTab> {
     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://')) {
@@ -174,19 +174,6 @@ class _SeriesTabState extends ConsumerState<SeriesTab> {
           : _series.where((s) => settings.matchesSeriesFilter(s.categoryName)).toList();
     }
 
-    if (_series.isEmpty && !_isLoading) {
-      return const Center(child: Text('No series available'));
-    }
-
-    // Hero Items
-    final heroItems = displaySeries.take(5).map((s) => HeroItem(
-      id: s.seriesId.toString(), // ID logic might differ for Series
-      title: s.name,
-      imageUrl: _getProxiedImageUrl(s.cover),
-      subtitle: s.rating != null ? '${_formatRating(s.rating)} ★' : null,
-      onMoreInfo: () => _openSeries(s),
-    )).toList();
-
     final double gridItemRatio = 0.65;
     final int crossAxisCount = ResponsiveLayout.value(
       context,
@@ -195,123 +182,215 @@ class _SeriesTabState extends ConsumerState<SeriesTab> {
       desktop: 7,
     );
 
-    return CustomScrollView(
+    return Scaffold(
-      controller: _scrollController,
+      backgroundColor: Colors.transparent,
-      slivers: [
+      body: CustomScrollView(
-        // Header
+        controller: _scrollController,
-        SliverToBoxAdapter(
+        slivers: [
-          child: Container(
+          // Header
-            padding: const EdgeInsets.fromLTRB(24, 16, 24, 8),
-            child: Row(
-              children: [
-                Text(
-                  'TV Series',
-                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                    color: Colors.white,
-                    fontWeight: FontWeight.bold,
-                  ),
-                ),
-                const Spacer(),
-                Container(
-                  width: 300,
-                  height: 40,
-                  decoration: BoxDecoration(
-                    color: AppColors.surface,
-                    borderRadius: BorderRadius.circular(AppTheme.radiusFull),
-                    border: Border.all(color: AppColors.border),
-                  ),
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Row(
-                    children: [
-                      const Icon(Icons.search, size: 20, color: AppColors.textSecondary),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: TextField(
-                          controller: _searchController,
-                          style: const TextStyle(fontSize: 14, color: Colors.white),
-                          decoration: const InputDecoration(
-                            hintText: 'Rechercher...',
-                            hintStyle: TextStyle(color: Colors.white54),
-                            border: InputBorder.none,
-                            enabledBorder: InputBorder.none,
-                            focusedBorder: InputBorder.none,
-                            contentPadding: EdgeInsets.only(bottom: 12),
-                            isDense: true,
-                          ),
-                          onChanged: _onSearchChanged,
-                        ),
-                      ),
-                      if (_isSearching)
-                        const SizedBox(width: 12, height: 12, child: CircularProgressIndicator(strokeWidth: 2)),
-                      if (_searchQuery.isNotEmpty)
-                        GestureDetector(
-                          onTap: () {
-                             _searchController.clear();
-                             _onSearchChanged('');
-                          },
-                          child: const Icon(Icons.close, size: 16, color: AppColors.textSecondary),
-                        ),
-                    ],
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-
-        // Hero Carousel
-        if (_searchQuery.isEmpty && heroItems.isNotEmpty)
           SliverToBoxAdapter(
             child: Padding(
-              padding: const EdgeInsets.only(bottom: 24),
+              padding: const EdgeInsets.fromLTRB(24, 16, 24, 24),
-              child: HeroCarousel(
+              child: GlassContainer(
-                items: heroItems,
+                borderRadius: 100,
-                onTap: (item) {
+                opacity: 0.6,
-                   final series = _series.firstWhere((s) => s.name == item.title); // Fallback by title if ID mismatch
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-                   _openSeries(series);
+                child: Row(
-                },
+                  children: [
+                    Text(
+                      'TV Series',
+                      style: GoogleFonts.inter(
+                        fontSize: 24,
+                        fontWeight: FontWeight.w700,
+                        color: Colors.white,
+                      ),
+                    ),
+                    const Spacer(),
+                    Container(
+                      width: 300,
+                      height: 40,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withOpacity(0.1),
+                        borderRadius: BorderRadius.circular(100),
+                      ),
+                      padding: const EdgeInsets.symmetric(horizontal: 16),
+                      child: Row(
+                        children: [
+                          const Icon(Icons.search, size: 20, color: Colors.white54),
+                          const SizedBox(width: 8),
+                          Expanded(
+                            child: TextField(
+                              controller: _searchController,
+                              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: const EdgeInsets.only(bottom: 12),
+                              ),
+                              onChanged: _onSearchChanged,
+                            ),
+                          ),
+                          if (_isSearching)
+                             const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white)),
+                          if (_searchQuery.isNotEmpty)
+                             GestureDetector(
+                               onTap: () {
+                                  _searchController.clear();
+                                  _onSearchChanged('');
+                               },
+                               child: const Icon(Icons.close, size: 16, color: Colors.white),
+                             ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               ),
             ),
           ),
 
-        // Grid
+          // Hero Carousel
-        SliverPadding(
+          if (_searchQuery.isEmpty && displaySeries.isNotEmpty)
-          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+            SliverToBoxAdapter(
-          sliver: SliverGrid(
+              child: Padding(
-            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                padding: const EdgeInsets.only(bottom: 32),
-              crossAxisCount: crossAxisCount,
+                child: HeroCarousel(
-              crossAxisSpacing: 24,
+                  items: displaySeries.take(5).map((s) => HeroItem(
-              mainAxisSpacing: 32,
+                    id: s.seriesId.toString(),
-              childAspectRatio: gridItemRatio,
+                    title: s.name,
+                    imageUrl: _getProxiedImageUrl(s.cover),
+                    subtitle: s.rating != null ? '${_formatRating(s.rating)} ★' : null,
+                    onMoreInfo: () {
+                       final series = _series.firstWhere((element) => element.seriesId.toString() == s.seriesId.toString(), orElse: () => s);
+                       _openSeries(series);
+                    },
+                  )).toList(),
+                  onTap: (item) {
+                     final series = _series.firstWhere((element) => element.seriesId.toString() == item.id, orElse: () => _series[0]);
+                     _openSeries(series);
+                  },
+                ),
+              ),
             ),
-            delegate: SliverChildBuilderDelegate(
-              (context, index) {
-                if (index >= displaySeries.length) return null;
-                final serie = displaySeries[index];
-                return MediaCard(
-                  title: serie.name,
-                  imageUrl: _getProxiedImageUrl(serie.cover),
           
-                  subtitle: serie.rating != null ? '${_formatRating(serie.rating)} ★' : null,
+          // Grid
-                  rating: _formatRating(serie.rating),
+          SliverPadding(
-                  placeholderIcon: Icons.tv,
+            padding: const EdgeInsets.symmetric(horizontal: 24),
-                  onTap: () => _openSeries(serie),
+            sliver: SliverGrid(
-                );
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-              },
+                crossAxisCount: crossAxisCount,
-              childCount: displaySeries.length,
+                crossAxisSpacing: 20,
+                mainAxisSpacing: 20,
+                childAspectRatio: gridItemRatio,
+              ),
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  if (index >= displaySeries.length) return null;
+                  final serie = displaySeries[index];
+                  return TvFocusableCard(
+                    onTap: () => _openSeries(serie),
+                    borderRadius: 12,
+                    child: Stack(
+                      fit: StackFit.expand,
+                      children: [
+                        // Poster Image
+                        ClipRRect(
+                          borderRadius: BorderRadius.circular(12),
+                          child: serie.cover != null && serie.cover!.isNotEmpty
+                            ? Image.network(
+                                _getProxiedImageUrl(serie.cover),
+                                fit: BoxFit.cover,
+                                errorBuilder: (ctx, err, stack) => Container(
+                                  color: AppColors.surfaceVariant,
+                                  child: const Center(child: Icon(Icons.tv, size: 48, color: Colors.white24)),
+                                ),
+                              )
+                            : Container(
+                                color: AppColors.surfaceVariant,
+                                child: const Center(child: Icon(Icons.tv, size: 48, color: Colors.white24)),
+                              ),
+                        ),
+                        
+                        // Gradient Overlay
+                        Positioned(
+                          left: 0, right: 0, bottom: 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(12)),
+                            ),
+                          ),
+                        ),
+
+                        // Title
+                        Positioned(
+                          left: 12, right: 12, bottom: 12,
+                          child: Text(
+                            serie.name,
+                            style: GoogleFonts.inter(
+                              color: Colors.white,
+                              fontSize: 13,
+                              fontWeight: FontWeight.w600,
+                              shadows: [const Shadow(color: Colors.black, blurRadius: 4)],
+                            ),
+                            maxLines: 2,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                        
+                        // Rating Badge
+                        if (serie.rating != null && serie.rating!.isNotEmpty)
+                        Positioned(
+                          top: 8,
+                          right: 8,
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                            decoration: BoxDecoration(
+                              color: Colors.black.withOpacity(0.7),
+                              borderRadius: BorderRadius.circular(4),
+                              border: Border.all(color: Colors.white24),
+                            ),
+                            child: Row(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                const Icon(Icons.star, size: 10, color: Colors.amber),
+                                const SizedBox(width: 4),
+                                Text(
+                                  _formatRating(serie.rating)!,
+                                  style: GoogleFonts.inter(fontSize: 10, fontWeight: FontWeight.bold, color: Colors.white),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  );
+                },
+                childCount: displaySeries.length,
+              ),
             ),
           ),
-        ),
           
-        // Loader
+          // Loader
-        if (_isLoading)
+          if (_isLoading)
-          const SliverToBoxAdapter(
+            const SliverToBoxAdapter(
-            child: Padding(
+              child: Padding(
-              padding: EdgeInsets.all(24),
+                padding: EdgeInsets.all(32),
-              child: ThemedLoading(),
+                child: Center(child: CircularProgressIndicator(color: Colors.white)),
+              ),
             ),
-          ),
+            
-      ],
+           const SliverPadding(padding: EdgeInsets.only(bottom: 50)),
+        ],
+      ),
     );
   }
 }