@riverbankcms/sdk 0.74.0 → 0.75.0

package/dist/client/rendering/islands.mjs

@@ -2,26 +2,102 @@
 import { buildResolveImageUrlContext, setContextResolveImageUrlContext } from '../chunk-PMAIXMAB.mjs';
 import { useEffect } from 'react';
 
+// src/rendering/islands/deferredVideoEmbeds.ts
+var DEFERRED_IFRAME_SELECTOR = 'iframe[data-rb-video-embed-deferred="true"]';
+var WRAPPER_SELECTOR = '[data-rb-video-embed-wrapper="true"]';
+var DEFERRED_SRC_ATTRIBUTE = "data-rb-video-embed-src";
+var LOADED_ATTRIBUTE = "data-rb-video-embed-loaded";
+var OBSERVER_ROOT_MARGIN = "800px";
+var observer = null;
+var observedTargets = /* @__PURE__ */ new WeakMap();
+function enhanceDeferredVideoEmbeds(root = document) {
+  const iframes = Array.from(root.querySelectorAll(DEFERRED_IFRAME_SELECTOR));
+  if (iframes.length === 0) return;
+  if (typeof IntersectionObserver === "undefined") {
+    iframes.forEach(loadDeferredIframe);
+    return;
+  }
+  const sharedObserver = getOrCreateObserver();
+  iframes.forEach((iframe) => {
+    if (iframe.getAttribute("src")) {
+      markLoaded(iframe);
+      return;
+    }
+    const target = getObservationTarget(iframe);
+    if (observedTargets.has(target)) return;
+    observedTargets.set(target, iframe);
+    sharedObserver.observe(target);
+  });
+}
+function getOrCreateObserver() {
+  if (observer) return observer;
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const iframe = observedTargets.get(entry.target) ?? findDeferredIframe(entry.target);
+        observer?.unobserve(entry.target);
+        observedTargets.delete(entry.target);
+        if (!iframe) continue;
+        loadDeferredIframe(iframe);
+      }
+    },
+    { rootMargin: OBSERVER_ROOT_MARGIN }
+  );
+  return observer;
+}
+function getObservationTarget(iframe) {
+  return iframe.closest(WRAPPER_SELECTOR) ?? iframe;
+}
+function findDeferredIframe(target) {
+  if (target instanceof HTMLIFrameElement) {
+    return target.matches(DEFERRED_IFRAME_SELECTOR) ? target : null;
+  }
+  return target.querySelector(DEFERRED_IFRAME_SELECTOR);
+}
+function loadDeferredIframe(iframe) {
+  if (iframe.getAttribute("src")) {
+    markLoaded(iframe);
+    return;
+  }
+  const src = iframe.getAttribute(DEFERRED_SRC_ATTRIBUTE);
+  if (!isSafeHttpsUrl(src)) return;
+  iframe.setAttribute("src", src);
+  markLoaded(iframe);
+}
+function markLoaded(iframe) {
+  iframe.removeAttribute("data-rb-video-embed-deferred");
+  iframe.setAttribute(LOADED_ATTRIBUTE, "true");
+}
+function isSafeHttpsUrl(value) {
+  if (!value) return false;
+  try {
+    return new URL(value).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 // src/rendering/islands/hydrateBlocksIslands.ts
 var defaultEnhancerLoaders = {
-  accordion: () => import('../accordion-ZZVXWV3N.mjs'),
-  headerSection: () => import('../headerSection-5KHCMU6B.mjs'),
-  carousel: () => import('../carousel-25WK2H7G.mjs'),
-  form: () => import('../form-AKXQMY6Z.mjs'),
-  "booking-form": () => import('../bookingForm-4X77HKDS.mjs'),
-  "event-registration": () => import('../eventRegistration-3LCP2V3P.mjs'),
-  "event-details": () => import('../eventDetails-3WODIXET.mjs'),
-  "location-map": () => import('../locationMap-7HIADW76.mjs'),
-  "course-registration": () => import('../courseRegistration-O6ZPK4YT.mjs'),
-  "event-listing": () => import('../eventListing-HEFGAETC.mjs'),
-  "event-calendar": () => import('../eventCalendar-X6GIPYFM.mjs'),
-  "event-combined": () => import('../eventCombined-EZUOPM3G.mjs'),
-  "product-list": () => import('../productList-KWIIJE6I.mjs'),
-  "product-detail": () => import('../productDetail-IZUA7ZP3.mjs'),
-  "cart": () => import('../cart-JWD2VRFU.mjs'),
-  "checkout": () => import('../checkout-V7KYGWL7.mjs'),
-  shop: () => import('../shop-XZQFRQWZ.mjs'),
-  "newsletter-form": () => import('../newsletterForm-5N4YTMU3.mjs')
+  accordion: () => import('../accordion-T2UD2ZTH.mjs'),
+  headerSection: () => import('../headerSection-TOT5MGTF.mjs'),
+  carousel: () => import('../carousel-2NQA6V57.mjs'),
+  form: () => import('../form-ZJVAYZ6G.mjs'),
+  "booking-form": () => import('../bookingForm-GUP75FKN.mjs'),
+  "event-registration": () => import('../eventRegistration-4I6ZNDUF.mjs'),
+  "event-details": () => import('../eventDetails-PEM2EJWE.mjs'),
+  "location-map": () => import('../locationMap-J66NZREU.mjs'),
+  "course-registration": () => import('../courseRegistration-5DPU6PDY.mjs'),
+  "event-listing": () => import('../eventListing-YMIQPVME.mjs'),
+  "event-calendar": () => import('../eventCalendar-F3GZGTEF.mjs'),
+  "event-combined": () => import('../eventCombined-BQOB6QMY.mjs'),
+  "product-list": () => import('../productList-T2AZLFTP.mjs'),
+  "product-detail": () => import('../productDetail-C2XIH7C5.mjs'),
+  "cart": () => import('../cart-5TFIAFDS.mjs'),
+  "checkout": () => import('../checkout-TP4WAHZE.mjs'),
+  shop: () => import('../shop-UZ6IUZXD.mjs'),
+  "newsletter-form": () => import('../newsletterForm-ET2XUMRO.mjs')
 };
 var DEFAULT_MAX_RETRIES = 2;
 var RETRY_DELAYS_MS = [250, 1e3];
@@ -153,6 +229,7 @@ async function mountIsland(island, options) {
 }
 function hydrateBlocksIslands(options = {}) {
   const root = options.root ?? document;
+  enhanceDeferredVideoEmbeds(root);
   const loaders = resolveLoaders(options);
   const islands = collectIslands(root, loaders);
   if (islands.length === 0) return;
@@ -167,12 +244,12 @@ function hydrateBlocksIslands(options = {}) {
     lazy.forEach(run);
     return;
   }
-  const observer = new IntersectionObserver(
+  const observer2 = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
         if (!entry.isIntersecting) continue;
         const element = entry.target;
-        observer.unobserve(element);
+        observer2.unobserve(element);
         const kind = element.dataset.rbIsland;
         if (!kind || !isIslandKind(kind, loaders)) continue;
         run({ element, kind });
@@ -180,7 +257,7 @@ function hydrateBlocksIslands(options = {}) {
     },
     { rootMargin: "200px" }
   );
-  lazy.forEach((island) => observer.observe(island.element));
+  lazy.forEach((island) => observer2.observe(island.element));
 }
 
 // src/rendering/islands/BlocksIslandsHydrator.tsx