+
+
+ ![]()
+
+
+
+
+
+
diff --git a/public/js/app.js b/public/js/app.js
index 0dd9ba2..b0d83da 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,158 +1,134 @@
-// === Frambe - Frontend Application ===
+// === Frambe v1.3.0 - Vintage Polaroid Pile (Canvas) ===
(function () {
'use strict';
- var config = {}, assets = [], currentIndex = -1, activeLayer = 'a', slideshowTimer = null;
+ var config = {}, assets = [], currentIndex = -1, slideshowTimer = null;
var overlayVisible = true, overlayTimeout = null, selectedSource = null, selectedAlbumId = null;
var selectedPersonId = null, isRunning = false, refreshTimer = null, urlDriven = false;
+ var currentVideoPlaying = false;
+ var pileCanvas, pileCtx;
+ // Shared polaroid proportions (match main frame CSS: ~3% sides, ~10% bottom)
+ var FRAME_PAD_RATIO = 0.03;
+ var FRAME_BOTTOM_RATIO = 0.10;
+ var FRAME_COLOR = '#ede8df';
var $setupScreen = document.getElementById('setup-screen'), $slideshowScreen = document.getElementById('slideshow-screen');
var $connectionStatus = document.getElementById('connection-status'), $setupContent = document.getElementById('setup-content');
var $setupError = document.getElementById('setup-error'), $errorDetail = document.getElementById('error-detail');
var $albumsList = document.getElementById('albums-list'), $btnStart = document.getElementById('btn-start');
- var $layerA = document.getElementById('photo-layer-a'), $layerB = document.getElementById('photo-layer-b');
- var $bgBlur = document.getElementById('bg-blur'), $clock = document.getElementById('clock');
- var $dateDisplay = document.getElementById('date-display'), $exifInfo = document.getElementById('exif-info');
- var $progressFill = document.getElementById('progress-fill'), $overlay = document.getElementById('overlay');
- var $btnSettings = document.getElementById('btn-settings'), $progressBar = document.getElementById('progress-bar');
+ var $bgBlur = document.getElementById('bg-blur'), $mainFrame = document.getElementById('main-frame');
+ var $mainPhoto = document.getElementById('main-photo'), $mainVideo = document.getElementById('main-video');
+ var $clock = document.getElementById('clock'), $dateDisplay = document.getElementById('date-display');
+ var $exifInfo = document.getElementById('exif-info'), $progressFill = document.getElementById('progress-fill');
+ var $overlay = document.getElementById('overlay'), $btnSettings = document.getElementById('btn-settings');
+ var $progressBar = document.getElementById('progress-bar');
- function getUrlParams() {
- var p = {}, s = window.location.search.substring(1); if (!s) return p;
- var pairs = s.split('&');
- for (var i = 0; i < pairs.length; i++) { var kv = pairs[i].split('='); p[decodeURIComponent(kv[0])] = decodeURIComponent(kv[1] || ''); }
- return p;
- }
-
- // --- Auto-launch helper: sets source and immediately starts slideshow ---
- async function autoLaunch(source, albumId, personId) {
- urlDriven = true;
- selectedSource = source;
- selectedAlbumId = albumId || null;
- selectedPersonId = personId || null;
- console.log('Frambe: auto-launching source=' + source + (albumId ? ' album=' + albumId : '') + (personId ? ' person=' + personId : ''));
- await doStartSlideshow();
- }
+ function getUrlParams() { var p={},s=window.location.search.substring(1);if(!s)return p;var pairs=s.split('&');for(var i=0;i📁
';html+=''+escapeHtml(a.albumName)+'
'+a.assetCount+' items