make playlist more better
This commit is contained in:
sakrecoer
parent
67f08a3670
commit
fdb107f099
9 changed files with 672 additions and 851 deletions
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue