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

package/dist/react/index.js

@@ -563,11 +563,14 @@ var BrowserMediaSessionController = class {
       }
       return;
     }
+    const intrinsicContext = item.contentContext;
+    const creatorName = item.creatorName ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.artistName : void 0);
+    const collectionTitle = item.collectionTitle ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.releaseTitle : intrinsicContext?.sourceType === "podcast-episode" ? intrinsicContext.programTitle : void 0);
     const identity = [
       item.id,
       item.title,
-      item.creatorName ?? "",
-      item.collectionTitle ?? "",
+      creatorName ?? "",
+      collectionTitle ?? "",
       item.artwork?.url ?? ""
     ].join("\0");
     if (identity === this.#metadataIdentity || this.#createMetadata === void 0) {
@@ -576,8 +579,8 @@ var BrowserMediaSessionController = class {
     try {
       session.metadata = this.#createMetadata({
         title: item.title,
-        artist: item.creatorName ?? "",
-        album: item.collectionTitle ?? "",
+        artist: creatorName ?? "",
+        album: collectionTitle ?? "",
         artwork: item.artwork === void 0 ? [] : [{ src: item.artwork.url }]
       });
       this.#metadataIdentity = identity;
@@ -1108,6 +1111,7 @@ var CorePlayerStore = class {
   #handlingEnded = false;
   #destroyed = false;
   #lastSavedPodcastPositions = /* @__PURE__ */ new Map();
+  #pendingSeekRetrySec = null;
   #progressSaveChain = Promise.resolve();
   constructor(options) {
     this.#media = options.media;
@@ -1436,6 +1440,7 @@ var CorePlayerStore = class {
       return failed(INVALID_QUEUE_ERROR);
     }
     const config = this.#state.experienceConfig;
+    this.#pendingSeekRetrySec = null;
     const replacingCurrent = this.#state.currentItem !== null;
     let transitionError = null;
     if (replacingCurrent) {
@@ -1662,13 +1667,24 @@ var CorePlayerStore = class {
       curve: fadeCurve
     });
     if (!this.#isCurrentCommand(version)) {
-      return;
+      return OK_RESULT;
     }
     if (fadeOut.error !== null) {
       this.#setState({ error: fadeOut.error });
     }
     this.#setState({ status: "seeking" });
-    this.#media.seekTo(target);
+    try {
+      this.#media.seekTo(target);
+      this.#pendingSeekRetrySec = null;
+    } catch {
+      const error = createPlayerError("seek", true);
+      this.#pendingSeekRetrySec = target;
+      this.#setState({
+        status: this.#media.isPaused() ? "paused" : "playing",
+        error
+      });
+      return failed(error);
+    }
     this.#setState({ currentTimeSec: target });
     const fadeIn = await runFade(this.#gain, {
       target: 1,
@@ -1676,7 +1692,7 @@ var CorePlayerStore = class {
       curve: fadeCurve
     });
     if (!this.#isCurrentCommand(version)) {
-      return;
+      return OK_RESULT;
     }
     if (fadeIn.error !== null) {
       this.#setState({ error: fadeIn.error });
@@ -1684,6 +1700,7 @@ var CorePlayerStore = class {
     this.#setState({
       status: this.#media.isPaused() ? "paused" : "playing"
     });
+    return OK_RESULT;
   }
   #setVolume(volume) {
     if (this.#destroyed) {
@@ -1794,6 +1811,18 @@ var CorePlayerStore = class {
     if (this.#state.currentQueueIndex === null || this.#state.error === null || !this.#state.error.recoverable) {
       return failed(this.#state.error ?? NO_ITEM_ERROR);
     }
+    if (this.#state.error.code === "seek" && this.#pendingSeekRetrySec !== null) {
+      const target = this.#pendingSeekRetrySec;
+      const version2 = this.#beginCommand(this.#desiredPlayback);
+      const config = this.#state.experienceConfig;
+      this.#setState({ error: null });
+      return this.#performSeek(
+        version2,
+        target,
+        config.seekFadeMs,
+        config.fadeCurve
+      );
+    }
     const version = this.#beginCommand("playing");
     this.#setState({ error: null, needsUserGesture: false });
     return this.#selectQueueIndex(
@@ -1807,6 +1836,7 @@ var CorePlayerStore = class {
       return;
     }
     const version = this.#beginCommand("paused");
+    this.#pendingSeekRetrySec = null;
     const config = this.#state.experienceConfig;
     const halted = await this.#halt(version, {
       fadeDurationMs: config.pauseFadeOutMs,
@@ -2891,6 +2921,9 @@ function TrackMetadata({
   scrollTitle = false,
   status
 }) {
+  const intrinsicContext = item?.contentContext;
+  const creatorName = item?.creatorName ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.artistName : void 0);
+  const collectionTitle = item?.collectionTitle ?? (intrinsicContext?.sourceType === "release-track" ? intrinsicContext.releaseTitle : intrinsicContext?.sourceType === "podcast-episode" ? intrinsicContext.programTitle : void 0);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2905,8 +2938,8 @@ function TrackMetadata({
           },
           item?.title ?? "No media selected"
         ),
-        /* @__PURE__ */ jsx("span", { className: "player-creator", children: item === null ? "Select media to begin" : item.creatorName ?? "Artist unavailable" }),
-        item?.collectionTitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "player-collection", children: item.collectionTitle })
+        /* @__PURE__ */ jsx("span", { className: "player-creator", children: item === null ? "Select media to begin" : creatorName ?? "Artist unavailable" }),
+        collectionTitle === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "player-collection", children: collectionTitle })
       ]
     }
   );
@@ -2951,100 +2984,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 +3080,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 +3266,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
     }
   );
 }