40 lines
2.3 KiB
Plaintext
40 lines
2.3 KiB
Plaintext
<ul class="song-list">
|
|
<% songs.forEach((s) => { %>
|
|
<li class="song-row" data-song-id="<%= s.id %>">
|
|
<% if (s.coverPath) { %>
|
|
<img src="/media/<%= s.coverPath %>" alt="" class="song-cover" />
|
|
<% } else { %>
|
|
<div class="song-cover cover-fallback">♪</div>
|
|
<% } %>
|
|
<div class="song-main">
|
|
<a class="song-title" href="/songs/<%= s.slug %>"><%= s.title %></a>
|
|
<% if (s.visibility === 'logged_in') { %><span class="badge badge-logged-in">Members</span><% } %>
|
|
<% if (s.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
|
|
<div class="song-subtitle">
|
|
<span class="muted small"><%= s.artist %><% if (s.album) { %> · <%= s.album %><% } %></span>
|
|
<% if (s.durationSeconds) { %><span class="song-duration muted small"><%= Math.floor(s.durationSeconds/60) %>:<%= String(s.durationSeconds % 60).padStart(2,'0') %></span><% } %>
|
|
</div>
|
|
</div>
|
|
<span class="eq-bars" aria-hidden="true"><span></span><span></span><span></span></span>
|
|
<div class="song-social">
|
|
<button type="button"
|
|
class="btn-social<%= s.userLiked ? ' active' : '' %>"
|
|
data-social-action="like" data-social-type="song" data-social-id="<%= s.id %>"
|
|
<% if (!user) { %>data-require-login<% } %>
|
|
aria-pressed="<%= s.userLiked ? 'true' : 'false' %>"
|
|
title="Like">👍 <span class="social-count"><%= s.likeCount || 0 %></span></button>
|
|
<button type="button"
|
|
class="btn-social<%= s.userFavorited ? ' active' : '' %>"
|
|
data-social-action="favorite" data-social-type="song" data-social-id="<%= s.id %>"
|
|
<% if (!user) { %>data-require-login<% } %>
|
|
aria-pressed="<%= s.userFavorited ? 'true' : 'false' %>"
|
|
title="Favorite">⭐ <span class="social-count"><%= s.favoriteCount || 0 %></span></button>
|
|
</div>
|
|
<button type="button" class="btn-play"
|
|
data-play-song="<%= JSON.stringify({ id: s.id, title: s.title, artist: s.artist, cover: s.coverPath ? '/media/' + s.coverPath : null, userLiked: !!s.userLiked, userFavorited: !!s.userFavorited, likeCount: s.likeCount || 0, favoriteCount: s.favoriteCount || 0 }) %>">
|
|
▶ Play
|
|
</button>
|
|
</li>
|
|
<% }) %>
|
|
</ul>
|