From 45b73bf95ba96cae29805caaecadfa26e6fc2b2b Mon Sep 17 00:00:00 2001
From: Dominic Ferrando <dominicf2001@gmail.com>
Date: Sat, 26 Apr 2025 13:18:58 -0400
Subject: [PATCH] Make files opaque until loaded

---
 web/static/index.css | 5 +++++
 web/static/thread.js | 9 +++++++++
 2 files changed, 14 insertions(+)

diff --git a/web/static/index.css b/web/static/index.css
index 9c38f32..6ff5c19 100644
--- a/web/static/index.css
+++ b/web/static/index.css
@@ -287,6 +287,11 @@ body {
     max-width: 100%;
 }
 
+.post-file-loading {
+    opacity: .4;
+    transition: opacity .2s;
+}
+
 .post-img-info {
     display: inline-block;
     font-size: 10px;
diff --git a/web/static/thread.js b/web/static/thread.js
index 41ca2af..c82a95f 100644
--- a/web/static/thread.js
+++ b/web/static/thread.js
@@ -37,14 +37,21 @@ function insertHeaderReplies() {
 }
 
 function togglePostFile(el) {
+    function makeOpaqueUntilReady(el, readyEvt) {
+        el.classList.add('post-file-loading');
+        el.addEventListener(readyEvt, () => el.classList.remove('post-file-loading'), { once: true });
+    }
+
     const imgEl = el.parentElement.parentElement.querySelector("img");
     const isVideo = imgEl.dataset.full.endsWith(".mp4") || imgEl.dataset.full.endsWith(".webm") || imgEl.dataset.full.endsWith(".ogg");
 
     if (isVideo) {
         const vidEl = imgEl.parentElement.querySelector("video");
+
         const closeVidBtn = imgEl.parentElement.querySelector(".link-button");
         if (vidEl.style.display === "none") {
             vidEl.src = "/media/posts/full/" + imgEl.dataset.full;
+            makeOpaqueUntilReady(vidEl, 'canplay');
             vidEl.style.display = "";
             imgEl.style.display = "none";
             closeVidBtn.style.display = "";
@@ -64,6 +71,8 @@ function togglePostFile(el) {
         else {
             imgEl.classList.add("post-img-full");
             imgEl.src = "/media/posts/full/" + imgEl.dataset.full;
+            if (!imgEl.complete)
+                makeOpaqueUntilReady(imgEl, 'load');
         }
     }
 }