setto-nostr-web/themes/one-pager/layouts/playlists/single.html

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