diff options
| author | Paul Buetow <paul@buetow.org> | 2026-05-17 15:25:52 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-05-17 15:25:52 +0300 |
| commit | 914bd7cd6aa14e839332a98d91c30b19865b0cf2 (patch) | |
| tree | 02b11537237a204048589e14ed24938b805e42f7 /web/js/lightbox.js | |
| parent | 3b24f0e1be832584d6550e8cc3e5d24329f66f90 (diff) | |
Restructure repo: move Go server into player-server/
Diffstat (limited to 'web/js/lightbox.js')
| -rw-r--r-- | web/js/lightbox.js | 177 |
1 files changed, 0 insertions, 177 deletions
diff --git a/web/js/lightbox.js b/web/js/lightbox.js deleted file mode 100644 index b8cda54..0000000 --- a/web/js/lightbox.js +++ /dev/null @@ -1,177 +0,0 @@ -let currentMediaList = []; -let currentIndex = -1; -let zoomScale = 1; -let panX = 0; -let panY = 0; -let isPanning = false; -let panStart = { x: 0, y: 0 }; -let slideshowTimer = null; -let slideshowPausedUntil = 0; -let onNavigateCallback = null; - -export function initLightbox({ onNavigate }) { - onNavigateCallback = onNavigate; - - document.getElementById('lb-close')?.addEventListener('click', close); - document.getElementById('lb-prev')?.addEventListener('click', prev); - document.getElementById('lb-next')?.addEventListener('click', next); - document.getElementById('lb-zoom-in')?.addEventListener('click', zoomIn); - document.getElementById('lb-zoom-out')?.addEventListener('click', zoomOut); - document.getElementById('lb-slideshow')?.addEventListener('click', toggleSlideshow); - - // Close on backdrop click (clicking outside the image/toolbar) - document.getElementById('image-lightbox')?.addEventListener('click', (e) => { - if (e.target === e.currentTarget) close(); - }); - - const img = document.getElementById('lightbox-image'); - if (img) { - img.addEventListener('mousedown', (e) => { - if (zoomScale > 1) { - isPanning = true; - panStart = { x: e.clientX - panX, y: e.clientY - panY }; - img.style.cursor = 'grabbing'; - e.preventDefault(); - } - }); - img.addEventListener('wheel', (e) => { - e.preventDefault(); - if (e.deltaY < 0) zoomIn(); - else zoomOut(); - }, { passive: false }); - } - window.addEventListener('mousemove', (e) => { - if (!isPanning) return; - panX = e.clientX - panStart.x; - panY = e.clientY - panStart.y; - applyTransform(); - }); - window.addEventListener('mouseup', () => { - if (isPanning) { - isPanning = false; - const img = document.getElementById('lightbox-image'); - if (img) img.style.cursor = zoomScale > 1 ? 'grab' : 'zoom-in'; - } - }); -} - -export function open(mediaArray, startMediaId) { - currentMediaList = mediaArray.filter((m) => m.type === 'image'); - currentIndex = currentMediaList.findIndex((m) => m.id === startMediaId); - if (currentIndex === -1) currentIndex = 0; - render(); - document.getElementById('image-lightbox')?.classList.add('open'); -} - -export function close() { - stopSlideshow(); - document.getElementById('image-lightbox')?.classList.remove('open'); - resetZoom(); - currentMediaList = []; - currentIndex = -1; -} - -export function isOpen() { - return document.getElementById('image-lightbox')?.classList.contains('open'); -} - -export function next() { - if (!currentMediaList.length) return; - currentIndex = (currentIndex + 1) % currentMediaList.length; - render(); - pauseSlideshow(); -} - -export function prev() { - if (!currentMediaList.length) return; - currentIndex = (currentIndex - 1 + currentMediaList.length) % currentMediaList.length; - render(); - pauseSlideshow(); -} - -export function zoomIn() { - setZoom(zoomScale * 1.25); - pauseSlideshow(); -} - -export function zoomOut() { - setZoom(zoomScale / 1.25); - pauseSlideshow(); -} - -export function toggleSlideshow() { - if (slideshowTimer) stopSlideshow(); - else startSlideshow(); -} - -export function isSlideshowActive() { - return !!slideshowTimer; -} - -function render() { - const media = currentMediaList[currentIndex]; - const img = document.getElementById('lightbox-image'); - const meta = document.getElementById('lb-meta'); - const counter = document.getElementById('lb-counter'); - if (!media || !img) return; - img.src = `/api/media/${media.id}/stream`; - resetZoom(); - if (meta) { - const size = media.file_size_bytes ? fmtSize(media.file_size_bytes) : ''; - const res = media.resolution || ''; - meta.textContent = `${media.file_name}${res ? ' — ' + res : ''}${size ? ' — ' + size : ''}`; - } - if (counter) { - counter.textContent = `${currentIndex + 1} / ${currentMediaList.length}`; - } -} - -function setZoom(s) { - zoomScale = Math.max(0.5, Math.min(s, 5)); - applyTransform(); -} - -function applyTransform() { - const img = document.getElementById('lightbox-image'); - if (!img) return; - img.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomScale})`; - img.style.cursor = zoomScale > 1 ? 'grab' : 'zoom-in'; -} - -function resetZoom() { - zoomScale = 1; - panX = 0; - panY = 0; - applyTransform(); -} - -function startSlideshow() { - if (slideshowTimer) clearInterval(slideshowTimer); - slideshowTimer = setInterval(() => { - if (Date.now() < slideshowPausedUntil) return; - if (!isOpen()) { stopSlideshow(); return; } - next(); - }, 5000); - const btn = document.getElementById('lb-slideshow'); - if (btn) btn.textContent = '⏸'; -} - -function stopSlideshow() { - clearInterval(slideshowTimer); - slideshowTimer = null; - const btn = document.getElementById('lb-slideshow'); - if (btn) btn.textContent = '⏵'; -} - -function pauseSlideshow() { - slideshowPausedUntil = Date.now() + 10000; -} - -function fmtSize(bytes) { - if (!bytes || bytes <= 0) return ''; - const kb = bytes / 1024; - if (kb < 1024) return Math.round(kb) + ' KB'; - const mb = kb / 1024; - if (mb < 1024) return Math.round(mb * 10) / 10 + ' MB'; - return Math.round((mb / 1024) * 10) / 10 + ' GB'; -} |
