<!doctype HTML>
<html>
    <head>
        <title>twitch.tforgione.fr</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .filled {
                fill: currentColor;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>
        <script src="js/main.js"></script>
        <script>
            Object.defineProperty(TimeRanges.prototype, "asArray", {
                get: function() {
                    var ret = [];
                    for (var i = 0; i < this.length; i++) {
                        ret.push({start: this.start(i), end: this.end(i)});
                    }
                    return ret;
                }
            });

            Object.defineProperty(HTMLElement.prototype, "document", {
                get: function() {
                    return document;
                }
            });

            const app = Elm.Main.init({
                node: document.getElementById('container'),
                flags: {
                    url: "video/manifest.m3u8",
                    width: window.innerWidth,
                    height: window.innerHeight
                }
            });

            let hls;

            app.ports.initVideo.subscribe(function(arg) {
                const video = document.getElementById('video');
                if (Hls.isSupported()) {
                    hls = new Hls();
                    hls.loadSource(arg);

                    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                        // Transform available levels into an array of integers (height values).
                        const availableQualities = hls.levels.map((l) => l.height);
                        availableQualities.unshift(0);
                        app.ports.nowHasQualities.send(availableQualities);
                    });

                    hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
                        app.ports.nowHasQuality.send({
                            auto: hls.autoLevelEnabled,
                            height: hls.levels[data.level].height
                        });
                    })

                    hls.attachMedia(video);
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = arg;
                }
            });

            app.ports.playPause.subscribe(function() {
                const video = document.getElementById('video');
                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            });

            app.ports.seek.subscribe(function(arg) {
                const video = document.getElementById('video');
                console.log(arg);
                video.currentTime = arg;
            });

            app.ports.requestFullscreen.subscribe(function() {
                document.getElementById('full').requestFullscreen();
            });

            app.ports.exitFullscreen.subscribe(function() {
                document.exitFullscreen();
            });

            app.ports.setPlaybackRate.subscribe(function(arg) {
                const video = document.getElementById('video');
                video.playbackRate = arg;
            });

            app.ports.setQuality.subscribe(function(arg) {
                var old = hls.currentLevel;
                if (arg.auto) {
                    hls.currentLevel = -1;
                } else {
                    hls.levels.forEach((level, levelIndex) => {
                        if (level.height === arg.height) {
                            hls.currentLevel = levelIndex;
                        }
                    });
                }
                if (old === hls.currentLevel) {
                    app.ports.nowHasQuality.send({
                        auto: hls.autoLevelEnabled,
                        height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
                    });
                }
            });

            app.ports.setVolume.subscribe(function(arg) {
                const video = document.getElementById('video');
                video.volume = arg.volume;
                video.muted = arg.muted;
            });
        </script>
    </body>
</html>