481 lines
15 KiB
JavaScript
481 lines
15 KiB
JavaScript
// ============================================
|
|
// 1. UTILITY FUNCTIONS
|
|
// ============================================
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Artist filter list
|
|
const allowedArtists = [
|
|
'徒 Setto セット',
|
|
'Settoshi Tonami',
|
|
'Sethy Bowoy'
|
|
];
|
|
|
|
// Function to check if a track is by an allowed artist
|
|
function isAllowedArtist(artist) {
|
|
if (!artist) return false;
|
|
const normalizedArtist = artist.trim().toLowerCase();
|
|
return allowedArtists.some(allowed => {
|
|
const normalizedAllowed = allowed.trim().toLowerCase();
|
|
return normalizedArtist.includes(normalizedAllowed) ||
|
|
normalizedAllowed.includes(normalizedArtist);
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// 2. CUSTOM LIGHTBOX
|
|
// ============================================
|
|
|
|
let currentPhotos = [];
|
|
let currentIndex = 0;
|
|
|
|
// Build photo array from DOM
|
|
function buildPhotoArray() {
|
|
const photoItems = document.querySelectorAll('.photo-item');
|
|
currentPhotos = [];
|
|
photoItems.forEach(item => {
|
|
const image = item.querySelector('img');
|
|
// FIX: Use dataset values directly
|
|
const date = item.dataset.date || '';
|
|
const pubkey = item.dataset.pubkey || '';
|
|
const alt = item.dataset.alt || '';
|
|
if (image) {
|
|
currentPhotos.push({
|
|
url: image.src,
|
|
alt: alt || image.alt || '',
|
|
date: date,
|
|
pubkey: pubkey
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Open lightbox
|
|
function openLightbox(index) {
|
|
const lightbox = document.getElementById('customLightbox');
|
|
const lightboxImage = document.getElementById('lightboxImage');
|
|
const lightboxCaption = document.getElementById('lightboxCaption');
|
|
const lightboxMeta = document.getElementById('lightboxMeta');
|
|
const lightboxCounter = document.getElementById('lightboxCounter');
|
|
|
|
if (!lightbox || !lightboxImage || currentPhotos.length === 0) return;
|
|
|
|
if (index < 0) index = currentPhotos.length - 1;
|
|
if (index >= currentPhotos.length) index = 0;
|
|
currentIndex = index;
|
|
|
|
const photo = currentPhotos[currentIndex];
|
|
lightboxImage.src = photo.url;
|
|
lightboxImage.alt = photo.alt;
|
|
lightboxCaption.textContent = photo.alt;
|
|
|
|
// FIX: Show date and pubkey in the meta
|
|
let metaText = '';
|
|
if (photo.date) metaText += `📅 ${photo.date}`;
|
|
|
|
lightboxMeta.textContent = metaText || '📅 No date available';
|
|
|
|
lightboxCounter.textContent = `${currentIndex + 1} / ${currentPhotos.length}`;
|
|
|
|
lightbox.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// Close lightbox
|
|
function closeLightbox() {
|
|
const lightbox = document.getElementById('customLightbox');
|
|
if (!lightbox) return;
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Navigate
|
|
function prevPhoto() { openLightbox(currentIndex - 1); }
|
|
function nextPhoto() { openLightbox(currentIndex + 1); }
|
|
|
|
// Initialize lightbox event listeners
|
|
function initLightbox() {
|
|
const lightbox = document.getElementById('customLightbox');
|
|
const lightboxClose = document.getElementById('lightboxClose');
|
|
const lightboxPrev = document.getElementById('lightboxPrev');
|
|
const lightboxNext = document.getElementById('lightboxNext');
|
|
|
|
if (!lightbox) return;
|
|
|
|
buildPhotoArray();
|
|
|
|
// Photo click listeners
|
|
document.querySelectorAll('.photo-item img').forEach((img, index) => {
|
|
img.removeEventListener('click', img._lightboxClick);
|
|
img._lightboxClick = function(e) {
|
|
e.preventDefault();
|
|
openLightbox(index);
|
|
};
|
|
img.addEventListener('click', img._lightboxClick);
|
|
});
|
|
|
|
// Control listeners
|
|
lightboxClose.removeEventListener('click', closeLightbox);
|
|
lightboxClose.addEventListener('click', closeLightbox);
|
|
|
|
lightboxPrev.removeEventListener('click', prevPhoto);
|
|
lightboxPrev.addEventListener('click', prevPhoto);
|
|
|
|
lightboxNext.removeEventListener('click', nextPhoto);
|
|
lightboxNext.addEventListener('click', nextPhoto);
|
|
|
|
// Keyboard controls
|
|
document.removeEventListener('keydown', handleLightboxKeydown);
|
|
document.addEventListener('keydown', handleLightboxKeydown);
|
|
|
|
// Click outside to close
|
|
lightbox.removeEventListener('click', handleLightboxClick);
|
|
lightbox.addEventListener('click', handleLightboxClick);
|
|
}
|
|
|
|
function handleLightboxKeydown(e) {
|
|
const lightbox = document.getElementById('customLightbox');
|
|
if (!lightbox || !lightbox.classList.contains('active')) return;
|
|
if (e.key === 'Escape') closeLightbox();
|
|
else if (e.key === 'ArrowLeft') prevPhoto();
|
|
else if (e.key === 'ArrowRight') nextPhoto();
|
|
}
|
|
|
|
function handleLightboxClick(e) {
|
|
const lightbox = document.getElementById('customLightbox');
|
|
if (e.target === lightbox) closeLightbox();
|
|
}
|
|
|
|
// ============================================
|
|
// 3. MUSIC RENDERER
|
|
// ============================================
|
|
|
|
function renderMusicTracks(tracks, containerId) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
const filteredTracks = tracks.filter(track => {
|
|
let artist = '';
|
|
if (track.tags) {
|
|
track.tags.forEach(tag => {
|
|
if (tag[0] === 'artist') artist = tag[1];
|
|
});
|
|
}
|
|
return isAllowedArtist(artist);
|
|
});
|
|
|
|
if (filteredTracks.length === 0) {
|
|
container.innerHTML = '<p style="text-align:center;padding:2rem;color:var(--text-secondary);font-family:\'Poppins\',sans-serif;">No tracks found for the selected artists.</p>';
|
|
return;
|
|
}
|
|
|
|
const shuffled = shuffleArray(filteredTracks);
|
|
const selected = shuffled.slice(0, 6);
|
|
container.innerHTML = '';
|
|
|
|
selected.forEach(track => {
|
|
let title = '', url = '', image = '', artist = '', album = '',
|
|
trackNumber = '', duration = '', released = '', language = '',
|
|
tags = [], alt = '', content = '';
|
|
|
|
if (track.tags) {
|
|
track.tags.forEach(tag => {
|
|
if (tag[0] === 'title') title = tag[1];
|
|
else if (tag[0] === 'url') url = tag[1];
|
|
else if (tag[0] === 'image') image = tag[1];
|
|
else if (tag[0] === 'artist') artist = tag[1];
|
|
else if (tag[0] === 'album') album = tag[1];
|
|
else if (tag[0] === 'track_number') trackNumber = tag[1];
|
|
else if (tag[0] === 'duration') duration = tag[1];
|
|
else if (tag[0] === 'released') released = tag[1];
|
|
else if (tag[0] === 'language') language = tag[1];
|
|
else if (tag[0] === 't') tags.push(tag[1]);
|
|
else if (tag[0] === 'alt') alt = tag[1];
|
|
});
|
|
}
|
|
content = track.content || '';
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'music-card';
|
|
|
|
let cardHTML = `
|
|
${image ? `<img src="${image}" alt="${title}" class="music-image" loading="lazy">` : ''}
|
|
<div class="music-info-header">
|
|
<h4>${title || 'Untitled'}</h4>
|
|
${artist ? `<p class="music-artist">${artist}</p>` : ''}
|
|
${album ? `<p class="music-album">${album}</p>` : ''}
|
|
</div>
|
|
${url ? `<audio controls preload="none"><source src="${url}" type="audio/mpeg">Your browser does not support the audio element.</audio>` : ''}
|
|
<div class="music-details">
|
|
${trackNumber ? `<span class="track-number">Track ${trackNumber}</span>` : ''}
|
|
${duration ? `<span class="duration">${duration}s</span>` : ''}
|
|
${released ? `<span class="released">${released}</span>` : ''}
|
|
${language ? `<span class="language">${language}</span>` : ''}
|
|
</div>
|
|
<div class="music-tags">
|
|
${tags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')}
|
|
</div>
|
|
${content ? `
|
|
<button class="lyrics-toggle"><span>Show Info</span></button>
|
|
<div class="lyrics" style="display: none;">${content.replace(/\n/g, '<br>')}</div>
|
|
` : ''}
|
|
`;
|
|
|
|
card.innerHTML = cardHTML;
|
|
container.appendChild(card);
|
|
});
|
|
|
|
initMusicEventListeners();
|
|
}
|
|
|
|
function initMusicEventListeners() {
|
|
document.querySelectorAll('.lyrics-toggle').forEach(button => {
|
|
button.removeEventListener('click', handleLyricsToggle);
|
|
button.addEventListener('click', handleLyricsToggle);
|
|
});
|
|
}
|
|
|
|
function handleLyricsToggle() {
|
|
const lyrics = this.nextElementSibling;
|
|
if (lyrics && lyrics.classList.contains('lyrics')) {
|
|
if (lyrics.style.display === 'none') {
|
|
lyrics.style.display = 'block';
|
|
this.innerHTML = '<span>Hide Info</span>';
|
|
} else {
|
|
lyrics.style.display = 'none';
|
|
this.innerHTML = '<span>Show Info</span>';
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// 4. PICTURES RENDERER
|
|
// ============================================
|
|
|
|
// Render random pictures (6 max)
|
|
function renderRandomPictures(picturesData, containerId) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
const shuffled = shuffleArray(picturesData);
|
|
const selected = shuffled.slice(0, 6);
|
|
container.innerHTML = '';
|
|
|
|
selected.forEach(picture => {
|
|
let imageUrl = '';
|
|
let alt = picture.content || '';
|
|
|
|
if (picture.tags) {
|
|
picture.tags.forEach(tag => {
|
|
if (tag[0] === 'imeta') {
|
|
const imetaStr = tag[1];
|
|
const urlMatch = imetaStr.match(/url ([^\s]+)/);
|
|
if (urlMatch) imageUrl = urlMatch[1];
|
|
const altMatch = imetaStr.match(/alt ([^\s]+)/);
|
|
if (altMatch) alt = altMatch[1];
|
|
}
|
|
});
|
|
}
|
|
|
|
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'
|
|
});
|
|
item.dataset.date = dateStr;
|
|
item.dataset.pubkey = picture.pubkey || '';
|
|
|
|
item.innerHTML = `
|
|
${imageUrl ? `<img src="${imageUrl}" alt="${alt}" loading="lazy">` : ''}
|
|
<div class="photo-date"><span>📅 ${dateStr}</span></div>
|
|
`;
|
|
|
|
container.appendChild(item);
|
|
});
|
|
|
|
initLightbox();
|
|
}
|
|
|
|
// ============================================
|
|
// 5. VIDEOS RENDERER
|
|
// ============================================
|
|
|
|
function renderRandomVideos(videosData, containerId) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
const shuffled = shuffleArray(videosData);
|
|
const selected = shuffled.slice(0, 2);
|
|
container.innerHTML = '';
|
|
|
|
const posterImage = '/images/videoposter.png';
|
|
|
|
selected.forEach(video => {
|
|
let videoUrl = '', mimeType = 'video/mp4', alt = video.content || '', dim = '';
|
|
let isVertical = false;
|
|
|
|
if (video.tags) {
|
|
video.tags.forEach(tag => {
|
|
if (tag[0] === 'imeta') {
|
|
const imetaStr = tag[1];
|
|
const urlMatch = imetaStr.match(/url ([^\s]+)/);
|
|
if (urlMatch) videoUrl = urlMatch[1];
|
|
const mimeMatch = imetaStr.match(/m ([^\s]+)/);
|
|
if (mimeMatch) mimeType = mimeMatch[1];
|
|
const altMatch = imetaStr.match(/alt ([^\s]+)/);
|
|
if (altMatch) alt = altMatch[1];
|
|
const dimMatch = imetaStr.match(/dim ([^\s]+)/);
|
|
if (dimMatch) {
|
|
dim = dimMatch[1];
|
|
const [width, height] = dim.split('x').map(Number);
|
|
if (height > width) isVertical = true;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const date = new Date(video.created_at * 1000);
|
|
const dateStr = date.toLocaleDateString('en-US', {
|
|
year: 'numeric', month: 'long', day: 'numeric'
|
|
});
|
|
|
|
const wrapperStyle = isVertical
|
|
? 'style="position:relative;padding-bottom:177.78%;height:0;overflow:hidden;background:var(--accent-black);"'
|
|
: '';
|
|
const videoStyle = isVertical
|
|
? 'style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;"'
|
|
: 'style="width:100%;"';
|
|
|
|
const html = `
|
|
<div class="video-item">
|
|
${videoUrl ? `
|
|
<div class="video-wrapper" ${wrapperStyle}>
|
|
<video controls preload="none" poster="${posterImage}" ${videoStyle}>
|
|
<source src="${videoUrl}" type="${mimeType}">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
` : ''}
|
|
<div class="video-info">
|
|
<p class="video-caption">${alt}</p>
|
|
<div class="video-meta">
|
|
<span class="video-date">📅 ${dateStr}</span>
|
|
${dim ? `<span class="video-dim">📐 ${dim}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', html);
|
|
});
|
|
}
|
|
|
|
// ============================================
|
|
// 6. REFRESH FUNCTIONS
|
|
// ============================================
|
|
|
|
function refreshMusic() {
|
|
if (window.allMusicData) renderMusicTracks(window.allMusicData, 'musicGrid');
|
|
}
|
|
|
|
function refreshPictures() {
|
|
if (window.allPicturesData) renderRandomPictures(window.allPicturesData, 'photoGrid');
|
|
}
|
|
|
|
function refreshVideos() {
|
|
if (window.allVideosData) renderRandomVideos(window.allVideosData, 'videoGrid');
|
|
}
|
|
|
|
// ============================================
|
|
// 7. DOM CONTENT LOADED
|
|
// ============================================
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Sticky Navigation
|
|
const stickyNav = document.getElementById('stickyNav');
|
|
const mainHeader = document.querySelector('.main-header');
|
|
let lastScrollY = window.scrollY;
|
|
let ticking = false;
|
|
|
|
function updateStickyNav() {
|
|
const scrollY = window.scrollY;
|
|
const headerHeight = mainHeader ? mainHeader.offsetHeight : 400;
|
|
if (scrollY > headerHeight - 100) {
|
|
stickyNav.classList.add('visible');
|
|
} else {
|
|
stickyNav.classList.remove('visible');
|
|
}
|
|
lastScrollY = scrollY;
|
|
}
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(function() {
|
|
updateStickyNav();
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
|
|
setTimeout(updateStickyNav, 100);
|
|
|
|
// Read More toggle for blog posts
|
|
document.querySelectorAll('.read-more-toggle').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const content = this.nextElementSibling;
|
|
if (content.style.display === 'none') {
|
|
content.style.display = 'block';
|
|
this.innerHTML = '<span>Read Less</span>';
|
|
} else {
|
|
content.style.display = 'none';
|
|
this.innerHTML = '<span>Read More</span>';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Smooth scrolling for navigation links
|
|
document.querySelectorAll('nav a').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
const navHeight = stickyNav.offsetHeight;
|
|
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
|
|
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize Music
|
|
if (window.allMusicData && window.allMusicData.length > 0) {
|
|
renderMusicTracks(window.allMusicData, 'musicGrid');
|
|
}
|
|
|
|
// Initialize Pictures
|
|
if (window.allPicturesData && window.allPicturesData.length > 0) {
|
|
renderRandomPictures(window.allPicturesData, 'photoGrid');
|
|
} else {
|
|
initLightbox();
|
|
}
|
|
|
|
// Initialize Videos
|
|
if (window.allVideosData && window.allVideosData.length > 0) {
|
|
renderRandomVideos(window.allVideosData, 'videoGrid');
|
|
}
|
|
});
|
|
|
|
console.log('✅ Site initialized successfully!');
|