feat: add mobile scaffold layout and dedicated mobile video player implementation

lib/core/widgets/glass_container.dart

@@ -55,19 +55,15 @@ class GlassContainer extends StatelessWidget {
     final finalBgColor = backgroundColor ?? AppColors.glassBackground;
     final finalBorderColor = borderColor ?? AppColors.glassBorder;
 
-    return Container(
+    // BackdropFilter is extremely expensive in Flutter Web on mobile Safari.
-      width: width,
+    // On mobile web (width < 600), skip the blur entirely.
-      height: height,
+    final screenWidth = MediaQuery.of(context).size.width;
-      margin: margin,
+    final useBlur = blur > 0 && !(Theme.of(context).platform == TargetPlatform.iOS && screenWidth < 600);
-      child: ClipRRect(
+
-        borderRadius: BorderRadius.circular(borderRadius),
+    final inner = Container(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
-          child: Container(
       padding: padding,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(borderRadius),
-              // Subtle gradient overlay for depth
         gradient: showGradient
             ? LinearGradient(
                 begin: Alignment.topLeft,
@@ -78,13 +74,10 @@ class GlassContainer extends StatelessWidget {
                 ],
               )
             : null,
+        color: showGradient ? null : finalBgColor.withOpacity(finalOpacity),
         border: hasBorder
-                  ? Border.all(
+            ? Border.all(color: finalBorderColor, width: borderWidth)
-                      color: finalBorderColor,
-                      width: borderWidth,
-                    )
             : null,
-              // Premium shadow
         boxShadow: showShadow
             ? [
                 BoxShadow(
@@ -103,8 +96,20 @@ class GlassContainer extends StatelessWidget {
             : [],
       ),
       child: child,
-          ),
+    );
-        ),
+
+    return Container(
+      width: width,
+      height: height,
+      margin: margin,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(borderRadius),
+        child: useBlur
+            ? BackdropFilter(
+                filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
+                child: inner,
+              )
+            : inner,
       ),
     );
   }

lib/mobile/widgets/mobile_scaffold.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'dart:ui';
 import '../../core/theme/app_colors.dart';
 
 class MobileScaffold extends ConsumerWidget {
@@ -42,12 +41,9 @@ class MobileScaffold extends ConsumerWidget {
           child,
         ],
       ),
-      bottomNavigationBar: ClipRRect(
+      bottomNavigationBar: Container(
-        child: BackdropFilter(
-          filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
-          child: Container(
             decoration: BoxDecoration(
-              color: AppColors.surface.withOpacity(0.9),
+              color: AppColors.surface,
               border: const Border(
                 top: BorderSide(
                   color: AppColors.border,
@@ -90,8 +86,6 @@ class MobileScaffold extends ConsumerWidget {
               ],
             ),
           ),
-        ),
-      ),
     );
   }
 }

web/player_mobile.html

@@ -15,8 +15,7 @@
             -webkit-tap-highlight-color: transparent;
         }
 
-        html,
+        html, body {
-        body {
             background: #000;
             width: 100%;
             height: 100%;
@@ -40,50 +39,6 @@
             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;
-        }
-
-        #play-overlay {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 80px;
-            height: 80px;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 50%;
-            display: none;
-            justify-content: center;
-            align-items: center;
-            pointer-events: auto;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            backdrop-filter: blur(8px);
-            -webkit-backdrop-filter: blur(8px);
-            z-index: 25;
-            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-
-        #play-overlay:active {
-            transform: translate(-50%, -50%) scale(0.9);
-        }
-
-        #play-overlay svg {
-            width: 40px;
-            height: 40px;
-            fill: white;
-            margin-left: 4px;
-            /* Adjust for play icon alignment */
-        }
-
-
         #loading {
             position: absolute;
             display: flex;
@@ -105,9 +60,33 @@
         }
 
         @keyframes spin {
-            to {
+            to { transform: rotate(360deg); }
-                transform: rotate(360deg);
         }
+
+        /* Unmute button — shown when iOS plays muted */
+        #unmute-btn {
+            display: none;
+            position: absolute;
+            bottom: 32px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 30;
+            background: rgba(0, 0, 0, 0.75);
+            color: white;
+            border: 2px solid rgba(255, 255, 255, 0.6);
+            border-radius: 32px;
+            padding: 12px 28px;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+            cursor: pointer;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            pointer-events: auto;
+        }
+
+        #unmute-btn:active {
+            background: rgba(255, 255, 255, 0.2);
         }
 
         #error {
