Add zoom controls for video modes

2026-01-12 12:40:22 +01:00
parent 60dab1e9df
commit e8385adb87
3 changed files with 278 additions and 12 deletions
@@ -0,0 +1,37 @@
+(() => {
+    const config = window.zoomConfig || {};
+    if (!config.enabled) return;
+
+    const slider = document.getElementById('zoom-range');
+    const valueEl = document.getElementById('zoom-value');
+    if (!slider || !valueEl) return;
+
+    const minZoom = Number(config.minZoom || 1);
+    const maxZoom = Number(config.maxZoom || 100);
+    const defaultZoom = Number(config.defaultZoom || 1);
+
+    slider.min = minZoom;
+    slider.max = maxZoom;
+    slider.value = defaultZoom;
+
+    const targets = [
+        document.getElementById('webcam-player'),
+        document.getElementById('timelapse-image'),
+        document.getElementById('daily-video')
+    ].filter(Boolean);
+
+    const applyZoom = (zoomValue) => {
+        const zoom = Math.max(minZoom, Math.min(maxZoom, zoomValue));
+        valueEl.textContent = `${zoom}x`;
+        targets.forEach((el) => {
+            el.style.transform = `scale(${zoom})`;
+            el.style.transformOrigin = 'center center';
+        });
+    };
+
+    applyZoom(defaultZoom);
+
+    slider.addEventListener('input', (event) => {
+        applyZoom(Number(event.target.value));
+    });
+})();