=Starting the Favourites.js setup, converting previous Northeh stuff to new...

Jake Vanderwerf

4 days ago 0afb2c0046b55c123eafb4ab9ee77efa68d12463

 src/video/view.js

@@ -1,12 +1,47 @@
const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
      if (entry.isIntersecting) {
         loadVideo(entry.target);
         observer.unobserve(entry.target);
      }
   });
});
/** view.js **/
document.addEventListener("DOMContentLoaded", function () {
   const lazyVideos = [].slice.call(
      document.querySelectorAll(".video-container video")
   );

document.querySelectorAll('.video-container .placeholder').forEach(el => {
   observer.observe(el);
   // Build a helper to actually set sources + load
   function loadVideo(video) {
      const sources = video.querySelectorAll("source[data-src]");
      sources.forEach(source => {
         source.src = source.dataset.src;
      });
      video.load();
   }

   // --- 1. IntersectionObserver (best case) ---
   if ("IntersectionObserver" in window) {
      const lazyVideoObserver = new IntersectionObserver(
         function (entries, observer) {
            entries.forEach(entry => {
               if (entry.isIntersecting) {
                  loadVideo(entry.target);
                  observer.unobserve(entry.target);
               }
            });
         },
         {
            rootMargin: "200px 0px",
            threshold: 0.1,
         }
      );

      lazyVideos.forEach(video => lazyVideoObserver.observe(video));
      return;
   }

   // --- 2. Fallback: requestIdleCallback ---
   if ("requestIdleCallback" in window) {
      requestIdleCallback(() => {
         lazyVideos.forEach(video => loadVideo(video));
      });
      return;
   }

   // --- 3. Final fallback: load immediately ---
   lazyVideos.forEach(video => loadVideo(video));
});