add playlist concept
This commit is contained in:
sakrecoer
parent
4df2e1fa37
commit
4f6779e968
3 changed files with 363 additions and 183 deletions
|
|
@ -121,25 +121,6 @@ body {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main-header::before {
|
||||
background:
|
||||
/* Darker overlay for dark mode */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.7) 0%,
|
||||
rgba(0, 0, 0, 0.4) 40%,
|
||||
rgba(0, 0, 0, 0.4) 60%,
|
||||
rgba(0, 0, 0, 0.7) 100%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
33deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
var(--accent-yellow) 50px,
|
||||
var(--accent-yellow) 51px
|
||||
);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Decorative '>' character */
|
||||
.main-header::after {
|
||||
|
|
@ -156,6 +137,59 @@ body {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* */
|
||||
/* */
|
||||
/* */
|
||||
|
||||
.playlist-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
/* Dark overlay for readability */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.5) 0%,
|
||||
rgba(0, 0, 0, 0.25) 40%,
|
||||
rgba(0, 0, 0, 0.25) 60%,
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
),
|
||||
/* Cyberpunk pattern */
|
||||
repeating-linear-gradient(
|
||||
33deg,
|
||||
transparent,
|
||||
transparent 50px,
|
||||
var(--accent-yellow) 50px,
|
||||
var(--accent-yellow) 51px
|
||||
);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Decorative '>' character */
|
||||
.playlist-header::after {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
z-index: 1;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 4rem;
|
||||
color: var(--accent-y);
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
|
||||
|
||||
#bannerino {
|
||||
filter: grayscale(50%);
|
||||
position:absolute;
|
||||
|
|
@ -2115,7 +2149,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-image {
|
||||
|
|
@ -2149,7 +2183,7 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
background: var(--accent-grey);
|
||||
color: var(--accent-black);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
|
|
@ -2308,7 +2342,7 @@ button {
|
|||
|
||||
.playlist-card:hover {
|
||||
transform: skewX(0deg) translate(-4px, -4px);
|
||||
box-shadow: 12px 12px 0 var(--accent-yellow);
|
||||
box-shadow: 12px 12px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.playlist-link {
|
||||
|
|
@ -2351,8 +2385,8 @@ button {
|
|||
|
||||
.playlist-track-count {
|
||||
display: inline-block;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
background: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -2372,7 +2406,7 @@ button {
|
|||
background: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.playlist-card:hover .playlist-hover-overlay {
|
||||
|
|
@ -2382,22 +2416,22 @@ button {
|
|||
.playlist-view-btn {
|
||||
padding: 0.8rem 2rem;
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
color: var(--bg-primary);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
border: 2px solid var(--accent-grey);
|
||||
transform: skewX(-33deg);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
.playlist-view-btn:hover {
|
||||
transform: skewX(-33deg) scale(1.1);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--accent-yellow);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
|
|
@ -2458,7 +2492,7 @@ button {
|
|||
|
||||
.playlist-meta span {
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-grey);
|
||||
color: var(--bg-primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -2484,7 +2518,7 @@ button {
|
|||
|
||||
.playlist-track-item:hover {
|
||||
transform: skewX(0deg) translate(-2px, -2px);
|
||||
box-shadow: 6px 6px 0 var(--accent-yellow);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
}
|
||||
|
||||
.track-number {
|
||||
|
|
@ -2553,7 +2587,7 @@ button {
|
|||
}
|
||||
|
||||
.track-player {
|
||||
width: 150px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--accent-grey);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -2582,27 +2616,26 @@ button {
|
|||
}
|
||||
|
||||
.playlist-play-all {
|
||||
background: var(--accent-yellow);
|
||||
color: var(--accent-black);
|
||||
border: 2px solid var(--accent-grey);
|
||||
padding: 1rem 3rem;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--accent-yellow) !important;
|
||||
border: 2px solid var(--accent-yellow);
|
||||
padding: .5rem 1.5rem;
|
||||
font-family: poppins,sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: .7rem;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform: skewX(-33deg);
|
||||
box-shadow: 6px 6px 0 var(--accent-grey);
|
||||
transition: all .3s ease;
|
||||
filter: drop-shadow(0 0 20px var(--accent-yellow));
|
||||
animation: glow 3s infinite alternate;
|
||||
}
|
||||
|
||||
.playlist-play-all:hover {
|
||||
transform: skewX(-33deg) scale(1.05);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-yellow);
|
||||
transform: scale(1.05);
|
||||
background: var(--accent-yellow);
|
||||
color: var(--bg-primary) !important;
|
||||
border-color: var(--accent-yellow);
|
||||
box-shadow: 8px 8px 0 var(--accent-yellow);
|
||||
}
|
||||
|
||||
/* Back link */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,76 @@
|
|||
{{ 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>
|
||||
|
||||
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<section class="section playlists-list">
|
||||
<h1>Playlists</h1>
|
||||
|
||||
<h2>Playlists</h2>
|
||||
<p class="section-description">Explore all my curated playlists from the Nostr network</p>
|
||||
|
||||
<div class="playlists-grid">
|
||||
|
|
@ -27,11 +97,11 @@
|
|||
</div>
|
||||
|
||||
<div class="playlist-hover-overlay">
|
||||
<span class="playlist-view-btn">▶ View Playlist</span>
|
||||
<span class="playlist-view-btn">▶ Listen</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,137 +1,214 @@
|
|||
{{ 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"></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>
|
||||
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{ 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 }}
|
||||
{{ $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>
|
||||
<style>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
#bannerino {
|
||||
background-image:url('{{ $image }}');
|
||||
}
|
||||
</style>
|
||||
|
||||
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);
|
||||
}
|
||||
<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>
|
||||
|
||||
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 }}
|
||||
<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 }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue