{% extends 'themes/wayback/base.html' %}

{% block head %}
  <meta name="description" content="{{ vinfo['desc'] }}">
  <meta name="keywords" content="{{ keywords }}">

  <meta property="og:site_name" content="{{ vinfo['owner']['name'] }} | MikuInvidious">
  <meta property="og:url" content="{{ site_url }}/video/{{ vid }}">
  <meta property="og:title" content="{{ vinfo['title'] }}">
  <meta property="og:image" content="{{ vinfo['pic'] }}">
  <meta property="og:description" content="{{ vinfo['desc'] }}">
  <meta property="og:type" content="video.other">
  <meta property="og:video:url" content="{{ site_url }}/embed/{{ vid }}">
  <meta property="og:video:secure_url" content="{{ site_url }}/embed/{{ vid }}">
  <meta property="og:video:type" content="text/html">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">

  <meta name="twitter:card" content="player">
  <meta name="twitter:url" content="{{ site_url }}/video/{{ vid }}">
  <meta name="twitter:title" content="{{ vinfo['title'] }}">
  <meta name="twitter:description" content="{{ vinfo['desc'] }}">
  <meta name="twitter:image" content="{{ vinfo['pic'] }}">
  <meta name="twitter:player" content="{{ site_url }}/embed/{{ vid }}">
  <meta name="twitter:player:width" content="1280">
  <meta name="twitter:player:height" content="720">

  <link rel="alternate" href="https://www.bilibili.com/video/{{ vid }}">
  <title>{{ vinfo['title'] }} - MikuInvidious</title>

  <meta name="referrer" content="never">

  <link rel="stylesheet" href="/static/themes/wayback/css/player.css">
  <link rel="stylesheet" href="/static/vjs/video-js.min.css">
  <link rel="stylesheet" href="/static/vjs/videojs-resolution-switcher.css">

  <script>
    current_vid = '{{ vid }}'; idx = {{ idx }}; total_pages = {{ vset|length }};
    ato = {{ 'true' if ato else 'false' }};
  </script>
{% endblock %}

{% block content %}
<div id="player-container" class="h-box">
  <video style="outline:none;width:100%;background-color:#000" playsinline controls poster="{{ vinfo['pic']|pic }}" id="player" class="on-video_player video-js player-style-invidious">
    {% for src in supported_src %}
      <source src="/proxy/video/{{ vid }}_{{ idx }}_{{ src['quality'] }}" type="video/mp4"
        label="{{ src['new_description'] }}"
         />
    {% endfor %}
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="/static/vjs/video.min.js"></script>
  <script src="/static/vjs/videojs-resolution-switcher.js"></script>
  <script src="/static/danmakujs/danmaku.min.js"></script>
</div>

<div class="h-box">
  <h1>
    {{ vinfo['title'] }}
    <a id='avswitch' title="Audio mode" href="/video/{{ vid }}?listen=1{{ '&ato=1' if ato else '' }}">
      <i class="icon ion-md-headset"></i>
    </a>
  </h1>
  {% if vset|length > 1 %}
  <h1 style="text-align: center;">
    P{{ vset[idx]['page'] }}: {{ vset[idx]['part'] }}
  </h1>
  {% endif %}
</div>

