<!doctype HTML>
<html>
    <head>
        <title>twitch.tforgione.fr</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/video-js.css" rel="stylesheet">
        <link href="css/spinner.css" rel="stylesheet">
    </head>
    <body>
        <div id="container"></div>
        <script src="js/vd.js"></script>
        <script src="js/main.js"></script>
        <script>
            var app = Elm.Main.init({
                node: document.getElementById('container'),
                flags: { width: window.innerWidth, height: window.innerHeight }
            });

            var lastId, player;

            if (app.ports !== undefined && app.ports.registerVideo !== undefined) {
                app.ports.registerVideo.subscribe(function(args) {
                    var time = parseInt(args[2], 10) || undefined;

                    requestAnimationFrame(function() {
                        if (args[0] !== lastId) {
                            lastId = args[0];

                            player = vd.setup(args[0], {
                                v: args[1] + "/manifest.mpd",
                                t: parseInt(args[2], 10) || 0
                            });
                        } else if (time !== undefined ){
                            player.currentTime(time);
                        }
                    });
                });
            }

            if (app.ports !== undefined && app.ports.eraseVideo !== undefined) {
                app.ports.eraseVideo.subscribe(function() {
                    lastId = undefined;
                });
            }
        </script>
    </body>
</html>