{% extends 'base.html.twig' %}

{% block body %}
    <div class="channel">
        <div class="header">
            <a href="{{ path('index') }}">
                Retour à la liste
            </a>

            <label>
                {{ channelName }}
            </label>
        </div>

        <div class="player">
            <video id="video-player" controls="" autoplay muted>
                <source src="{{ sourceUrl }}" type="application/x-mpegURL">
                Your browser doesn't support HTML5 video.
            </video>
        </div>
    </div>

    <script>
        const playlistUrl = '{{ sourceUrl }}';

        const video = document.getElementById('video-player');

        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(playlistUrl);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = playlistUrl;
            video.addEventListener('loadedmetadata', function () {
                video.play();
            });
        }
    </script>
{% endblock %}