add playlist concept
This commit is contained in:
sakrecoer
parent
4df2e1fa37
commit
4f6779e968
3 changed files with 363 additions and 183 deletions
|
|
@ -121,25 +121,6 @@ body {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .main-header::before {
|
|
||||||
background:
|
|
||||||
/* Darker overlay for dark mode */
|
|
||||||
linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(0, 0, 0, 0.7) 0%,
|
|
||||||
rgba(0, 0, 0, 0.4) 40%,
|
|
||||||
rgba(0, 0, 0, 0.4) 60%,
|
|
||||||
rgba(0, 0, 0, 0.7) 100%
|
|
||||||
),
|
|
||||||
repeating-linear-gradient(
|
|
||||||
33deg,
|
|
||||||
transparent,
|
|
||||||
transparent 50px,
|
|
||||||
var(--accent-yellow) 50px,
|
|
||||||
var(--accent-yellow) 51px
|
|
||||||
);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Decorative '>' character */
|
/* Decorative '>' character */
|
||||||
.main-header::after {
|
.main-header::after {
|
||||||
|
|
@ -156,6 +137,59 @@ body {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* */
|
||||||
|
/* */
|
||||||
|
/* */
|
||||||
|
|
||||||
|
.playlist-header::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
/* Dark overlay for readability */
|
||||||
|
linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
|
rgba(0, 0, 0, 0.25) 40%,
|
||||||
|
rgba(0, 0, 0, 0.25) 60%,
|
||||||
|
rgba(0, 0, 0, 0.5) 100%
|
||||||
|
),
|
||||||
|
/* Cyberpunk pattern */
|
||||||
|
repeating-linear-gradient(
|
||||||
|
33deg,
|
||||||
|
transparent,
|
||||||
|
transparent 50px,
|
||||||
|
var(--accent-yellow) 50px,
|
||||||
|
var(--accent-yellow) 51px
|
||||||
|
);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Decorative '>' character */
|
||||||
|
.playlist-header::after {
|
||||||
|
content: '>';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
right: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--accent-y);
|
||||||
|
opacity: 0.15;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#bannerino {
|
#bannerino {
|
||||||
filter: grayscale(50%);
|
filter: grayscale(50%);
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
@ -2115,7 +2149,7 @@ button {
|
||||||
|
|
||||||
.playlist-card:hover {
|
.playlist-card:hover {
|
||||||
transform: skewX(0deg) translate(-4px, -4px);
|
transform: skewX(0deg) translate(-4px, -4px);
|
||||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-image {
|
.playlist-image {
|
||||||
|
|
@ -2149,7 +2183,7 @@ button {
|
||||||
|
|
||||||
.playlist-track-count {
|
.playlist-track-count {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-grey);
|
||||||
color: var(--accent-black);
|
color: var(--accent-black);
|
||||||
padding: 0.2rem 0.8rem;
|
padding: 0.2rem 0.8rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
|
|
@ -2308,7 +2342,7 @@ button {
|
||||||
|
|
||||||
.playlist-card:hover {
|
.playlist-card:hover {
|
||||||
transform: skewX(0deg) translate(-4px, -4px);
|
transform: skewX(0deg) translate(-4px, -4px);
|
||||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-link {
|
.playlist-link {
|
||||||
|
|
@ -2351,8 +2385,8 @@ button {
|
||||||
|
|
||||||
.playlist-track-count {
|
.playlist-track-count {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-grey);
|
||||||
color: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
padding: 0.2rem 0.8rem;
|
padding: 0.2rem 0.8rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -2372,7 +2406,7 @@ button {
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-card:hover .playlist-hover-overlay {
|
.playlist-card:hover .playlist-hover-overlay {
|
||||||
|
|
@ -2382,22 +2416,22 @@ button {
|
||||||
.playlist-view-btn {
|
.playlist-view-btn {
|
||||||
padding: 0.8rem 2rem;
|
padding: 0.8rem 2rem;
|
||||||
background: var(--accent-yellow);
|
background: var(--accent-yellow);
|
||||||
color: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border: 2px solid var(--accent-grey);
|
border-radius: 7px;
|
||||||
transform: skewX(-33deg);
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-view-btn:hover {
|
.playlist-view-btn:hover {
|
||||||
transform: skewX(-33deg) scale(1.1);
|
background: var(--accent-yellow);
|
||||||
background: var(--accent-black);
|
color: var(--bg-primary);
|
||||||
color: var(--accent-yellow);
|
transition: all .3s ease;
|
||||||
border-color: var(--accent-yellow);
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
|
|
@ -2458,7 +2492,7 @@ button {
|
||||||
|
|
||||||
.playlist-meta span {
|
.playlist-meta span {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--accent-grey);
|
color: var(--bg-primary);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2484,7 +2518,7 @@ button {
|
||||||
|
|
||||||
.playlist-track-item:hover {
|
.playlist-track-item:hover {
|
||||||
transform: skewX(0deg) translate(-2px, -2px);
|
transform: skewX(0deg) translate(-2px, -2px);
|
||||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-number {
|
.track-number {
|
||||||
|
|
@ -2553,7 +2587,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.track-player {
|
.track-player {
|
||||||
width: 150px;
|
width: 100%;
|
||||||
border: 1px solid var(--accent-grey);
|
border: 1px solid var(--accent-grey);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -2582,27 +2616,26 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-play-all {
|
.playlist-play-all {
|
||||||
background: var(--accent-yellow);
|
background: var(--bg-primary);
|
||||||
color: var(--accent-black);
|
color: var(--accent-yellow) !important;
|
||||||
border: 2px solid var(--accent-grey);
|
border: 2px solid var(--accent-yellow);
|
||||||
padding: 1rem 3rem;
|
padding: .5rem 1.5rem;
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: poppins,sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1rem;
|
font-size: .7rem;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all .3s ease;
|
||||||
transform: skewX(-33deg);
|
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
animation: glow 3s infinite alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-play-all:hover {
|
.playlist-play-all:hover {
|
||||||
transform: skewX(-33deg) scale(1.05);
|
transform: scale(1.05);
|
||||||
background: var(--accent-black);
|
background: var(--accent-yellow);
|
||||||
color: var(--accent-yellow);
|
color: var(--bg-primary) !important;
|
||||||
border-color: var(--accent-yellow);
|
border-color: var(--accent-yellow);
|
||||||
box-shadow: 8px 8px 0 var(--accent-yellow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Back link */
|
/* Back link */
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,76 @@
|
||||||
|
{{ define "header" }}
|
||||||
|
{{ $displayName := "" }}
|
||||||
|
{{ $name := "" }}
|
||||||
|
{{ $picture := "" }}
|
||||||
|
{{ $banner := "" }}
|
||||||
|
{{ $about := "" }}
|
||||||
|
{{ $website := "" }}
|
||||||
|
{{ $nip05 := "" }}
|
||||||
|
{{ $lud16 := "" }}
|
||||||
|
|
||||||
|
{{ range hugo.Data.profile }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ range .tags }}
|
||||||
|
{{ if eq (index . 0) "display_name" }}
|
||||||
|
{{ $displayName = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "name" }}
|
||||||
|
{{ $name = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "picture" }}
|
||||||
|
{{ $picture = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "banner" }}
|
||||||
|
{{ $banner = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "about" }}
|
||||||
|
{{ $about = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "website" }}
|
||||||
|
{{ $website = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "nip05" }}
|
||||||
|
{{ $nip05 = index . 1 }}
|
||||||
|
{{ else if eq (index . 0) "lud16" }}
|
||||||
|
{{ $lud16 = index . 1 }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<!-- If display_name is empty, use name -->
|
||||||
|
{{ if not $displayName }}
|
||||||
|
{{ $displayName = $name }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Main Header -->
|
||||||
|
<header class="playlist-header" style="min-height: unset;max-height:25vh;">
|
||||||
|
<!-- Background image -->
|
||||||
|
{{ if $banner }}
|
||||||
|
<div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
|
||||||
|
<!-- Dark overlay for readability -->
|
||||||
|
<div id="texture"></div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Decorative '>' -->
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<div class="header-content">
|
||||||
|
<div class="header-profile">
|
||||||
|
{{ if $picture }}
|
||||||
|
<a href="/" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<section class="section playlists-list">
|
<section class="section playlists-list">
|
||||||
<h1>Playlists</h1>
|
|
||||||
|
<h2>Playlists</h2>
|
||||||
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
||||||
|
|
||||||
<div class="playlists-grid">
|
<div class="playlists-grid">
|
||||||
|
|
@ -27,7 +97,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="playlist-hover-overlay">
|
<div class="playlist-hover-overlay">
|
||||||
<span class="playlist-view-btn">▶ View Playlist</span>
|
<span class="playlist-view-btn">▶ Listen</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,137 +1,214 @@
|
||||||
{{ define "main" }}
|
{{ define "header" }}
|
||||||
{{ $name := .Title }}
|
|
||||||
{{ $description := .Params.playlist_description | default "" }}
|
|
||||||
{{ $image := .Params.playlist_image | default "" }}
|
|
||||||
{{ $tracks := .Params.playlist_tracks | default slice }}
|
|
||||||
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
|
||||||
|
|
||||||
<section class="section playlist-detail">
|
{{ $displayName := "" }}
|
||||||
<div class="playlist-header">
|
{{ $name := "" }}
|
||||||
<div class="playlist-header-content">
|
{{ $picture := "" }}
|
||||||
{{ if $image }}
|
{{ $banner := "" }}
|
||||||
<img src="{{ $image }}" alt="{{ $name }}" class="playlist-header-image" loading="lazy">
|
{{ $about := "" }}
|
||||||
{{ end }}
|
{{ $website := "" }}
|
||||||
<div class="playlist-header-info">
|
{{ $nip05 := "" }}
|
||||||
<h1>{{ $name }}</h1>
|
{{ $lud16 := "" }}
|
||||||
{{ if $description }}
|
|
||||||
<p class="playlist-description">{{ $description }}</p>
|
|
||||||
{{ end }}
|
|
||||||
<div class="playlist-meta">
|
|
||||||
<span class="playlist-track-count">🎵 {{ len $tracks }} tracks</span>
|
|
||||||
{{ if $created_at }}
|
|
||||||
<span class="playlist-created">📅 {{ dateFormat "January 2, 2006" (time $created_at) }}</span>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="playlist-tracks-list">
|
{{ range hugo.Data.profile }}
|
||||||
{{ if $tracks }}
|
{{ range . }}
|
||||||
{{ range $index, $track := $tracks }}
|
{{ range .tags }}
|
||||||
<div class="playlist-track-item">
|
{{ if eq (index . 0) "display_name" }}
|
||||||
<div class="track-number">{{ add $index 1 }}</div>
|
{{ $displayName = index . 1 }}
|
||||||
{{ if $track.image }}
|
{{ else if eq (index . 0) "name" }}
|
||||||
<img src="{{ $track.image }}" alt="{{ $track.title }}" class="track-thumbnail" loading="lazy">
|
{{ $name = index . 1 }}
|
||||||
{{ end }}
|
{{ else if eq (index . 0) "picture" }}
|
||||||
<div class="track-info">
|
{{ $picture = index . 1 }}
|
||||||
<span class="track-title">{{ $track.title | default "Untitled" }}</span>
|
{{ else if eq (index . 0) "banner" }}
|
||||||
<span class="track-artist">{{ $track.artist | default "Unknown Artist" }}</span>
|
{{ $banner = index . 1 }}
|
||||||
{{ if $track.album }}
|
{{ else if eq (index . 0) "about" }}
|
||||||
<span class="track-album">{{ $track.album }}</span>
|
{{ $about = index . 1 }}
|
||||||
{{ end }}
|
{{ else if eq (index . 0) "website" }}
|
||||||
{{ if $track.duration }}
|
{{ $website = index . 1 }}
|
||||||
<span class="track-duration">{{ $track.duration }}s</span>
|
{{ else if eq (index . 0) "nip05" }}
|
||||||
{{ end }}
|
{{ $nip05 = index . 1 }}
|
||||||
{{ if $track.tags }}
|
{{ else if eq (index . 0) "lud16" }}
|
||||||
<div class="track-tags">
|
{{ $lud16 = index . 1 }}
|
||||||
{{ range $track.tags }}
|
{{ end }}
|
||||||
<span class="tag"><span>{{ . }}</span></span>
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
<div class="track-player-wrapper">
|
|
||||||
{{ if $track.url }}
|
|
||||||
<audio controls preload="none" class="track-player">
|
|
||||||
<source src="{{ $track.url }}" type="audio/mpeg">
|
|
||||||
</audio>
|
|
||||||
{{ end }}
|
|
||||||
{{ if $track.id }}
|
|
||||||
<button class="track-share-btn" onclick="copyTrackLink('{{ $track.id }}')" title="Share this track">
|
|
||||||
<span>🔗</span>
|
|
||||||
</button>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
{{ else }}
|
|
||||||
<p class="no-tracks">No tracks found for this playlist.</p>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ if $tracks }}
|
<!-- If display_name is empty, use name -->
|
||||||
<div class="playlist-actions">
|
{{ if not $displayName }}
|
||||||
<button class="playlist-play-all" onclick="playAllTracks()">
|
{{ $displayName = $name }}
|
||||||
<span>▶</span> Play All Tracks
|
{{ end }}
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
<div class="playlist-back">
|
|
||||||
<a href="/playlists/" class="back-link">← Back to All Playlists</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function copyTrackLink(trackId) {
|
|
||||||
const url = `https://nostr.basspistol.org/notes/${trackId}`;
|
|
||||||
if (navigator.clipboard) {
|
|
||||||
navigator.clipboard.writeText(url).then(() => {
|
|
||||||
const btn = event.target.closest('.track-share-btn');
|
|
||||||
const originalText = btn.innerHTML;
|
|
||||||
btn.innerHTML = '✓';
|
|
||||||
setTimeout(() => {
|
|
||||||
btn.innerHTML = originalText;
|
|
||||||
}, 2000);
|
|
||||||
}).catch(() => {
|
|
||||||
fallbackCopy(url);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
fallbackCopy(url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fallbackCopy(url) {
|
<!-- Main Header -->
|
||||||
const textArea = document.createElement('textarea');
|
<header class="playlist-header" style="min-height: unset;max-height:25vh;">
|
||||||
textArea.value = url;
|
<!-- Background image -->
|
||||||
document.body.appendChild(textArea);
|
{{ if $banner }}
|
||||||
textArea.select();
|
<div id="bannerino"></div>
|
||||||
document.execCommand('copy');
|
<!-- Dark overlay for readability -->
|
||||||
document.body.removeChild(textArea);
|
<div id="texture"></div>
|
||||||
const btn = event.target.closest('.track-share-btn');
|
{{ end }}
|
||||||
const originalText = btn.innerHTML;
|
|
||||||
btn.innerHTML = '✓';
|
|
||||||
setTimeout(() => {
|
|
||||||
btn.innerHTML = originalText;
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function playAllTracks() {
|
|
||||||
const players = document.querySelectorAll('.track-player');
|
|
||||||
if (players.length === 0) return;
|
|
||||||
|
|
||||||
let current = 0;
|
|
||||||
function playNext() {
|
<!-- Decorative '>' -->
|
||||||
if (current >= players.length) return;
|
<div></div>
|
||||||
const player = players[current];
|
|
||||||
player.play();
|
<div class="header-content">
|
||||||
player.onended = function() {
|
<div class="header-profile">
|
||||||
current++;
|
{{ if $picture }}
|
||||||
playNext();
|
<a href="/playlists" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
|
||||||
};
|
{{ end }}
|
||||||
}
|
|
||||||
playNext();
|
</div>
|
||||||
}
|
</div>
|
||||||
</script>
|
|
||||||
|
</header>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ $name := .Title }}
|
||||||
|
{{ $description := .Params.playlist_description | default "" }}
|
||||||
|
{{ $image := .Params.playlist_image | default "" }}
|
||||||
|
{{ $tracks := .Params.playlist_tracks | default slice }}
|
||||||
|
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#bannerino {
|
||||||
|
background-image:url('{{ $image }}');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section class="section playlist-detail">
|
||||||
|
<div class="playlist-header">
|
||||||
|
<div class="playlist-header-content">
|
||||||
|
{{ if $image }}
|
||||||
|
<img src="{{ $image }}" alt="{{ $name }}" class="playlist-header-image" loading="lazy">
|
||||||
|
{{ end }}
|
||||||
|
<div class="playlist-header-info">
|
||||||
|
<h1>{{ $name }}</h1>
|
||||||
|
{{ if $description }}
|
||||||
|
<p class="playlist-description">{{ $description }}</p>
|
||||||
|
{{ end }}
|
||||||
|
<div class="playlist-meta">
|
||||||
|
<span class="playlist-track-count">🎵 {{ len $tracks }} tracks</span>
|
||||||
|
{{ if $created_at }}
|
||||||
|
<span class="playlist-created">📅 {{ dateFormat "January 2, 2006" (time $created_at) }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="playlist-tracks-list">
|
||||||
|
{{ if $tracks }}
|
||||||
|
{{ range $index, $track := $tracks }}
|
||||||
|
<div class="playlist-track-item">
|
||||||
|
<div class="track-number">{{ add $index 1 }}</div>
|
||||||
|
{{ if $track.image }}
|
||||||
|
<img src="{{ $track.image }}" alt="{{ $track.title }}" class="track-thumbnail" loading="lazy">
|
||||||
|
{{ end }}
|
||||||
|
<div class="track-info">
|
||||||
|
<span class="track-title">{{ $track.title | default "Untitled" }}</span>
|
||||||
|
<span class="track-artist">{{ $track.artist | default "Unknown Artist" }}</span>
|
||||||
|
{{ if $track.album }}
|
||||||
|
<span class="track-album">{{ $track.album }}</span>
|
||||||
|
{{ end }}
|
||||||
|
{{ if $track.duration }}
|
||||||
|
<span class="track-duration">{{ $track.duration }}s</span>
|
||||||
|
{{ end }}
|
||||||
|
{{ if $track.tags }}
|
||||||
|
<div class="track-tags">
|
||||||
|
{{ range $track.tags }}
|
||||||
|
<span class="tag"><span>{{ . }}</span></span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="track-player-wrapper">
|
||||||
|
{{ if $track.url }}
|
||||||
|
<audio controls preload="none" class="track-player">
|
||||||
|
<source src="{{ $track.url }}" type="audio/mpeg">
|
||||||
|
</audio>
|
||||||
|
{{ end }}
|
||||||
|
{{ if $track.id }}
|
||||||
|
<button class="track-share-btn" onclick="copyTrackLink('{{ $track.id }}')" title="Share this track">
|
||||||
|
<span>🔗</span>
|
||||||
|
</button>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ else }}
|
||||||
|
<p class="no-tracks">No tracks found for this playlist.</p>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ if $tracks }}
|
||||||
|
<div class="playlist-actions">
|
||||||
|
<button class="playlist-play-all" onclick="playAllTracks()">
|
||||||
|
<span>▶</span> Play All Tracks
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<div class="playlist-back">
|
||||||
|
<a href="/playlists/" class="back-link">← Back to All Playlists</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function copyTrackLink(trackId) {
|
||||||
|
const url = `https://nostr.basspistol.org/notes/${trackId}`;
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
navigator.clipboard.writeText(url).then(() => {
|
||||||
|
const btn = event.target.closest('.track-share-btn');
|
||||||
|
const originalText = btn.innerHTML;
|
||||||
|
btn.innerHTML = '✓';
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.innerHTML = originalText;
|
||||||
|
}, 2000);
|
||||||
|
}).catch(() => {
|
||||||
|
fallbackCopy(url);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
fallbackCopy(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fallbackCopy(url) {
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = url;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
const btn = event.target.closest('.track-share-btn');
|
||||||
|
const originalText = btn.innerHTML;
|
||||||
|
btn.innerHTML = '✓';
|
||||||
|
setTimeout(() => {
|
||||||
|
btn.innerHTML = originalText;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function playAllTracks() {
|
||||||
|
const players = document.querySelectorAll('.track-player');
|
||||||
|
if (players.length === 0) return;
|
||||||
|
|
||||||
|
let current = 0;
|
||||||
|
function playNext() {
|
||||||
|
if (current >= players.length) return;
|
||||||
|
const player = players[current];
|
||||||
|
player.play();
|
||||||
|
player.onended = function() {
|
||||||
|
current++;
|
||||||
|
playNext();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
playNext();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue