@morphika/andami 0.5.1 → 0.5.2

package/components/blocks/AudioBlockRenderer.tsx

@@ -1,286 +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 || "#4794E2";
-
-  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>
-  );
-}
+"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>
+  );
+}