tv.js (2074B)
1 (function () { 2 // Fetch a new tv.jpg every second - a non-obvious HOWTO 3 // 4 // In theory, fetch() combined with a "no-store" cache directive should be 5 // enough to 1. force re-download the image and 2. bypass the cache entirely. 6 // However in practice, even though FF and chromium are properly 7 // re-downloading the new file without using their cache, they will *not* 8 // refresh the view. To force redraw the image we need to rewrite the img src 9 // with a classic cache busting garbage URL trick. If we do, then FF and 10 // chromium *do* display the new image, but then it means we have downloaded 11 // the file twice! This is obviously super wasteful. A workaround to limit 12 // the damages, is to use a different method for fetching. By default it uses 13 // GET, but if we use HEAD instead, it won't download the file, it will just 14 // get the headers, thus validating the response, and as follow-up function 15 // we can use our traditional cache busting src rewrite. It's still two http 16 // requests, but only one file download. 17 // 18 // Could it be done differently? 19 // 20 setInterval(function(){ 21 tv = "/tv/tv.jpg"; 22 fetch(tv, { cache: "no-store", method: "HEAD" }) 23 .then((response) => { 24 document.getElementById("nosignal").style.visibility = "hidden"; 25 document.getElementById("television").style.visibility = "visible"; 26 document.getElementById("television").src=tv + "#" + Date.now(); 27 }) 28 .catch((error) => { 29 document.getElementById("television").style.visibility = "hidden"; 30 document.getElementById("nosignal").style.visibility = "visible"; 31 }); 32 }, 1000); 33 34 // Press 'f' to enter fullscreen 35 // Press 'f' again to exit fullscreen 36 // 37 function toggleFullScreen() { 38 if (!document.fullscreenElement) { 39 document.documentElement.requestFullscreen(); 40 } else if (document.exitFullscreen) { 41 document.exitFullscreen(); 42 } 43 } 44 45 document.addEventListener( 46 "keydown", 47 (e) => { 48 if (e.key === "f") { 49 toggleFullScreen(); 50 } 51 }, 52 false, 53 ); 54 })();