make playlist more better
This commit is contained in:
parent
67f08a3670
commit
fdb107f099
9 changed files with 672 additions and 851 deletions
|
|
@ -2724,3 +2724,107 @@ button {
|
|||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
/* ============================================
|
||||
* NAV STRIP (sub-page header)
|
||||
* ============================================ */
|
||||
|
||||
.nav-strip {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 3px solid var(--accent-yellow);
|
||||
padding: 0.6rem 2rem;
|
||||
}
|
||||
|
||||
.nav-strip-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-strip-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-strip-brand:hover {
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
.nav-strip-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--accent-yellow);
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-strip-brand:hover .nav-strip-avatar {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
.nav-strip-name {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: -0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-strip-links {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-strip-links a {
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav-strip-links a:hover {
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--accent-yellow);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.nav-strip {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.nav-strip-inner {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.nav-strip-name {
|
||||
display: none;
|
||||
}
|
||||
.nav-strip-links a {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -12,25 +12,16 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
{{ block "header" . }}{{ end }}
|
||||
|
||||
|
||||
<main>
|
||||
|
||||
{{ block "main" . }}{{ end }}
|
||||
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
|
||||
|
||||
{{ partial "photo-lightbox.html" . }}
|
||||
{{ partial "music-lightbox.html" . }}
|
||||
|
||||
{{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,71 +5,8 @@
|
|||
{{ define "main" }}
|
||||
|
||||
{{ partial "blog.html" . }}
|
||||
|
||||
{{ partial "music.html" . }}
|
||||
|
||||
{{ partial "pictures.html" . }}
|
||||
|
||||
{{ partial "videos.html" . }}
|
||||
|
||||
<!-- Custom Lightbox -->
|
||||
<div class="custom-lightbox" id="customLightbox">
|
||||
<span class="custom-lightbox-close" id="lightboxClose">✕</span>
|
||||
<button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
|
||||
<button class="custom-lightbox-next" id="lightboxNext">›</button>
|
||||
<div class="custom-lightbox-content">
|
||||
<img id="lightboxImage" src="" alt="">
|
||||
<div class="custom-lightbox-caption">
|
||||
<span id="lightboxCaption"></span>
|
||||
<span class="lightbox-meta" id="lightboxMeta"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
|
||||
</div>
|
||||
|
||||
<!-- Music Lightbox -->
|
||||
<div class="music-lightbox" id="musicLightbox">
|
||||
<div class="music-lightbox-background" id="musicLightboxBg"></div>
|
||||
<button class="music-lightbox-close" id="musicLightboxClose">✕</button>
|
||||
|
||||
<div class="music-lightbox-content">
|
||||
<div class="music-lightbox-album-art">
|
||||
<img id="musicLightboxImage" src="" alt="Album art">
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-info">
|
||||
<h2 id="musicLightboxTitle">Title</h2>
|
||||
<p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
|
||||
<p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
|
||||
|
||||
<div class="music-lightbox-progress">
|
||||
<span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
|
||||
<div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
|
||||
<div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
|
||||
</div>
|
||||
<span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-controls">
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
|
||||
<button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
|
||||
<span id="musicPlayIcon2">▶</span>
|
||||
</button>
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
||||
</div>
|
||||
|
||||
<!-- SHARE BUTTON - -->
|
||||
<div class="music-lightbox-share-row">
|
||||
<button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
|
||||
<span class="share-icon">🔗</span>
|
||||
<span class="share-label">Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Lyrics -->
|
||||
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
42
themes/one-pager/layouts/partials/music-lightbox.html
Normal file
42
themes/one-pager/layouts/partials/music-lightbox.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!-- Music Lightbox -->
|
||||
<div class="music-lightbox" id="musicLightbox">
|
||||
<div class="music-lightbox-background" id="musicLightboxBg"></div>
|
||||
<button class="music-lightbox-close" id="musicLightboxClose">✕</button>
|
||||
|
||||
<div class="music-lightbox-content">
|
||||
<div class="music-lightbox-album-art">
|
||||
<img id="musicLightboxImage" src="" alt="Album art">
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-info">
|
||||
<h2 id="musicLightboxTitle">Title</h2>
|
||||
<p class="music-lightbox-artist" id="musicLightboxArtist">Artist</p>
|
||||
<p class="music-lightbox-album-name" id="musicLightboxAlbum">Album</p>
|
||||
|
||||
<div class="music-lightbox-progress">
|
||||
<span class="music-lightbox-time" id="musicLightboxCurrentTime">0:00</span>
|
||||
<div class="music-lightbox-progress-bar" id="musicLightboxProgressBar">
|
||||
<div class="music-lightbox-progress-fill" id="musicLightboxProgressFill"></div>
|
||||
</div>
|
||||
<span class="music-lightbox-time" id="musicLightboxDuration">0:00</span>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-controls">
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxPrev">⏮</button>
|
||||
<button class="music-lightbox-control-btn play-btn" id="musicLightboxPlayBtn2">
|
||||
<span id="musicPlayIcon2">▶</span>
|
||||
</button>
|
||||
<button class="music-lightbox-control-btn" id="musicLightboxNext">⏭</button>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-share-row">
|
||||
<button id="musicShareBtn" class="music-lightbox-share-btn" title="Share or interact with this track">
|
||||
<span class="share-icon">🔗</span>
|
||||
<span class="share-label">Share</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="music-lightbox-lyrics" id="musicLightboxLyrics" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
themes/one-pager/layouts/partials/nav-strip.html
Normal file
30
themes/one-pager/layouts/partials/nav-strip.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{/* Small persistent navigation strip for sub-pages (playlist list, playlist single, etc.) */}}
|
||||
{{ $displayName := "" }}
|
||||
{{ $picture := "" }}
|
||||
|
||||
{{ range hugo.Data.profile }}
|
||||
{{ range . }}
|
||||
{{ range .tags }}
|
||||
{{ if eq (index . 0) "display_name" }}{{ $displayName = index . 1 }}{{ end }}
|
||||
{{ if eq (index . 0) "picture" }}{{ $picture = index . 1 }}{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if not $displayName }}
|
||||
{{ range hugo.Data.profile }}{{ range . }}{{ range .tags }}{{ if eq (index . 0) "name" }}{{ $displayName = index . 1 }}{{ end }}{{ end }}{{ end }}{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<nav class="nav-strip">
|
||||
<div class="nav-strip-inner">
|
||||
<a href="/" class="nav-strip-brand">
|
||||
{{ if $picture }}
|
||||
<img src="{{ $picture }}" alt="{{ $displayName }}" class="nav-strip-avatar">
|
||||
{{ end }}
|
||||
<span class="nav-strip-name">{{ $displayName | default "Home" }}</span>
|
||||
</a>
|
||||
<div class="nav-strip-links">
|
||||
<a href="/">🏠 Home</a>
|
||||
<a href="/playlists/">📀 Playlists</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
14
themes/one-pager/layouts/partials/photo-lightbox.html
Normal file
14
themes/one-pager/layouts/partials/photo-lightbox.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- Custom Lightbox -->
|
||||
<div class="custom-lightbox" id="customLightbox">
|
||||
<span class="custom-lightbox-close" id="lightboxClose">✕</span>
|
||||
<button class="custom-lightbox-prev" id="lightboxPrev">‹</button>
|
||||
<button class="custom-lightbox-next" id="lightboxNext">›</button>
|
||||
<div class="custom-lightbox-content">
|
||||
<img id="lightboxImage" src="" alt="">
|
||||
<div class="custom-lightbox-caption">
|
||||
<span id="lightboxCaption"></span>
|
||||
<span class="lightbox-meta" id="lightboxMeta"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-lightbox-counter" id="lightboxCounter">1 / 1</div>
|
||||
</div>
|
||||
|
|
@ -1,107 +1,42 @@
|
|||
{{ 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>
|
||||
|
||||
|
||||
|
||||
{{ partial "nav-strip.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<section class="section playlists-list">
|
||||
|
||||
<h2>Playlists</h2>
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ if .Content }}
|
||||
<div class="section-description">{{ .Content }}</div>
|
||||
{{ else }}
|
||||
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Pages }}
|
||||
<div class="playlists-grid">
|
||||
{{ range .Pages }}
|
||||
{{ $name := .Title }}
|
||||
{{ $description := .Params.playlist_description | default "" }}
|
||||
{{ $image := .Params.playlist_image | default "" }}
|
||||
{{ $tracks := .Params.playlist_tracks | default slice }}
|
||||
|
||||
<div class="playlist-card">
|
||||
<a href="{{ .RelPermalink }}" class="playlist-link">
|
||||
{{ if $image }}
|
||||
<img src="{{ $image }}" alt="{{ $name }}" class="playlist-image" loading="lazy">
|
||||
{{ end }}
|
||||
|
||||
<div class="playlist-info">
|
||||
<h2>{{ $name }}</h2>
|
||||
{{ if $description }}
|
||||
<p class="playlist-description">{{ $description }}</p>
|
||||
{{ end }}
|
||||
{{ if $tracks }}
|
||||
<span class="playlist-track-count">{{ len $tracks }} tracks</span>
|
||||
{{ end }}
|
||||
{{ if $description }}<p class="playlist-description">{{ $description }}</p>{{ end }}
|
||||
{{ if $tracks }}<span class="playlist-track-count">{{ len $tracks }} tracks</span>{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="playlist-hover-overlay">
|
||||
<span class="playlist-view-btn">▶ Listen</span>
|
||||
<span class="playlist-view-btn">▶ View Playlist</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<p class="no-tracks">No playlists found. Run <code>./fetch-playlist.sh</code> and <code>./generate-playlist-pages.sh</code>.</p>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
|
@ -1,73 +1,20 @@
|
|||
{{ define "header" }}
|
||||
{{ $displayName := "" }}
|
||||
{{ $name := "" }}
|
||||
{{ $picture := "" }}
|
||||
{{ $banner := "" }}
|
||||
{{ $about := "" }}
|
||||
{{ $website := "" }}
|
||||
{{ $nip05 := "" }}
|
||||
{{ $lud16 := "" }}
|
||||
{{ $name := .Title }}
|
||||
{{ $image := .Params.playlist_image | default "" }}
|
||||
|
||||
{{ 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 }}
|
||||
{{/* Small nav strip with avatar + home + playlists links */}}
|
||||
{{ partial "nav-strip.html" . }}
|
||||
|
||||
<!-- 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 }}
|
||||
{{ if $image }}
|
||||
<div id="bannerino"></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="/playlists/" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
|
||||
{{ end }}
|
||||
|
||||
<div class="header-profile"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ define "main" }}
|
||||
{{ $name := .Title }}
|
||||
{{ $description := .Params.playlist_description | default "" }}
|
||||
|
|
@ -76,10 +23,7 @@
|
|||
{{ $created_at := .Params.playlist_created_at | default 0 }}
|
||||
|
||||
<style>
|
||||
|
||||
#bannerino {
|
||||
background-image:url('{{ $image }}');
|
||||
}
|
||||
#bannerino { background-image: url('{{ $image }}'); }
|
||||
</style>
|
||||
|
||||
<section class="section playlist-detail">
|
||||
|
|
@ -103,112 +47,128 @@
|
|||
</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()">
|
||||
<button class="playlist-play-all" id="playlistPlayAll">
|
||||
<span>▶</span> Play All Tracks
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="music-grid" id="playlistTrackGrid"></div>
|
||||
|
||||
<div class="playlist-back">
|
||||
<a href="/playlists/" class="back-link">← Back to All Playlists</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{/* FIX: safeJS prevents Hugo from HTML-escaping the JSON */}}
|
||||
<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);
|
||||
window.playlistOriginalTracks = {{ $tracks | jsonify | safeJS }};
|
||||
console.log('[playlist] raw tracks injected:', window.playlistOriginalTracks.length);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log('[playlist] DOMContentLoaded fired');
|
||||
console.log('[playlist] openMusicLightbox exists?', typeof openMusicLightbox);
|
||||
console.log('[playlist] initMusicEventListeners exists?', typeof initMusicEventListeners);
|
||||
|
||||
const rawTracks = window.playlistOriginalTracks || [];
|
||||
|
||||
window.musicPlaylist = rawTracks
|
||||
.filter(t => t && t.url)
|
||||
.map(t => ({
|
||||
id: t.id || '',
|
||||
title: t.title || 'Untitled',
|
||||
url: t.url,
|
||||
image: t.image || '',
|
||||
artist: t.artist || 'Unknown Artist',
|
||||
album: t.album || '',
|
||||
duration: parseFloat(t.duration) || 0,
|
||||
created_at: t.created_at || 0,
|
||||
content: t.content || ''
|
||||
}));
|
||||
|
||||
console.log('[playlist] musicPlaylist built with', window.musicPlaylist.length, 'tracks');
|
||||
|
||||
renderPlaylistGrid('playlistTrackGrid');
|
||||
|
||||
const playAll = document.getElementById('playlistPlayAll');
|
||||
if (playAll) {
|
||||
playAll.addEventListener('click', function () {
|
||||
console.log('[playlist] play-all clicked');
|
||||
if (typeof openMusicLightbox === 'function') openMusicLightbox(0);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(url);
|
||||
}
|
||||
});
|
||||
|
||||
function renderPlaylistGrid(containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
const tracks = window.musicPlaylist || [];
|
||||
container.innerHTML = '';
|
||||
|
||||
tracks.forEach((track, index) => {
|
||||
let genreTags = [];
|
||||
let content = '';
|
||||
|
||||
const raw = (window.playlistOriginalTracks || []).find(t => t.url === track.url);
|
||||
if (raw) {
|
||||
// Frontmatter tags are already flat strings; homepage tags are arrays
|
||||
if (raw.tags) {
|
||||
raw.tags.forEach(tag => {
|
||||
if (typeof tag === 'string') {
|
||||
genreTags.push(tag);
|
||||
} else if (Array.isArray(tag) && tag[0] === 't') {
|
||||
genreTags.push(tag[1]);
|
||||
}
|
||||
});
|
||||
}
|
||||
content = raw.content || '';
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
const card = document.createElement('div');
|
||||
card.className = 'music-card clickable';
|
||||
card.dataset.playlistIndex = index;
|
||||
|
||||
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();
|
||||
};
|
||||
card.addEventListener('click', function (e) {
|
||||
if (e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) return;
|
||||
const idx = parseInt(this.dataset.playlistIndex, 10);
|
||||
if (!isNaN(idx) && typeof openMusicLightbox === 'function') {
|
||||
openMusicLightbox(idx);
|
||||
}
|
||||
});
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="music-card-inner">
|
||||
<div class="music-image-wrapper">
|
||||
${track.image ? `<img src="${track.image}" alt="${track.title}" class="music-image" loading="lazy">` : ''}
|
||||
<div class="music-play-overlay"><span class="music-play-btn">▶</span></div>
|
||||
</div>
|
||||
<div class="music-info-header">
|
||||
<h4>${track.title}</h4>
|
||||
${track.artist ? `<p class="music-artist">${track.artist}</p>` : ''}
|
||||
${track.album ? `<p class="music-album">${track.album}</p>` : ''}
|
||||
</div>
|
||||
${genreTags.length > 0 ? `
|
||||
<div class="music-tags">
|
||||
${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')}
|
||||
</div>
|
||||
` : ''}
|
||||
${content ? `
|
||||
<button class="lyrics-toggle"><span>Show Info</span></button>
|
||||
<div class="lyrics" style="display: none;">${content.replace(/\n/g, '<br>')}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
if (typeof initMusicEventListeners === 'function') {
|
||||
initMusicEventListeners();
|
||||
}
|
||||
playNext();
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue