No tracks found for the selected artists.
'; return; } - const shuffled = shuffleArray(filteredTracks); + // Shuffle and get first 6 + const shuffled = filteredTracks.sort(() => 0.5 - Math.random()); const selected = shuffled.slice(0, 6); + + // Clear container container.innerHTML = ''; + // Render each track (same as before) selected.forEach(track => { + // Extract data from tags let title = '', url = '', image = '', artist = '', album = '', trackNumber = '', duration = '', released = '', language = '', tags = [], alt = '', content = ''; + // Parse tags if (track.tags) { track.tags.forEach(tag => { if (tag[0] === 'title') title = tag[1]; @@ -201,8 +261,10 @@ function renderMusicTracks(tracks, containerId) { else if (tag[0] === 'alt') alt = tag[1]; }); } + content = track.content || ''; + // Create music card HTML const card = document.createElement('div'); card.className = 'music-card'; @@ -233,10 +295,13 @@ function renderMusicTracks(tracks, containerId) { container.appendChild(card); }); + // Re-initialize event listeners for new buttons initMusicEventListeners(); } +// Initialize music event listeners function initMusicEventListeners() { + // Lyrics toggle document.querySelectorAll('.lyrics-toggle').forEach(button => { button.removeEventListener('click', handleLyricsToggle); button.addEventListener('click', handleLyricsToggle); @@ -256,20 +321,195 @@ function handleLyricsToggle() { } } -// ============================================ -// 4. PICTURES RENDERER -// ============================================ +// Refresh music (randomize) +function refreshMusic() { + if (window.allMusicData) { + renderMusicTracks(window.allMusicData, 'musicGrid'); + } +} + +// Call this when page loads +document.addEventListener('DOMContentLoaded', function() { + if (window.allMusicData && window.allMusicData.length > 0) { + renderMusicTracks(window.allMusicData, 'musicGrid'); + } +}); + +// ============ CUSTOM BLURHASH DECODER ============ +// Based on the official blurhash implementation, but compact + +const Blurhash = { + // Base83 character set + chars: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!#$%&()*+,;<=>?@[]^_`{|}~', + + // Decode base83 to integer + decode83: function(str) { + let value = 0; + for (let i = 0; i < str.length; i++) { + const c = str[i]; + const digit = this.chars.indexOf(c); + if (digit === -1) { + throw new Error('Invalid base83 character: ' + c); + } + value = value * 83 + digit; + } + return value; + }, + + // Decode blurhash to pixel data + decode: function(blurhash, width, height, punch = 1) { + // Parse metadata + const sizeFlag = this.decode83(blurhash[0]); + const numX = (sizeFlag % 9) + 1; + const numY = Math.floor(sizeFlag / 9) + 1; + + // Calculate maximum AC component value + const maxAC = this.decode83(blurhash[1]) + 1; + + // Decode DC component + const dcValue = this.decode83(blurhash.slice(2, 6)); + const dc = this.decodeDC(dcValue); + + // Decode AC components + const ac = []; + let acIndex = 6; + for (let y = 0; y < numY; y++) { + for (let x = 0; x < numX; x++) { + if (x === 0 && y === 0) continue; + const encoded = this.decode83(blurhash.slice(acIndex, acIndex + 2)); + acIndex += 2; + const acValue = this.decodeAC(encoded, maxAC * punch); + ac.push({ x, y, value: acValue }); + } + } + + // Render pixels + const pixels = new Uint8ClampedArray(width * height * 4); + const size = width * height; + + // Pre-calculate cos values for performance + const cosX = []; + const cosY = []; + for (let x = 0; x < width; x++) { + cosX[x] = Math.cos(Math.PI * x / width); + } + for (let y = 0; y < height; y++) { + cosY[y] = Math.cos(Math.PI * y / height); + } + + for (let i = 0; i < size; i++) { + const x = i % width; + const y = Math.floor(i / width); + let r = dc[0]; + let g = dc[1]; + let b = dc[2]; + + for (const acVal of ac) { + const basis = cosX[x] * cosY[y]; + const value = acVal.value; + r += value[0] * basis; + g += value[1] * basis; + b += value[2] * basis; + } + + const index = i * 4; + pixels[index] = this.clamp(r + 128); + pixels[index + 1] = this.clamp(g + 128); + pixels[index + 2] = this.clamp(b + 128); + pixels[index + 3] = 255; + } + + return pixels; + }, + + // Decode DC component + decodeDC: function(value) { + return [ + this.signPow((value >> 16) & 0x3ff, 2), + this.signPow((value >> 8) & 0xff, 2), + this.signPow(value & 0xff, 2) + ]; + }, + + // Decode AC component + decodeAC: function(value, maxVal) { + const quantR = Math.floor(value / (19 * 19)); + const quantG = Math.floor((value / 19) % 19); + const quantB = value % 19; + return [ + this.signPow((quantR - 9) / 9, 2) * maxVal, + this.signPow((quantG - 9) / 9, 2) * maxVal, + this.signPow((quantB - 9) / 9, 2) * maxVal + ]; + }, + + // Sign power function + signPow: function(val, exp) { + return Math.sign(val) * Math.pow(Math.abs(val), exp); + }, + + // Clamp value to 0-255 + clamp: function(value) { + return Math.min(255, Math.max(0, value)); + }, + + // Render blurhash to canvas + renderToCanvas: function(blurhash, canvas, punch = 1) { + if (!blurhash) return false; + + try { + const width = canvas.width; + const height = canvas.height; + const pixels = this.decode(blurhash, width, height, punch); + const ctx = canvas.getContext('2d'); + const imageData = ctx.createImageData(width, height); + imageData.data.set(pixels); + ctx.putImageData(imageData, 0, 0); + return true; + } catch (e) { + console.warn('Failed to decode blurhash:', e); + return false; + } + }, + + // Get blurhash as data URL + toDataURL: function(blurhash, width = 64, height = 64, punch = 1) { + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + const success = this.renderToCanvas(blurhash, canvas, punch); + return success ? canvas.toDataURL('image/png') : null; + } +}; + +// ============ RANDOMIZED GALLERIES ============ + +// Function to shuffle array (Fisher-Yates) +function shuffleArray(array) { + const shuffled = [...array]; + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; + } + return shuffled; +} // Render random pictures (6 max) + function renderRandomPictures(picturesData, containerId) { const container = document.getElementById(containerId); if (!container) return; + // Shuffle and get first 6 const shuffled = shuffleArray(picturesData); const selected = shuffled.slice(0, 6); + + // Clear container container.innerHTML = ''; + // Render each picture selected.forEach(picture => { + // Parse imeta tag to get image URL let imageUrl = ''; let alt = picture.content || ''; @@ -277,54 +517,254 @@ function renderRandomPictures(picturesData, containerId) { picture.tags.forEach(tag => { if (tag[0] === 'imeta') { const imetaStr = tag[1]; + // Extract URL const urlMatch = imetaStr.match(/url ([^\s]+)/); - if (urlMatch) imageUrl = urlMatch[1]; + if (urlMatch) { + imageUrl = urlMatch[1]; + } + // Extract alt const altMatch = imetaStr.match(/alt ([^\s]+)/); - if (altMatch) alt = altMatch[1]; + if (altMatch) { + alt = altMatch[1]; + } } }); } + // Create picture item const item = document.createElement('div'); item.className = 'photo-item'; item.dataset.image = imageUrl; item.dataset.alt = alt; - // FIX: Set the date in the dataset const date = new Date(picture.created_at * 1000); const dateStr = date.toLocaleDateString('en-US', { - year: 'numeric', month: 'short', day: 'numeric' + year: 'numeric', + month: 'short', + day: 'numeric' }); - item.dataset.date = dateStr; - item.dataset.pubkey = picture.pubkey || ''; item.innerHTML = ` - ${imageUrl ? `${alt}
+ +${alt}
- -