{% extends "base.html" %}
{% block title %}{{ info.title }}{% endblock %}
{% block content %}
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
    <script>
        function loadHls() {
            var video = document.getElementById('video');
            // TODO: fix URL replacement
            var videoSrc = '{{ basePath }}{{ urlencode(info.path).replace(".mp4", ".m3u8").replace(".ts", ".m3u8").replace(".webm", ".m3u8").replace(".mkv", ".m3u8") }}';
            if (Hls.isSupported()) {
                var hls = new Hls({
                    "maxMaxBufferLength": 1,
                    "backBufferLength": 1,
                    "progressive": true,
                });
                hls.loadSource(videoSrc);
                hls.attachMedia(video);
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = videoSrc;
            }
        }

        function deleteVideo() {
            fetch("{{ basePath }}/api/channels/{{ info.channel }}/{{ info.timestamp }}", {method: "DELETE"}).then(res => {
                if (res.ok) history.back();
                else return res.json();
            }).then(body => alert("Failed to delete video: " + body.error));
        }
    </script>
    <div class="container text-left" style="margin-top: 20px">
        <video id="video" class="ratio ratio-16x9 w-100" controls>
            <source src="{{ basePath }}{{ urlencode(info.path) }}" type="video/mp4" onerror="loadHls()">
        </video>
        <h3><span style="width: 12pt; height: 12pt; background-color: #d66; border-radius: 50%; display: {{ 'inline-block' if info.in_progress else 'none' }};"></span> {{ info.title }}</h3>
        <h5><a class="link-secondary" href="{{ basePath }}/channels/{{ info.channel }}">{{ info.channel }}</a> - {{ info.platform }}</h5>
        <p>{{ formattime(info.timestamp) }}</p>
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteVideoModal">Delete</button>
    </div>
    <div class="modal fade" id="deleteVideoModal" tabindex="-1" aria-labelledby="deleteVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="deleteVideoModalLabel">Delete video</h1>
                </div>
                <div class="modal-body">
                    Are you sure you wish to delete this video? This operation cannot be undone.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="deleteVideo()">Confirm</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}