television

commit 45d9bf273ae23bccfbed827f541c2eab2faea3a5
parent 3406dc8630fbb346c1000f2f4e61089c92b7352b
Author: ugrnm <ultrageranium@bleu255.com>
Date:   Mon, 16 Sep 2024 22:41:11 +0200

tidy up

Diffstat:
M
www/tv.js
 | 
100
++++++++++++++++++++++++++++++++++++++++---------------------------------------

1 file changed, 51 insertions(+), 49 deletions(-)
diff --git a/www/tv.js b/www/tv.js
@@ -1,52 +1,54 @@
-// Fetch a new tv.jpg every second - a non-obvious HOWTO
-// 
-// In theory, fetch() combined with a "no-store" cache directive should be
-// enough to 1. force re-download the image and 2. bypass the cache entirely.
-// However in practice, even though FF and chromium are properly re-downloading
-// the new file without using their cache, they will *not* refresh the view.
-// To force redraw the image we need to rewrite the img src with a classic
-// cache busting garbage URL trick. If we do, then FF and chromium *do* display
-// the new image, but then it means we have downloaded the file twice!
-// This is obviously super wasteful. A workaround to limit the damages, is to
-// use a different method for fetching. By default it uses GET, but if we use
-// HEAD instead, it won't download the file, it will just get the headers,
-// thus validating the response, and as follow-up function we can use
-// our traditional cache busting src rewrite. It's still two http requests, but
-// only one file download.
-//
-// Could it be done differently?
-//
-setInterval(function(){
-  tv = "/tv.jpg";
-  fetch(tv, { cache: "no-store", method: "HEAD" })
-  .then((response) => {
-    document.getElementById("nosignal").style.visibility = "hidden";
-    document.getElementById("television").style.visibility = "visible";
-    document.getElementById("television").src=tv + "#" + Date.now();
-  })
-  .catch((error) => {
-    document.getElementById("television").style.visibility = "hidden";
-    document.getElementById("nosignal").style.visibility = "visible";
-  });
-}, 1000);
+(function () {
+  // Fetch a new tv.jpg every second - a non-obvious HOWTO
+  // 
+  // In theory, fetch() combined with a "no-store" cache directive should be
+  // enough to 1. force re-download the image and 2. bypass the cache entirely.
+  // However in practice, even though FF and chromium are properly
+  // re-downloading the new file without using their cache, they will *not*
+  // refresh the view. To force redraw the image we need to rewrite the img src
+  // with a classic cache busting garbage URL trick. If we do, then FF and
+  // chromium *do* display the new image, but then it means we have downloaded
+  // the file twice! This is obviously super wasteful. A workaround to limit
+  // the damages, is to use a different method for fetching. By default it uses
+  // GET, but if we use HEAD instead, it won't download the file, it will just
+  // get the headers, thus validating the response, and as follow-up function
+  // we can use our traditional cache busting src rewrite. It's still two http
+  // requests, but only one file download.
+  //
+  // Could it be done differently?
+  //
+  setInterval(function(){
+    tv = "/tv.jpg";
+    fetch(tv, { cache: "no-store", method: "HEAD" })
+    .then((response) => {
+      document.getElementById("nosignal").style.visibility = "hidden";
+      document.getElementById("television").style.visibility = "visible";
+      document.getElementById("television").src=tv + "#" + Date.now();
+    })
+    .catch((error) => {
+      document.getElementById("television").style.visibility = "hidden";
+      document.getElementById("nosignal").style.visibility = "visible";
+    });
+  }, 1000);
 
-// Press 'f' to enter fullscreen
-// Press 'f' again to exit fullscreen
-//
-function toggleFullScreen() {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen();
-  } else if (document.exitFullscreen) {
-    document.exitFullscreen();
+  // Press 'f' to enter fullscreen
+  // Press 'f' again to exit fullscreen
+  //
+  function toggleFullScreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
   }
-}
 
-document.addEventListener(
-  "keydown",
-  (e) => {
-    if (e.key === "f") {
-      toggleFullScreen();
-    }
-  },
-  false,
-);
+  document.addEventListener(
+    "keydown",
+    (e) => {
+      if (e.key === "f") {
+        toggleFullScreen();
+      }
+    },
+    false,
+  );
+})();