<!doctype HTML>
<html>
    <head>
        <title>twitch.tforgione.fr</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/ico" href="/favicon.ico"/>
        <link href="css/video-js.css" rel="stylesheet">
        <link href="css/spinner.css" rel="stylesheet">
    </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/elm-video.js"></script>
        <script src="js/main.js"></script>
        <script>
            function isDarkMode(e) {
                var darkMode = JSON.parse(localStorage.getItem('darkMode'));

                if (darkMode === null) {
                    if (e === undefined) {
                        e = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
                    }

                    darkMode = e.matches === true;
                }

                return darkMode;
            }

            var app = Elm.Main.init({
                node: document.getElementById('container'),
                flags: {
                    width: window.innerWidth,
                    height: window.innerHeight,
                    darkMode: isDarkMode(),
                    darkSetting: JSON.parse(localStorage.getItem('darkMode'))
                }
            });

            PolymnyVideo.setup(app);

            if (app.ports !== undefined) {
                if (app.ports.setDarkMode !== undefined) {
                    app.ports.setDarkMode.subscribe(function(arg) {
                        if (arg === null) {
                            localStorage.removeItem('darkMode');
                        } else {
                            localStorage.setItem('darkMode', arg);
                        }
                        app.ports.darkMode.send(isDarkMode());
                    });
                }
            }

            if (app.ports !== undefined) {
                if (app.ports.eraseVideo !== undefined) {
                    app.ports.eraseVideo.subscribe(function() {
                        window.scrollTo(0, 0);
                        lastId = undefined;
                    });
                }

                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
                    app.ports.darkMode.send(isDarkMode(e));
                });
            }

        </script>
    </body>
</html>