@@ -127,18 +106,11 @@
 
 <body>
     <div id="player-container">
-        <!-- iOS/Safari core attributes: playsinline, webkit-playsinline, preload -->
+        <!-- muted + autoplay: iOS Safari autorise l'autoplay uniquement si muted -->
-        <video id="video" autoplay playsinline webkit-playsinline preload="auto"></video>
+        <video id="video" autoplay muted playsinline webkit-playsinline preload="auto"></video>
 
-        <div id="mobile-on-screen-controls">
+        <!-- Bouton son — affiché après démarrage muted sur iOS -->
-            <!-- Play Overlay for Safari/Autoplay blocks -->
+        <button id="unmute-btn">🔇 Appuyer pour activer le son</button>
-            <div id="play-overlay">
-                <svg viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z" />
-                </svg>
-            </div>
-
-        </div>
 
         <div id="loading">
             <div class="spinner"></div>
@@ -148,15 +120,14 @@
         <div id="error">
             <div style="font-size: 40px; margin-bottom: 12px;">⚠️</div>
             <div id="err-msg" style="font-weight: 600;">Erreur de lecture</div>
-            <div style="font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 8px;">Format non supporté ou lien
+            <div id="err-sub" style="font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 8px;">Vérifiez votre connexion</div>
-                expiré</div>
         </div>
     </div>
 
     <script>
         const video = document.getElementById('video');
         const loading = document.getElementById('loading');
-        const playOverlay = document.getElementById('play-overlay');
+        const unmuteBtn = document.getElementById('unmute-btn');
         const error = document.getElementById('error');
 
         const params = new URLSearchParams(window.location.search);
@@ -165,147 +136,111 @@
 
         function log(m) { console.log('[MobilePlayer] ' + m); }
 
-        let safariRetryCount = 0;
+        let retryCount = 0;
-        const safariMaxRetries = 3;
+        const maxRetries = 3;
-        let isSafariMode = false;
 
-        function showError(msg) {
+        function showError(code, msg) {
             loading.style.display = 'none';
-            playOverlay.style.display = 'none';
+            unmuteBtn.style.display = 'none';
             error.style.display = 'block';
-            document.getElementById('err-msg').textContent = msg;
+            document.getElementById('err-msg').textContent = 'Erreur ' + code;
+            document.getElementById('err-sub').textContent = msg || 'Format non supporté ou lien expiré';
         }
 
-        playOverlay.addEventListener('click', (e) => {
+        // Bouton son : user gesture DIRECT dans l'iframe → iOS accepte le unmute
+        unmuteBtn.addEventListener('click', (e) => {
             e.preventDefault();
-            e.stopPropagation();
+            video.muted = false;
-            log('Manual play triggered');
+            video.volume = 1.0;
-            video.play();
+            unmuteBtn.style.display = 'none';
-            playOverlay.style.display = 'none';
+            log('Unmuted by user');
+            window.parent.postMessage({ type: 'unmuted' }, '*');
         });
 
-        let lastTap = 0;
         video.addEventListener('touchend', () => {
-            lastTap = Date.now();
             window.parent.postMessage({ type: 'user_activity' }, '*');
         });
 
         video.addEventListener('playing', () => {
+            log('Video playing, muted=' + video.muted);
             loading.style.display = 'none';
-            playOverlay.style.display = 'none';
+            retryCount = 0;
-            safariRetryCount = 0;
+            // Si muted (iOS autoplay), afficher le bouton son
-        });
+            if (video.muted) {
-
+                unmuteBtn.style.display = 'block';
-        video.addEventListener('pause', () => {
+                // Tenter de démueter automatiquement (fonctionne parfois après interaction)
-            if (video.currentTime === 0 || video.paused) {
+                video.muted = false;
-                loading.style.display = 'none';
+                if (video.muted) {
-                playOverlay.style.display = 'flex';
+                    // iOS a refusé le unmute automatique — garder le bouton affiché
+                    log('Unmute blocked by iOS, showing button');
+                } else {
+                    unmuteBtn.style.display = 'none';
+                    log('Auto-unmuted successfully');
+                }
             }
         });
 
         video.addEventListener('error', () => {
-            const code = video.error?.code || 'unknown';
+            const code = video.error?.code || '?';
             const msg = video.error?.message || '';
-            log('Video error - code: ' + code + ', message: ' + msg);
+            log('Video error code=' + code + ' msg=' + msg + ' retry=' + retryCount);
 
-            // Safari/iOS: auto-retry on transient errors
+            if (retryCount < maxRetries) {
-            if (isSafariMode && safariRetryCount < safariMaxRetries) {
+                retryCount++;
-                safariRetryCount++;
+                log('Retry ' + retryCount + '/' + maxRetries + ' in 2s');
-                log('Safari retry ' + safariRetryCount + '/' + safariMaxRetries + ' in 2s');
                 loading.style.display = 'flex';
                 error.style.display = 'none';
-                document.getElementById('l-text').textContent = 'Reconnexion ' + safariRetryCount + '/' + safariMaxRetries + '...';
+                document.getElementById('l-text').textContent = 'Reconnexion ' + retryCount + '/' + maxRetries + '...';
-                setTimeout(loadSafariStream, 2000);
+                setTimeout(startPlayback, 2000);
             } else {
-                showError('Erreur ' + code + ': ' + (msg || 'Format non supporté ou lien expiré'));
+                showError(code, msg);
             }
         });
 
-        function loadSafariStream() {
+        function startPlayback() {
+            log('startPlayback: ' + streamUrl);
             video.src = '';
             video.load();
             video.src = streamUrl;
             video.load();
-            video.play().catch(() => {
+            video.play().catch(e => {
-                log('Autoplay blocked by Safari, showing overlay');
+                log('play() rejected: ' + e);
-                loading.style.display = 'none';
+                // Ne pas montrer erreur ici — laisser l'event error gérer
-                playOverlay.style.display = 'flex';
             });
         }
 
-        async function init() {
+        function initHlsJs() {
-            if (!streamUrl) {
+            log('Using HLS.js');
-                log('No stream URL provided');
-                showError('No stream URL provided');
-                return;
-            }
-            log('Initing mobile player for: ' + streamUrl);
-            log('Stream type param: ' + streamType);
-
-            const isHLS = streamUrl.toLowerCase().includes('m3u8');
-            const isTS = streamUrl.toLowerCase().endsWith('.ts');
-            log('Format detection - isHLS: ' + isHLS + ', isTS: ' + isTS);
-
-            // Safari / iOS Native HLS
-            if (isHLS && video.canPlayType('application/vnd.apple.mpegurl')) {
-                log('Using native HLS (Safari/iOS)');
-                isSafariMode = true;
-                loadSafariStream();
-                return;
-            }
-
-            // Android / Chrome - HLS.js
-            if (isHLS && Hls.isSupported()) {
-                log('Using Hls.js optimized for mobile');
-
             const hls = new Hls({
-                    maxBufferLength: 60,
+                maxBufferLength: 30,
-                    maxMaxBufferLength: 120,
+                maxMaxBufferLength: 60,
-                    liveSyncDurationCount: 10, // Buffer-First safety
+                liveSyncDurationCount: 5,
-                    liveMaxLatencyDurationCount: 20,
+                liveMaxLatencyDurationCount: 10,
                 enableWorker: true,
                 lowLatencyMode: false,
                 nudgeOffset: 0.8,
-                    nudgeMaxRetries: 30,
+                nudgeMaxRetries: 10,
-                    maxLiveSyncPlaybackRate: 1.1,
-                    initialLiveManifestSize: 3,
-                    abrEwmaDefaultEstimate: 1000000,
                 manifestLoadingRetryDelay: 1000,
                 levelLoadingRetryDelay: 1000
             });
             hls.loadSource(streamUrl);
             hls.attachMedia(video);
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                    const checkBuffer = setInterval(() => {
+                log('HLS manifest parsed');
-                        if (video.buffered.length > 0 && video.buffered.end(0) > 1.5) {
+                video.play().catch(() => log('HLS autoplay blocked'));
-                            clearInterval(checkBuffer);
-                            video.play().catch(e => playOverlay.style.display = 'flex');
-                        }
-                    }, 200);
             });
             hls.on(Hls.Events.ERROR, (e, d) => {
-                    log('HLS Error - type: ' + d.type + ', fatal: ' + d.fatal + ', details: ' + JSON.stringify(d.details));
+                log('HLS error type=' + d.type + ' fatal=' + d.fatal);
                 if (d.fatal) {
-                        log('Fatal error, attempting recovery...');
+                    if (d.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
-                        if (d.type === Hls.ErrorTypes.NETWORK_ERROR) {
+                    else if (d.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
-                            log('Network error, restarting load');
+                    else showError(d.type, 'Erreur HLS fatale');
-                            hls.startLoad();
-                        } else if (d.type === Hls.ErrorTypes.MEDIA_ERROR) {
-                            log('Media error, recovering');
-                            hls.recoverMediaError();
-                        } else {
-                            log('Unknown fatal error');
-                            error.style.display = 'block';
-                            document.getElementById('err-msg').textContent = 'Erreur HLS fatal: ' + d.type;
-                        }
                 }
             });
-                return;
         }
 
-            // MpegTS Fallback
+        function initMpegts() {
-            if (mpegts.isSupported()) {
+            log('Using MpegTS');
-                log('Using MpegTS optimized for mobile');
             const player = mpegts.createPlayer({
                 type: 'mpegts',
                 isLive: streamType === 'live',
@@ -317,39 +252,62 @@
                 liveBufferLatencyChasing: false,
                 maxStashSize: 30 * 1024 * 1024
             });
-
             player.on(mpegts.Events.ERROR, (type, detail) => {
-                    log('MpegTS Error - type: ' + type + ', detail: ' + JSON.stringify(detail));
+                log('MpegTS error type=' + type);
-                    error.style.display = 'block';
+                showError(type, JSON.stringify(detail));
-                    document.getElementById('err-msg').textContent = 'Erreur MpegTS: ' + type;
             });
-
             player.attachMediaElement(video);
             player.load();
-
+            player.play().catch(() => log('MpegTS autoplay blocked'));
-                const checkBuffer = setInterval(() => {
-                    if (video.buffered.length > 0 && video.buffered.end(0) > 1.0) {
-                        clearInterval(checkBuffer);
-                        player.play().catch(e => {
-                            log('MpegTS play error: ' + e);
-                            playOverlay.style.display = 'flex';
-                        });
         }
-                }, 200);
+
+        function init() {
+            if (!streamUrl) {
+                log('No stream URL');
+                showError('URL', 'Pas de lien de flux');
+                return;
+            }
+            log('Init: ' + streamUrl + ' type=' + streamType);
+
+            const isHLS = streamUrl.toLowerCase().includes('m3u8');
+            const isTS = streamUrl.toLowerCase().endsWith('.ts');
+            log('isHLS=' + isHLS + ' isTS=' + isTS);
+
+            // iOS Safari — HLS natif avec muted autoplay
+            if (isHLS && video.canPlayType('application/vnd.apple.mpegurl')) {
+                log('iOS Safari native HLS (muted autoplay)');
+                startPlayback();
                 return;
             }
 
-            // Direct play with play overlay fallback
+            // Android/Chrome — HLS.js
-            video.src = streamUrl;
+            if (isHLS && Hls.isSupported()) {
-            video.load();
+                initHlsJs();
-            video.play().catch(e => playOverlay.style.display = 'flex');
+                return;
             }
 
-        // Communication with Flutter
+            // MpegTS fallback
+            if (mpegts.isSupported()) {
+                initMpegts();
+                return;
+            }
+
+            // Direct fallback
+            log('Direct fallback');
+            startPlayback();
+        }
+
+        // Messages depuis Flutter
         window.addEventListener('message', (e) => {
             const d = e.data;
-            if (d.type === 'play') video.play().catch(() => playOverlay.style.display = 'flex');
+            if (!d) return;
+            if (d.type === 'play') video.play().catch(() => {});
             if (d.type === 'pause') video.pause();
+            if (d.type === 'set_volume') {
+                video.muted = d.value === 0;
+                video.volume = d.value;
+                if (d.value > 0) unmuteBtn.style.display = 'none';
+            }
         });
 
         init();