Improve lazy video implementation

src/_components/home/homepage-section.webc

@@ -255,13 +255,16 @@
     window.addEventListener("scroll", onScroll, { passive: true });
     window.addEventListener("resize", onScroll, { passive: true });
 
-    document.addEventListener("transition:pageclosed", function onPageClosed() {
-      window.removeEventListener("scroll", onScroll);
-      window.removeEventListener("resize", onScroll);
-      document.removeEventListener("transition:pageclosed", onPageClosed);
-      // Clear the array of section elments so they can be garbage collected to avoid memory leaks
-      homePageSections.length = 0;
-    });
+    document.addEventListener(
+      "transition:pageclosed",
+      () => {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
+        // Clear the array of section elments so they can be garbage collected to avoid memory leaks
+        homePageSections.length = 0;
+      },
+      { once: true }
+    );
   }
 </script>
 <script>

src/_components/shared/lazy-video.webc

@@ -5,28 +5,12 @@
   preload="metadata"
   class="lazy"
 ></video>
-<script>
-  {
-    const lazyVideoObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const lazyVideo = entry.target;
-          lazyVideo.src = lazyVideo.getAttribute("data-src");
-          lazyVideo.removeAttribute("data-src");
-          lazyVideo.classList.remove("lazy");
-          lazyVideoObserver.unobserve(lazyVideo);
-        }
-      });
-    });
-
-    document
-      .querySelectorAll("video.lazy")
-      .forEach((video) => lazyVideoObserver.observe(video));
-  }
-</script>
 <style>
   video.lazy {
     background-color: var(--color-tertiary);
+  }
+
+  video.lazy[data-src] {
     opacity: 0.2;
   }
 </style>

src/_includes/layouts/base.webc

@@ -14,11 +14,7 @@
       <!-- All contents of the transition element are persisted between pages -->
 
       <!-- Critical CSS -->
-      <style
-        @raw="getBundle('css', 'critical')"
-        data-trns-persist="critical-css"
-        webc:keep
-      ></style>
+      <style @raw="getBundle('css', 'critical')" webc:keep></style>
       <link
         rel="stylesheet"
         href="../../css/reset.css"
@@ -29,13 +25,11 @@
       <link
         rel="stylesheet"
         :href="getBundleFileUrl('css', 'transition-persist')"
-        data-trns-persist="transition-css"
         webc:keep
       />
       <script
         :src="getBundleFileUrl('js', 'transition-persist')"
         type="module"
-        data-trns-persist="transition-js"
         webc:keep
       ></script>
 
@@ -49,6 +43,11 @@
         webc:bucket="transition-persist"
       ></script>
 
+      <script
+        src="../../js/lazy-video.mjs"
+        webc:bucket="transition-persist"
+      ></script>
+
       <!-- Shoelace -->
       <script
         type="module"

src/js/lazy-video.mjs

@@ -0,0 +1,33 @@
+{
+  const lazyVideoObserver = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const lazyVideo = entry.target;
+        lazyVideo.src = lazyVideo.getAttribute("data-src");
+        lazyVideo.removeAttribute("data-src");
+        lazyVideoObserver.unobserve(lazyVideo);
+      }
+    });
+  });
+
+  const watchLazyVideos = () => {
+    const lazyVideos = Array.from(document.querySelectorAll("video.lazy"));
+    for (const video of lazyVideos) {
+      lazyVideoObserver.observe(video);
+    }
+
+    document.addEventListener(
+      "transition:pageclosed",
+      () => {
+        for (const video of lazyVideos) {
+          lazyVideoObserver.unobserve(video);
+        }
+        lazyVideos.length = 0;
+      },
+      { once: true }
+    );
+  };
+
+  watchLazyVideos();
+  document.addEventListener("transition:pageopened", watchLazyVideos);
+}

src/js/page-transition.mjs

@@ -65,10 +65,6 @@
 
   const transitionToPage = async (newPageURL) => {
     try {
-      const timeoutID = setTimeout(() => {
-        throw new Error("Page transition timed out");
-      }, 1500);
-
       transitionURLQueue.push(newPageURL);
       // Start fetching the new page so we can load it while the transition animation is playing
       fetchPage(newPageURL.pathname);
@@ -161,8 +157,6 @@
 
       await new Promise((resolve) => setTimeout(resolve, 600));
 
-      clearTimeout(timeoutID);
-
       document.documentElement.removeAttribute(pageTransitionAttr);
 
       isTransitioning = false;