Added Cloudflare R2 media storage support

templates/partials/lightbox.html

@@ -1,49 +1,164 @@
 <div class="lightbox-overlay" id="lightbox" onclick="closeLightbox(event)">
-    <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
-    <img id="lightboxImg" src="" alt="">
-    <video id="lightboxVideo" controls style="display:none;"></video>
+    <button class="lightbox-close" type="button" onclick="closeLightbox(event)">&times;</button>
+    <div class="lightbox-stage" id="lightboxStage">
+        <span class="lightbox-loader" aria-hidden="true"></span>
+        <img id="lightboxImg" src="" alt="">
+        <video id="lightboxVideo" controls playsinline preload="auto" style="display:none;"></video>
+    </div>
 </div>
 <style>
+    .media-loading-frame {
+        position: relative; display: block; overflow: hidden; background: #eceaf5;
+    }
+    .media-loading-frame::after, .lightbox-loader {
+        content: ""; position: absolute; z-index: 3; top: 50%; left: 50%;
+        width: 22px; height: 22px; margin: -11px 0 0 -11px;
+        border: 3px solid rgba(124,108,255,.22); border-top-color: #7c6cff;
+        border-radius: 50%; animation: media-spinner .75s linear infinite;
+    }
+    .media-loading-frame:not(.is-loading)::after { display: none; }
+    .media-loading-frame img[data-media-load] { opacity: 0; transition: opacity .18s ease; }
+    .media-loading-frame.is-loaded img[data-media-load] { opacity: 1; }
+    .media-loading-frame.is-error::after {
+        display: block; content: "!"; width: 24px; height: 24px; margin: -12px 0 0 -12px;
+        border: 0; animation: none; color: #9b93bb; font-weight: 700; text-align: center;
+    }
+    .video-preview-sprite {
+        display: block !important; width: 400% !important; max-width: none !important;
+        height: 100% !important; object-fit: fill !important;
+        transform: translateX(0); transition: transform .08s linear;
+    }
+    @keyframes media-spinner { to { transform: rotate(360deg); } }
+
     .lightbox-overlay {
         display:none; position:fixed; inset:0; z-index:200;
-        background:rgba(0,0,0,0.85); align-items:center; justify-content:center;
+        background:rgba(9,8,18,.9); align-items:center; justify-content:center;
+        padding: 1rem;
     }
     .lightbox-overlay.is-open { display:flex; }
-    .lightbox-overlay img, .lightbox-overlay video {
-        max-width:92vw; max-height:88vh; border-radius:8px; object-fit:contain;
+    .lightbox-stage {
+        position: relative; display: flex; align-items: center; justify-content: center;
+        min-width: 96px; min-height: 96px; max-width: 94vw; max-height: 90vh;
     }
+    .lightbox-stage img, .lightbox-stage video {
+        max-width:92vw; max-height:88vh; border-radius:10px; object-fit:contain;
+        background:#090909; box-shadow:0 18px 60px rgba(0,0,0,.42);
+    }
+    .lightbox-stage.is-loading img, .lightbox-stage.is-loading video { opacity: .18; }
+    .lightbox-stage:not(.is-loading) .lightbox-loader { display: none; }
+    .lightbox-stage.is-error .lightbox-loader {
+        display: block; animation: none; border: 0; color: white;
+    }
+    .lightbox-stage.is-error .lightbox-loader::after { content: "!"; font-size: 2rem; }
     .lightbox-close {
-        position:absolute; top:0.75rem; right:1rem; background:none; border:none;
+        position:absolute; top:0.75rem; right:1rem; background:rgba(0,0,0,.25); border:none;
         color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; z-index:201;
+        width:44px; height:44px; border-radius:50%;
     }
 </style>
 <script>
+(function() {
+    function finishThumbnail(image, loaded) {
+        var frame = image.closest('.media-loading-frame');
+        if (!frame) return;
+        frame.classList.remove('is-loading');
+        frame.classList.add(loaded ? 'is-loaded' : 'is-error');
+    }
+
+    document.querySelectorAll('img[data-media-load]').forEach(function(image) {
+        image.addEventListener('load', function() { finishThumbnail(image, true); });
+        image.addEventListener('error', function() { finishThumbnail(image, false); });
+        if (image.complete) finishThumbnail(image, image.naturalWidth > 0);
+    });
+
+    document.querySelectorAll('[data-video-preview]').forEach(function(preview) {
+        var sprite = preview.querySelector('[data-preview-frames]');
+        if (!sprite) return;
+        var timer;
+        var frame = 0;
+        var frames = Number(sprite.dataset.previewFrames) || 4;
+        function showFrame() {
+            sprite.style.transform = 'translateX(-' + (frame * 100 / frames) + '%)';
+        }
+        function start() {
+            if (timer || !preview.classList.contains('is-loaded')) return;
+            frame = 1;
+            showFrame();
+            timer = window.setInterval(function() {
+                frame = (frame + 1) % frames;
+                showFrame();
+            }, 650);
+        }
+        function stop() {
+            window.clearInterval(timer);
+            timer = null;
+            frame = 0;
+            showFrame();
+        }
+        preview.addEventListener('pointerenter', start);
+        preview.addEventListener('pointerleave', stop);
+        preview.closest('a').addEventListener('focus', start);
+        preview.closest('a').addEventListener('blur', stop);
+    });
+})();
+
+function setLightboxState(state) {
+    var stage = document.getElementById('lightboxStage');
+    stage.classList.remove('is-loading', 'is-error');
+    if (state) stage.classList.add(state);
+}
 function openLightbox(url, isVideo) {
     var lb = document.getElementById('lightbox');
     var img = document.getElementById('lightboxImg');
     var vid = document.getElementById('lightboxVideo');
+    setLightboxState('is-loading');
+    lb.classList.add('is-open');
     if (isVideo) {
         img.style.display = 'none';
+        img.removeAttribute('src');
         vid.style.display = '';
         vid.src = url;
+        vid.load();
+        var playback = vid.play();
+        if (playback) playback.catch(function() {});
     } else {
         vid.style.display = 'none';
-        vid.pause && vid.pause(); vid.src = '';
+        vid.pause();
+        vid.removeAttribute('src');
+        vid.load();
         img.style.display = '';
         img.src = url;
     }
-    lb.classList.add('is-open');
 }
-function closeLightbox(e) {
-    if (e && e.target !== document.getElementById('lightbox') && e.target.className !== 'lightbox-close') return;
+function closeLightbox(event) {
     var lb = document.getElementById('lightbox');
+    if (event && event.target !== lb && !event.target.closest('.lightbox-close')) return;
     lb.classList.remove('is-open');
     var vid = document.getElementById('lightboxVideo');
-    vid.pause && vid.pause(); vid.src = '';
+    vid.pause();
+    vid.removeAttribute('src');
+    vid.load();
+    var img = document.getElementById('lightboxImg');
+    img.removeAttribute('src');
+    setLightboxState(null);
 }
-document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(null); });
-document.addEventListener('click', function(e) {
-    var a = e.target.closest('[data-lightbox]');
-    if (a) { e.preventDefault(); openLightbox(a.href, a.dataset.lightbox === 'video'); }
+document.getElementById('lightboxImg').addEventListener('load', function() { setLightboxState(null); });
+document.getElementById('lightboxImg').addEventListener('error', function() { setLightboxState('is-error'); });
+var lightboxVideo = document.getElementById('lightboxVideo');
+['loadeddata', 'canplay', 'playing'].forEach(function(name) {
+    lightboxVideo.addEventListener(name, function() { setLightboxState(null); });
+});
+['waiting', 'stalled', 'seeking'].forEach(function(name) {
+    lightboxVideo.addEventListener(name, function() { setLightboxState('is-loading'); });
+});
+lightboxVideo.addEventListener('error', function() { setLightboxState('is-error'); });
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Escape') closeLightbox(null);
+});
+document.addEventListener('click', function(event) {
+    var link = event.target.closest('[data-lightbox]');
+    if (!link) return;
+    event.preventDefault();
+    openLightbox(link.href, link.dataset.lightbox === 'video');
 });
 </script>