@morphika/andami 0.2.26 → 0.4.0

package/components/blocks/ProjectCarouselBlockRenderer.tsx

@@ -0,0 +1,527 @@
+"use client";
+
+/**
+ * ProjectCarouselBlockRenderer — Public site renderer for a horizontal
+ * carousel of projects ("keep browsing" pattern at the end of a project
+ * page, but usable anywhere).
+ *
+ * Selection is automatic (latest / random), with optional exclusion of the
+ * project currently being viewed (detected from the pathname on
+ * `/work/[slug]` pages). Fetch endpoint is shared with `ProjectGridBlock`
+ * (`/api/projects`) but no code is linked between the two — changing one
+ * renderer never breaks the other.
+ *
+ * Carousel is native CSS scroll-snap with JS-driven arrow / dot controls
+ * and a ResizeObserver-measured card width that respects a fractional
+ * `cards_per_view` (e.g. 3.5 shows half of the next card to hint "more").
+ */
+
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  memo,
+} from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useAssetUrl, useThumbUrl } from "../../lib/contexts/AssetContext";
+import { useViewport } from "../../lib/hooks/useViewport";
+import type { ProjectCarouselBlock } from "../../lib/sanity/types";
+import type { DeviceViewport } from "../../lib/builder/types";
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+interface ApiProject {
+  _id?: string;
+  slug: string | { current: string };
+  title?: string;
+  seo_description?: string;
+  thumbnail_path?: string;
+  cover_video?: string;
+  published_at?: string;
+}
+
+interface ResolvedProject {
+  slug: string;
+  title: string;
+  subtitle: string;
+  thumbnail_path?: string;
+  cover_video?: string;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────
+
+/** Fisher–Yates shuffle, seeded by Math.random. In-place for simplicity. */
+function shuffleInPlace<T>(arr: T[]): T[] {
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+
+/** Normalize a slug that may come as `"foo"` or `{ current: "foo" }`. */
+function extractSlug(slug: string | { current: string } | undefined | null): string | null {
+  if (!slug) return null;
+  return typeof slug === "string" ? slug : slug.current ?? null;
+}
+
+/** Extract the project slug from a /work/[slug] pathname (or return null). */
+export function extractCurrentProjectSlug(pathname: string | null): string | null {
+  if (!pathname) return null;
+  const match = pathname.match(/^\/work\/([^/?#]+)/);
+  return match ? match[1] : null;
+}
+
+/** Resolve how many cards should fit in the viewport given the block config. */
+export function resolveCardsPerView(
+  block: Pick<ProjectCarouselBlock, "cards_per_view_desktop" | "cards_per_view_tablet" | "cards_per_view_phone">,
+  viewport: DeviceViewport,
+): number {
+  if (viewport === "phone") return block.cards_per_view_phone ?? 1.2;
+  if (viewport === "tablet") return block.cards_per_view_tablet ?? 2.2;
+  return block.cards_per_view_desktop ?? 3.5;
+}
+
+/** Compute card pixel width given container width, cards-per-view, and gap. */
+export function computeCardWidth(
+  containerWidth: number,
+  cardsPerView: number,
+  gap: number,
+): number {
+  if (cardsPerView <= 0 || containerWidth <= 0) return 0;
+  // cpv cards + (cpv - 1) gaps = containerWidth → W = (cw - (cpv-1)*gap) / cpv
+  const w = (containerWidth - (cardsPerView - 1) * gap) / cardsPerView;
+  return Math.max(0, w);
+}
+
+/** Pick the final list of projects to render based on the block's source config. */
+export function selectCarouselProjects(
+  all: ResolvedProject[],
+  block: Pick<ProjectCarouselBlock, "source_mode" | "max_projects" | "exclude_current">,
+  currentProjectSlug: string | null,
+): ResolvedProject[] {
+  const filtered =
+    block.exclude_current !== false && currentProjectSlug
+      ? all.filter((p) => p.slug !== currentProjectSlug)
+      : all;
+
+  const ordered =
+    block.source_mode === "auto_random"
+      ? shuffleInPlace([...filtered])
+      : filtered;
+
+  const count = Math.max(1, Math.min(20, block.max_projects ?? 8));
+  return ordered.slice(0, count);
+}
+
+// ─── Card component ──────────────────────────────────────────────────
+
+const ProjectCard = memo(function ProjectCard({
+  project,
+  aspectRatio,
+  showTitle,
+  showSubtitle,
+  borderRadius,
+  hoverEffect,
+  videoMode,
+  cardWidth,
+  entranceStyle,
+  assetUrl,
+  thumbUrl,
+}: {
+  project: ResolvedProject;
+  aspectRatio: string;
+  showTitle: boolean;
+  showSubtitle: boolean;
+  borderRadius: number;
+  hoverEffect: "scale" | "none";
+  videoMode: "off" | "hover" | "autoloop";
+  cardWidth: number;
+  entranceStyle: React.CSSProperties;
+  assetUrl: (p: string) => string;
+  thumbUrl: (p: string) => string;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const thumbSrc = project.thumbnail_path ? thumbUrl(project.thumbnail_path) : null;
+  const videoSrc = project.cover_video ? assetUrl(project.cover_video) : null;
+
+  // Play/pause video according to mode
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || videoMode === "off" || !videoSrc) return;
+    if (videoMode === "autoloop") {
+      video.play().catch(() => {});
+    } else if (videoMode === "hover") {
+      if (isHovered) video.play().catch(() => {});
+      else { video.pause(); video.currentTime = 0; }
+    }
+  }, [isHovered, videoMode, videoSrc]);
+
+  return (
+    <Link
+      href={`/work/${project.slug}`}
+      className="flex flex-col no-underline group"
+      style={{
+        flex: `0 0 ${cardWidth}px`,
+        scrollSnapAlign: "start",
+        ...entranceStyle,
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Thumbnail area */}
+      <div
+        className="relative w-full overflow-hidden bg-black/5"
+        style={{
+          aspectRatio: aspectRatio.replace("/", " / "),
+          borderRadius: borderRadius ? `${borderRadius}px` : undefined,
+          transform: hoverEffect === "scale" && isHovered ? "scale(1.02)" : "scale(1)",
+          transition: "transform 300ms cubic-bezier(0.22, 1, 0.36, 1)",
+        }}
+      >
+        {thumbSrc && (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={thumbSrc}
+            alt={project.title || ""}
+            loading="lazy"
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        )}
+        {videoSrc && videoMode !== "off" && (
+          <video
+            ref={videoRef}
+            src={videoSrc}
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover"
+            style={{
+              opacity: videoMode === "autoloop" || (videoMode === "hover" && isHovered) ? 1 : 0,
+              transition: "opacity 200ms ease",
+            }}
+          />
+        )}
+      </div>
+
+      {/* Title + subtitle */}
+      {(showTitle || showSubtitle) && (
+        <div className="mt-3 px-0.5">
+          {showTitle && project.title && (
+            <p className="text-[14px] font-medium text-[var(--brand-text,#111)] leading-tight truncate">
+              {project.title}
+            </p>
+          )}
+          {showSubtitle && project.subtitle && (
+            <p className="text-[12px] text-[var(--brand-text-muted,#888)] leading-snug mt-0.5 truncate">
+              {project.subtitle}
+            </p>
+          )}
+        </div>
+      )}
+    </Link>
+  );
+});
+
+// ─── Main component ──────────────────────────────────────────────────
+
+export default function ProjectCarouselBlockRenderer({
+  block,
+}: {
+  block: ProjectCarouselBlock;
+}) {
+  const assetUrl = useAssetUrl();
+  const thumbUrl = useThumbUrl();
+  const viewport = useViewport();
+  const pathname = usePathname();
+
+  const trackRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const roRef = useRef<ResizeObserver | null>(null);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [allProjects, setAllProjects] = useState<ResolvedProject[]>([]);
+  const [fetchError, setFetchError] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isHoveringTrack, setIsHoveringTrack] = useState(false);
+
+  // ── Config resolved ────────────────────────────────────────────
+  const gap = block.gap ?? 16;
+  const aspectRatio = block.aspect_ratio ?? "4/3";
+  const showTitle = block.show_title !== false;
+  const showSubtitle = block.show_subtitle === true;
+  const borderRadius = block.border_radius ?? 0;
+  const hoverEffect = block.hover_effect ?? "scale";
+  const videoMode = block.video_mode ?? "off";
+  const showArrows = block.show_arrows !== false;
+  const showDots = block.show_dots === true;
+  const snapScroll = block.snap_scroll !== false;
+  const cardEntrance = block.card_entrance;
+
+  const cardsPerView = resolveCardsPerView(block, viewport);
+  const cardWidth = useMemo(
+    () => computeCardWidth(containerWidth, cardsPerView, gap),
+    [containerWidth, cardsPerView, gap],
+  );
+
+  const currentSlug = extractCurrentProjectSlug(pathname);
+
+  const projects = useMemo(
+    () => selectCarouselProjects(allProjects, block, currentSlug),
+    [allProjects, block, currentSlug],
+  );
+
+  // ── Measure container width via ResizeObserver ─────────────────
+  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);
+      }
+    });
+    roRef.current = ro;
+    ro.observe(node);
+
+    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(() => {
+    setFetchError(false);
+    fetch("/api/projects")
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`API ${r.status}`))))
+      .then((data: { projects?: ApiProject[] }) => {
+        const resolved: ResolvedProject[] = [];
+        for (const proj of data.projects || []) {
+          const slug = extractSlug(proj.slug);
+          if (!slug) continue;
+          resolved.push({
+            slug,
+            title: proj.title || slug,
+            subtitle: proj.seo_description || "",
+            thumbnail_path: proj.thumbnail_path,
+            cover_video: proj.cover_video,
+          });
+        }
+        setAllProjects(resolved);
+      })
+      .catch(() => setFetchError(true));
+  }, []);
+
+  // ── Track scroll position → active index (for dots + arrow disabling) ──
+  const handleScroll = useCallback(() => {
+    const track = trackRef.current;
+    if (!track || cardWidth === 0) return;
+    const idx = Math.round(track.scrollLeft / (cardWidth + gap));
+    setActiveIndex(Math.max(0, Math.min(projects.length - 1, idx)));
+  }, [cardWidth, gap, projects.length]);
+
+  // ── Arrow controls ─────────────────────────────────────────────
+  const scrollByPage = useCallback((dir: -1 | 1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const step = (cardWidth + gap) * Math.max(1, Math.floor(cardsPerView));
+    track.scrollBy({ left: step * dir, behavior: "smooth" });
+  }, [cardWidth, gap, cardsPerView]);
+
+  const scrollToIndex = useCallback((idx: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+    track.scrollTo({ left: (cardWidth + gap) * idx, behavior: "smooth" });
+  }, [cardWidth, gap]);
+
+  // ── Error state ────────────────────────────────────────────────
+  if (fetchError) {
+    return (
+      <div className="py-8 text-center text-sm text-neutral-500">
+        Unable to load projects
+      </div>
+    );
+  }
+
+  if (projects.length === 0) {
+    // Either still loading (transient) or no projects after exclusion
+    return (
+      <div ref={containerCallbackRef} className="relative w-full">
+        {/* Reserve space so the carousel doesn't jump once projects load */}
+        <div style={{ aspectRatio: `${aspectRatio.replace("/", " / ")}` }} />
+      </div>
+    );
+  }
+
+  // ── Arrow disabled states ──────────────────────────────────────
+  const canScrollPrev = activeIndex > 0;
+  const canScrollNext = activeIndex < projects.length - Math.floor(cardsPerView);
+
+  return (
+    <div
+      ref={containerCallbackRef}
+      className="relative w-full"
+      onMouseEnter={() => setIsHoveringTrack(true)}
+      onMouseLeave={() => setIsHoveringTrack(false)}
+    >
+      {/* Scroll track */}
+      <div
+        ref={trackRef}
+        onScroll={handleScroll}
+        className="flex overflow-x-auto no-scrollbar"
+        style={{
+          gap: `${gap}px`,
+          scrollSnapType: snapScroll ? "x mandatory" : undefined,
+          scrollBehavior: "smooth",
+          WebkitOverflowScrolling: "touch",
+        }}
+      >
+        {projects.map((project, idx) => {
+          const enabled = cardEntrance?.enabled;
+          const preset = cardEntrance?.preset ?? "slide-up";
+          const delay = (cardEntrance?.stagger_delay ?? 80) * idx;
+          const duration = cardEntrance?.duration ?? 500;
+          const entranceStyle: React.CSSProperties = enabled
+            ? {
+                animation: `carousel-card-${preset} ${duration}ms cubic-bezier(0.22,1,0.36,1) ${delay}ms both`,
+              }
+            : {};
+          return (
+            <ProjectCard
+              key={project.slug}
+              project={project}
+              aspectRatio={aspectRatio}
+              showTitle={showTitle}
+              showSubtitle={showSubtitle}
+              borderRadius={borderRadius}
+              hoverEffect={hoverEffect}
+              videoMode={videoMode}
+              cardWidth={cardWidth}
+              entranceStyle={entranceStyle}
+              assetUrl={assetUrl}
+              thumbUrl={thumbUrl}
+            />
+          );
+        })}
+      </div>
+
+      {/* Arrow controls — visible on hover (desktop), hidden on touch */}
+      {showArrows && projects.length > Math.floor(cardsPerView) && (
+        <>
+          <button
+            type="button"
+            onClick={() => scrollByPage(-1)}
+            disabled={!canScrollPrev}
+            aria-label="Previous projects"
+            className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 backdrop-blur-sm border border-black/10 shadow-md flex items-center justify-center transition-opacity disabled:opacity-30 disabled:cursor-not-allowed hover:bg-white"
+            style={{
+              opacity: isHoveringTrack ? 1 : 0,
+              pointerEvents: isHoveringTrack ? "auto" : "none",
+              transition: "opacity 200ms ease",
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={() => scrollByPage(1)}
+            disabled={!canScrollNext}
+            aria-label="Next projects"
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 backdrop-blur-sm border border-black/10 shadow-md flex items-center justify-center transition-opacity disabled:opacity-30 disabled:cursor-not-allowed hover:bg-white"
+            style={{
+              opacity: isHoveringTrack ? 1 : 0,
+              pointerEvents: isHoveringTrack ? "auto" : "none",
+              transition: "opacity 200ms ease",
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </button>
+        </>
+      )}
+
+      {/* Dots */}
+      {showDots && projects.length > 1 && (
+        <div className="flex justify-center gap-1.5 mt-4">
+          {projects.map((p, idx) => (
+            <button
+              key={p.slug}
+              type="button"
+              onClick={() => scrollToIndex(idx)}
+              aria-label={`Go to project ${idx + 1}`}
+              className="transition-all"
+              style={{
+                width: activeIndex === idx ? 24 : 6,
+                height: 6,
+                borderRadius: 999,
+                background:
+                  activeIndex === idx
+                    ? "var(--brand-text, #111)"
+                    : "var(--brand-text-muted, #888)",
+                opacity: activeIndex === idx ? 0.9 : 0.3,
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Inline keyframes for card entrance presets — scoped per-render
+          through unique animation names so multiple carousels co-exist. */}
+      <style>{CAROUSEL_KEYFRAMES}</style>
+
+      {/* Hide native scrollbar without breaking scrollability */}
+      <style>{SCROLLBAR_HIDE_CSS}</style>
+    </div>
+  );
+}
+
+// ─── Scoped styles ───────────────────────────────────────────────────
+
+const CAROUSEL_KEYFRAMES = `
+@keyframes carousel-card-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes carousel-card-slide-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes carousel-card-scale {
+  from { opacity: 0; transform: scale(0.94); }
+  to { opacity: 1; transform: scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  [class*="carousel-card-"] { animation: none !important; }
+}
+`;
+
+const SCROLLBAR_HIDE_CSS = `
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+`;

package/components/blocks/ShaderCanvas.tsx

@@ -342,14 +342,18 @@ export default function ShaderCanvas({ src, config, className, style }: ShaderCa
         canvas.removeEventListener("mousemove", onMouseMove);
         canvas.removeEventListener("mouseenter", onMouseEnter);
         canvas.removeEventListener("mouseleave", onMouseLeave);
+      }
 
-        // Attempt to lose context cleanly
-        const gl = canvas.getContext("webgl");
-        if (gl) {
-          const ext = gl.getExtension("WEBGL_lose_context");
-          if (ext) ext.loseContext();
-        }
+      // Lose the ACTIVE context (the one OGL created), not a fresh one.
+      // Calling canvas.getContext("webgl") on a canvas that already has a
+      // context returns null or a noop, leaving the real context alive.
+      const renderer = rendererRef.current as { gl?: WebGLRenderingContext | WebGL2RenderingContext } | null;
+      const activeGl = renderer?.gl;
+      if (activeGl) {
+        const ext = activeGl.getExtension("WEBGL_lose_context");
+        if (ext) ext.loseContext();
       }
+      rendererRef.current = null;
 
       window.removeEventListener("scroll", onScroll);
     };