xtremflow/web/player_lite.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IPTV Player Lite</title>
    <!-- Vendored, pinned player libraries (no CDN dependency) -->
    <script src="vendor/hls.min.js"></script>
    <script src="vendor/mpegts.min.js"></script>
    <link rel="stylesheet" href="theme.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            background: var(--color-bg);
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        #player-container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #video {
            width: 100%;
            height: 100%;
            background: var(--color-bg);
        }

        #error {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--color-text);
            text-align: center;
            z-index: 30;
        }

        #error-icon {
            font-size: 64px;
            color: var(--color-error);
            margin-bottom: 16px;
        }

        #loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--color-text);
            text-align: center;
            z-index: 20;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--color-border);
            border-top-color: var(--color-accent);
            border-radius: 50%;
            animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            margin: 0 auto 16px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Safari Autoplay Hint Overlay */
        #play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: var(--color-overlay);
            border-radius: 50%;
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: 2px solid var(--color-border);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 25;
        }

        #play-overlay svg {
            width: 40px;
            height: 40px;
            fill: white;
            margin-left: 4px;
        }
    </style>
</head>

<body>
    <div id="player-container">
        <!-- iOS/Safari core attributes -->
        <video id="video" autoplay playsinline webkit-playsinline preload="auto"></video>

        <div id="play-overlay">
            <svg viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z" />
            </svg>
        </div>

        <div id="loading">
            <div class="spinner"></div>
            <div id="loading-text">Chargement du flux...</div>
        </div>
        <div id="error">
            <div id="error-icon">⚠</div>
            <div id="error-message">Erreur de chargement</div>
        </div>
    </div>

    <script>
        const video = document.getElementById('video');
        const loading = document.getElementById('loading');
        const loadingText = document.getElementById('loading-text');
        const error = document.getElementById('error');
        const errorMessage = document.getElementById('error-message');
        const playOverlay = document.getElementById('play-overlay');

        // Get parameters from query string
        const urlParams = new URLSearchParams(window.location.search);
        let streamUrl = urlParams.get('url');
        const startTime = parseFloat(urlParams.get('t') || '0');
        const streamType = urlParams.get('type') || ''; // 'live' or 'vod'

        function log(msg) {
            console.log('[LitePlayer] ' + msg);
        }

        function showLoading(msg) {
            loading.style.display = 'block';
            loadingText.textContent = msg || 'Chargement du flux...';
            error.style.display = 'none';
        }

        function hideLoading() {
            loading.style.display = 'none';
        }

        function showError(message) {
            hideLoading();
            error.style.display = 'block';
            errorMessage.textContent = message || 'Erreur de chargement';
        }

        playOverlay.addEventListener('click', () => {
            log('Manual play triggered');
            video.play();
            playOverlay.style.display = 'none';
        });

        // Seek to startTime when video is ready
        video.addEventListener('loadedmetadata', () => {
            if (startTime > 0 && startTime < video.duration) {
                video.currentTime = startTime;
            }
        });

        // Parent (Flutter app) is always same-origin: never broadcast to '*'
        const PARENT_ORIGIN = window.location.origin;

        // Report position to parent
        let lastReportedTime = 0;
        function reportPosition() {
            if (video.currentTime > 0 && !video.paused && video.readyState > 2) {
                if (Math.abs(video.currentTime - lastReportedTime) >= 5) {
                    lastReportedTime = video.currentTime;
                    window.parent.postMessage({
                        type: 'playback_position',
                        currentTime: video.currentTime,
                        duration: isFinite(video.duration) ? video.duration : 0
                    }, PARENT_ORIGIN);
                }
            }
        }
        setInterval(reportPosition, 5000);

        video.addEventListener('pause', () => {
            window.parent.postMessage({ type: 'playback_status', status: 'paused' }, PARENT_ORIGIN);
            if (video.currentTime === 0 || video.paused) {
                loading.style.display = 'none';
                playOverlay.style.display = 'flex';
            }
        });

        video.addEventListener('playing', () => {
            window.parent.postMessage({ type: 'playback_status', status: 'playing' }, PARENT_ORIGIN);
            hideLoading();
            playOverlay.style.display = 'none';
        });

        video.addEventListener('ended', () => {
            window.parent.postMessage({
                type: 'playback_ended',
                duration: isFinite(video.duration) ? video.duration : 0
            }, PARENT_ORIGIN);
        });

        // Activity reporting
        function reportActivity() {
            window.parent.postMessage({ type: 'user_activity' }, PARENT_ORIGIN);
        }
        document.addEventListener('mousemove', reportActivity);
        document.addEventListener('touchstart', reportActivity);
        document.addEventListener('click', reportActivity);

        async function playWithHLS(url) {
            log('Trying HLS.js with: ' + url);
            showLoading('Chargement HLS...');

            if (!Hls.isSupported()) {
                if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = url;
                    video.load();
                    video.play().catch(() => {
                        loading.style.display = 'none';
                        playOverlay.style.display = 'flex';
                    });
                    return true;
                }
                return false;
            }

            const isTurbo = urlParams.get('turbo') === 'true';

            const hls = new Hls({
                maxBufferLength: 120,
                maxMaxBufferLength: 240,
                enableWorker: true,
                liveSyncDurationCount: 3,
                liveMaxLatencyDurationCount: 10,
                lowLatencyMode: false,
                nudgeOffset: 0.8,
                nudgeMaxRetries: 30,
                maxLiveSyncPlaybackRate: 1.1,
                initialLiveManifestSize: 3,
                abrEwmaDefaultEstimate: 1000000,
                manifestLoadingRetryDelay: 1000,
                levelLoadingRetryDelay: 1000
            });

            window.hlsInstance = hls;
            hls.loadSource(url);
            hls.attachMedia(video);

            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                hideLoading();
                const checkBuffer = setInterval(() => {
                    if (video.buffered.length > 0 && video.buffered.end(0) > 1.5) {
                        clearInterval(checkBuffer);
                        video.play().catch(() => playOverlay.style.display = 'flex');
                    }
                }, 200);
            });

            hls.on(Hls.Events.ERROR, (event, data) => {
                if (data.fatal) {
                    if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls.startLoad();
                    else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls.recoverMediaError();
                    else showError('HLS Error: ' + data.details);
                }
            });

            return true;
        }

        async function playWithMpegTS(url, isLive = true) {
            log('Trying mpegts.js with: ' + url);
            showLoading('Chargement MPEG-TS...');

            if (!mpegts.isSupported()) return false;

            const isTurbo = urlParams.get('turbo') === 'true';
            const player = mpegts.createPlayer({
                type: 'mpegts',
                isLive: isLive,
                url: url
            }, {
                enableWorker: true,
                stashInitialSize: 512 * 1024,
                enableStashBuffer: true,
                liveBufferLatencyChasing: false,
                maxStashSize: 30 * 1024 * 1024
            });

            player.attachMediaElement(video);
            player.load();
            
            const checkBuffer = setInterval(() => {
                if (video.buffered.length > 0 && video.buffered.end(0) > 1.0) {
                    clearInterval(checkBuffer);
                    player.play().catch(() => playOverlay.style.display = 'flex');
                }
            }, 200);

            player.on(mpegts.Events.ERROR, (type, detail, info) => {
                log('MpegTS Error: ' + type + ' - ' + detail);
                // Auto-recover after 2 seconds
                setTimeout(() => {
                    try {
                        player.unload();
                        player.detachMediaElement();
                        player.destroy();
                        playWithMpegTS(url, isLive);
                    } catch (e) {
                        showError('MpegTS Recovery Failed');
                    }
                }, 2000);
            });

            return true;
        }

        async function initPlayer() {
            if (!streamUrl) return showError('No URL');
            log('Stream URL: ' + streamUrl);

            const lowerUrl = streamUrl.toLowerCase();
            const isHLS = lowerUrl.includes('.m3u8') || lowerUrl.includes('/playlist.m3u8');

            if (isHLS) {
                await playWithHLS(streamUrl);
            } else {
                await playWithMpegTS(streamUrl, streamType === 'live');
            }
        }

        window.addEventListener('message', (event) => {
            if (event.origin !== window.location.origin) return;
            const data = event.data;
            if (!data) return;
            if (data.type === 'play') video.play().catch(() => playOverlay.style.display = 'flex');
            else if (data.type === 'pause') video.pause();
            else if (data.type === 'set_volume') { video.volume = Math.max(0, Math.min(1, data.value)); video.muted = video.volume === 0; }
        });

        initPlayer();
    </script>
</body>

</html>