74 lines
3.9 KiB
Plaintext
74 lines
3.9 KiB
Plaintext
<div class="song-detail">
|
|
<% if (playlist.coverPath) { %>
|
|
<img src="/media/<%= playlist.coverPath %>" alt="" class="song-detail-cover lb-trigger" data-lightbox />
|
|
<% } else { %>
|
|
<div class="song-detail-cover cover-fallback">🎧</div>
|
|
<% } %>
|
|
<div class="song-detail-info">
|
|
<div class="song-detail-meta">
|
|
<h1><%= playlist.title %></h1>
|
|
<% if (playlist.description) { %><p class="muted"><%= playlist.description %></p><% } %>
|
|
<p class="muted small"><%= tracks.length %> track<%= tracks.length === 1 ? '' : 's' %></p>
|
|
<div class="social-row">
|
|
<button type="button"
|
|
class="btn-social<%= playlist.userLiked ? ' active' : '' %>"
|
|
data-social-action="like" data-social-type="playlist" data-social-id="<%= playlist.id %>"
|
|
<% if (!user) { %>data-require-login<% } %>
|
|
aria-pressed="<%= playlist.userLiked ? 'true' : 'false' %>"
|
|
title="Like">👍 <span class="social-count"><%= playlist.likeCount || 0 %></span></button>
|
|
<button type="button"
|
|
class="btn-social<%= playlist.userFavorited ? ' active' : '' %>"
|
|
data-social-action="favorite" data-social-type="playlist" data-social-id="<%= playlist.id %>"
|
|
<% if (!user) { %>data-require-login<% } %>
|
|
aria-pressed="<%= playlist.userFavorited ? 'true' : 'false' %>"
|
|
title="Favorite">⭐ <span class="social-count"><%= playlist.favoriteCount || 0 %></span></button>
|
|
</div>
|
|
<% const npMeta = JSON.stringify({ title: playlist.title, description: playlist.description || null, cover: playlist.coverPath ? '/media/' + playlist.coverPath : null, trackCount: tracks.length, creator: creator ? { displayName: creator.displayName, avatarPath: creator.avatarPath || null, slug: creator.slug || null } : null }); %>
|
|
<div class="playlist-btn-row">
|
|
<div class="playlist-btn-left">
|
|
<button type="button" class="btn-primary"
|
|
id="play-playlist-btn"
|
|
data-nowplaying-meta="<%= npMeta %>"
|
|
data-play-playlist="<%= JSON.stringify(tracks.map((t) => ({ id: t.id, title: t.title, artist: t.artist, cover: t.coverPath ? '/media/' + t.coverPath : null, userLiked: !!t.userLiked, userFavorited: !!t.userFavorited, likeCount: t.likeCount || 0, favoriteCount: t.favoriteCount || 0 }))) %>">
|
|
▶ Play all
|
|
</button>
|
|
<button type="button" class="btn-primary"
|
|
data-nowplaying-meta="<%= npMeta %>"
|
|
data-shuffle-playlist="<%= JSON.stringify(tracks.map((t) => ({ id: t.id, title: t.title, artist: t.artist, cover: t.coverPath ? '/media/' + t.coverPath : null, userLiked: !!t.userLiked, userFavorited: !!t.userFavorited, likeCount: t.likeCount || 0, favoriteCount: t.favoriteCount || 0 }))) %>">
|
|
⇄ Shuffle all
|
|
</button>
|
|
<a href="/playlists" class="btn-link">← Back</a>
|
|
</div>
|
|
<button type="button" id="np-reopen-btn" class="btn-nowplaying" style="display:none">
|
|
▶ Now Playing
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% if (creator) { %>
|
|
<% if (creator.slug) { %>
|
|
<a href="/profiles/<%= creator.slug %>" class="detail-creator-card">
|
|
<% } else { %>
|
|
<div class="detail-creator-card">
|
|
<% } %>
|
|
<% if (creator.avatarPath) { %>
|
|
<img src="/media/<%= creator.avatarPath %>" alt="" class="detail-creator-avatar">
|
|
<% } else { %>
|
|
<div class="detail-creator-avatar detail-creator-placeholder">
|
|
<%= (creator.displayName || creator.email).charAt(0).toUpperCase() %>
|
|
</div>
|
|
<% } %>
|
|
<p class="detail-creator-label">Created by</p>
|
|
<p class="detail-creator-name"><%= creator.displayName %></p>
|
|
<% if (creator.slug) { %>
|
|
</a>
|
|
<% } else { %>
|
|
</div>
|
|
<% } %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if (tracks.length > 0) { %>
|
|
<%- include('../partials/song_list', { songs: tracks }) %>
|
|
<% } %>
|