26 lines
1.3 KiB
Plaintext
26 lines
1.3 KiB
Plaintext
<div class="song-detail">
|
|
<% if (song.coverPath) { %>
|
|
<img src="/media/<%= song.coverPath %>" alt="" class="song-detail-cover" />
|
|
<% } else { %>
|
|
<div class="song-detail-cover cover-fallback">♪</div>
|
|
<% } %>
|
|
<div>
|
|
<h1><%= song.title %>
|
|
<% if (song.visibility === 'logged_in') { %><span class="badge badge-logged-in">Members only</span><% } %>
|
|
<% if (song.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
|
|
</h1>
|
|
<p class="muted"><%= song.artist %><% if (song.album) { %> · <%= song.album %><% } %></p>
|
|
<% if (song.uploadedByName) { %><p class="card-creator">Added by: <%= song.uploadedByName %></p><% } %>
|
|
<p class="muted small">
|
|
<% if (song.genre) { %><%= song.genre %> · <% } %>
|
|
<% if (song.year) { %><%= song.year %> · <% } %>
|
|
<% if (song.durationSeconds) { %><%= Math.floor(song.durationSeconds/60) %>:<%= String(song.durationSeconds%60).padStart(2,'0') %><% } %>
|
|
</p>
|
|
<button type="button" class="btn-play btn-primary"
|
|
data-play-song="<%= JSON.stringify({ id: song.id, title: song.title, artist: song.artist, cover: song.coverPath ? '/media/' + song.coverPath : null }) %>">
|
|
▶ Play
|
|
</button>
|
|
<a href="/songs" class="btn-link">← Back to songs</a>
|
|
</div>
|
|
</div>
|