Merge pull request #420 from Weaverse/dev

v2026.6.11 - Hydrogen 2026.4.3 + dependency refresh, hero video fix

Author: hta218

README.md

@@ -61,7 +61,7 @@ Pilot supports AI coding agents (Cursor, Claude Code, Windsurf, Codex, GitHub Co
 
 **Requirements:**
 
-- Node.js version 20.0.0 or higher
+- Node.js version 22.12.0 or higher
 - `npm` package manager
 
 **Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:**

app/components/scroll-reveal.tsx

@@ -116,6 +116,7 @@ export function ScrollReveal({
 }: ScrollRevealProps) {
   let { revealElementsOnScroll } = useThemeSettings<ThemeSettings>();
   let [isVisible, setIsVisible] = useState(false);
+  let [revealed, setRevealed] = useState(false);
   let internalRef = useRef<HTMLElement>(null);
 
   let setRefs = (node: HTMLElement | null) => {
@@ -141,7 +142,26 @@ export function ScrollReveal({
     return cleanup;
   }, [revealElementsOnScroll]);
 
-  if (!revealElementsOnScroll) {
+  // Strip the reveal transition wrapper from the DOM once the animation
+  // finishes so subsequent re-renders don't keep paying for the inline
+  // transition/transform styles — and downstream hover/focus animations
+  // on the same element aren't fighting an active `transition-all`.
+  useEffect(() => {
+    if (!isVisible || !internalRef.current) {
+      return;
+    }
+    let el = internalRef.current;
+    function onEnd(e: TransitionEvent) {
+      // Only react to our own transitions (opacity always animates here).
+      if (e.target === el && e.propertyName === "opacity") {
+        setRevealed(true);
+      }
+    }
+    el.addEventListener("transitionend", onEnd);
+    return () => el.removeEventListener("transitionend", onEnd);
+  }, [isVisible]);
+
+  if (!revealElementsOnScroll || revealed) {
     return (
       <Component ref={setRefs} className={className} style={style} {...rest}>
         {children}

app/routes/catch-all.tsx

@@ -1,4 +1,5 @@
-import type { LoaderFunctionArgs } from "react-router";
+import { getWeaverseSeoMeta } from "@weaverse/hydrogen";
+import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { routeHeaders } from "~/utils/cache";
 import { validateWeaverseData, WeaverseContent } from "~/weaverse";
 
@@ -15,6 +16,10 @@ export async function loader({ context }: LoaderFunctionArgs) {
   };
 }
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return getWeaverseSeoMeta(data?.weaverseData);
+};
+
 export default function Component() {
   return <WeaverseContent />;
 }

app/routes/home.tsx

@@ -1,6 +1,6 @@
 import type { SeoConfig } from "@shopify/hydrogen";
 import { AnalyticsPageType, getSeoMeta } from "@shopify/hydrogen";
-import type { PageType } from "@weaverse/hydrogen";
+import { getWeaverseSeoMeta, type PageType } from "@weaverse/hydrogen";
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import type { ShopQuery } from "storefront-api.generated";
 import { seoPayload } from "~/.server/seo";
@@ -20,8 +20,10 @@ export async function loader(args: LoaderFunctionArgs) {
     type = "CUSTOM";
   }
 
-  // Calculate seo payload synchronously
-  const seo = seoPayload.home();
+  // INDEX uses the code-defined homepage SEO; CUSTOM pages (root-level
+  // Weaverse handles served by this route) get their SEO from Weaverse
+  // via getWeaverseSeoMeta in the meta export below.
+  const seo = type === "INDEX" ? seoPayload.home() : null;
 
   // Load async data in parallel for better performance
   const [weaverseData, { shop }] = await Promise.all([
@@ -46,7 +48,12 @@ export async function loader(args: LoaderFunctionArgs) {
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return getSeoMeta(data?.seo as SeoConfig);
+  // INDEX (real homepage) keeps the code-defined SEO — no Weaverse override.
+  // CUSTOM pages served by this route get their SEO from Weaverse.
+  if (data?.seo) {
+    return getSeoMeta(data.seo as SeoConfig);
+  }
+  return getWeaverseSeoMeta(data?.weaverseData);
 };
 export default function Homepage() {
   return <WeaverseContent />;

app/routes/seo/sitemap-weaverse.xml.ts

@@ -10,7 +10,7 @@ function escapeXml(str: string): string {
 }
 
 export async function loader({ request, context }: LoaderFunctionArgs) {
-  const { weaverse } = context as any;
+  const { weaverse } = context;
   const url = new URL(request.url);
   const baseUrl = `${url.protocol}//${url.host}`;
 

app/sections/hero-video/index.tsx

@@ -8,7 +8,6 @@ import { Overlay } from "~/components/overlay";
 import { ScrollReveal } from "~/components/scroll-reveal";
 import { variants } from "./styles";
 import { type HeroVideoProps, SECTION_HEIGHTS } from "./types";
-import { calculateVideoHeight, getPlayerSize } from "./utils";
 
 // react-player v3 is ESM-only and lazy-loads individual players internally,
 // so a plain dynamic import resolves cleanly. React.lazy here only defers the
@@ -37,29 +36,12 @@ export default function HeroVideo(props: HeroVideoProps) {
     ...rest
   } = props;
 
-  const id = rest["data-wv-id"];
   const containerRef = useRef<HTMLDivElement>(null);
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [size, setSize] = useState(() => getPlayerSize(id));
   const [playing, setPlaying] = useState(autoplay !== false);
   const [hovered, setHovered] = useState(false);
   const [hideContent, setHideContent] = useState(false);
 
-  // Calculate initial video height from intrinsic dimensions
-  const [videoHeight, setVideoHeight] = useState<number | null>(() => {
-    if (isBrowser && containerRef.current) {
-      const containerWidth = containerRef.current.getBoundingClientRect().width;
-      return calculateVideoHeight(video, containerWidth);
-    }
-    // Fallback: calculate from video metadata if available
-    if (isBrowser && video?.width && video?.height) {
-      // Use viewport width as estimate for container width
-      const estimatedWidth = window.innerWidth;
-      return calculateVideoHeight(video, estimatedWidth);
-    }
-    return null;
-  });
-
   // Content visible when: paused, or not hovered, or not hidden by delay
   let contentVisible = !playing || !hovered || !hideContent;
 
@@ -85,10 +67,9 @@ export default function HeroVideo(props: HeroVideoProps) {
     setHideContent(false);
   }
 
-  const desktopHeight = SECTION_HEIGHTS[height] || `${heightOnDesktop}px`;
+  const sectionHeight = SECTION_HEIGHTS[height] || `${heightOnDesktop}px`;
   const sectionStyle: CSSProperties = {
-    "--desktop-height": desktopHeight,
-    ...(videoHeight ? { "--video-height": `${videoHeight}px` } : {}),
+    "--section-height": sectionHeight,
     "--gap-desktop": `${gap ?? 0}px`,
     "--gap-mobile": (gap ?? 0) <= 20 ? `${gap ?? 0}px` : `${(gap ?? 0) / 2}px`,
   } as CSSProperties;
@@ -107,136 +88,59 @@ export default function HeroVideo(props: HeroVideoProps) {
   };
 
   /**
-   * Measure actual video element height and adjust container to match.
-   * This corrects any discrepancy between calculated and actual rendered height.
+   * Force muted + inline playback on the lazily-mounted <video> — required for
+   * iOS to autoplay inline rather than going fullscreen. react-player mounts
+   * the element asynchronously, so poll briefly until it appears. No height is
+   * measured here: the container size is fixed in CSS and the video just covers
+   * it (`object-cover`), so there is no measure→resize feedback loop.
    */
-  function syncVideoHeight() {
-    if (!containerRef.current) {
+  useEffect(() => {
+    if (!isBrowser || !inView || !containerRef.current) {
       return;
     }
+    const container = containerRef.current;
+    let pollId: ReturnType<typeof setInterval> | null = null;
+    let attempts = 0;
 
-    // Find the actual video or iframe element inside ReactPlayer
-    const mediaEl = containerRef.current.querySelector(
-      "video, iframe",
-    ) as HTMLElement | null;
-
-    if (mediaEl instanceof HTMLVideoElement) {
+    function configure() {
+      const mediaEl = container.querySelector("video");
+      if (!mediaEl) {
+        // Lazy player chunk / iframe embed not a <video> — retry briefly.
+        attempts += 1;
+        if (attempts > 100 && pollId) {
+          clearInterval(pollId);
+        }
+        return;
+      }
+      if (pollId) {
+        clearInterval(pollId);
+        pollId = null;
+      }
       mediaEl.muted = true;
       mediaEl.defaultMuted = true;
       mediaEl.playsInline = true;
       mediaEl.setAttribute("muted", "");
       mediaEl.setAttribute("playsinline", "");
       mediaEl.setAttribute("webkit-playsinline", "");
-
       if (playing) {
         mediaEl.autoplay = true;
         mediaEl.setAttribute("autoplay", "");
       }
-
       if (loop !== false) {
         mediaEl.loop = true;
         mediaEl.setAttribute("loop", "");
       }
     }
 
-    if (mediaEl instanceof HTMLVideoElement) {
-      // Derive height from the INTRINSIC video dimensions, never from the
-      // rendered box: the container height is set from this value, and the
-      // video fills the container, so committing a rendered measurement can
-      // deadlock a wrong value (e.g. the 300x150 default before metadata
-      // loads — observed as an intermittently squashed hero).
-      if (mediaEl.videoWidth > 0 && mediaEl.videoHeight > 0) {
-        const containerWidth =
-          containerRef.current.getBoundingClientRect().width;
-        const intrinsicHeight =
-          (containerWidth * mediaEl.videoHeight) / mediaEl.videoWidth;
-        commitVideoHeight(intrinsicHeight);
-      }
-      // Metadata not loaded yet — skip; loadedmetadata/ResizeObserver will
-      // re-trigger this sync.
-      return;
-    }
-    if (mediaEl) {
-      // Iframe embeds (YouTube/Vimeo) size themselves via aspect-ratio
-      // styles — the rendered box is the only available signal.
-      const actualHeight = mediaEl.getBoundingClientRect().height;
-      if (actualHeight > 0) {
-        commitVideoHeight(actualHeight);
-      }
-    }
-  }
-  function commitVideoHeight(next: number) {
-    // Only update if significantly different (> 2px) to avoid jitter
-    setVideoHeight((prev) => {
-      if (prev === null || Math.abs(prev - next) > 2) {
-        return next;
-      }
-      return prev;
-    });
-  }
+    pollId = setInterval(configure, 100);
+    configure();
 
-  /**
-   * Recalculate video height on resize using intrinsic dimensions.
-   * This ensures the container always matches the video's actual displayed size.
-   */
-  function handleResize() {
-    setSize(getPlayerSize(id));
-    // First, try intrinsic calculation
-    if (containerRef.current && video?.width && video?.height) {
-      const containerWidth = containerRef.current.getBoundingClientRect().width;
-      const calculatedHeight = calculateVideoHeight(video, containerWidth);
-      if (calculatedHeight) {
-        setVideoHeight(calculatedHeight);
-      }
-    }
-    // Then sync with actual video element after a brief delay
-    requestAnimationFrame(syncVideoHeight);
-  }
-  /**
-   * A single post-mount measurement is a race: if it lands before the video
-   * metadata loads, the <video> element reports the browser default 300x150
-   * and the container gets locked at ~150px (intermittent squashed hero).
-   * Watch for the media element (react-player mounts lazily) and keep the
-   * container in sync with a ResizeObserver — metadata load, player chrome,
-   * and breakpoint changes all resize the element and re-trigger the sync.
-   */
-  function watchMediaElement(): (() => void) | undefined {
-    if (!isBrowser || !containerRef.current) {
-      return undefined;
-    }
-    let observer: ResizeObserver | null = null;
-    let pollId: ReturnType<typeof setInterval> | null = null;
-    let attempts = 0;
-    const attach = () => {
-      const mediaEl = containerRef.current?.querySelector("video, iframe");
-      if (!mediaEl) {
-        // Lazy player chunk not mounted yet — retry briefly.
-        attempts += 1;
-        if (attempts > 100 && pollId) {
-          clearInterval(pollId);
-        }
-        return;
-      }
-      if (pollId) {
-        clearInterval(pollId);
-        pollId = null;
-      }
-      syncVideoHeight();
-      observer = new ResizeObserver(() => syncVideoHeight());
-      observer.observe(mediaEl);
-      if (mediaEl instanceof HTMLVideoElement) {
-        mediaEl.addEventListener("loadedmetadata", syncVideoHeight);
-      }
-    };
-    pollId = setInterval(attach, 100);
-    attach();
     return () => {
       if (pollId) {
         clearInterval(pollId);
       }
-      observer?.disconnect();
     };
-  }
+  }, [inView, playing, loop]);
 
   // Reset hideContent when video is paused (show content immediately)
   useEffect(() => {
@@ -258,17 +162,6 @@ export default function HeroVideo(props: HeroVideoProps) {
     };
   }, []);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation> --- IGNORE ---
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    const stopWatching = inView ? watchMediaElement() : undefined;
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      stopWatching?.();
-    };
-  }, [inView, height, heightOnDesktop]);
-
   return (
     <ScrollReveal
       as="section"
@@ -282,12 +175,10 @@ export default function HeroVideo(props: HeroVideoProps) {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={clsx(
-          "relative flex items-center justify-center overflow-hidden w-full",
-          videoHeight
-            ? "h-(--video-height) md:h-[min(var(--desktop-height),var(--video-height))]"
-            : "aspect-video md:aspect-auto md:h-(--desktop-height)",
-          "md:w-[max(var(--desktop-height)/9*16,100vw)]",
-          "md:translate-x-[min(0px,calc((var(--desktop-height)/9*16-100vw)/-2))]",
+          // Full-bleed hero band: full width, fixed height. `container-type:size`
+          // exposes the box to container-query units so the player below can
+          // scale itself to cover the band (see its inline style).
+          "relative w-full overflow-hidden h-(--section-height) @container-size",
         )}
       >
         {inView && (
@@ -299,12 +190,21 @@ export default function HeroVideo(props: HeroVideoProps) {
               muted
               loop={loop !== false}
               playsInline
-              width={size.width}
-              height={size.height}
               controls={false}
-              onReady={() => {
-                // Sync container height with actual video element after render
-                requestAnimationFrame(syncVideoHeight);
+              // Cover the band for ANY source. `object-fit: cover` only crops
+              // native <video>; YouTube/Vimeo render an <iframe> in shadow DOM
+              // that ignores it, so we instead size the player to the smallest
+              // 16:9 box that still covers the container, then center it (the
+              // band's `overflow-hidden` crops the excess). cqw/cqh resolve
+              // against the band's own width/height.
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "max(100cqw, calc(100cqh * 16 / 9))",
+                height: "max(100cqh, calc(100cqw * 9 / 16))",
+                objectFit: "cover",
               }}
             />
           </Suspense>