feat: introduce IPTV player, GoRouter setup, themed loading screen, and content tabs

lib/core/router/app_router.dart

@@ -10,6 +10,7 @@ import '../models/playlist_config.dart';
 import '../../mobile/features/auth/screens/mobile_login_screen.dart';
 import '../../mobile/features/iptv/screens/mobile_playlist_selection_screen.dart';
 import '../../mobile/features/iptv/screens/mobile_dashboard_screen.dart';
+import '../widgets/themed_loading_screen.dart';
 
 final routerProvider = Provider<GoRouter>((ref) {
   final authState = ref.watch(authProvider);
@@ -71,7 +72,7 @@ final routerProvider = Provider<GoRouter>((ref) {
               context.go('/playlists');
             });
             return const Scaffold(
-              body: Center(child: CircularProgressIndicator()),
+              body: ThemedLoading(),
             );
           }
           

lib/core/widgets/themed_loading_screen.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import '../theme/app_colors.dart';
+
+class ThemedLoading extends StatelessWidget {
+  const ThemedLoading({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        gradient: RadialGradient(
+          center: Alignment(0, -0.2),
+          radius: 1.5,
+          colors: [
+            Color(0xFF2C2C2E),
+            Color(0xFF000000),
+          ],
+          stops: [0.0, 1.0],
+        ),
+      ),
+      child: const Center(
+        child: CircularProgressIndicator(
+          color: Colors.white,
+          strokeWidth: 3,
+        ),
+      ),
+    );
+  }
+}

lib/features/iptv/screens/player_screen.dart

@@ -10,6 +10,8 @@ import '../providers/playback_positions_provider.dart';
 import '../providers/settings_provider.dart';
 import '../widgets/epg_overlay.dart';
 import '../../../core/models/playlist_config.dart';
+import '../../../core/models/iptv_models.dart';
+import '../../../core/widgets/themed_loading_screen.dart';
 
 /// Stream type enum for player
 enum StreamType { live, vod, series }
@@ -21,6 +23,8 @@ class PlayerScreen extends ConsumerStatefulWidget {
   final StreamType streamType;
   final String containerExtension;
   final PlaylistConfig playlist;
+  final List<Channel>? channels;
+  final int initialIndex;
 
   const PlayerScreen({
     super.key,
@@ -29,6 +33,8 @@ class PlayerScreen extends ConsumerStatefulWidget {
     required this.playlist,
     this.streamType = StreamType.live,
     this.containerExtension = 'mp4',
+    this.channels,
+    this.initialIndex = 0,
   });
 
   @override
@@ -41,18 +47,19 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
   String? _statusMessage;
   late String _viewId;
   late String _contentId;
+  late int _currentIndex;
   bool _isInitialized = false;
   bool _isLoading = true;
+  bool _showControls = false;
+  Timer? _controlsTimer;
   StreamSubscription? _messageSubscription;
 
   @override
   void initState() {
     super.initState();
+    _currentIndex = widget.initialIndex;
     _viewId = 'iptv-player-${widget.streamId}-${DateTime.now().millisecondsSinceEpoch}';
-    // Content ID for resume feature
+    
-    _contentId = widget.streamType == StreamType.live 
-        ? '' // Live streams don't need resume
-        : '${widget.streamType.name}_${widget.streamId}';
     _initializePlayer();
     _setupMessageListener();
   }
@@ -84,9 +91,50 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
   @override
   void dispose() {
     _messageSubscription?.cancel();
+    _controlsTimer?.cancel();
     super.dispose();
   }
 
+  void _hideControls() {
+    if (!mounted) return;
+    setState(() {
+      _showControls = false;
+    });
+  }
+
+  void _onHover() {
+    if (!_showControls) {
+      setState(() {
+        _showControls = true;
+      });
+    }
+    _controlsTimer?.cancel();
+    _controlsTimer = Timer(const Duration(seconds: 3), _hideControls);
+  }
+
+  void _playNext() {
+    if (widget.channels == null || widget.channels!.isEmpty) return;
+    final nextIndex = (_currentIndex + 1) % widget.channels!.length;
+    _switchChannel(nextIndex);
+  }
+
+  void _playPrevious() {
+    if (widget.channels == null || widget.channels!.isEmpty) return;
+    final prevIndex = (_currentIndex - 1 + widget.channels!.length) % widget.channels!.length;
+    _switchChannel(prevIndex);
+  }
+
+  void _switchChannel(int index) {
+    setState(() {
+      _currentIndex = index;
+      _isLoading = true;
+      _isInitialized = false;
+      _errorMessage = null;
+    });
+    // Give UI a moment to clear before re-initializing
+    Future.microtask(() => _initializePlayer());
+  }
+
   Future<void> _initializePlayer() async {
     try {
       setState(() {
@@ -104,6 +152,16 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       final xtreamService = ref.read(xtreamServiceProvider(widget.playlist));
       xtreamService.setPlaylist(widget.playlist);
       
+      // Determine effective Stream ID (from navigation or initial)
+      final currentStreamId = widget.channels != null && widget.channels!.isNotEmpty
+          ? widget.channels![_currentIndex].streamId 
+          : widget.streamId;
+
+      // Set content ID for resume features
+      _contentId = widget.streamType == StreamType.live 
+          ? '' 
+          : '${widget.streamType.name}_$currentStreamId';
+
       String hlsUrl;
       
       if (widget.streamType == StreamType.live) {
@@ -115,7 +173,7 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
         // Build the FFmpeg endpoint URL with streaming settings
         final settings = ref.read(iptvSettingsProvider);
         final baseUrl = html.window.location.origin;
-        final iptvUrl = '${widget.playlist.dns}/live/${widget.playlist.username}/${widget.playlist.password}/${widget.streamId}.ts';
+        final iptvUrl = '${widget.playlist.dns}/live/${widget.playlist.username}/${widget.playlist.password}/$currentStreamId.ts';
         final encodedUrl = Uri.encodeComponent(iptvUrl);
         
         // Map enum values to string params
@@ -137,21 +195,16 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
         final modeParam = settings.modeString; // direct, transcode, or auto
         
         // Construct the stream URL directly using MPEG-TS format
-        // We add &ext=.ts to force the web player to use mpegts.js which is perfect for low-latency live streams
+        final streamEndpoint = '$baseUrl/api/stream/$currentStreamId?url=$encodedUrl&quality=$qualityParam&buffer=$bufferParam&timeout=$timeoutParam&mode=$modeParam&ext=.ts';
-        final streamEndpoint = '$baseUrl/api/stream/${widget.streamId}?url=$encodedUrl&quality=$qualityParam&buffer=$bufferParam&timeout=$timeoutParam&mode=$modeParam&ext=.ts';
         
         debugPrint('PlayerScreen: Starting Direct Stream: $streamEndpoint');
-        
-        // Use the stream endpoint directly as the video source
-        // The server now pipelines fMP4 directly to this URL
         hlsUrl = streamEndpoint;
         
       } else {
         // For VOD and Series - use direct proxy streaming with Range support
-        // This allows seeking via Range requests
         final streamUrl = widget.streamType == StreamType.vod
-            ? xtreamService.getVodStreamUrl(widget.streamId, widget.containerExtension)
+            ? xtreamService.getVodStreamUrl(currentStreamId, widget.containerExtension)
-            : xtreamService.getSeriesStreamUrl(widget.streamId, widget.containerExtension);
+            : xtreamService.getSeriesStreamUrl(currentStreamId, widget.containerExtension);
         hlsUrl = streamUrl;
         debugPrint('PlayerScreen: Direct playback URL: $hlsUrl');
       }
@@ -211,89 +264,112 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
+      appBar: _showControls ? AppBar(
-        title: Text(widget.title),
+        title: Text(widget.channels != null && widget.channels!.isNotEmpty 
-        backgroundColor: Colors.black,
+            ? widget.channels![_currentIndex].name 
+            : widget.title),
+        backgroundColor: Colors.transparent,
         foregroundColor: Colors.white,
-      ),
+        elevation: 0,
+      ) : null,
+      extendBodyBehindAppBar: true,
       backgroundColor: Colors.black,
-      body: _errorMessage != null
+      body: MouseRegion(
-          ? Center(
+        onHover: (_) => _onHover(),
-              child: Column(
+        child: _errorMessage != null
-                mainAxisAlignment: MainAxisAlignment.center,
+            ? Center(
-                children: [
+                child: Column(
-                  const Icon(
+                  mainAxisAlignment: MainAxisAlignment.center,
-                    Icons.error_outline,
+                  children: [
-                    size: 64,
+                    const Icon(Icons.error_outline, size: 64, color: Colors.red),
-                    color: Colors.red,
+                    const SizedBox(height: 16),
-                  ),
+                    const Text('Failed to load stream', style: TextStyle(color: Colors.white, fontSize: 18)),
-                  const SizedBox(height: 16),
+                    const SizedBox(height: 8),
-                  const Text(
+                    Text(_errorMessage!, style: const TextStyle(color: Colors.white70)),
-                    'Failed to load stream',
+                    const SizedBox(height: 24),
-                    style: TextStyle(
+                    ElevatedButton(
-                      color: Colors.white,
+                      onPressed: () {
-                      fontSize: 18,
+                        setState(() {
-                      fontWeight: FontWeight.bold,
+                          _errorMessage = null;
+                          _isLoading = true;
+                        });
+                        _initializePlayer();
+                      },
+                      child: const Text('Retry'),
                     ),
-                  ),
+                  ],
-                  const SizedBox(height: 8),
+                ),
-                  Padding(
+              )
-                    padding: const EdgeInsets.symmetric(horizontal: 32),
+            : _isLoading
-                    child: Text(
+                ? const ThemedLoading()
-                      _errorMessage!,
+                : !_isInitialized
-                      style: const TextStyle(color: Colors.white70),
+                    ? const ThemedLoading()
-                      textAlign: TextAlign.center,
+                    : Stack(
-                    ),
+                        children: [
-                  ),
+                          // HTML5 video player via iframe
-                  const SizedBox(height: 24),
+                          HtmlElementView(viewType: _viewId),
-                  ElevatedButton(
+                          
-                    onPressed: () {
+                          // Hover Controls Layer
-                      setState(() {
+                          if (_showControls) ...[
-                        _errorMessage = null;
+                            // Previous Channel (Left Zone)
-                        _isLoading = true;
+                            if (widget.channels != null && widget.channels!.isNotEmpty)
-                      });
+                              Positioned(
-                      _initializePlayer();
+                                left: 0,
-                    },
+                                top: 0,
-                    child: const Text('Retry'),
+                                bottom: 0,
-                  ),
+                                width: 100,
-                ],
+                                child: InkWell(
-              ),
+                                  onTap: _playPrevious,
-            )
+                                  hoverColor: Colors.black12,
-          : _isLoading
+                                  child: const Center(
-              ? Center(
+                                    child: Icon(Icons.arrow_back_ios, color: Colors.white, size: 48),
-                  child: Column(
+                                  ),
-                    mainAxisAlignment: MainAxisAlignment.center,
+                                ),
-                    children: [
+                              ),
-                      const CircularProgressIndicator(),
+
-                      const SizedBox(height: 16),
+                            // Next Channel (Right Zone)
-                      Text(
+                            if (widget.channels != null && widget.channels!.isNotEmpty)
-                        _statusMessage ?? 'Loading...',
+                              Positioned(
-                        style: const TextStyle(color: Colors.white70),
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                                width: 100,
+                                child: InkWell(
+                                  onTap: _playNext,
+                                  hoverColor: Colors.black12,
+                                  child: const Center(
+                                    child: Icon(Icons.arrow_forward_ios, color: Colors.white, size: 48),
+                                  ),
+                                ),
+                              ),
+                              
+                            // EPG Overlay
+                            if (widget.streamType == StreamType.live)
+                              Positioned(
+                                bottom: 0,
+                                left: 0,
+                                right: 0,
+                                child: Container(
+                                  padding: const EdgeInsets.only(bottom: 20),
+                                  decoration: const BoxDecoration(
+                                    gradient: LinearGradient(
+                                      begin: Alignment.bottomCenter,
+                                      end: Alignment.topCenter,
+                                      colors: [Colors.black87, Colors.transparent],
+                                    ),
+                                  ),
+                                  child: EpgOverlay(
+                                    streamId: widget.channels != null 
+                                        ? widget.channels![_currentIndex].streamId
+                                        : widget.streamId,
+                                    playlist: widget.playlist,
+                                  ),
+                                ),
+                              ),
+                          ],
+                        ],
                       ),
-                    ],
+      ),
-                  ),
-                )
-              : !_isInitialized
-                  ? const Center(
-                      child: CircularProgressIndicator(),
-                    )
-                  : Stack(
-                      children: [
-                        // HTML5 video player via iframe
-                        HtmlElementView(viewType: _viewId),
-                        // EPG overlay for live streams
-                        if (widget.streamType == StreamType.live)
-                          Positioned(
-                            bottom: 80,
-                            left: 0,
-                            right: 0,
-                            child: EpgOverlay(
-                              streamId: widget.streamId,
-                              playlist: widget.playlist,
-                            ),
-                          ),
-                      ],
-                    ),
     );
   }
 }

lib/features/iptv/widgets/live_tv_tab.dart

@@ -11,6 +11,7 @@ import '../../../core/theme/app_colors.dart';
 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 'channel_card.dart';
 
 /// Live TV tab - Apple TV Style with Horizontal Category Filter
@@ -69,7 +70,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
     return Scaffold(
       backgroundColor: Colors.transparent,
       body: channelsAsync.when(
-        loading: () => const Center(child: CircularProgressIndicator()),
+        loading: () => const ThemedLoading(),
         error: (e, s) => Center(child: Text('Error: $e')),
         data: (groupedChannels) {
            // Groups
@@ -337,7 +338,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
           iconUrl: _getProxiedIconUrl(channel.streamIcon),
           currentProgram: null,
           playlist: widget.playlist,
-          onTap: () => _playChannel(channel),
+          onTap: () => _playChannel(channel, channels),
         );
       },
     );
@@ -360,7 +361,7 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
             height: 70,
             width: double.infinity,
             playlist: widget.playlist,
-            onTap: () => _playChannel(channel),
+            onTap: () => _playChannel(channel, channels),
           ),
         );
       },
@@ -375,7 +376,8 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
     return originalUrl;
   }
 
-  void _playChannel(Channel channel) {
+  void _playChannel(Channel channel, List<Channel> contextList) {
+    final index = contextList.indexOf(channel);
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => PlayerScreen(
@@ -383,6 +385,8 @@ class _LiveTVTabState extends ConsumerState<LiveTVTab>
           title: channel.name,
           playlist: widget.playlist,
           streamType: StreamType.live,
+          channels: contextList,
+          initialIndex: index,
         ),
       ),
     );

lib/features/iptv/widgets/movies_tab.dart

@@ -8,6 +8,7 @@ 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 '../providers/watch_history_provider.dart';
 import '../models/xtream_models.dart';
 import '../providers/xtream_provider.dart';
@@ -301,7 +302,7 @@ class _MoviesTabState extends ConsumerState<MoviesTab> {
           const SliverToBoxAdapter(
             child: Padding(
               padding: EdgeInsets.all(24),
-              child: Center(child: CircularProgressIndicator()),
+              child: ThemedLoading(),
             ),
           ),
       ],

lib/features/iptv/widgets/series_tab.dart

@@ -8,6 +8,8 @@ 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 '../models/xtream_models.dart';
 import '../providers/xtream_provider.dart';
 import '../providers/settings_provider.dart';
@@ -287,7 +289,7 @@ class _SeriesTabState extends ConsumerState<SeriesTab> {
           const SliverToBoxAdapter(
             child: Padding(
               padding: EdgeInsets.all(24),
-              child: Center(child: CircularProgressIndicator()),
+              child: ThemedLoading(),
             ),
           ),
       ],