@morphika/andami 0.1.2

package/components/blocks/ProjectGridBlockRenderer.tsx

@@ -0,0 +1,556 @@
+"use client";
+
+/**
+ * ProjectGridBlockRenderer — Public site renderer for Project Grid v2.
+ *
+ * Uses the shared masonry engine (lib/builder/masonry.ts) with absolute
+ * positioning for pixel-perfect layout at every viewport.
+ *
+ * Features:
+ * - JS masonry layout (shortest-column algorithm)
+ * - 1–6 columns, per-card aspect ratio overrides
+ * - Video modes: off / hover / autoloop
+ * - Hover effects: scale / 3d / none
+ * - Subtitle overlay with gradient
+ * - Responsive: ResizeObserver recalculates on container resize
+ */
+
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  memo,
+} from "react";
+import Link from "next/link";
+import { useAssetUrl, useThumbUrl } from "../../lib/contexts/AssetContext";
+import {
+  computeMasonry,
+  resolveItemRatio,
+  type MasonryItem,
+  type MasonryOutput,
+} from "../../lib/builder/masonry";
+import type { ProjectGridBlock } from "../../lib/sanity/types";
+import type { ResolvedEnterAnimationConfig } from "../../lib/animation/enter-types";
+import { useViewport } from "../../lib/hooks/useViewport";
+import EnterAnimationWrapper from "./EnterAnimationWrapper";
+
+// ─── Resolved project data ───
+
+interface ResolvedProject {
+  slug: string;
+  title: string;
+  subtitle?: string;
+  thumbnail_path?: string;
+  cover_video?: string;
+  aspect_ratio_override?: string | null;
+  /** Per-card responsive overrides (tablet/phone) */
+  responsive?: { tablet?: { aspect_ratio_override?: string | null }; phone?: { aspect_ratio_override?: string | null } };
+  _key: string;
+}
+
+// ─── Main Component ───
+
+export default function ProjectGridBlockRenderer({
+  block,
+}: {
+  block: ProjectGridBlock;
+}) {
+  const assetUrl = useAssetUrl();
+  const thumbUrl = useThumbUrl();
+  const viewport = useViewport();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+  /** Container top offset at first measure — for above-the-fold detection */
+  const containerTopRef = useRef<number | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [resolvedProjects, setResolvedProjects] = useState<ResolvedProject[]>([]);
+
+  // ─── Measure container width via ResizeObserver ───
+  // Uses callback ref so the observer is set up the instant the DOM node
+  // is attached, with a rAF retry for delayed-layout cases.
+  const containerCallbackRef = useCallback((node: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = node;
+    if (!node) return;
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        if (w > 0) setContainerWidth(w);
+      }
+      // Capture container top on first observation (for above-the-fold detection)
+      if (containerTopRef.current === null) {
+        containerTopRef.current = node.getBoundingClientRect().top;
+      }
+    });
+    roRef.current = ro;
+    ro.observe(node);
+
+    // Immediate + rAF fallback
+    const measure = () => {
+      const w = node.clientWidth;
+      if (w > 0) setContainerWidth(w);
+    };
+    measure();
+    requestAnimationFrame(measure);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+    },
+    [],
+  );
+
+  // ─── Fetch project data ───
+  useEffect(() => {
+    if (!block.projects?.length) return;
+
+    const slugs = block.projects.map((p) => p.project_slug);
+
+    fetch("/api/projects")
+      .then((r) => (r.ok ? r.json() : { projects: [] }))
+      .then((data) => {
+        const projectMap = new Map<string, { title: string; subtitle: string; thumbnail_path?: string; cover_video?: string }>();
+        for (const proj of data.projects || []) {
+          const projSlug = proj.slug?.current || proj.slug;
+          if (projSlug && slugs.includes(projSlug)) {
+            projectMap.set(projSlug, {
+              title: proj.title,
+              subtitle: proj.seo_description || "",
+              thumbnail_path: proj.thumbnail_path,
+              cover_video: proj.cover_video,
+            });
+          }
+        }
+
+        const resolved = block.projects
+          .map((item) => {
+            const proj = projectMap.get(item.project_slug);
+            if (!proj) return null;
+            return {
+              slug: item.project_slug,
+              _key: item._key,
+              title: proj.title,
+              subtitle: item.custom_subtitle || proj.subtitle,
+              thumbnail_path: item.custom_thumbnail || proj.thumbnail_path,
+              cover_video: proj.cover_video,
+              aspect_ratio_override: item.aspect_ratio_override || null,
+              responsive: item.responsive,
+            };
+          })
+          .filter(Boolean) as ResolvedProject[];
+
+        setResolvedProjects(resolved);
+      })
+      .catch(() => {
+        setResolvedProjects([]);
+      });
+  }, [block.projects]);
+
+  // ─── Grid config (already resolved for current viewport by BlockRenderer) ───
+  const columns = block.columns || 3;
+  const gapV = block.gap_v ?? 16;
+  const gapH = block.gap_h ?? 16;
+  const aspectRatios = block.aspect_ratios?.length ? block.aspect_ratios : ["16/9"];
+  const hoverEffect = block.hover_effect || "scale";
+  const showSubtitle = block.show_subtitle !== false;
+  const borderRadius = block.border_radius || 0;
+  const videoMode = block.video_mode || "off";
+
+  // ─── Build masonry items (viewport-aware per-card overrides) ───
+  const masonryItems: MasonryItem[] = useMemo(() => {
+    return resolvedProjects.map((proj, i) => {
+      let override = proj.aspect_ratio_override;
+      if (viewport !== "desktop") {
+        const vpOverride = proj.responsive?.[viewport]?.aspect_ratio_override;
+        if (vpOverride !== undefined) override = vpOverride;
+      }
+      return {
+        key: proj._key,
+        aspectRatio: resolveItemRatio(i, override, {
+          gridRatios: aspectRatios,
+        }),
+      };
+    });
+  }, [resolvedProjects, aspectRatios, viewport]);
+
+  // ─── Compute masonry layout ───
+  const masonry: MasonryOutput = useMemo(() => {
+    if (containerWidth <= 0 || masonryItems.length === 0) {
+      return { items: [], totalHeight: 0 };
+    }
+    return computeMasonry(masonryItems, {
+      columns,
+      gapH,
+      gapV,
+      containerWidth,
+    });
+  }, [masonryItems, columns, gapH, gapV, containerWidth]);
+
+  // ─── Map masonry results to projects ───
+  const projectByKey = useMemo(() => {
+    const map = new Map<string, ResolvedProject>();
+    for (const proj of resolvedProjects) {
+      map.set(proj._key, proj);
+    }
+    return map;
+  }, [resolvedProjects]);
+
+  // ─── Card entrance animation config ───
+  const entrance = block.card_entrance;
+  const entranceEnabled = entrance?.enabled ?? false;
+  const entrancePreset = entrance?.preset || "slide-up";
+  const entranceStaggerDelay = entrance?.stagger_delay ?? 80;
+  const entranceDuration = entrance?.duration ?? 500;
+
+  // Map card_entrance presets to ResolvedEnterAnimationConfig
+  const entranceAnimConfig: ResolvedEnterAnimationConfig | undefined = entranceEnabled
+    ? {
+        preset: entrancePreset === "slide-up" ? "slide-up" : entrancePreset === "scale" ? "scale" : "fade",
+        duration: entranceDuration,
+        easing: "ease-out",
+        delay: 0,
+      }
+    : undefined;
+
+  // ─── Determine which cards are above the fold (visible without scrolling) ───
+  // Only these cards get the entrance animation. Cards below the fold
+  // render immediately visible to avoid empty gaps while scrolling.
+  const aboveFoldKeys = useMemo(() => {
+    if (!entranceEnabled || masonry.items.length === 0) return new Set<string>();
+
+    const containerTop = containerTopRef.current ?? 0;
+    const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 900;
+    // How much vertical space is available below the container's top edge
+    const cutoff = viewportHeight - containerTop;
+
+    const keys = new Set<string>();
+    for (const item of masonry.items) {
+      // Card is above the fold if its top edge starts within the viewport
+      if (item.y < cutoff) {
+        keys.add(item.key);
+      }
+    }
+    return keys;
+  }, [entranceEnabled, masonry.items]);
+
+  // ─── Compute stagger indices sorted by vertical position ───
+  // Cards at similar y positions (within half of gapV) share the same rank.
+  // Only computed for above-the-fold cards.
+  const staggerIndices = useMemo(() => {
+    if (!entranceEnabled || masonry.items.length === 0) return new Map<string, number>();
+
+    // Only stagger above-the-fold cards
+    const aboveFold = masonry.items.filter((item) => aboveFoldKeys.has(item.key));
+    if (aboveFold.length === 0) return new Map<string, number>();
+
+    // Sort items by y, then by x for tie-breaking
+    const sorted = [...aboveFold].sort((a, b) => a.y - b.y || a.x - b.x);
+    const indices = new Map<string, number>();
+    let rank = 0;
+    let prevY = -Infinity;
+    const yThreshold = Math.max(gapV * 0.5, 4); // tolerance for "same row"
+
+    for (const item of sorted) {
+      if (item.y - prevY > yThreshold) {
+        if (prevY !== -Infinity) rank++;
+        prevY = item.y;
+      }
+      indices.set(item.key, rank);
+    }
+    return indices;
+  }, [entranceEnabled, masonry.items, aboveFoldKeys, gapV]);
+
+  if (resolvedProjects.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        maxWidth: "var(--grid-width, 1445px)",
+        marginLeft: "auto",
+        marginRight: "auto",
+        width: "100%",
+      }}
+    >
+      <div
+        ref={containerCallbackRef}
+        style={{
+          position: "relative",
+          height: masonry.totalHeight > 0 ? masonry.totalHeight : undefined,
+          // Reserve minimum height while measuring
+          minHeight: masonry.totalHeight > 0 ? undefined : 100,
+        }}
+      >
+        {masonry.items.map((item) => {
+          const proj = projectByKey.get(item.key);
+          if (!proj) return null;
+
+          const card = (
+            <ProjectCard
+              project={proj}
+              hoverEffect={hoverEffect}
+              showSubtitle={showSubtitle}
+              borderRadius={borderRadius}
+              videoMode={videoMode}
+              assetUrl={assetUrl}
+              thumbUrl={thumbUrl}
+            />
+          );
+
+          const isAboveFold = aboveFoldKeys.has(item.key);
+
+          return (
+            <div
+              key={item.key}
+              data-card-entrance={entranceEnabled && isAboveFold ? "" : undefined}
+              style={{
+                position: "absolute",
+                left: item.x,
+                top: item.y,
+                width: item.width,
+                height: item.height,
+              }}
+            >
+              {entranceEnabled && entranceAnimConfig && isAboveFold ? (
+                <EnterAnimationWrapper
+                  config={entranceAnimConfig}
+                  staggerIndex={staggerIndices.get(item.key) ?? 0}
+                  staggerDelay={entranceStaggerDelay}
+                  style={{ width: "100%", height: "100%" }}
+                >
+                  {card}
+                </EnterAnimationWrapper>
+              ) : (
+                card
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ─── Project Card ───
+
+const ProjectCard = memo(function ProjectCard({
+  project,
+  hoverEffect,
+  showSubtitle,
+  borderRadius,
+  videoMode,
+  assetUrl,
+  thumbUrl,
+}: {
+  project: ResolvedProject;
+  hoverEffect: "3d" | "scale" | "none";
+  showSubtitle: boolean;
+  borderRadius: number;
+  videoMode: "off" | "hover" | "autoloop";
+  assetUrl: (path: string) => string;
+  thumbUrl: (path: string) => string;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const imgSrc = project.thumbnail_path ? thumbUrl(project.thumbnail_path) : "";
+  const rawVideoSrc = project.cover_video ? assetUrl(project.cover_video) : "";
+  const videoSrc = videoMode !== "off" ? rawVideoSrc : "";
+  const videoActive = videoSrc && isPlaying;
+
+  const radius = borderRadius > 0 ? borderRadius : undefined;
+
+  // ─── 3D tilt handler ───
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (hoverEffect !== "3d" || !cardRef.current) return;
+      const rect = cardRef.current.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      const rotateY = (x - 0.5) * 20; // -10 to +10 deg
+      const rotateX = (0.5 - y) * 20;
+      cardRef.current.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+    },
+    [hoverEffect],
+  );
+
+  // ─── Hover enter/leave ───
+  const handleMouseEnter = useCallback(() => {
+    setHovered(true);
+    if (videoMode === "hover" && videoRef.current) {
+      videoRef.current.play().catch(() => {});
+    }
+  }, [videoMode]);
+
+  const handleMouseLeave = useCallback(() => {
+    setHovered(false);
+    if (videoMode === "hover" && videoRef.current) {
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }
+    // Reset 3D tilt
+    if (hoverEffect === "3d" && cardRef.current) {
+      cardRef.current.style.transform = "perspective(600px) rotateX(0deg) rotateY(0deg)";
+    }
+  }, [videoMode, hoverEffect]);
+
+  // Autoloop: play on canplay
+  const handleVideoCanPlay = useCallback(() => {
+    if (videoMode === "autoloop" && videoRef.current) {
+      videoRef.current.play().catch(() => {});
+    }
+  }, [videoMode]);
+
+  const handlePlay = useCallback(() => setIsPlaying(true), []);
+  const handlePause = useCallback(() => setIsPlaying(false), []);
+
+  // Scale transform
+  const scaleTransform =
+    hoverEffect === "scale" && hovered ? "scale(1.03)" : "scale(1)";
+
+  return (
+    <Link
+      href={`/work/${project.slug}`}
+      className="block"
+      style={{ display: "block", width: "100%", height: "100%" }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={hoverEffect === "3d" ? handleMouseMove : undefined}
+    >
+      <div
+        ref={cardRef}
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          borderRadius: radius,
+          transition:
+            hoverEffect === "3d"
+              ? "transform 100ms ease-out"
+              : hoverEffect === "scale"
+                ? "transform 300ms ease"
+                : undefined,
+          transform: hoverEffect === "scale" ? scaleTransform : undefined,
+        }}
+      >
+        {/* Thumbnail image */}
+        {imgSrc ? (
+          <img
+            src={imgSrc}
+            alt={project.title}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: videoActive ? 0 : 1,
+              transition: "opacity 0.4s ease",
+            }}
+            onError={(e) => {
+              const target = e.currentTarget;
+              if (project.thumbnail_path && !target.dataset.fallback) {
+                const fallbackSrc = assetUrl(project.thumbnail_path);
+                if (fallbackSrc !== target.src) {
+                  target.dataset.fallback = "1";
+                  target.src = fallbackSrc;
+                }
+              }
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "#1a1a1a",
+            }}
+          >
+            <span style={{ fontSize: 12, color: "#666" }}>No thumbnail</span>
+          </div>
+        )}
+
+        {/* Cover video */}
+        {videoSrc && (
+          <video
+            ref={videoRef}
+            src={videoSrc}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: videoActive ? 1 : 0,
+              transition: "opacity 0.4s ease",
+            }}
+            muted
+            loop
+            playsInline
+            preload={videoMode === "autoloop" ? "auto" : "metadata"}
+            onCanPlay={handleVideoCanPlay}
+            onPlay={handlePlay}
+            onPause={handlePause}
+          />
+        )}
+
+        {/* Subtitle overlay */}
+        {showSubtitle && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              padding: "32px 16px 12px",
+              background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%)",
+              pointerEvents: "none",
+            }}
+          >
+            <h3
+              style={{
+                margin: 0,
+                fontSize: 14,
+                fontWeight: 500,
+                color: "#fff",
+                lineHeight: 1.3,
+              }}
+            >
+              {project.title}
+            </h3>
+            {project.subtitle && (
+              <p
+                style={{
+                  margin: "2px 0 0",
+                  fontSize: 12,
+                  color: "rgba(255,255,255,0.7)",
+                  lineHeight: 1.3,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {project.subtitle}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </Link>
+  );
+});