<div class="pure-g">
  <div class="pure-u-1 pure-u-lg-1-5">
    <div class="h-box">
      <span id="watch-on-youtube">
        <a href="https://www.bilibili.com/video/{{ vinfo['bvid'] }}">在哔哩哔哩上观看</a>
      </span>

      {% if site_allow_download %}
      <form class="pure-form pure-form-stacked" action="/download" method="post" rel="noopener" target="_blank">
	<input type="hidden" name="id" value="{{ vinfo['bvid'] }}">
	<input type="hidden" name="cvid" value="{{ idx }}">
	<div class="pure-control-group">
	  <label for="download_widget">下载格式： </label>
	  <select style="width:100%" name="qual" id="download_widget">
	    {% for src in supported_src %}
	    <option value="{{ src['quality'] }}">{{ src['new_description'] }}</option>
	    {% endfor %}
	  </select>
	</div>
	<button type="submit" class="pure-button pure-button-primary">
	  <b>下载</b>
	</button>
      </form>
      {% endif %}
      
      <p id="views"><i class="icon ion-ios-eye"></i> {{ vinfo['stat']['view']|intsep }}</p>
      <p id="likes"><i class="icon ion-ios-thumbs-up"></i> {{ vinfo['stat']['like']|intsep }}</p>
      <p id="coins"><i class="icon ion-logo-bitcoin"></i> {{ vinfo['stat']['coin']|intsep }}</p>
      <p id="saves"><i class="icon ion-ios-bookmark"></i> {{ vinfo['stat']['favorite']|intsep }}</p>
      <p id="shares"><i class="icon ion-md-share"></i> {{ vinfo['stat']['share']|intsep }}</p>

      <p id="genre">
	视频分区：<a href="/vv/{{ vinfo['tid'] }}">{{ vinfo['tname'] }}</a>
      </p>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-lg-3-5">
    <div class="h-box">
      <a href="/space/{{ vinfo['owner']['mid'] }}" style="display:block;width:fit-content;width:-moz-fit-content">
	<div class="channel-profile">
	  <img src="{{ vinfo['owner']['face']|pic }}" alt="" />
	  <span id="channel-name">{{ vinfo['owner']['name'] }}</span>
	</div>
      </a>

      <p id="published-date">
	上传于 {{ vinfo['pubdate']|date }}
      </p>
      
      <div id="description-box">
	<div id="descriptionWrapper">{{ vinfo['desc'] }}</div>
      </div>

      <hr>

      <div id="comments">
	<h3>浏览总计 {{ vcomments['page']['count'] }} 条评论中的 {{ vcomments['page']['size'] if vcomments['page']['size'] < vcomments['page']['count'] else vcomments['page']['count'] }} 条评论</h3>
	<div>
	  {% if vcomments['replies'] %}
	  {% for rep in vcomments['replies'] %}
	  <div class="pure-g" style="width:100%">
	    <div class="channel-profile pure-u-4-24 pure-u-md-2-24">
	      <img loading="lazy" style="margin-right:1em;margin-top:1em;width:90%" src="{{ "{}@100w".format(rep['member']['avatar'])|pic }}" alt="">
	    </div>
	    <div class="pure-u-20-24 pure-u-md-22-24">
	      <p><b><a class="" href="/space/{{ rep['member']['mid'] }}">{{ rep['member']['uname'] }}</a></b></p>
	      
	      <p style="white-space:pre-wrap">{{ rep['content']['message'] }}</p>
 
	      <p>
		<span>{{ rep['reply_control']['time_desc'] }}</span>
		|  <i class="icon ion-ios-thumbs-up"></i> {{ rep['like']|intsep }}
	      </p>
	    </div>
	  </div>
	  {% endfor %}
	  {% endif %}
	  <hr>
	</div>
      </div>
    </div>
  </div>

  <div class="pure-u-1 pure-u-lg-1-5">
    {% if vset|length > 1 %}
    <div class="h-box">
      <div class="pure-control-group">
        <label for="continue">Play next by default: </label>
        <input name="continue" id="continue" type="checkbox">
      </div>
    </div>
    <hr>
    <div class="h-box pure-menu pure-menu-scrollable" style="height: 30em;">
      {% for v in vset  %}
      <a href="/video/{{ vid }}:{{ v['page']-1 }}">
	{% if v['first_frame'] %}
	<div class="thumbnail">
	  <img width="320" height="180" loading="lazy" class="thumbnail" src="{{ "{}@320w".format(v['first_frame'])|pic }}" alt="">
	  <p class="length">{{ v['duration']|secdur }}</p>
	</div>
	{% endif %}
	<p style="width:100%">
	  P{{ v['page'] }}: {{ v['part'] }}
	</p>
      </a>
      {% endfor %}
    </div>
    <hr>
    {% endif %}
    
    <div class="h-box">
      {% for rv in vrelated  %}
      <a href="/video/{{ rv['bvid'] }}">
	<div class="thumbnail">
	  <img width="320" height="180" loading="lazy" class="thumbnail" src="{{ "{}@320w".format(rv['pic'])|pic }}" alt="">
	  <p class="length">{{ rv['duration']|secdur }}</p>
	</div>
	<p style="width:100%">
	  {{ rv['title'] }}
	</p>
      </a>
      {% endfor %}
    </div>
  </div>
</div>
  
<script src="/static/themes/wayback/js/player.js"></script>
{% endblock %}