openwemb/templates/video.html

<%include file="header.inc.html"/>

<video id="player" playsinline controls data-poster="${video.thumbnail}">
  <source src="${video.video}" type="video/webm" />
</video>

<div id="tags" class="tags are-normal"></div>

<hr id="delimiter">

<time id="upload_date" class="is-size-7 is-family-secondary"></time>

<div id="video_info">
  <span class="icon-text">
    <span class="icon">
      <i id="likes_icon" class="fas fa-heart"></i>
    </span>

    <span id="likes_count"></span>
  </span>

  <span>
    <div class="media">
      <div class="media-left">
        <figure class="image is-24x24">
          <img id="uploader_avatar" src="/static/avatars/default/default.128.png">
        </figure>
      </div>
      <div class="media-content">
        <a id="uploader_username"></a>
      </div>
    </div>   
  </span>
</div> 

<br>

<div class="buttons is-centered">
  <button id="last_button" class="button" disabled>
    <span class="icon"><i class="fas fa-angle-left"></i></span>
    <span>Last</span>
  </button>

  <a class="button" href="/random">
    <span class="icon"><i class="fas fa-dice"></i></span>
    <span>Random</span>
  </a>

  <button id="next_button" class="button" disabled>
    <span class="icon"><i class="fas fa-angle-right"></i></span>
    <span>Next</span>
  </button>
</div>

<br>
 
<div class="box">
  <div class="field"> 
    <label class="label"><b id="comments_count"></b> comment<span id="comments_count_suffix"></span>.</label>   

    <div class="control is-expanded">
      <textarea id="comment_field" class="textarea" rows="1"></textarea> 
    </div>

    <p id="characters_left" class="help">256</p>  
  </div>

  <div id="send_comment_field" class="field has-text-right">
    <div class="control">
      <a id="send_comment" class="button is-primary">Send</a>
    </div>
  </div>
</div>

<hr>

<div id="comments" class="columns is-desktop is-multiline"></div>

<script>
  window.video_id = ${video.id};
  window.video_uploader_id = ${video.uploader.id};
  window.video_upload_ts = ${int(video.upload_date.timestamp())};
</script>
<script src="/static/js/video.js"></script>

<%include file="footer.inc.html"/>