Merge pull request #21 from deco-sites/jonasjesus/deco-5283-video-formats-poster-lazy

feat(ui): Video supports WebM/MP4 sources, poster and lazy loading (DECO-5283)

Author: JonasJesus42

src/components/ui/Video.tsx

@@ -1,5 +1,10 @@
+import { useEffect, useRef, useState } from "react";
+
 interface Props {
+  /** Primary/fallback source — usually an MP4 (broadest browser support). */
   src: string;
+  /** Optional modern source (WebM); offered first when the browser supports it. */
+  webm?: string;
   width?: number;
   height?: number;
   autoPlay?: boolean;
@@ -8,12 +13,20 @@ interface Props {
   playsInline?: boolean;
   controls?: boolean;
   className?: string;
+  /** "eager" disables lazy loading (use for above-the-fold/hero video). */
   loading?: "lazy" | "eager";
+  /** Image shown before the video loads/plays. */
   poster?: string;
+  /**
+   * Load the video only when it scrolls into view (saves bandwidth on
+   * below-the-fold videos). Defaults to true unless `loading="eager"`.
+   */
+  lazy?: boolean;
 }
 
 export default function Video({
   src,
+  webm,
   width,
   height,
   autoPlay = true,
@@ -22,11 +35,35 @@ export default function Video({
   playsInline = true,
   controls = false,
   className,
+  loading,
   poster,
+  lazy,
 }: Props) {
+  const isLazy = lazy ?? loading !== "eager";
+  const ref = useRef<HTMLVideoElement>(null);
+  // When lazy, hold back the <source> elements (and their bytes) until in view.
+  const [visible, setVisible] = useState(!isLazy);
+
+  useEffect(() => {
+    if (!isLazy || visible) return;
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setVisible(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "200px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [isLazy, visible]);
+
   return (
     <video
-      src={src}
+      ref={ref}
       width={width}
       height={height}
       autoPlay={autoPlay}
@@ -36,6 +73,10 @@ export default function Video({
       controls={controls}
       className={className}
       poster={poster}
-    />
+      preload={visible ? "metadata" : "none"}
+    >
+      {visible && webm && <source src={webm} type="video/webm" />}
+      {visible && <source src={src} type="video/mp4" />}
+    </video>
   );
 }