add noise canvas for loading indicator and improve video loading experience

static/js/app.js

@@ -30,6 +30,7 @@
   });
 
   const player = document.getElementById("player");
+  const noiseCanvas = document.getElementById("noiseCanvas");
   const placeholder = document.getElementById("videoPlaceholder");
   const badge = document.getElementById("videoBadge");
   const badgeText = document.getElementById("badgeText");
@@ -50,6 +51,65 @@
   let sortMode = "oldest";
   let current = null;
 
+  // ---- Static noise canvas for loading indicator ----
+
+  var noiseCtx = noiseCanvas.getContext("2d");
+  var noiseAnimId = null;
+  var noiseRunning = false;
+
+  function noiseStart() {
+    if (noiseRunning) return;
+    noiseRunning = true;
+    noiseCanvas.classList.remove("hidden");
+    noiseAnimId = null;
+    noiseTick();
+  }
+
+  function noiseStop() {
+    noiseRunning = false;
+    noiseCanvas.classList.add("hidden");
+    if (noiseAnimId) {
+      cancelAnimationFrame(noiseAnimId);
+      noiseAnimId = null;
+    }
+  }
+
+  function noiseTick() {
+    if (!noiseRunning) return;
+    var w = noiseCanvas.width;
+    var h = noiseCanvas.height;
+    var rect = noiseCanvas.getBoundingClientRect();
+    // Render at reduced resolution (160px wide) for performance,
+    // CSS image-rendering: pixelated handles the upscale.
+    var targetW = Math.max(1, Math.min(160, (rect.width * 0.25) | 0));
+    var ratio = rect.height / Math.max(1, rect.width);
+    var targetH = Math.max(1, (targetW * ratio) | 0);
+    if (w !== targetW || h !== targetH) {
+      noiseCanvas.width = targetW;
+      noiseCanvas.height = targetH;
+      w = targetW;
+      h = targetH;
+    }
+    if (w === 0 || h === 0) {
+      noiseAnimId = requestAnimationFrame(noiseTick);
+      return;
+    }
+    var imageData = noiseCtx.createImageData(w, h);
+    var data = imageData.data;
+    for (var i = 0; i < data.length; i += 4) {
+      var v = (Math.random() * 255) | 0;
+      data[i] = v;
+      data[i + 1] = v;
+      data[i + 2] = v;
+      data[i + 3] = 255;
+    }
+    noiseCtx.putImageData(imageData, 0, 0);
+    noiseAnimId = requestAnimationFrame(noiseTick);
+  }
+
+  // Start noise immediately on page load (no video selected yet)
+  noiseStart();
+
   // ---- Prefetch helpers ----
 
   // Track already-prefetched URLs so we don't re-fetch
@@ -262,9 +322,11 @@
     player.src = clip.url;
     player.load();
 
-    // Start playback first, prefetch only after the video is actually playing
+    // Show noise while loading, stop when video starts playing
+    noiseStart();
     var prefetchDone = false;
     function onPlaying() {
+      noiseStop();
       if (prefetchDone) return;
       prefetchDone = true;
       player.removeEventListener("playing", onPlaying);
@@ -273,6 +335,7 @@
     player.addEventListener("playing", onPlaying);
     player.play().catch(function () {
       // Even if autoplay is blocked, still prefetch for when the user clicks play
+      noiseStop();
       if (!prefetchDone) {
         prefetchDone = true;
         player.removeEventListener("playing", onPlaying);