@morphika/andami 0.5.0 → 0.5.2

package/components/blocks/AudioBlockRenderer.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AudioBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry } from "../../lib/asset-retry";
+
+/**
+ * AudioBlockRenderer — minimal custom audio player.
+ *
+ * Layout: optional cover art + (title / artist) + play button + progress bar + time.
+ * Accent color applies to the play button background and progress fill.
+ * Uses the HTML5 Audio element via a ref; progress + duration driven by
+ * timeupdate / loadedmetadata events.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || seconds < 0) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export default function AudioBlockRenderer({ block }: { block: AudioBlock }) {
+  const resolveAsset = useAssetUrl();
+
+  const src = resolveAsset(block.asset_path);
+  const coverSrc = block.cover_path ? resolveAsset(block.cover_path) : null;
+  const accent = block.accent_color || "#3580f9";
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "contained"] || widthStyleMap.contained);
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : "12px";
+
+  const autoplay = block.autoplay === true;
+  const loop = block.loop === true;
+  const initialMuted = block.muted === true;
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const progressRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(0);
+  const [muted, setMuted] = useState<boolean>(initialMuted);
+
+  useEffect(() => {
+    const a = audioRef.current;
+    if (!a) return;
+    const onTime = () => setCurrentTime(a.currentTime);
+    const onMeta = () => setDuration(a.duration || 0);
+    const onPlay = () => setIsPlaying(true);
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => setIsPlaying(false);
+    a.addEventListener("timeupdate", onTime);
+    a.addEventListener("loadedmetadata", onMeta);
+    a.addEventListener("durationchange", onMeta);
+    a.addEventListener("play", onPlay);
+    a.addEventListener("pause", onPause);
+    a.addEventListener("ended", onEnded);
+    return () => {
+      a.removeEventListener("timeupdate", onTime);
+      a.removeEventListener("loadedmetadata", onMeta);
+      a.removeEventListener("durationchange", onMeta);
+      a.removeEventListener("play", onPlay);
+      a.removeEventListener("pause", onPause);
+      a.removeEventListener("ended", onEnded);
+    };
+  }, []);
+
+  const togglePlay = useCallback(() => {
+    const a = audioRef.current;
+    if (!a) return;
+    if (a.paused) {
+      a.play().catch(() => { /* autoplay/permission rejection — leave paused */ });
+    } else {
+      a.pause();
+    }
+  }, []);
+
+  const seekFromEvent = useCallback((clientX: number) => {
+    const el = progressRef.current;
+    const a = audioRef.current;
+    if (!el || !a || !duration) return;
+    const rect = el.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    a.currentTime = pct * duration;
+    setCurrentTime(a.currentTime);
+  }, [duration]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+    seekFromEvent(e.clientX);
+  }, [seekFromEvent]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    seekFromEvent(e.clientX);
+  }, [seekFromEvent]);
+
+  const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = false;
+    (e.target as Element).releasePointerCapture?.(e.pointerId);
+  }, []);
+
+  const progressPct = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  const containerStyle: React.CSSProperties = {
+    ...widthStyle,
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "12px 16px",
+    background: "#fafafa",
+    border: "1px solid #ececec",
+    borderRadius,
+    boxShadow: block.shadow ? "0 8px 24px -12px rgba(0,0,0,0.25)" : undefined,
+    overflow: "hidden",
+  };
+
+  const hasMetaText = !!(block.title || block.artist);
+
+  return (
+    <div style={containerStyle}>
+      <audio
+        ref={audioRef}
+        src={src}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        preload="metadata"
+      />
+
+      {coverSrc && (
+        <div style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 8, overflow: "hidden", background: "#eee" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={coverSrc}
+            alt={block.alt || block.title || "Audio cover"}
+            onError={handleImageRetry}
+            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+          />
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={togglePlay}
+        aria-label={isPlaying ? "Pause" : "Play"}
+        style={{
+          width: 40,
+          height: 40,
+          flexShrink: 0,
+          borderRadius: "50%",
+          border: "none",
+          background: accent,
+          color: "#fff",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 0,
+        }}
+      >
+        {isPlaying ? (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+            <rect x="6" y="5" width="4" height="14" rx="1" />
+            <rect x="14" y="5" width="4" height="14" rx="1" />
+          </svg>
+        ) : (
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden style={{ marginLeft: 2 }}>
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        )}
+      </button>
+
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        {hasMetaText && (
+          <div style={{ display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }}>
+            {block.title && (
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#111", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.title}
+              </span>
+            )}
+            {block.artist && (
+              <span style={{ fontSize: 12, color: "#777", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.artist}
+              </span>
+            )}
+          </div>
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div
+            ref={progressRef}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+            role="slider"
+            aria-label="Playback position"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(progressPct)}
+            style={{
+              flex: 1,
+              height: 4,
+              background: "#e5e5e5",
+              borderRadius: 999,
+              position: "relative",
+              cursor: "pointer",
+              touchAction: "none",
+            }}
+          >
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                width: `${progressPct}%`,
+                background: accent,
+                borderRadius: 999,
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: `${progressPct}%`,
+                width: 10,
+                height: 10,
+                marginTop: -5,
+                marginLeft: -5,
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: `0 0 0 2px ${accent}`,
+              }}
+            />
+          </div>
+          <span style={{ fontSize: 11, color: "#777", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
+            {formatTime(currentTime)} / {formatTime(duration)}
+          </span>
+          <button
+            type="button"
+            onClick={() => setMuted((m) => !m)}
+            aria-label={muted ? "Unmute" : "Mute"}
+            style={{
+              width: 24,
+              height: 24,
+              flexShrink: 0,
+              border: "none",
+              background: "transparent",
+              color: "#777",
+              cursor: "pointer",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {muted ? (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                <line x1="23" y1="9" x2="17" y2="15" />
+                <line x1="17" y1="9" x2="23" y2="15" />
+              </svg>
+            ) : (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/blocks/BeforeAfterBlockRenderer.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { BeforeAfterBlock } from "../../lib/sanity/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
+
+/**
+ * BeforeAfterBlockRenderer — drag-slider comparator between two media assets.
+ *
+ * Supports image↔image, image↔video, video↔image, video↔video.
+ * Orientation is horizontal (left=before, right=after) or vertical
+ * (top=before, bottom=after). The "after" side is the one revealed as the
+ * user drags — clipped to the percentage the handle sits at.
+ *
+ * Interaction: drag-only (pointer events, works with touch via pointerType).
+ * Keyboard: left/right (or up/down in vertical mode) nudge the handle by 2%,
+ * shift+arrow by 10%. Home/End jump to 0/100.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+const aspectMap: Record<string, string | undefined> = {
+  auto: undefined,
+  "16:9": "16/9",
+  "4:3": "4/3",
+  "1:1": "1/1",
+  "21:9": "21/9",
+};
+
+function clamp(n: number, lo = 0, hi = 100): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+function BeforeAfterMedia({
+  type,
+  src,
+  alt,
+  autoplay,
+  loop,
+  muted,
+}: {
+  type: "image" | "video";
+  src: string;
+  alt: string;
+  autoplay: boolean;
+  loop: boolean;
+  muted: boolean;
+}) {
+  const commonStyle: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    userSelect: "none",
+    pointerEvents: "none",
+  };
+  if (type === "video") {
+    return (
+      <video
+        src={src}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        playsInline
+        preload={autoplay ? "auto" : "metadata"}
+        onError={handleVideoRetry}
+        style={commonStyle}
+      />
+    );
+  }
+  return (
+    /* eslint-disable-next-line @next/next/no-img-element */
+    <img
+      src={src}
+      alt={alt}
+      loading="lazy"
+      decoding="async"
+      draggable={false}
+      onError={handleImageRetry}
+      style={commonStyle}
+    />
+  );
+}
+
+export default function BeforeAfterBlockRenderer({ block }: { block: BeforeAfterBlock }) {
+  const resolveAsset = useAssetUrl();
+
+  const beforeType = block.before_media_type ?? "image";
+  const afterType = block.after_media_type ?? "image";
+  const orientation = block.orientation ?? "horizontal";
+  const initial = clamp(block.initial_position ?? 50);
+  const handleColor = block.handle_color || "#FFFFFF";
+
+  const beforeSrc = resolveAsset(block.before_asset_path);
+  const afterSrc = resolveAsset(block.after_asset_path);
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const aspect = isFill ? undefined : aspectMap[block.aspect_ratio ?? "16:9"] ?? "16/9";
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState<number>(initial);
+  const draggingRef = useRef(false);
+
+  const autoplay = block.video_autoplay !== false;
+  const loop = block.video_loop !== false;
+  const muted = block.video_muted !== false;
+
+  const updateFromEvent = useCallback((clientX: number, clientY: number) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const pct = orientation === "horizontal"
+      ? ((clientX - rect.left) / rect.width) * 100
+      : ((clientY - rect.top) / rect.height) * 100;
+    setPosition(clamp(pct));
+  }, [orientation]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = true;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+    updateFromEvent(e.clientX, e.clientY);
+  }, [updateFromEvent]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingRef.current) return;
+    updateFromEvent(e.clientX, e.clientY);
+  }, [updateFromEvent]);
+
+  const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    draggingRef.current = false;
+    (e.target as Element).releasePointerCapture?.(e.pointerId);
+  }, []);
+
+  const onKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = e.shiftKey ? 10 : 2;
+    const isHoriz = orientation === "horizontal";
+    if ((isHoriz && e.key === "ArrowLeft") || (!isHoriz && e.key === "ArrowUp")) {
+      e.preventDefault();
+      setPosition((p) => clamp(p - step));
+    } else if ((isHoriz && e.key === "ArrowRight") || (!isHoriz && e.key === "ArrowDown")) {
+      e.preventDefault();
+      setPosition((p) => clamp(p + step));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setPosition(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setPosition(100);
+    }
+  }, [orientation]);
+
+  useEffect(() => {
+    setPosition(initial);
+  }, [initial]);
+
+  const afterClip = orientation === "horizontal"
+    ? `inset(0 0 0 ${position}%)`
+    : `inset(${position}% 0 0 0)`;
+
+  const handleWrapperStyle: React.CSSProperties = orientation === "horizontal"
+    ? {
+        position: "absolute",
+        top: 0, bottom: 0,
+        left: `${position}%`,
+        width: 2,
+        transform: "translateX(-1px)",
+        background: handleColor,
+        pointerEvents: "none",
+      }
+    : {
+        position: "absolute",
+        left: 0, right: 0,
+        top: `${position}%`,
+        height: 2,
+        transform: "translateY(-1px)",
+        background: handleColor,
+        pointerEvents: "none",
+      };
+
+  const knobStyle: React.CSSProperties = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 40,
+    height: 40,
+    borderRadius: "50%",
+    background: handleColor,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+  };
+
+  const frameStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden", touchAction: "none", cursor: orientation === "horizontal" ? "ew-resize" : "ns-resize" }
+    : { position: "relative", ...widthStyle, aspectRatio: aspect, borderRadius, overflow: "hidden", touchAction: "none", cursor: orientation === "horizontal" ? "ew-resize" : "ns-resize" };
+
+  const shadowClass = block.shadow ? "shadow-lg" : "";
+
+  // Arrow icon inside the knob — points along the slider axis
+  const ArrowIcon = orientation === "horizontal" ? (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M5 4 L1 9 L5 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M13 4 L17 9 L13 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ) : (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M4 5 L9 1 L14 5" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 13 L9 17 L14 13" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      role="slider"
+      aria-label="Before / after comparison"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(position)}
+      aria-orientation={orientation}
+      tabIndex={0}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onKeyDown={onKeyDown}
+      className={shadowClass}
+      style={frameStyle}
+    >
+      {/* Before layer — full frame */}
+      <div style={{ position: "absolute", inset: 0 }}>
+        <BeforeAfterMedia
+          type={beforeType}
+          src={beforeSrc}
+          alt={block.before_alt || ""}
+          autoplay={autoplay}
+          loop={loop}
+          muted={muted}
+        />
+      </div>
+
+      {/* After layer — clipped by slider position */}
+      <div style={{ position: "absolute", inset: 0, clipPath: afterClip, WebkitClipPath: afterClip }}>
+        <BeforeAfterMedia
+          type={afterType}
+          src={afterSrc}
+          alt={block.after_alt || ""}
+          autoplay={autoplay}
+          loop={loop}
+          muted={muted}
+        />
+      </div>
+
+      {/* Divider line + knob */}
+      <div style={handleWrapperStyle}>
+        <div style={knobStyle}>{ArrowIcon}</div>
+      </div>
+    </div>
+  );
+}