From 88fefad2fde2b1716711990aaaf7074da139ab65 Mon Sep 17 00:00:00 2001 From: sakrecoer Date: Fri, 7 Aug 2026 15:01:03 +0200 Subject: [PATCH] share button --- themes/one-pager/assets/css/style.css | 80 +++++++++++++++++++ themes/one-pager/assets/js/scripts.js | 74 +++++++++++++++++ themes/one-pager/layouts/index.html | 10 ++- themes/one-pager/layouts/partials/footer.html | 2 +- 4 files changed, 164 insertions(+), 2 deletions(-) diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css index e8745a5..fd5ae05 100644 --- a/themes/one-pager/assets/css/style.css +++ b/themes/one-pager/assets/css/style.css @@ -813,6 +813,86 @@ button { display: block; margin: 0.2rem 0; } + +/* Share button row - between controls and lyrics */ +.music-lightbox-share-row { + display: flex; + justify-content: center; + align-items: center; + margin: 2rem 0; + width: 100%; +} + +/* Clean share button - smaller, no circle mask */ +.music-lightbox-share-btn { + background: none; + border: 1.5px solid var(--accent-grey); + color: white; + font-size: 0.8rem; + cursor: pointer; + transition: all 0.3s ease; + padding: 0.25rem 0.8rem; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.6; + gap: 0.3rem; +} + +.music-lightbox-share-btn:hover { + opacity: 1; + transform: scale(1.05); + border-color: var(--accent-yellow); + background: rgba(255, 215, 0, 0.1); +} + +.music-lightbox-share-btn .share-icon { + font-size: 0.9rem; + line-height: 1; +} + +.music-lightbox-share-btn .share-label { + font-size: 0.5rem; + letter-spacing: 1.5px; + opacity: 0.8; + text-transform: uppercase; +} + +/* Pop-out feedback for "✓ Copied!" */ +.share-feedback { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%) translateY(20px); + background: rgba(0, 0, 0, 0.9); + color: var(--accent-yellow); + padding: 0.6rem 1.5rem; + border-radius: 8px; + font-family: 'Poppins', sans-serif; + font-weight: 600; + font-size: 0.8rem; + letter-spacing: 2px; + border: 1px solid var(--accent-yellow); + box-shadow: 0 4px 30px rgba(255, 215, 0, 0.2); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + z-index: 99999; + opacity: 0; + transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + pointer-events: none; +} + +.share-feedback.visible { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +.share-feedback .checkmark { + color: #4caf50; + margin-right: 0.5rem; +} + /* Photo Grid - KEEP SKEW ON CARDS */ .photo-grid { display: grid; diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js index 0f2002a..3e6ecd1 100644 --- a/themes/one-pager/assets/js/scripts.js +++ b/themes/one-pager/assets/js/scripts.js @@ -180,6 +180,9 @@ function renderMusicTracks(tracks, containerId, randomize = false) { window.musicPlaylist = []; filteredTracks.forEach(track => { let title = '', url = '', image = '', artist = '', album = '', duration = ''; + // ADD THIS: Store the track ID + const trackId = track.id || ''; + if (track.tags) { track.tags.forEach(tag => { const key = tag[0]; @@ -194,6 +197,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) { } if (url) { window.musicPlaylist.push({ + id: trackId, // ADD THIS LINE title: title || 'Untitled', url: url, image: image || '', @@ -564,6 +568,8 @@ let musicPlayer = null; // Open music lightbox function openMusicLightbox(index) { + + if (!window.musicPlaylist || window.musicPlaylist.length === 0) return; // Stop any existing playback @@ -595,6 +601,74 @@ function openMusicLightbox(index) { // Get the lyrics element const lyricsDisplay = document.getElementById('musicLightboxLyrics'); + // Share button - in its own row + const shareBtn = document.getElementById('musicShareBtn'); + + // Create feedback element if it doesn't exist + let feedbackEl = document.getElementById('shareFeedbackPopout'); + if (!feedbackEl) { + feedbackEl = document.createElement('div'); + feedbackEl.id = 'shareFeedbackPopout'; + feedbackEl.className = 'share-feedback'; + feedbackEl.innerHTML = '✓ Copied!'; + document.body.appendChild(feedbackEl); + } + + if (shareBtn) { + shareBtn.onclick = function() { + if (!track.id) { + feedbackEl.textContent = '⚠️ No ID'; + feedbackEl.classList.add('visible'); + setTimeout(() => { + feedbackEl.classList.remove('visible'); + }, 2000); + return; + } + + const shareUrl = `https://nostr.basspistol.org/notes/${track.id}`; + + if (navigator.share) { + navigator.share({ + title: track.title || 'Music Track', + text: `Check out "${track.title}" by ${track.artist || 'Unknown Artist'}`, + url: shareUrl + }).catch(err => { + console.log('Share cancelled or failed:', err); + }); + } else { + navigator.clipboard.writeText(shareUrl).then(() => { + feedbackEl.innerHTML = '✓ Copied!'; + feedbackEl.classList.add('visible'); + setTimeout(() => { + feedbackEl.classList.remove('visible'); + }, 2000); + }).catch(err => { + console.error('Could not copy text: ', err); + const textArea = document.createElement('textarea'); + textArea.value = shareUrl; + document.body.appendChild(textArea); + textArea.select(); + try { + document.execCommand('copy'); + feedbackEl.innerHTML = '✓ Copied!'; + feedbackEl.classList.add('visible'); + setTimeout(() => { + feedbackEl.classList.remove('visible'); + }, 2000); + } catch (err) { + console.error('Fallback copy failed:', err); + feedbackEl.textContent = '⚠️ Copy failed'; + feedbackEl.classList.add('visible'); + setTimeout(() => { + feedbackEl.classList.remove('visible'); + }, 2000); + } + document.body.removeChild(textArea); + }); + } + }; + } + // Set album art const artUrl = track.image || '/images/default-album.jpg'; img.src = artUrl; diff --git a/themes/one-pager/layouts/index.html b/themes/one-pager/layouts/index.html index 5db3a5e..8ec382c 100644 --- a/themes/one-pager/layouts/index.html +++ b/themes/one-pager/layouts/index.html @@ -82,7 +82,15 @@ - + +
+ +
+ + diff --git a/themes/one-pager/layouts/partials/footer.html b/themes/one-pager/layouts/partials/footer.html index bb23496..3b2f2d2 100644 --- a/themes/one-pager/layouts/partials/footer.html +++ b/themes/one-pager/layouts/partials/footer.html @@ -23,7 +23,7 @@
🕒 - Updated + Last Built {{ now.Format "Jan 2, 2006 · 15:04" }}