📁
';
+ html += thu ? '📁
';
html += '' + escapeHtml(a.albumName) + '
' + a.assetCount + ' photos
No albums found
'; return; } var html = ''; for (var i = 0; i < albums.length; i++) { - var a = albums[i]; - var thumbUrl = a.albumThumbnailAssetId ? '/api/assets/' + a.albumThumbnailAssetId + '/thumbnail?size=thumbnail' : ''; + var a = albums[i], thu = a.albumThumbnailAssetId ? '/api/assets/' + a.albumThumbnailAssetId + '/thumbnail?size=thumbnail' : ''; html += 'Failed to load albums
'; } + } catch (e) { $albumsList.innerHTML = 'Failed to load albums
'; } } - window.selectSource = function (source) { - selectedSource = source; selectedAlbumId = null; - document.getElementById('btn-all-photos').classList.toggle('selected', source === 'random'); - document.getElementById('btn-favorites').classList.toggle('selected', source === 'favorites'); - var albumItems = document.querySelectorAll('.album-item'); - for (var i = 0; i < albumItems.length; i++) albumItems[i].classList.remove('selected'); + window.selectSource = function (src) { + selectedSource = src; selectedAlbumId = null; selectedPersonId = null; + document.getElementById('btn-all-photos').classList.toggle('selected', src === 'random'); + document.getElementById('btn-favorites').classList.toggle('selected', src === 'favorites'); + var items = document.querySelectorAll('.album-item'); + for (var i = 0; i < items.length; i++) items[i].classList.remove('selected'); $btnStart.disabled = false; }; - - window.selectAlbum = function (albumId, el) { - selectedSource = 'album'; selectedAlbumId = albumId; + window.selectAlbum = function (id, el) { + selectedSource = 'album'; selectedAlbumId = id; selectedPersonId = null; document.getElementById('btn-all-photos').classList.remove('selected'); document.getElementById('btn-favorites').classList.remove('selected'); - var albumItems = document.querySelectorAll('.album-item'); - for (var i = 0; i < albumItems.length; i++) albumItems[i].classList.remove('selected'); - el.classList.add('selected'); - $btnStart.disabled = false; + var items = document.querySelectorAll('.album-item'); + for (var i = 0; i < items.length; i++) items[i].classList.remove('selected'); + el.classList.add('selected'); $btnStart.disabled = false; }; async function loadAssets() { - var res; - if (selectedSource === 'album' && selectedAlbumId) { res = await fetch('/api/albums/' + selectedAlbumId); var album = await res.json(); assets = album.assets || []; } - else if (selectedSource === 'favorites') { res = await fetch('/api/assets/favorites'); assets = await res.json(); } - else { res = await fetch('/api/assets/random?count=100'); assets = await res.json(); } + if (selectedSource === 'album' && selectedAlbumId) { var al = await (await fetch('/api/albums/' + selectedAlbumId)).json(); assets = al.assets || []; } + else if (selectedSource === 'person' && selectedPersonId) { assets = await (await fetch('/api/people/' + selectedPersonId)).json(); } + else if (selectedSource === 'favorites') { assets = await (await fetch('/api/assets/favorites')).json(); } + else { assets = await (await fetch('/api/assets/random?count=100')).json(); } if (config.shuffle) shuffleArray(assets); } + function startRefreshTimer() { + if (refreshTimer) clearInterval(refreshTimer); + refreshTimer = setInterval(async function () { + try { + var oldIds = {}; for (var i = 0; i < assets.length; i++) oldIds[assets[i].id] = true; + var nw, r; + if (selectedSource === 'album' && selectedAlbumId) { r = await (await fetch('/api/albums/' + selectedAlbumId)).json(); nw = r.assets || []; } + else if (selectedSource === 'person' && selectedPersonId) { nw = await (await fetch('/api/people/' + selectedPersonId)).json(); } + else if (selectedSource === 'favorites') { nw = await (await fetch('/api/assets/favorites')).json(); } + else return; + var added = 0; + for (var j = 0; j < nw.length; j++) { if (!oldIds[nw[j].id]) { assets.push(nw[j]); added++; } } + if (added > 0) console.log('Frambe: added ' + added + ' new photo(s)'); + } catch (e) { console.warn('Frambe: refresh failed', e.message); } + }, (config.refreshInterval || 300) * 1000); + } + window.startSlideshow = async function () { if (!selectedSource) return; - $btnStart.disabled = true; - $btnStart.innerHTML = ' Loading…'; + $btnStart.disabled = true; $btnStart.innerHTML = ' Loading…'; try { await loadAssets(); if (!assets.length) { $btnStart.textContent = 'No photos found'; setTimeout(function () { $btnStart.textContent = '▶ Start Slideshow'; $btnStart.disabled = false; }, 2000); return; } $setupScreen.style.display = 'none'; $slideshowScreen.style.display = 'block'; document.body.classList.remove('setup-mode'); isRunning = true; - var transMs = (config.transitionDuration || 2) * 1000; - $layerA.style.transition = 'opacity ' + transMs + 'ms ease'; - $layerB.style.transition = 'opacity ' + transMs + 'ms ease'; - $bgBlur.style.transition = 'opacity ' + (transMs * 0.75) + 'ms ease'; - if (!config.showClock) $clock.style.display = 'none'; - if (!config.showDate) $dateDisplay.style.display = 'none'; - if (!config.showExif) $exifInfo.style.display = 'none'; - if (!config.showProgress) $progressBar.style.display = 'none'; + var t = (config.transitionDuration || 2) * 1000; + $layerA.style.transition = 'opacity ' + t + 'ms ease'; $layerB.style.transition = 'opacity ' + t + 'ms ease'; + $bgBlur.style.transition = 'opacity ' + (t * 0.75) + 'ms ease'; + if (!config.showClock) $clock.style.display = 'none'; if (!config.showDate) $dateDisplay.style.display = 'none'; + if (!config.showExif) $exifInfo.style.display = 'none'; if (!config.showProgress) $progressBar.style.display = 'none'; if (!config.backgroundBlur) $bgBlur.style.display = 'none'; updateClock(); setInterval(updateClock, 1000); - currentIndex = -1; showNextPhoto(); scheduleOverlayHide(); + currentIndex = -1; showNextPhoto(); scheduleOverlayHide(); startRefreshTimer(); } catch (err) { $btnStart.textContent = 'Error: ' + err.message; setTimeout(function () { $btnStart.textContent = '▶ Start Slideshow'; $btnStart.disabled = false; }, 3000); } }; window.exitSlideshow = function () { - isRunning = false; clearTimeout(slideshowTimer); clearInterval(progressTimer); - $slideshowScreen.style.display = 'none'; $setupScreen.style.display = 'flex'; - document.body.classList.add('setup-mode'); + if (urlDriven) { window.location.href = window.location.pathname; return; } + isRunning = false; clearTimeout(slideshowTimer); if (refreshTimer) clearInterval(refreshTimer); + $slideshowScreen.style.display = 'none'; $setupScreen.style.display = 'flex'; document.body.classList.add('setup-mode'); $btnStart.textContent = '▶ Start Slideshow'; $btnStart.disabled = false; $layerA.style.backgroundImage = ''; $layerB.style.backgroundImage = ''; $bgBlur.style.backgroundImage = ''; - $layerA.classList.add('active'); $layerB.classList.remove('active'); $bgBlur.classList.remove('visible'); - activeLayer = 'a'; + $layerA.classList.add('active'); $layerB.classList.remove('active'); $bgBlur.classList.remove('visible'); activeLayer = 'a'; }; function showNextPhoto() { currentIndex++; if (currentIndex >= assets.length) { if (config.shuffle) shuffleArray(assets); currentIndex = 0; } showPhoto(currentIndex); } function showPrevPhoto() { currentIndex--; if (currentIndex < 0) currentIndex = assets.length - 1; showPhoto(currentIndex); } - - function showPhoto(index) { - if (!assets[index]) return; - clearTimeout(slideshowTimer); clearInterval(progressTimer); - var asset = assets[index]; - var imageUrl = '/api/assets/' + asset.id + '/thumbnail?size=preview'; - var img = new Image(); - img.onload = function () { displayImage(imageUrl, asset); }; - img.onerror = function () { setTimeout(showNextPhoto, 500); }; - img.src = imageUrl; - preloadNext(index + 1); + function showPhoto(idx) { + if (!assets[idx]) return; clearTimeout(slideshowTimer); + var a = assets[idx], url = '/api/assets/' + a.id + '/thumbnail?size=preview'; + var img = new Image(); img.onload = function () { displayImage(url, a); }; img.onerror = function () { setTimeout(showNextPhoto, 500); }; img.src = url; + preloadNext(idx + 1); } - function displayImage(url, asset) { - var fitStyle = config.imageFit || 'contain'; - var incomingLayer, outgoingLayer; - if (activeLayer === 'a') { incomingLayer = $layerB; outgoingLayer = $layerA; activeLayer = 'b'; } - else { incomingLayer = $layerA; outgoingLayer = $layerB; activeLayer = 'a'; } - incomingLayer.style.backgroundImage = 'url(' + url + ')'; - incomingLayer.style.backgroundSize = fitStyle; - incomingLayer.classList.add('active'); outgoingLayer.classList.remove('active'); + var fit = config.imageFit || 'contain', inc, out; + if (activeLayer === 'a') { inc = $layerB; out = $layerA; activeLayer = 'b'; } else { inc = $layerA; out = $layerB; activeLayer = 'a'; } + inc.style.backgroundImage = 'url(' + url + ')'; inc.style.backgroundSize = fit; + inc.classList.add('active'); out.classList.remove('active'); if (config.backgroundBlur) { $bgBlur.style.backgroundImage = 'url(' + url + ')'; $bgBlur.classList.add('visible'); } updateExifInfo(asset); startProgress(); - var interval = (config.slideshowInterval || 30) * 1000; - slideshowTimer = setTimeout(showNextPhoto, interval); + slideshowTimer = setTimeout(showNextPhoto, (config.slideshowInterval || 30) * 1000); } - - function preloadNext(index) { if (index >= assets.length) index = 0; if (!assets[index]) return; var img = new Image(); img.src = '/api/assets/' + assets[index].id + '/thumbnail?size=preview'; } - - function updateExifInfo(asset) { - if (!config.showExif || !asset.exifInfo) { $exifInfo.textContent = ''; return; } - var parts = [], exif = asset.exifInfo; - var location = [exif.city, exif.state, exif.country].filter(Boolean).join(', '); - if (location) parts.push('📍 ' + location); - if (exif.dateTimeOriginal) { parts.push(formatDate(new Date(exif.dateTimeOriginal))); } - else if (asset.fileCreatedAt) { parts.push(formatDate(new Date(asset.fileCreatedAt))); } - if (exif.make || exif.model) { parts.push('📷 ' + [exif.make, exif.model].filter(Boolean).join(' ')); } - $exifInfo.textContent = parts.join(' • '); + function preloadNext(i) { if (i >= assets.length) i = 0; if (!assets[i]) return; var img = new Image(); img.src = '/api/assets/' + assets[i].id + '/thumbnail?size=preview'; } + function updateExifInfo(a) { + if (!config.showExif || !a.exifInfo) { $exifInfo.textContent = ''; return; } + var p = [], e = a.exifInfo, loc = [e.city, e.state, e.country].filter(Boolean).join(', '); + if (loc) p.push('📍 ' + loc); + if (e.dateTimeOriginal) p.push(formatDate(new Date(e.dateTimeOriginal))); + else if (a.fileCreatedAt) p.push(formatDate(new Date(a.fileCreatedAt))); + if (e.make || e.model) p.push('📷 ' + [e.make, e.model].filter(Boolean).join(' ')); + $exifInfo.textContent = p.join(' • '); } - function startProgress() { if (!config.showProgress) return; - $progressFill.style.transition = 'none'; $progressFill.style.width = '0%'; - progressStart = Date.now(); var duration = (config.slideshowInterval || 30) * 1000; - $progressFill.offsetWidth; - $progressFill.style.transition = 'width ' + duration + 'ms linear'; $progressFill.style.width = '100%'; + $progressFill.style.transition = 'none'; $progressFill.style.width = '0%'; $progressFill.offsetWidth; + $progressFill.style.transition = 'width ' + ((config.slideshowInterval || 30) * 1000) + 'ms linear'; $progressFill.style.width = '100%'; } - function updateClock() { - var now = new Date(); - if (config.showClock) { $clock.textContent = padZero(now.getHours()) + ':' + padZero(now.getMinutes()); } - if (config.showDate) { $dateDisplay.textContent = now.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); } + var n = new Date(); + if (config.showClock) $clock.textContent = padZero(n.getHours()) + ':' + padZero(n.getMinutes()); + if (config.showDate) $dateDisplay.textContent = n.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); } - - window.toggleOverlay = function () { - overlayVisible = !overlayVisible; - if (overlayVisible) { $overlay.classList.remove('hidden'); $btnSettings.classList.add('visible'); scheduleOverlayHide(); } - else { $overlay.classList.add('hidden'); $btnSettings.classList.remove('visible'); } - }; - + window.toggleOverlay = function () { overlayVisible = !overlayVisible; if (overlayVisible) { $overlay.classList.remove('hidden'); $btnSettings.classList.add('visible'); scheduleOverlayHide(); } else { $overlay.classList.add('hidden'); $btnSettings.classList.remove('visible'); } }; function scheduleOverlayHide() { clearTimeout(overlayTimeout); overlayTimeout = setTimeout(function () { $overlay.classList.add('hidden'); $btnSettings.classList.remove('visible'); overlayVisible = false; }, 8000); } - window.nextPhoto = function () { showNextPhoto(); if (overlayVisible) scheduleOverlayHide(); }; window.prevPhoto = function () { showPrevPhoto(); if (overlayVisible) scheduleOverlayHide(); }; - - document.addEventListener('keydown', function (e) { - if (!isRunning) return; - switch (e.key) { - case 'ArrowRight': case ' ': e.preventDefault(); nextPhoto(); break; - case 'ArrowLeft': e.preventDefault(); prevPhoto(); break; - case 'Escape': exitSlideshow(); break; - case 'f': toggleFullscreen(); break; - case 'i': toggleOverlay(); break; - } - }); - - function toggleFullscreen() { - if (!document.fullscreenElement && !document.webkitFullscreenElement) { var el = document.documentElement; if (el.requestFullscreen) el.requestFullscreen(); else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); } - else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } - } - + document.addEventListener('keydown', function (e) { if (!isRunning) return; switch (e.key) { case 'ArrowRight': case ' ': e.preventDefault(); nextPhoto(); break; case 'ArrowLeft': e.preventDefault(); prevPhoto(); break; case 'Escape': exitSlideshow(); break; case 'f': toggleFullscreen(); break; case 'i': toggleOverlay(); break; } }); + function toggleFullscreen() { if (!document.fullscreenElement && !document.webkitFullscreenElement) { var el = document.documentElement; if (el.requestFullscreen) el.requestFullscreen(); else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); } else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } } function shuffleArray(arr) { for (var i = arr.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var t = arr[i]; arr[i] = arr[j]; arr[j] = t; } } function padZero(n) { return n < 10 ? '0' + n : '' + n; } function formatDate(d) { var m = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; return d.getDate() + ' ' + m[d.getMonth()] + ' ' + d.getFullYear(); } function escapeHtml(s) { var d = document.createElement('div'); d.appendChild(document.createTextNode(s)); return d.innerHTML; } - async function requestWakeLock() { try { if ('wakeLock' in navigator) await navigator.wakeLock.request('screen'); } catch (e) {} } document.addEventListener('visibilitychange', function () { if (document.visibilityState === 'visible' && isRunning) requestWakeLock(); }); - - function preventSleep() { - try { - var v = document.createElement('video'); v.setAttribute('playsinline',''); v.setAttribute('muted',''); v.setAttribute('loop',''); - v.style.cssText = 'position:absolute;width:1px;height:1px;opacity:0.01'; - v.src = 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAAhtZGF0AAAA1m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAYdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAJBtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAADIAAAAAAAAhhdmMxAAAAAAAAAAAAAAAAAAAAAAAA'; - document.body.appendChild(v); v.play().catch(function(){}); - } catch(e){} - } - + function preventSleep() { try { var v = document.createElement('video'); v.setAttribute('playsinline',''); v.setAttribute('muted',''); v.setAttribute('loop',''); v.style.cssText = 'position:absolute;width:1px;height:1px;opacity:0.01'; v.src = 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAAhtZGF0AAAA1m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAYdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAJBtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAADIAAAAAAAAhhdmMxAAAAAAAAAAAAAAAAAAAAAAAA'; document.body.appendChild(v); v.play().catch(function(){}); } catch(e){} } init(); requestWakeLock(); preventSleep(); })();