{{#> main}}

<link href="/assets/vod.css" rel="stylesheet">



<style>
  .vjs-funscript-indicator {
    color: #0f0;
    font-weight: bold;
    padding: 0 1em;
    display: flex;
    align-items: center;
  }

  .vjs-buttplug-indicator {
    color: #0f0;
    font-weight: bold;
    padding: 0 1em;
    display: flex;
    align-items: center;
  }

  .vjs-funscript-indicator,
  .vjs-buttplug-indicator {
    color: white;
    padding: 0 1em;
    font-size: 0.9em;
  }

  .vjs-buttplug-indicator.disconnected,
  .vjs-funscript-indicator.not-loaded {
    color: red;
  }
</style>

<header>
  {{> navbar}}
</header>


<div class="section" x-data="{}">
  <section>
    {{#if vod.hlsPlaylist}}
    <div class="video-container">
      <video id="player" class="video-js vjs-fluid" controls preload="auto" poster="{{getCdnUrl vod.thumbnail}}"
        data-setup='{}' data-playlist="{{signedHlsUrl vod.hlsPlaylist}}">
        <source src="/hls/{{vod.id}}/master.m3u8" type="application/x-mpegURL">
        {{#if (hasRole "supporterTier1" user)}}
        <track kind="captions" src="{{getCdnUrl vod.asrVttKey}}" srclang="en" label="English" default>
        <div class="funscript" data-url="{{getCdnUrl vod.funscriptVibrate}}"></div>
        <div class="funscript" data-url="{{getCdnUrl vod.funscriptThrust}}"></div>
        {{/if}}
        <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>
    </div>
    {{else}}
    <video id="player" class="hidden"></video>

    <div class="section">
      <div class="notification pt-6 pb-6">

        {{icon "processing" 24}} HTTP Live Streaming is processing.
      </div>
    </div>
    {{/if}}
  </section>
  <div class="container">

    {{!--
    <h2>Details</h2>

    - vtuber
    - datetime (formatted)
    - datetime iso 8601
    - announcementUrl
    - platforms

    <h2>Vods</h2> --}}


    {{!-- <video controls crossorigin playsinline
      data-poster="https://bitdash-a.akamaihd.net/content/sintel/poster.png"></video> --}}
    {{!-- <video src="{{vod.upload.hlsPlaylist}}" data-poster="{{vod.upload.thumbnail}}"></video> --}}
    {{!-- <div class="plyr-wrapper">
      <video controls crossorigin playsinline id="player" controls>

      </video>
    </div> --}}
    {{!--
    <video id="player" class="video-js vjs-default-skin" controls muted width="640" height="360">
      <source src="https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8"
        type="application/x-mpegURL">
    </video> --}}

    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          {{#each vod.vtubers}}
          <a href="/vt/{{this.slug}}">{{this.displayName}}</a>{{#unless @last}}, {{/unless}}
          {{/each}}
        </div>
        <div class="level-item">{{formatDate vod.streamDate}}</div>
      </div>
    </nav>

    <div class="overflow-auto">

      {{#if vod.notes}}
      <h2 id="notes" class="title is-4 mb-5">Notes</h2>
      <div class="card">
        <div class="card-content">
          <div class="content breaklines">{{vod.notes}}</div>
        </div>
        <footer class="card-footer">
          <div class="card-footer-item">{{{identicon vod.uploader.id 24}}}</div>
        </footer>
      </div>
      {{/if}}



      <h2 class="title is-4">Downloads</h2>


      <h3 class="title is-5">VOD</h3>
      <div class="box">
        {{#if vod.sourceVideo}}

        {{#if (hasRole "supporterTier1" user)}}
        <p><a data-source-video="{{getCdnUrl vod.sourceVideo}}" data-file-name="{{basename vod.sourceVideo}}"
            x-on:click.prevent="download($el.dataset.sourceVideo, $el.dataset.fileName)"
            href="{{getCdnUrl vod.sourceVideo}}" download="{{basename vod.sourceVideo}}" target="_blank">{{icon
            "download" 24}} Download</a>
        </p>
        {{else}}
        <p class="mb-3">
          <a href="/perks">{{icon "patreon" 24}}</a>
          <del>
            CDN Download
          </del>
        </p>
        {{/if}}

        <p>{{#if vod.sha256sum}}<span><b>sha256sum</b> {{vod.sha256sum}}</span>{{/if}}</p>
        {{#if vod.cidv1}}
        <p><b>IPFS cidv1</b> {{vod.cidv1}}</p>
        {{else}}
        <article class="notification">
          IPFS CID is processing.
        </article>
        {{/if}}
        {{#if vod.magnetLink}}
        <p><a href="{{vod.magnetLink}}">{{icon "magnet" 24}} Magnet Link</a></p>
        {{else}}
        <article class="notification">
          Magnet Link is processing.
        </article>
        {{/if}}
      </div>


      <h4 class="title is-5">Raw Segments</h4>
      <div class="mb-5">
        {{#if vod.segmentKeys}}
        {{#if (hasRole "supporterTier1" user)}}
        <ul>
          {{#each vod.segmentKeys}}
          <li><a data-source-video="{{getCdnUrl this.key}}" data-file-name="{{this.name}}" target="_blank"
              download="{{this.name}}" x-on:click.prevent="download($el.dataset.sourceVideo, $el.dataset.fileName)"
              href="{{getCdnUrl this.key}}">{{icon "download" 24}} {{this.name}}</a>
          </li>
          {{/each}}
        </ul>
        {{else}}
        <p>
          <a href="/perks">{{icon "patreon" 24}}</a>
          <del>
            Raw Segments CDN Download
          </del>
        </p>
        {{/if}}
        {{else}}

        <div class="notification">
          This VOD has no file segments.
        </div>

        {{/if}} {{!-- end of raw segments --}}
      </div>





      {{else}}
      <div class="notification">
        Video Source is processing.
      </div>
      {{/if}} {{!-- end of vod.sourceVideo --}}




      <h4 class="title is-5">HLS Playlist</h4>
      <div class="mb-5">
        {{#if vod.hlsPlaylist}}
        {{#if (hasRole "supporterTier1" user)}}
        <a href="{{signedHlsUrl vod.hlsPlaylist}}">{{signedHlsUrl vod.hlsPlaylist}}</a>
        {{else}}
        <p>
          <a href="/perks">{{icon "patreon" 24}}</a>
          <del>
            HLS Playlist CDN Download
          </del>
        </p>
        {{/if}}
        {{else}}
        <div class="notification">
          HLS Playlist is processing.
        </div>
        {{/if}}
      </div>

      <div class="mb-5">
        <h4 class="title is-5">Thumbnail Image</h4>
        {{#if vod.thumbnail}}
        <img src="{{getCdnUrl vod.thumbnail}}" alt="{{vtuber.displayName}} thumbnail">
        <div class="mx-5"></div>
        {{else}}
        <div class="notification">
          Thumbnail is processing.
        </div>
        {{/if}}
      </div>



      <div class="mb-5">
        <h4 class="title is-5">Funscripts (sex toy sync)</h4>
        {{#if vod.funscriptVibrate}}

        {{#if (hasRole "supporterTier1" user)}}
        <p>
          <a id="funscript-vibrate" data-url="{{getCdnUrl vod.funscriptVibrate}}"
            data-file-name="{{basename vod.funscriptThrust}}"
            x-on:click.prevent="download($el.dataset.url, $el.dataset.fileName)"
            href="{{getCdnUrl vod.funscriptVibrate}}" alt="{{this.vtuber.displayName}} funscript vibrate file">{{icon
            "download" 24}}
            {{this.vtuber.displayName}}
            vibrate.funscript</a>
        </p>
        <p>
          <a id="funscript-thrust" data-url="{{getCdnUrl vod.funscriptThrust}}"
            data-file-name="{{basename vod.funscriptThrust}}"
            x-on:click.prevent="download($el.dataset.url, $el.dataset.fileName)"
            href="{{getCdnUrl vod.funscriptThrust}}" alt="{{this.vtuber.displayName}} funscript thrust file">{{icon
            "download" 24}}
            {{this.vtuber.displayName}}
            thrust.funscript</a>
        </p>
        {{else}}
        <p>
          <a href="/perks">{{icon "patreon" 24}}</a>
          <del>
            Funscripts
          </del>
        </p>
        {{/if}}
        <div class="mx-5"></div>
        {{else}}
        <div class="notification">
          Funscript file is processing.
        </div>
        {{/if}}
      </div>

      <div class="mb-5">
        <h4 class="title is-5">Closed Captions / Subtitles</h4>
        <article>

          {{#if vod.asrVttKey}}
          {{#if (hasRole "supporterTier1" user)}}
          <a id="asr-vtt" data-url="{{getCdnUrl vod.asrVttKey}}" data-file-name="{{basename vod.asrVttKey}}"
            x-on:click.prevent="download($el.dataset.url, $el.dataset.fileName)" href="{{getCdnUrl vod.asrVttKey}}"
            alt="Closed Captions VTT file">{{icon "download" 24}} Closed Captions</a>
          {{else}}
          <p>
            <a href="/perks">{{icon "patreon" 24}}</a>
            <del>
              Closed Captions / Subtitles
            </del>
          </p>
          {{/if}}
        </article>
      </div>


      <div class="mb-5">
        <h2 class="title is-4">VOD Metadata</h2>
        <div class="box">
          {{#if vod.sourceVideoDuration }}
          <p>Duration: {{vod.sourceVideoDuration}}</p>
          <p>FPS: {{vod.sourceVideoFPS}}</p>
          <p>Video Codec: {{vod.sourceVideoCodec}}</p>
          <p>Audio Codec: {{vod.sourceAudioCodec}}</p>
          {{else}}
          <article class="notification">
            Vod metadata is processing
          </article>
          {{/if}}
        </div>
      </div>


      {{else}}
      <div class="notification">
        Closed captions are processing.
      </div>
      {{/if}}





      {{#if (isModerator user)}}
      <article class="mb-5">
        <h2 class="title is-3">Moderator section</h2>
        <div class="box">

          <div class="mb-5">
            <h3 class="title is-4">Storyboard Images</h3>
            {{#if vod.slvttVTTKey}}
            <a id="slvtt" data-url="{{getCdnUrl vod.slvttVTTKey}}" data-file-name="{{basename vod.slvttVTTKey}}"
              x-on:click.prevent="download($el.dataset.url, $el.dataset.fileName)" href="{{getCdnUrl vod.slvttVTTKey}}"
              alt="slvttVTTKey">{{icon "download" 24}} slvttVTTKey</a>
            {{else}}
            <article class="notification">
              Storyboard Images are processing
            </article>
            {{/if}}
          </div>

          <h3 class="title is-4">Controls</h3>
          <button class="button" hx-post="/vods/{{vod.id}}/process" hx-target="body"><span class="icon mr-2">{{icon
              "processing" 24}}</span>
            Re-Schedule
            Vod
            Processing</button>
        </div>
      </article>
      {{/if}}



      {{!-- this is feature creep-- we will add this once we get the basic site running --}}

      {{!-- <h2>Comments</h2>
      {{>commentForm}} --}}
    </div>
  </div>


  {{>footer}}
</div>
{{!--
<script src="https://cdn.jsdelivr.net/npm/video.js@8.23.3/dist/video.min.js"></script>
<script> --}}





</script>
{{!--
<script src="https://cdn.jsdelivr.net/gh/Teyuto/videojs-vtt-thumbnails@main/src/videojs-vtt-thumbnails.min.js"></script>
--}}
{{!--
<script src="https://cdn.jsdelivr.net/npm/video.js@8.23.3/dist/video.min.js"></script> --}}
{{!--
<script src="https://cdn.jsdelivr.net/npm/videojs-vtt-thumbnails@0.0.13/dist/videojs-vtt-thumbnails.min.js"></script>
--}}
{{!--
<script type="module">
  import { default as caca } from "https://esm.sh/gh/mayeaux/videojs-vtt-thumbnails@260a63a/es2022/videojs-vtt-thumbnails.mjs";
  console.log('caca as follows')
  console.log(caca)
  caca()
</script> --}}








{{!--
Script 4: Initialize the buttplug plugin and pass in the funscript URL from the DOM
--}}
{{!--
<script type="module">
  //import videojs from 'https://cdn.jsdelivr.net/npm/video.js@8/+esm'
  //import 'https://esm.sh/gh/mayeaux/videojs-vtt-thumbnails';



  const player = videojs('#player');
  const funscriptElement = document.querySelector('#funscript');

  if (funscriptElement) {
    player.buttplug({
      funscriptUrl: funscriptElement?.dataset.url || null
    });
  } else {
    console.error('Element with id "funscript" not found.');
  }

  //console.log('vtt-thumbnails')
  //console.log(player.vttThumbnails)
  // Initialize videojs-vtt-thumbnails
  //player.vttThumbnails({
  //  src: "{{getCdnUrl vod.slvttVTTKey}}",
  //  showTimestamp: true
  //});
  //player.vttThumbnails({
  //  //spriteUrl: 'path/to/sprite.jpg',
  //  vttData: {
  //    url: '{{getCdnUrl vod.slvttVTTKey}}'
  //  }
  //});

</script> --}}


<script type="module" src="/assets/vod.js"></script>


{{/main}}