@gentomiyano/optimized-web-audio-player 0.2.2 → 0.2.3

package/README.md

@@ -39,6 +39,20 @@ The public npm registry, scoped package name, and release workflow are fixed.
 Initial npm publication still requires the scope owner's authentication.
 Release and consumer pinning rules are documented in `docs/RELEASING.md`.
 
+## PLAYER-UI-CONTRACT-01 Bound Compact
+
+Version 0.2.3 makes the occurrence-bound inline Player use the standard
+Compact visual implementation. `CompactPlayer` and `BoundCompactPlayerView`
+now share one surface, metadata grid, waveform signal, seek overlay, tokens,
+and container-query behavior; the former `player-bound-compact` surface and
+its separate active panel are removed.
+
+The React API and playback semantics are unchanged. An inactive occurrence
+shows its own metadata at zero and activates its context only on Play. The
+active occurrence exposes global Play / Pause, time, and seek while the
+existing Global Mini continues to use the same Store and audio element. See
+`docs/PLAYER-UI-CONTRACT-01-BOUND-COMPACT.md`.
+
 ## WP-04.4 SSR-transparent Provider
 
 Version 0.2.2 renders consumer children inside the same Player Context from

package/dist/react/index.js

@@ -2951,100 +2951,6 @@ function IconButton({
     }
   );
 }
-function SeekBar({
-  canSeek,
-  className,
-  commitMode,
-  currentTimeSec,
-  durationSec,
-  label = "Seek",
-  onSeek,
-  status
-}) {
-  const duration = durationSec !== null && Number.isFinite(durationSec) && durationSec > 0 ? durationSec : 0;
-  const disabled = !canSeek || duration === 0 || status === "loading";
-  const safeCurrentTime = clamp(currentTimeSec, 0, duration);
-  const [previewTime, setPreviewTime] = useState(safeCurrentTime);
-  const previewProgress = duration === 0 ? 0 : clamp(previewTime / duration, 0, 1) * 100;
-  const isAdjusting = useRef(false);
-  const lastCommitted = useRef(null);
-  useEffect(() => {
-    if (!isAdjusting.current) {
-      setPreviewTime(safeCurrentTime);
-    }
-  }, [safeCurrentTime]);
-  function updatePreview(value) {
-    const nextValue = clamp(value, 0, duration);
-    isAdjusting.current = true;
-    setPreviewTime(nextValue);
-    if (commitMode === "live") {
-      onSeek(nextValue);
-      lastCommitted.current = nextValue;
-    }
-  }
-  function commitPreview(value = previewTime) {
-    const nextValue = clamp(value, 0, duration);
-    if (disabled || !isAdjusting.current || commitMode === "live" && lastCommitted.current === nextValue) {
-      isAdjusting.current = false;
-      return;
-    }
-    onSeek(nextValue);
-    lastCommitted.current = nextValue;
-    isAdjusting.current = false;
-  }
-  function cancelPreview() {
-    isAdjusting.current = false;
-    lastCommitted.current = null;
-    setPreviewTime(safeCurrentTime);
-  }
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: ["player-seek", className].filter(Boolean).join(" "),
-      "data-disabled": disabled ? "true" : "false",
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "player-visually-hidden", children: label }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "player-seek__progress",
-            style: { width: `${String(disabled ? 0 : previewProgress)}%` }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            "aria-label": label,
-            "aria-valuetext": formatTimeAria(previewTime),
-            disabled,
-            max: duration || 1,
-            min: 0,
-            onBlur: (event) => {
-              commitPreview(Number(event.currentTarget.value));
-            },
-            onChange: (event) => {
-              updatePreview(Number(event.currentTarget.value));
-            },
-            onKeyUp: (event) => {
-              commitPreview(Number(event.currentTarget.value));
-            },
-            onPointerDown: () => {
-              isAdjusting.current = true;
-            },
-            onPointerCancel: cancelPreview,
-            onPointerUp: (event) => {
-              commitPreview(Number(event.currentTarget.value));
-            },
-            step: 0.1,
-            type: "range",
-            value: disabled ? 0 : previewTime
-          }
-        )
-      ]
-    }
-  );
-}
 var FALLBACK_PEAKS = [
   0.16,
   0.24,
@@ -3141,6 +3047,182 @@ function Waveform({
     }
   );
 }
