{| extend("../base.html") |}

{| block content |}
<div id="player">
    <div class="player-placeholder">视频资源加载中，请稍后......</div>
</div>
<div class="vod-title-bar">
    <h2>
        <a href="/vod/detail/?id={= ctx.vod.id =}">{{ ctx.vod.title }}</a>
        {{ ctx.vod.sources[ctx.ch].urls[ctx.ep].title }}
    </h2>
    <div class="vod-prev-next">
        {[ if ctx.ep > 1 then ]}
        <a href="/vod/play/?id={= ctx.vod.id =}&ch={= ctx.ch =}&ep={= ctx.ep - 1 =}">上一集</a>
        {[ end ]}
        {[ if ctx.vod.sources[ctx.ch].urls[ctx.ep + 1] then ]}
        <a href="/vod/play/?id={= ctx.vod.id =}&ch={= ctx.ch =}&ep={= ctx.ep + 1 =}">下一集</a>
        {[ end ]}
    </div>
</div>
{[
local src_count = 0
for _, _ in pairs(ctx.vod.sources) do
src_count = src_count + 1
end
]}
{[ if src_count > 1 then ]}
<div style="margin-bottom: 1em">如不能播放请切换线路，记住你常用线路的名字。不同地区网络不同，可以多尝试选出最快的线路。</div>
{[ end ]}
<div style="margin-bottom: 1em">
    {[ for _, chan in ipairs(ctx.channels) do ]}
    {[ if ctx.vod.sources[chan.code] then ]}
    <div class="vod-channel">{{ chan.title }}</div>
    <div class="vod-episodes">
        {[ for ep, url in ipairs(ctx.vod.sources[chan.code].urls) do ]}
        <div class="vod-episode{[ if chan.code == ctx.ch and ep == ctx.ep then ]} vod-episode-current{[ end ]}">
            <a href="/vod/play/?id={= ctx.vod.id =}&ch={= chan.code =}&ep={= ep =}"
                title="{{ ctx.vod.title }} {{ url.title }}">{{ url.title }}</a>
        </div>
        {[ end ]}
    </div>
    {[ end ]}
    {[ end ]}
</div>
{| include("detail_box.html") |}
{| end block content |}

{| block script |}
<script src="https://s4.zstatic.net/ajax/libs/hls.js/1.5.18/hls.min.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/dplayer/1.27.1/DPlayer.min.js"></script>
<script>
    const play = ({ html_id, src, thumbnail }) => new DPlayer({
        container: document.getElementById(html_id),
        video: { url: src, type: 'hls', pic: thumbnail },
        playbackSpeed: [0.5, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 3, 3.5, 4],
    })
    document.getElementById('player').innerHTML = ''
    play({
        html_id: 'player',
        src: '{= ctx.vod.sources[ctx.ch].urls[ctx.ep].url =}',
        thumbnail: '{= ctx.vod.thumbnail =}',
    })
</script>
{| end block script |}

{| block style |}
<style>
    @media screen and (max-width: 599px) {
        #player {
            width: 100%;
        }
    }

    @media screen and (min-width: 600px) {
        #player {
            height: 450px;
        }
    }

    .player-placeholder {
        text-align: center;
        padding: 50px 0;
    }

    @media screen and (min-width: 600px) {
        .player-placeholder {
            padding-top: 200px;
        }
    }

    .vod-title-bar {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: space-between;
        align-items: baseline;
    }

    .vod-prev-next {
        margin-top: 1.5em;
    }

    .vod-prev-next h2 {
        display: inline-block;
    }

    .vod-prev-next a {
        border: 1px solid #000;
        padding: 0.25em 0.5em;
    }

    .vod-prev-next a:first-of-type {
        margin-right: 1em;
    }

    .vod-episode-current {
        background-color: #f60;
    }

    .vod-episode-current a {
        color: #fff;
    }
</style>
{| end block style |}
