make playlist more better

This commit is contained in:
sakrecoer 2026-09-16 15:54:32 +02:00
parent 67f08a3670
commit fdb107f099
9 changed files with 672 additions and 851 deletions

View file

@ -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

View file

@ -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" . }}
{{ block "header" . }}{{ end }}
<main>
{{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }}
{{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
<script src="{{ $js.RelPermalink }}"></script>
{{ $js := resources.Get "js/scripts.js" | resources.Minify | fingerprint }}
<script src="{{ $js.RelPermalink }}"></script>
</body>
</html>

View file

@ -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 }}

View 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>

View 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>

View 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>

View file

@ -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">
<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 }}
<h2>Playlists</h2>
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
{{ 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 }}
{{ end }}

View file

@ -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 }}
<header class="playlist-header" style="min-height: unset; max-height: 25vh;">
{{ 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>
<div class="header-profile"></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);
});
} else {
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);
});
}
});
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);
}
playNext();
});
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();
}
}
</script>
{{ end }}