<!DOCTYPE html>
<html lang="fr" data-theme="ohmstream">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ filename }} - Ohm Stream Player</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
    <div class="min-h-screen bg-base-100 p-4 md:p-8">
        <div class="max-w-5xl mx-auto">
            <!-- Header -->
            <div class="text-center mb-6">
                <h1 class="text-2xl md:text-3xl font-bold text-primary">
                    <i class="fa-solid fa-film"></i> Ohm Stream Player
                </h1>
            </div>

            <!-- Video Info Bar -->
            <div class="flex justify-between items-center bg-base-200 rounded-box border border-base-300 p-4 mb-4 flex-wrap gap-2">
                <span class="font-medium text-base-content">{{ filename }}</span>
                <span class="badge badge-ghost">{{ "%.2f"|format(file_size / 1024 / 1024) }} MB</span>
            </div>

            <!-- Video Wrapper -->
            <div class="bg-black rounded-box overflow-hidden">
                <video id="player" playsinline controls preload="metadata">
                    <source src="/stream/{{ filename }}" type="video/mp4">
                </video>
            </div>

            <!-- Controls -->
            <div class="flex justify-center gap-3 mt-4 flex-wrap">
                <a href="/web" class="btn btn-ghost">
                    <i class="fa-solid fa-arrow-left"></i> Retour
                </a>
                <a href="/stream/{{ filename }}" class="btn btn-primary" download>
                    <i class="fa-solid fa-download"></i> Télécharger
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
    <script>
        const player = new Plyr('#player', {
            captions: { active: true, update: true, language: 'auto' },
            speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
        });

        // Error handling
        player.on('error', (error) => {
            console.error('Plyr error:', error);
            const wrapper = document.querySelector('.bg-black');
            wrapper.innerHTML = `
                <div class="alert alert-error m-4">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <div>
                        <p>Erreur lors de la lecture du flux vidéo.</p>
                        <div class="flex gap-2 mt-2">
                            <a href="/video/{{ task_id }}" class="btn btn-sm btn-primary">Réessayer</a>
                            <a href="/stream/{{ filename }}" download class="btn btn-sm btn-ghost">Télécharger</a>
                        </div>
                    </div>
                </div>
            `;
        });
    </script>
</body>
</html>
