setto/setto-nostr-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

render playlists pages

Browse source
This commit is contained in:
sakrecoer 2026-08-16 15:15:57 +02:00
parent 1c35e99ed2
commit f0e8bafc4c
4 changed files with 242 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

37
themes/one-pager/layouts/playlists/list.html Normal file
View file

@ -0,0 +1,37 @@
{{ define "main" }}
<section class="section playlists-list">
<h1>Playlists</h1>
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
<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 }}
</div>
<div class="playlist-hover-overlay">
<span class="playlist-view-btn">▶ View Playlist</span>
</div>
</a>
</div>
{{ end }}
</div>
</section>
{{ end }}

137
themes/one-pager/layouts/playlists/single.html Normal file
View file

@ -0,0 +1,137 @@
{{ 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 }}
<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 }}