feat(mobile): dedicated mobile player and responsive UI improvements

lib/features/iptv/screens/player_screen.dart

@@ -141,13 +141,14 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       // Force player choice based on stream type:
       // - Live TV: Player Lite (simple TS playback with mpegts.js)
       // - VOD/Series: Player Standard (fuller controls, HLS support)
+      final isMobile = MediaQuery.of(context).size.width < 600;
       final isLiveTV = widget.streamType == StreamType.live;
       // Cache buster to force reload of updated player.html
       final cacheBuster = DateTime.now().millisecondsSinceEpoch;
 
-      var playerSrc = isLiveTV
+      final streamTypeParam = widget.streamType == StreamType.live ? 'live' : 'vod';
-          ? 'player_lite.html?url=$encodedUrl&type=live&v=$cacheBuster'
+      final playerFile = isMobile ? 'player_mobile.html' : (isLiveTV ? 'player_lite.html' : 'player.html');
-          : 'player.html?url=$encodedUrl&type=vod&v=$cacheBuster';
+      var playerSrc = '$playerFile?url=$encodedUrl&type=$streamTypeParam&v=$cacheBuster';
 
       if (startTimeOverride != null) {
         playerSrc += '&t=$startTimeOverride';
@@ -241,7 +242,8 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       for (final frame in iframes) {
         if (frame is html.IFrameElement &&
             (frame.src?.contains('player_lite.html') == true ||
-                frame.src?.contains('player.html') == true)) {
+                frame.src?.contains('player.html') == true ||
+                frame.src?.contains('player_mobile.html') == true)) {
           iframe = frame;
           break;
         }
@@ -467,82 +469,63 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
                             bottom: _showControls ? 24 : -150, // More offset for stacked layout
                             left: 16,
                             right: 16,
-                            child: Container(
+                            child: LayoutBuilder(
-                              padding: const EdgeInsets.symmetric(
+                              builder: (context, constraints) {
-                                horizontal: 20,
+                                final isSmallScreen = constraints.maxWidth < 600;
-                                vertical: 16,
+                                return Container(
-                              ),
+                                  padding: EdgeInsets.symmetric(
-                              decoration: BoxDecoration(
+                                    horizontal: isSmallScreen ? 16 : 20,
-                                color: const Color(0xFF1A1A2E).withOpacity(0.9),
+                                    vertical: isSmallScreen ? 12 : 16,
-                                borderRadius: BorderRadius.circular(24),
-                                border: Border.all(
-                                  color: Colors.white.withOpacity(0.1),
-                                ),
-                              ),
-                              child: Row(
-                                children: [
-                                  // EPG Info (left side)
-                                  Expanded(
-                                    child: _buildInlineEpg(),
                                   ),
-
+                                  decoration: BoxDecoration(
-                                  const SizedBox(width: 24),
+                                    color: const Color(0xFF1A1A2E).withOpacity(0.95),
-
+                                    borderRadius: BorderRadius.circular(24),
-                                  // Control Buttons (right side)
+                                    boxShadow: [
-                                  Row(
+                                      BoxShadow(
-                                    mainAxisSize: MainAxisSize.min,
+                                        color: Colors.black.withOpacity(0.3),
-                                    children: [
+                                        blurRadius: 10,
-                                      // Previous Channel
+                                        spreadRadius: 2,
-                                      if (widget.channels != null &&
-                                          widget.channels!.length > 1)
-                                        _buildSimpleIconButton(
-                                          icon: Icons.skip_previous_rounded,
-                                          onTap: _previousChannel,
-                                          size: 44,
-                                        ),
-
-                                      if (widget.channels != null &&
-                                          widget.channels!.length > 1)
-                                        const SizedBox(width: 16),
-
-                                      // Play/Pause (Large)
-                                      _buildSimpleIconButton(
-                                        icon: _isPlaying
-                                            ? Icons.pause_rounded
-                                            : Icons.play_arrow_rounded,
-                                        onTap: _togglePlayPause,
-                                        size: 52,
-                                        iconSize: 28,
-                                        highlighted: true,
-                                      ),
-
-                                      if (widget.channels != null &&
-                                          widget.channels!.length > 1)
-                                        const SizedBox(width: 16),
-
-                                      // Next Channel
-                                      if (widget.channels != null &&
-                                          widget.channels!.length > 1)
-                                        _buildSimpleIconButton(
-                                          icon: Icons.skip_next_rounded,
-                                          onTap: _nextChannel,
-                                          size: 44,
-                                        ),
-
-                                      const SizedBox(width: 16),
-
-                                      // Mute button
-                                      _buildSimpleIconButton(
-                                        icon: _isMuted
-                                            ? Icons.volume_off_rounded
-                                            : Icons.volume_up_rounded,
-                                        onTap: _toggleMute,
-                                        size: 44,
                                       ),
                                     ],
+                                    border: Border.all(
+                                      color: Colors.white.withOpacity(0.15),
+                                    ),
                                   ),
-                                ],
+                                  child: isSmallScreen
-                              ),
+                                      ? Column(
+                                          mainAxisSize: MainAxisSize.min,
+                                          children: [
+                                            // EPG Info (top in mobile)
+                                            _buildInlineEpg(),
+                                            const SizedBox(height: 12),
+                                            const Divider(color: Colors.white10),
+                                            const SizedBox(height: 8),
+                                            // Control Buttons
+                                            Row(
+                                              mainAxisAlignment:
+                                                  MainAxisAlignment.spaceEvenly,
+                                              children: _buildControlButtons(
+                                                  isSmallScreen),
+                                            ),
+                                          ],
+                                        )
+                                      : Row(
+                                          children: [
+                                            // EPG Info (left side)
+                                            Expanded(
+                                              child: _buildInlineEpg(),
+                                            ),
+                                            const SizedBox(width: 24),
+                                            // Control Buttons (right side)
+                                            Row(
+                                              mainAxisSize: MainAxisSize.min,
+                                              children: _buildControlButtons(
+                                                  isSmallScreen),
+                                            ),
+                                          ],
+                                        ),
+                                );
+                              },
                             ),
                           ),
                         ],
@@ -1073,4 +1056,75 @@ class _PlayerScreenState extends ConsumerState<PlayerScreen> {
       },
     );
   }
+
+  List<Widget> _buildControlButtons(bool isSmallScreen) {
+    final buttonSize = isSmallScreen ? 40.0 : 44.0;
+    final playButtonSize = isSmallScreen ? 48.0 : 52.0;
+
+    return [
+      if (widget.channels != null && widget.channels!.length > 1) ...[
+        _buildSimpleIconButton(
+          icon: Icons.skip_previous_rounded,
+          onTap: _previousChannel,
+          size: buttonSize,
+        ),
+        SizedBox(width: isSmallScreen ? 8 : 16),
+      ],
+      _buildSimpleIconButton(
+        icon: _isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
+        onTap: _togglePlayPause,
+        size: playButtonSize,
+        iconSize: isSmallScreen ? 24 : 28,
+        highlighted: true,
+      ),
+      if (widget.channels != null && widget.channels!.length > 1) ...[
+        SizedBox(width: isSmallScreen ? 8 : 16),
+        _buildSimpleIconButton(
+          icon: Icons.skip_next_rounded,
+          onTap: _nextChannel,
+          size: buttonSize,
+        ),
+      ],
+      SizedBox(width: isSmallScreen ? 8 : 16),
+      _buildSimpleIconButton(
+        icon: _isMuted ? Icons.volume_off_rounded : Icons.volume_up_rounded,
+        onTap: _toggleMute,
+        size: buttonSize,
+      ),
+      if (isSmallScreen) ...[
+        SizedBox(width: isSmallScreen ? 8 : 16),
+        _buildSimpleIconButton(
+          icon: Icons.fullscreen_rounded,
+          onTap: _toggleFullscreen,
+          size: buttonSize,
+        ),
+      ],
+    ];
+  }
+
+  Widget _buildSimpleIconButton({
+    required IconData icon,
+    required VoidCallback onTap,
+    double size = 40,
+    double iconSize = 24,
+    bool highlighted = false,
+  }) {
+    return Material(
+      color: highlighted ? AppColors.primary : Colors.white.withOpacity(0.1),
+      shape: const CircleBorder(),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: SizedBox(
+          width: size,
+          height: size,
+          child: Icon(
+            icon,
+            color: highlighted ? Colors.black : Colors.white,
+            size: iconSize,
+          ),
+        ),
+      ),
+    );
+  }
 }

web/player_mobile.html

@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Mobile IPTV Player</title>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        html,
+        body {
+            background: #000;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+
+        #player-container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000;
+        }
+
+        /* Mobile-only overlay buttons */
+        #mobile-on-screen-controls {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .fs-button {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 44px;
+            height: 44px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            pointer-events: auto;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+        }
+
+        .fs-button svg {
+            width: 24px;
+            height: 24px;
+            fill: white;
+        }
+
+        #loading {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: white;
+            z-index: 20;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-bottom: 10px;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        #error {
+            display: none;
+            position: absolute;
+            color: white;
+            text-align: center;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 12px;
+            z-index: 30;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="player-container">
+        <video id="video" autoplay playsinline webkit-playsinline></video>
+
+        <div id="mobile-on-screen-controls">
+            <div class="fs-button" id="fs-toggle">
+                <svg viewBox="0 0 24 24">
+                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+                </svg>
+            </div>
+        </div>
+
+        <div id="loading">
+            <div class="spinner"></div>
+            <div id="l-text">Chargement...</div>
+        </div>
+
+        <div id="error">
+            <div style="font-size: 40px; margin-bottom: 10px;">⚠️</div>
+            <div id="err-msg">Erreur de lecture</div>
+        </div>
+    </div>
+
+    <script>
+        const video = document.getElementById('video');
+        const loading = document.getElementById('loading');
+        const error = document.getElementById('error');
+        const fsToggle = document.getElementById('fs-toggle');
+
+        const params = new URLSearchParams(window.location.search);
+        const streamUrl = params.get('url');
+        const streamType = params.get('type') || 'live';
+
+        function log(m) { console.log('[MobilePlayer] ' + m); }
+
+        function toggleFullscreen() {
+            if (!document.fullscreenElement && !document.webkitFullscreenElement) {
+                const el = document.documentElement;
+                if (el.requestFullscreen) el.requestFullscreen();
+                else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
+                else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen();
+            } else {
+                if (document.exitFullscreen) document.exitFullscreen();
+                else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+            }
+        }
+
+        fsToggle.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            toggleFullscreen();
+        });
+
+        // Double tap for fullscreen
+        let lastTap = 0;
+        video.addEventListener('touchend', (e) => {
+            const now = Date.now();
+            if (now - lastTap < 300) {
+                toggleFullscreen();
+            }
+            lastTap = now;
+            // Report activity to parent
+            window.parent.postMessage({ type: 'user_activity' }, '*');
+        });
+
+        async function init() {
+            if (!streamUrl) return;
+            log('Initing mobile player for: ' + streamUrl);
+
+            const isHLS = streamUrl.toLowerCase().includes('m3u8') || streamUrl.toLowerCase().includes('playlist.m3u8');
+
+            // Prefer Native HLS for mobile stability (iOS especially)
+            if (isHLS && video.canPlayType('application/vnd.apple.mpegurl')) {
+                log('Using native HLS');
+                video.src = streamUrl;
+                return;
+            }
+
+            // Use HLS.js for Android/Chrome with high-stability settings
+            if (isHLS && Hls.isSupported()) {
+                log('Using Hls.js optimized for mobile');
+                const hls = new Hls({
+                    maxBufferLength: 90, // Large buffer to handle mobile jitter
+                    maxMaxBufferLength: 180,
+                    liveSyncDurationCount: 6,
+                    liveMaxLatencyDurationCount: 12,
+                    enableWorker: true,
+                    lowLatencyMode: false // Prefer stability over latency
+                });
+                hls.loadSource(streamUrl);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
+                hls.on(Hls.Events.ERROR, (e, d) => {
+                    if (d.fatal) {
+                        if (d.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
+                        else if (d.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
+                    }
+                });
+                return;
+            }
+
+            // Fallback to MpegTS
+            if (mpegts.isSupported()) {
+                log('Using MpegTS optimized for mobile');
+                const player = mpegts.createPlayer({
+                    type: 'mpegts',
+                    isLive: streamType === 'live',
+                    url: streamUrl
+                }, {
+                    enableWorker: true,
+                    stashInitialSize: 2 * 1024 * 1024, // 2MB initial buffer
+                    enableStashBuffer: true
+                });
+                player.attachMediaElement(video);
+                player.load();
+                player.play();
+                return;
+            }
+
+            // Absolute fallback
+            video.src = streamUrl;
+        }
+
+        video.addEventListener('playing', () => { loading.style.display = 'none'; });
+        video.addEventListener('waiting', () => { loading.style.display = 'flex'; });
+        video.addEventListener('error', () => {
+            loading.style.display = 'none';
+            error.style.display = 'block';
+        });
+
+        // Communication with Flutter
+        window.addEventListener('message', (e) => {
+            const d = e.data;
+            if (d.type === 'play') video.play();
+            if (d.type === 'pause') video.pause();
+            if (d.type === 'request_fullscreen') toggleFullscreen();
+        });
+
+        init();
+    </script>
+</body>
+
+</html>