<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/x-icon"
        href="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/static/img/favicon.ico">
    <title>AnimeDex VideoPlayer</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        body {
            background-color: #000;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        video {
            width: 100%;
            height: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
    <script src="https://cdn.jsdelivr.net/npm/plyr@3/dist/plyr.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
    <script src="https://unpkg.com/plyr@3"></script>
</head>

<body>

    <div class="container">
        <video controls crossorigin playsinline>
            <source type="application/x-mpegURL" src="https://cors.techzbots.live/{{ m3u8 }}">
        </video>
    </div>

    <script>
        const source = 'https://cors.techzbots.live/{{ m3u8 }}';
        document.addEventListener("DOMContentLoaded", () => {
            const video = document.querySelector("video");

            const defaultOptions = {
                title: '{{ title }}'
            };

            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(source);
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                    const availableQualities = hls.levels.map((l) => l.height);

                    defaultOptions.quality = {
                        default: availableQualities[0],
                        options: availableQualities,
                        forced: true,
                        onChange: (e) => updateQuality(e),
                    };
                    const player = new Plyr(video, defaultOptions);
                });
                hls.attachMedia(video);
                window.hls = hls;
            } else {
                const player = new Plyr(video, defaultOptions);
            };

            function updateQuality(newQuality) {
                window.hls.levels.forEach((level, levelIndex) => {
                    if (level.height === newQuality) {
                        window.hls.currentLevel = levelIndex;
                    }
                });
            }
        });
    </script>
</body>

</html>