${title || 'Untitled'}
- ${artist ? `${artist}
` : ''} - ${album ? `${album}
` : ''} +
+ 
` : ''}
+
+
+
+ ${track.image ? `
` : ''}
+
+
+
+
- ${url ? `` : ''}
${genreTags.length > 0 ? `
`;
card.innerHTML = cardHTML;
@@ -283,15 +317,16 @@ function handleLyricsToggle() {
}
// ============================================
-// 4. PICTURES RENDERER (UPDATED)
+// 4. PICTURES RENDERER
// ============================================
function renderRandomPictures(picturesData, containerId, randomize = false) {
const container = document.getElementById(containerId);
if (!container) return;
- // Flatten all pictures from all events
+ // First, flatten all pictures from all events but keep track of which event they belong to
let allPictures = [];
+ let allEvents = [];
picturesData.forEach(event => {
const imetaTags = [];
@@ -302,6 +337,9 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
});
if (imetaTags.length > 0) {
+ let firstImage = null;
+ let eventImages = [];
+
imetaTags.forEach(imetaTag => {
let imageUrl = '';
let alt = event.content || '';
@@ -318,14 +356,28 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
});
if (imageUrl) {
- allPictures.push({
+ const pictureData = {
url: imageUrl,
alt: alt,
created_at: event.created_at,
- pubkey: event.pubkey
- });
+ pubkey: event.pubkey,
+ event_id: event.id
+ };
+ eventImages.push(pictureData);
+ allPictures.push(pictureData);
+ if (!firstImage) {
+ firstImage = pictureData;
+ }
}
});
+
+ if (firstImage) {
+ allEvents.push({
+ event_id: event.id,
+ created_at: event.created_at,
+ firstImage: firstImage
+ });
+ }
} else {
let imageUrl = '';
let alt = event.content || '';
@@ -341,40 +393,68 @@ function renderRandomPictures(picturesData, containerId, randomize = false) {
});
if (imageUrl) {
- allPictures.push({
+ const pictureData = {
url: imageUrl,
alt: alt,
created_at: event.created_at,
- pubkey: event.pubkey
+ pubkey: event.pubkey,
+ event_id: event.id
+ };
+ allPictures.push(pictureData);
+ allEvents.push({
+ event_id: event.id,
+ created_at: event.created_at,
+ firstImage: pictureData
});
}
}
});
- // Sort or shuffle
- let sortedPictures;
+ // Store ALL pictures in the global array for the lightbox
+ allPicturesArray = allPictures;
+
+ // Sort events by created_at (newest first)
+ const sortedEvents = [...allEvents].sort((a, b) => b.created_at - a.created_at);
+
+ // Select which events to display (6 max)
+ let displayEvents;
if (randomize) {
- sortedPictures = shuffleArray(allPictures);
+ const shuffled = shuffleArray([...sortedEvents]);
+ displayEvents = shuffled.slice(0, 6);
} else {
- sortedPictures = [...allPictures].sort((a, b) => b.created_at - a.created_at);
+ displayEvents = sortedEvents.slice(0, 6);
}
- // Store all pictures globally for the lightbox
- allPicturesArray = sortedPictures;
-
- // Show first 6, or all if less than 6
- const initialCount = Math.min(6, sortedPictures.length);
- const selected = sortedPictures.slice(0, initialCount);
-
container.innerHTML = '';
- selected.forEach(picture => {
- const item = createPictureElement(picture);
+ displayEvents.forEach((event, index) => {
+ const picture = event.firstImage;
+ if (!picture) return;
+
+ const item = document.createElement('div');
+ item.className = 'photo-item';
+ item.dataset.image = picture.url;
+ item.dataset.alt = picture.alt;
+ item.dataset.index = index;
+ item.dataset.eventId = event.event_id;
+
+ const date = new Date(picture.created_at * 1000);
+ const dateStr = date.toLocaleDateString('en-US', {
+ year: 'numeric', month: 'short', day: 'numeric'
+ });
+ item.dataset.date = dateStr;
+ item.dataset.pubkey = picture.pubkey || '';
+
+ item.innerHTML = `
+ ${picture.url ? `${track.title}
+ ${track.artist ? `${track.artist}
` : ''} + ${track.album ? `${track.album}
` : ''}📅 ${dateStr}
+ `;
+
container.appendChild(item);
});
- // Initialize lightbox
- initLightbox();
+ // Initialize photo lightbox
+ initPhotoLightbox();
}
// ============================================
@@ -461,7 +541,10 @@ function renderRandomVideos(videosData, containerId, randomize = false) {
// ============================================
function refreshMusic() {
- if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid', true);
+ if (window.allMusicData) {
+ window.musicPlaylist = [];
+ renderMusicTracks(window.allMusicData, 'musicGrid', true);
+ }
}
function refreshPictures() {
@@ -473,7 +556,236 @@ function refreshVideos() {
}
// ============================================
-// 7. DOM CONTENT LOADED
+// 7. MUSIC LIGHTBOX
+// ============================================
+
+let currentMusicIndex = 0;
+let musicPlayer = null;
+
+// Open music lightbox
+function openMusicLightbox(index) {
+ if (!window.musicPlaylist || window.musicPlaylist.length === 0) return;
+
+ // Stop any existing playback
+ if (musicPlayer) {
+ musicPlayer.pause();
+ musicPlayer.remove();
+ musicPlayer = null;
+ }
+
+ if (index < 0) index = window.musicPlaylist.length - 1;
+ if (index >= window.musicPlaylist.length) index = 0;
+ currentMusicIndex = index;
+
+ const track = window.musicPlaylist[currentMusicIndex];
+ if (!track) return;
+
+ // Get elements
+ const lightbox = document.getElementById('musicLightbox');
+ const bg = document.getElementById('musicLightboxBg');
+ const img = document.getElementById('musicLightboxImage');
+ const title = document.getElementById('musicLightboxTitle');
+ const artist = document.getElementById('musicLightboxArtist');
+ const album = document.getElementById('musicLightboxAlbum');
+ const durationDisplay = document.getElementById('musicLightboxDuration');
+ const currentTimeDisplay = document.getElementById('musicLightboxCurrentTime');
+ const progressFill = document.getElementById('musicLightboxProgressFill');
+ const playBtn2 = document.getElementById('musicLightboxPlayBtn2');
+ const playIcon2 = document.getElementById('musicPlayIcon2');
+
+ // Set album art
+ const artUrl = track.image || '/images/default-album.jpg';
+ img.src = artUrl;
+ bg.style.backgroundImage = `url(${artUrl})`;
+
+ // Set info
+ title.textContent = track.title || 'Untitled';
+ artist.textContent = track.artist || 'Unknown Artist';
+ album.textContent = track.album || '';
+
+ // Reset progress
+ progressFill.style.width = '0%';
+ currentTimeDisplay.textContent = '0:00';
+ durationDisplay.textContent = track.duration ? formatTime(track.duration) : '0:00';
+
+ // Set play buttons to play state
+ playIcon2.textContent = '▶';
+
+ // Create audio player
+ musicPlayer = new Audio(track.url);
+ musicPlayer.preload = 'metadata';
+
+ // When metadata loaded, update duration
+ musicPlayer.addEventListener('loadedmetadata', function() {
+ durationDisplay.textContent = formatTime(this.duration);
+ });
+
+ // Track ended - go to next
+ musicPlayer.addEventListener('ended', function() {
+ nextMusicTrack();
+ });
+
+ // Update progress
+ musicPlayer.addEventListener('timeupdate', function() {
+ const percent = (this.currentTime / this.duration) * 100;
+ progressFill.style.width = `${percent}%`;
+ currentTimeDisplay.textContent = formatTime(this.currentTime);
+ });
+
+ // Show lightbox
+ lightbox.classList.add('active');
+ document.body.style.overflow = 'hidden';
+
+ // Auto-play
+ playMusic();
+}
+
+// Play music
+function playMusic() {
+ if (!musicPlayer) return;
+
+ musicPlayer.play()
+ .then(() => {
+ document.getElementById('musicPlayIcon2').textContent = '⏸';
+ })
+ .catch(e => {
+ console.log('Playback prevented:', e);
+ });
+}
+
+// Pause music
+function pauseMusic() {
+ if (!musicPlayer) return;
+ musicPlayer.pause();
+ document.getElementById('musicPlayIcon2').textContent = '▶';
+}
+
+// Toggle play/pause
+function toggleMusic() {
+ if (!musicPlayer) return;
+ if (musicPlayer.paused) {
+ playMusic();
+ } else {
+ pauseMusic();
+ }
+}
+
+// Next track
+function nextMusicTrack() {
+ openMusicLightbox(currentMusicIndex + 1);
+}
+
+// Previous track
+function prevMusicTrack() {
+ openMusicLightbox(currentMusicIndex - 1);
+}
+
+// Close music lightbox
+function closeMusicLightbox() {
+ const lightbox = document.getElementById('musicLightbox');
+ if (!lightbox) return;
+
+ if (musicPlayer) {
+ musicPlayer.pause();
+ musicPlayer.remove();
+ musicPlayer = null;
+ }
+
+ lightbox.classList.remove('active');
+ document.body.style.overflow = '';
+}
+
+// Format time (seconds to MM:SS)
+function formatTime(seconds) {
+ if (!seconds || isNaN(seconds)) return '0:00';
+ const mins = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+// Initialize music lightbox event listeners
+function initMusicLightbox() {
+ const lightbox = document.getElementById('musicLightbox');
+ const closeBtn = document.getElementById('musicLightboxClose');
+ const playBtn2 = document.getElementById('musicLightboxPlayBtn2');
+ const prevBtn = document.getElementById('musicLightboxPrev');
+ const nextBtn = document.getElementById('musicLightboxNext');
+ const progressBar = document.getElementById('musicLightboxProgressBar');
+
+ if (!lightbox) return;
+
+ // Remove old listeners by cloning
+ const newClose = closeBtn.cloneNode(true);
+ const newPlayBtn2 = playBtn2.cloneNode(true);
+ const newPrev = prevBtn.cloneNode(true);
+ const newNext = nextBtn.cloneNode(true);
+ const newProgressBar = progressBar.cloneNode(true);
+
+ closeBtn.parentNode.replaceChild(newClose, closeBtn);
+ playBtn2.parentNode.replaceChild(newPlayBtn2, playBtn2);
+ prevBtn.parentNode.replaceChild(newPrev, prevBtn);
+ nextBtn.parentNode.replaceChild(newNext, nextBtn);
+ progressBar.parentNode.replaceChild(newProgressBar, progressBar);
+
+ // Close button
+ newClose.addEventListener('click', closeMusicLightbox);
+
+ // Click outside to close (on the background)
+ lightbox.addEventListener('click', function(e) {
+ if (e.target === lightbox) {
+ closeMusicLightbox();
+ }
+ });
+
+ // Play button
+ newPlayBtn2.addEventListener('click', function(e) {
+ e.stopPropagation();
+ toggleMusic();
+ });
+
+ // Previous/Next
+ newPrev.addEventListener('click', function(e) {
+ e.stopPropagation();
+ prevMusicTrack();
+ });
+
+ newNext.addEventListener('click', function(e) {
+ e.stopPropagation();
+ nextMusicTrack();
+ });
+
+ // Progress bar click to seek
+ newProgressBar.addEventListener('click', function(e) {
+ if (!musicPlayer) return;
+ const rect = this.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const percent = x / rect.width;
+ musicPlayer.currentTime = percent * musicPlayer.duration;
+ });
+
+ // Keyboard controls
+ document.addEventListener('keydown', function(e) {
+ const lightbox = document.getElementById('musicLightbox');
+ if (!lightbox || !lightbox.classList.contains('active')) return;
+
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ closeMusicLightbox();
+ } else if (e.key === ' ' || e.key === 'Space') {
+ e.preventDefault();
+ toggleMusic();
+ } else if (e.key === 'ArrowLeft') {
+ e.preventDefault();
+ prevMusicTrack();
+ } else if (e.key === 'ArrowRight') {
+ e.preventDefault();
+ nextMusicTrack();
+ }
+ });
+}
+
+// ============================================
+// 8. DOM CONTENT LOADED
// ============================================
document.addEventListener('DOMContentLoaded', function() {
@@ -520,7 +832,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
- // Smooth scrolling for navigation links
+ // Smooth scrolling for navigation links (both main nav and sticky nav)
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
@@ -545,14 +857,15 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize Pictures (chronological, not randomized)
if (window.allPicturesData && window.allPicturesData.length > 0) {
renderRandomPictures(window.allPicturesData, 'photoGrid', false);
- } else {
- initLightbox();
}
// Initialize Videos (chronological, not randomized)
if (window.allVideosData && window.allVideosData.length > 0) {
renderRandomVideos(window.allVideosData, 'videoGrid', false);
}
+
+ // Initialize music lightbox
+ initMusicLightbox();
});
console.log('✅ Site initialized successfully!');
diff --git a/themes/one-pager/layouts/index.html b/themes/one-pager/layouts/index.html
index 6d27d91..fda64ef 100644
--- a/themes/one-pager/layouts/index.html
+++ b/themes/one-pager/layouts/index.html
@@ -51,6 +51,43 @@
1 / 1
+
+
+
+
+
+
+
+ ![Album art]()
+
+
+
+
+
+
+ Title
+Artist
+Album
+ +
+ 0:00
+
+ 0:00
+
+
+
+
+
+
+
+