62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
<div id="vtuber" class="">
|
|
<div class="flex items-center justify-between">
|
|
|
|
<!-- VTuber Image -->
|
|
<figure class="image is-128x128">
|
|
<img src="/api/files/vtubers/<%= data.vtuber?.id %>/<%= data.vtuber?.image %>?thumb=128x128" alt="<%= data.vtuber?.get?.('displayName') || 'VTuber' %>" />
|
|
</figure>
|
|
|
|
<!-- VTuber Name -->
|
|
<span class="title is-6">
|
|
<%= data.vtuber?.displayName || data.vtuber?.get?.('displayName') || 'Unknown VTuber' %>
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<section class="section">
|
|
<h3 class="title is-4 mb-4">VODs</h3>
|
|
|
|
<%
|
|
const vods = data.vtuber.get('expand')?.vods || [];
|
|
if (vods.length > 0) {
|
|
%>
|
|
<div class="columns is-multiline">
|
|
<% for (const vod of vods) { %>
|
|
<div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
|
|
<a href="/vods/<%= vod.get('id') %>" class="box has-text-centered">
|
|
|
|
<!-- Thumbnail -->
|
|
<% if (vod.get('thumbnail')) { %>
|
|
<figure class="image is-16by9 mb-2">
|
|
<img src="/api/files/vods/<%= vod.get('id') %>/<%= vod.get('thumbnail') %>?thumb=400x225" alt="VOD thumbnail for <%= vod.get('id') %>" />
|
|
</figure>
|
|
<% } else { %>
|
|
<div class="has-background-grey-lighter py-6 mb-2">
|
|
<span class="has-text-grey">No thumbnail</span>
|
|
</div>
|
|
<% } %>
|
|
|
|
<!-- Title / ID -->
|
|
<p class="is-size-6 has-text-weight-semibold">
|
|
<%= vod.get('title') || vod.get('id') %>
|
|
</p>
|
|
|
|
<!-- Date -->
|
|
<% if (vod.get('streamDate')) { %>
|
|
<p class="is-size-7 has-text-grey">
|
|
<%= new Date(vod.get('streamDate')).toLocaleDateString() %>
|
|
</p>
|
|
<% } %>
|
|
</a>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
<% } else { %>
|
|
<p>No VODs available for this VTuber.</p>
|
|
<% } %>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
</div> |