Optimize display and removal of background static

evadecker · evadecker · commit b84e0e8081da · 2025-04-14T12:45:48.000-04:00
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -12,6 +12,7 @@ export default defineConfig({
   },
   adapter: netlify(),
   prefetch: true,
+  trailingSlash: "never",
   redirects: {
     "/ch/00": "/",
     "/about": "/credits",
diff --git a/src/components/IFrame.astro b/src/components/IFrame.astro
@@ -11,24 +11,65 @@ const { src }: Props = Astro.props;
   class="iframe"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
   referrerpolicy="strict-origin-when-cross-origin"
-  allowfullscreen></iframe>
+  allowfullscreen
+>
+</iframe>
+<canvas id="static"></canvas>
 
 <script>
-  const iframe = document.querySelector(".iframe");
+  const canvas = document.getElementById("static") as HTMLCanvasElement;
 
-  if (iframe) {
-    iframe.addEventListener("load", () => {
-      iframe.classList.add("loaded");
-    });
+  if (canvas) {
+    const ctx = canvas.getContext("2d");
+
+    function setCanvasSize() {
+      canvas.width = window.innerWidth / 3;
+      canvas.height = (window.innerHeight * 0.5625) / 3;
+    }
+
+    // Generate CRT noise
+    function snow() {
+      if (!ctx) return;
+
+      const w = ctx.canvas.width;
+      const h = ctx.canvas.height;
+      const d = ctx.createImageData(w, h);
+      const b = new Uint32Array(d.data.buffer);
+      const len = b.length;
+
+      for (let i = 0; i < len; i++) {
+        b[i] = ((255 * Math.random()) | 0) << 24;
+      }
+
+      ctx.putImageData(d, 0, 0);
+    }
+
+    function animate() {
+      snow();
+      requestAnimationFrame(animate);
+    }
+
+    // resize the canvas to fill browser window dynamically
+    window.addEventListener("resize", resizeCanvas, false);
+
+    function resizeCanvas() {
+      setCanvasSize();
+      animate();
+    }
+
+    setCanvasSize();
+    animate();
   }
-</script>
 
-<script>
   const iframe = document.querySelector(".iframe");
 
   if (iframe) {
     iframe.addEventListener("load", () => {
+      // Display white background (for sites with undefined backgrounds)
       iframe.classList.add("loaded");
+
+      // Remove background static
+      canvas.remove();
     });
   }
 </script>
@@ -44,4 +85,16 @@ const { src }: Props = Astro.props;
       background-color: white;
     }
   }
+
+  #static {
+    display: block;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%)
+      repeat scroll 0 0;
+  }
 </style>
diff --git a/src/components/Screen.astro b/src/components/Screen.astro
@@ -1,6 +1,5 @@
 ---
 import Menu from "./Menu.astro";
-import Static from "./Static.astro";
 
 interface Props {
   channelId: string;
@@ -19,7 +18,6 @@ const { channelId, channelName }: Props = Astro.props;
   <div class="screen-content" data-horizontal="0" data-vertical="0">
     <Menu />
     <slot />
-    <Static />
   </div>
 </div>
 
diff --git a/src/components/Static.astro b/src/components/Static.astro
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,14 +2,14 @@
 import "../styles/index.css";
 
 interface Props {
-	title: string;
+  title: string;
 }
 
 const { title } = Astro.props;
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const pageTitle =
-	Astro.url.pathname === "/" ? title : `${title} | Hypertext TV`;
+  Astro.url.pathname === "/" ? title : `${title} | Hypertext TV`;
 ---
 
 <!doctype html>
@@ -19,6 +19,7 @@ const pageTitle =
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="canonical" href={canonicalURL} />
+		<link rel="sitemap" href="/sitemap-index.xml" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{pageTitle}</title>
 		<link
