<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ bangumi_name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 70rem;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50px;
        }
        h1 {
            font-size: 54px;
            color: #333;
            margin: 30px 0 10px;
        }
        h2 {
            font-size: 22px;
            color: #555;
        }
        h3 {
            font-size: 24px;
            color: #555;
        }
        hr {
            display: block;
            width: 7rem;
            height: 1px;
            margin: 2.5rem 0;
            background-color: #eee;
            border: 0;
        }
        a {
            color: #08c;
            text-decoration: none;
        }
        p {
            font-size: 18px;
        }

        .container > h1 > a {
            color: #000;
        }

        .episode {
            display: inline-block;
            padding: 5px 20px;
            margin: 5px;
            color: #000;
            border: 2px solid #000;
            cursor: pointer;

        }

        .episode:focus {
            outline:0;
        }

        .episode:hover {
            background: #adacac;
        }


        .episode:target {
            background: #adacac;
        }

        #dplayer-container {
            max-height: 700px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1><a href="/">BGmi</a> / {{ bangumi_name }}</h1>
    <div id="episode-container">
        {% for k in sorted(bangumi.keys()) %}
        <a class="episode" data-epi="{{ k }}" href="#episode_{{ k }}" id="episode_{{ k }}">{{ k }}</a>
        {% end %}
    </div>
    <hr>
    <div id="dplayer-container"><div class="dplayer"></div></div>
    <p>DPlayer: Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed SATA.</p>
</div>
<script src="/static/dplayer/DPlayer.min.js"></script>
<script>
    {% autoescape None %}
    var bangumi_data = {{ json_encode(bangumi) }};

    var swtichVideo = function(k) {
        console.log('Load: /bangumi' + bangumi_data[k]['path']);
        dp.switchVideo({
            url: '/bangumi' + bangumi_data[k]['path'],
            pic: '{{ bangumi_cover }}',
            type: 'auto'
        }
        {% if DANMAKU_URL %}
        , {
            id: '{{ md5(bangumi_name) }}_' + k,
                    api: '{{ DANMAKU_URL }}',
                    maximum: 3000
        }
        {% end %}
        );

        dp.on('canplay', function () {
            dp.play()
        });
    };

    var config = {
        element: document.getElementsByClassName('dplayer')[0],
        autoplay: false,
        theme: '#FADFA3',
        loop: true,
        screenshot: true,
        hotkey: true,
        video: {
            url: "/bangumi{{ bangumi[max(bangumi.keys())]['path'] }}",
            pic: '{{ bangumi_cover }}'
        }
        {% if DANMAKU_URL %}
        ,
        danmaku: {
            id: '{{ md5(bangumi_name) }}_{{ max(bangumi.keys()) }}',
                    api: '{{ DANMAKU_URL }}',
                    maximum: 3000
        }
        {% end %}
    };
    var dp = new DPlayer(config);

    var episode = document.getElementById('episode-container');
    episode.addEventListener('click', function (e) {
            var k = e.target.attributes['data-epi'].value;
            swtichVideo(k);
    });

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