445 lines
12 KiB
Handlebars
445 lines
12 KiB
Handlebars
{{#> 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}} |