+function CompactPlayerLayout({
+  appearance,
+  className,
+  contextId,
+  contextMode,
+  currentTimeSec,
+  durationSec,
+  errorNotice,
+  isActive,
+  isPlaying,
+  item,
+  label,
+  primaryControl,
+  queueItemId,
+  runtimeStatus,
+  seekControl,
+  status,
+  trailingControl,
+  waveformOpacity,
+  waveformPlayedStateEnabled
+}) {
+  const progress = durationSec === null || durationSec <= 0 ? 0 : currentTimeSec / durationSec;
+  return /* @__PURE__ */ jsxs(
+    PlayerSurface,
+    {
+      appearance,
+      className: ["player-compact", className].filter(Boolean).join(" "),
+      label,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "player-compact__main",
+            ...isActive === void 0 ? {} : { "data-active": isActive ? "true" : "false" },
+            "data-has-status": status === void 0 ? "false" : "true",
+            "data-has-trailing-control": trailingControl === void 0 ? "false" : "true",
+            "data-playback-context-id": contextId,
+            "data-playback-context-mode": contextMode,
+            "data-player-runtime-status": runtimeStatus,
+            "data-queue-item-id": queueItemId,
+            children: [
+              primaryControl,
+              /* @__PURE__ */ jsx(Artwork, { className: "player-compact__artwork", item }),
+              /* @__PURE__ */ jsx(TrackMetadata, { item, scrollTitle: isPlaying }),
+              /* @__PURE__ */ jsxs("div", { className: "player-compact__signal", children: [
+                status,
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "player-compact__scrubber",
+                    "data-seek-enabled": seekControl === void 0 ? "false" : "true",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Waveform,
+                        {
+                          opacity: waveformOpacity,
+                          playedStateEnabled: waveformPlayedStateEnabled,
+                          progress,
+                          waveform: item?.waveform
+                        }
+                      ),
+                      seekControl
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TimeReadout,
+                  {
+                    currentTimeSec,
+                    durationSec
+                  }
+                )
+              ] }),
+              trailingControl
+            ]
+          }
+        ),
+        errorNotice
+      ]
+    }
+  );
+}
+function SeekBar({
+  canSeek,
+  className,
+  commitMode,
+  currentTimeSec,
+  durationSec,
+  label = "Seek",
+  onSeek,
+  status
+}) {
+  const duration = durationSec !== null && Number.isFinite(durationSec) && durationSec > 0 ? durationSec : 0;
+  const disabled = !canSeek || duration === 0 || status === "loading";
+  const safeCurrentTime = clamp(currentTimeSec, 0, duration);
+  const [previewTime, setPreviewTime] = useState(safeCurrentTime);
+  const previewProgress = duration === 0 ? 0 : clamp(previewTime / duration, 0, 1) * 100;
+  const isAdjusting = useRef(false);
+  const lastCommitted = useRef(null);
+  useEffect(() => {
+    if (!isAdjusting.current) {
+      setPreviewTime(safeCurrentTime);
+    }
+  }, [safeCurrentTime]);
+  function updatePreview(value) {
+    const nextValue = clamp(value, 0, duration);
+    isAdjusting.current = true;
+    setPreviewTime(nextValue);
+    if (commitMode === "live") {
+      onSeek(nextValue);
+      lastCommitted.current = nextValue;
+    }
+  }
+  function commitPreview(value = previewTime) {
+    const nextValue = clamp(value, 0, duration);
+    if (disabled || !isAdjusting.current || commitMode === "live" && lastCommitted.current === nextValue) {
+      isAdjusting.current = false;
+      return;
+    }
+    onSeek(nextValue);
+    lastCommitted.current = nextValue;
+    isAdjusting.current = false;
+  }
+  function cancelPreview() {
+    isAdjusting.current = false;
+    lastCommitted.current = null;
+    setPreviewTime(safeCurrentTime);
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: ["player-seek", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "player-visually-hidden", children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "player-seek__progress",
+            style: { width: `${String(disabled ? 0 : previewProgress)}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": label,
+            "aria-valuetext": formatTimeAria(previewTime),
+            disabled,
+            max: duration || 1,
+            min: 0,
+            onBlur: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            onChange: (event) => {
+              updatePreview(Number(event.currentTarget.value));
+            },
+            onKeyUp: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            onPointerDown: () => {
+              isAdjusting.current = true;
+            },
+            onPointerCancel: cancelPreview,
+            onPointerUp: (event) => {
+              commitPreview(Number(event.currentTarget.value));
+            },
+            step: 0.1,
+            type: "range",
+            value: disabled ? 0 : previewTime
+          }
+        )
+      ]
+    }
+  );
+}
 function BoundCompactPlayerView({
   appearance,
   className,
@@ -3151,77 +3233,48 @@ function BoundCompactPlayerView({
   runtimeStatus,
   state
 }) {
-  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
   return /* @__PURE__ */ jsx(
-    PlayerSurface,
+    CompactPlayerLayout,
     {
       appearance,
-      className: ["player-bound-compact", className].filter(Boolean).join(" "),
+      ...className === void 0 ? {} : { className },
+      ...contextId === void 0 ? {} : { contextId },
+      ...contextMode === void 0 ? {} : { contextMode },
+      currentTimeSec: state.currentTimeSec,
+      durationSec: state.durationSec,
+      isActive: state.isActive,
+      isPlaying: state.isPlaying,
+      item: state.item,
       label: `Inline player: ${state.item.title}`,
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      primaryControl: /* @__PURE__ */ jsx(
+        IconButton,
         {
-          className: "player-bound-compact__main",
-          "data-active": state.isActive ? "true" : "false",
-          "data-playback-context-id": contextId,
-          "data-playback-context-mode": contextMode,
-          "data-player-runtime-status": runtimeStatus,
-          "data-queue-item-id": state.queueItemId,
-          children: [
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                className: "player-play-button",
-                label: state.isPlaying ? "Pause" : "Play",
-                onClick: () => {
-                  void commands.togglePlayback();
-                },
-                children: state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Artwork,
-              {
-                className: "player-bound-compact__artwork",
-                item: state.item
-              }
-            ),
-            /* @__PURE__ */ jsx(TrackMetadata, { item: state.item, scrollTitle: state.isPlaying }),
-            /* @__PURE__ */ jsxs("div", { className: "player-bound-compact__signal", children: [
-              /* @__PURE__ */ jsx(
-                Waveform,
-                {
-                  opacity: options.waveformOpacity,
-                  playedStateEnabled: options.waveformPlayedStateEnabled,
-                  progress,
-                  waveform: state.item.waveform
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TimeReadout,
-                {
-                  currentTimeSec: state.currentTimeSec,
-                  durationSec: state.durationSec
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              SeekBar,
-              {
-                canSeek: state.canSeek,
-                commitMode: options.seekCommitMode,
-                currentTimeSec: state.currentTimeSec,
-                durationSec: state.durationSec,
-                label: `Seek in ${state.item.title}`,
-                onSeek: (seconds) => {
-                  commands.seekTo(seconds);
-                },
-                status: state.status
-              }
-            )
-          ]
+          className: "player-play-button",
+          label: state.isPlaying ? "Pause" : "Play",
+          onClick: () => {
+            void commands.togglePlayback();
+          },
+          children: state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
+        }
+      ),
+      queueItemId: state.queueItemId,
+      ...runtimeStatus === void 0 ? {} : { runtimeStatus },
+      seekControl: /* @__PURE__ */ jsx(
+        SeekBar,
+        {
+          canSeek: state.canSeek,
+          commitMode: options.seekCommitMode,
+          currentTimeSec: state.currentTimeSec,
+          durationSec: state.durationSec,
+          label: `Seek in ${state.item.title}`,
+          onSeek: (seconds) => {
+            commands.seekTo(seconds);
+          },
+          status: state.status
         }
-      )
+      ),
+      waveformOpacity: options.waveformOpacity,
+      waveformPlayedStateEnabled: options.waveformPlayedStateEnabled
     }
   );
 }