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

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useEffect, useSyncExternalStore, useMemo, useContext, useId } from 'react';
+import { createContext, useRef, useState, useEffect, useMemo, useSyncExternalStore, useContext, useId } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 // src/react/player-provider.tsx
@@ -2077,6 +2077,147 @@ function createPlayerStore(options) {
   return new CorePlayerStore(options);
 }
 
+// src/react/player-runtime-bridge.ts
+var RUNTIME_PENDING_ERROR = Object.freeze({
+  code: "unknown",
+  recoverable: true,
+  messageKey: "player.error.runtime-pending"
+});
+var RUNTIME_PENDING_RESULT = Object.freeze({
+  ok: false,
+  error: RUNTIME_PENDING_ERROR
+});
+function notify(listeners) {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function createPlayerRuntimeBridge(experienceConfig) {
+  let pendingState = createInitialPlayerState(experienceConfig);
+  let activeStore = null;
+  let activeCommands = null;
+  let unsubscribeStore = null;
+  let unsubscribeExperience = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const experienceListeners = /* @__PURE__ */ new Set();
+  const pendingResult = () => Promise.resolve(RUNTIME_PENDING_RESULT);
+  const commandsImplementation = {
+    load: (item) => activeCommands?.load(item) ?? pendingResult(),
+    setQueue: (queue, options) => activeCommands?.setQueue(queue, options) ?? pendingResult(),
+    activateContext: (options) => activeCommands?.activateContext(options) ?? pendingResult(),
+    appendToManualHistory: (contextId, item) => {
+      activeCommands?.appendToManualHistory(contextId, item);
+    },
+    play: () => activeCommands?.play() ?? pendingResult(),
+    pause: (options) => activeCommands?.pause(options) ?? Promise.resolve(),
+    stop: (options) => activeCommands?.stop(options) ?? Promise.resolve(),
+    togglePlayback: () => activeCommands?.togglePlayback() ?? pendingResult(),
+    seekTo: (seconds) => {
+      activeCommands?.seekTo(seconds);
+    },
+    seekBy: (deltaSeconds) => {
+      activeCommands?.seekBy(deltaSeconds);
+    },
+    setVolume: (volume) => {
+      activeCommands?.setVolume(volume);
+    },
+    toggleMute: () => {
+      activeCommands?.toggleMute();
+    },
+    setShuffle: (enabled) => {
+      activeCommands?.setShuffle(enabled);
+    },
+    setRepeatMode: (mode) => {
+      activeCommands?.setRepeatMode(mode);
+    },
+    next: () => activeCommands?.next() ?? pendingResult(),
+    previous: () => activeCommands?.previous() ?? pendingResult(),
+    retry: () => activeCommands?.retry() ?? pendingResult(),
+    clear: () => activeCommands?.clear() ?? Promise.resolve()
+  };
+  const commands = Object.freeze(commandsImplementation);
+  const experienceImplementation = {
+    getConfig: () => activeStore?.experience.getConfig() ?? pendingState.experienceConfig,
+    updateConfig: (patch) => {
+      if (activeStore !== null) {
+        activeStore.experience.updateConfig(patch);
+        return;
+      }
+      pendingState = createInitialPlayerState({
+        ...pendingState.experienceConfig,
+        ...patch
+      });
+      notify(listeners);
+      notify(experienceListeners);
+    },
+    resetConfig: () => {
+      if (activeStore !== null) {
+        activeStore.experience.resetConfig();
+        return;
+      }
+      pendingState = createInitialPlayerState(
+        PREVIEW_PLAYER_EXPERIENCE_CONFIG
+      );
+      notify(listeners);
+      notify(experienceListeners);
+    },
+    subscribe: (listener) => {
+      experienceListeners.add(listener);
+      return () => {
+        experienceListeners.delete(listener);
+      };
+    }
+  };
+  const experience = Object.freeze(experienceImplementation);
+  const storeImplementation = {
+    getState: () => activeStore?.getState() ?? pendingState,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    commands,
+    experience,
+    synchronizeFromMedia: (reason) => activeStore?.synchronizeFromMedia(reason) ?? Promise.resolve(),
+    destroy: () => activeStore?.destroy() ?? Promise.resolve()
+  };
+  const store = Object.freeze(storeImplementation);
+  const detachActiveStore = () => {
+    unsubscribeStore?.();
+    unsubscribeExperience?.();
+    unsubscribeStore = null;
+    unsubscribeExperience = null;
+    activeStore = null;
+    activeCommands = null;
+  };
+  const bridge = {
+    store,
+    attach(nextStore, nextCommands) {
+      detachActiveStore();
+      activeStore = nextStore;
+      activeCommands = nextCommands;
+      unsubscribeStore = nextStore.subscribe(() => {
+        notify(listeners);
+      });
+      unsubscribeExperience = nextStore.experience.subscribe(() => {
+        notify(experienceListeners);
+      });
+      notify(listeners);
+      notify(experienceListeners);
+      return () => {
+        if (activeStore !== nextStore) {
+          return;
+        }
+        detachActiveStore();
+        notify(listeners);
+        notify(experienceListeners);
+      };
+    }
+  };
+  return Object.freeze(bridge);
+}
+
 // src/react/runtime-commands.ts
 function activate(gain, options) {
   options.onUserActivation?.();
@@ -2216,7 +2357,10 @@ function PlayerProvider({
   const initialQueueItemIdRef = useRef(initialQueueItemId);
   const initialExperienceConfigRef = useRef(experienceConfig);
   const diagnosticListenerRef = useRef(onDiagnosticEvent);
-  const [runtime, setRuntime] = useState(null);
+  const [runtimeBridge] = useState(
+    () => createPlayerRuntimeBridge(experienceConfig)
+  );
+  const [runtimeStatus, setRuntimeStatus] = useState("pending");
   const [audioContextState, setAudioContextState] = useState("uninitialized");
   const [resolvedAudioMode, setResolvedAudioMode] = useState("web-audio");
   const [mediaSessionSupported, setMediaSessionSupported] = useState(false);
@@ -2295,6 +2439,7 @@ function PlayerProvider({
         });
       }
     });
+    const detachRuntime = runtimeBridge.attach(store, commands);
     mediaSessionController = createBrowserMediaSessionController({
       commands,
       getState: () => store.getState(),
@@ -2391,16 +2536,7 @@ function PlayerProvider({
     );
     window.addEventListener("pageshow", handlePageShow);
     window.addEventListener("focus", handleFocus);
-    const contextValue2 = {
-      store,
-      commands,
-      experience: store.experience,
-      audioContextState: "uninitialized",
-      audioMode: nextAudioMode,
-      mediaSessionSupported: activeMediaSessionController.supported,
-      mediaSessionActionsEnabled: false
-    };
-    setRuntime(contextValue2);
+    setRuntimeStatus("ready");
     void store.commands.setQueue(initialQueueRef.current, {
       ...initialQueueItemIdRef.current === void 0 ? {} : { startQueueItemId: initialQueueItemIdRef.current },
       autoplay: false
@@ -2419,21 +2555,35 @@ function PlayerProvider({
       }
       unsubscribeMediaSession();
       activeMediaSessionController.destroy();
-      setRuntime(
-        (current) => current?.store === store ? null : current
-      );
+      setRuntimeStatus("pending");
+      detachRuntime();
       void store.destroy();
     };
   }, [
-    audioMode
+    audioMode,
+    runtimeBridge
   ]);
-  const contextValue = runtime === null ? null : {
-    ...runtime,
-    audioContextState,
-    audioMode: resolvedAudioMode,
-    mediaSessionSupported,
-    mediaSessionActionsEnabled
-  };
+  const contextValue = useMemo(
+    () => ({
+      runtimeStatus,
+      store: runtimeBridge.store,
+      commands: runtimeBridge.store.commands,
+      experience: runtimeBridge.store.experience,
+      audioContextState,
+      audioMode: resolvedAudioMode,
+      mediaSessionSupported,
+      mediaSessionActionsEnabled
+    }),
+    [
+      audioContextState,
+      mediaSessionActionsEnabled,
+      mediaSessionSupported,
+      resolvedAudioMode,
+      runtimeBridge,
+      runtimeStatus
+    ]
+  );
+  const consumerTree = children ?? (runtimeStatus === "pending" ? loadingFallback : null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "audio",
@@ -2444,11 +2594,12 @@ function PlayerProvider({
         "data-media-session-actions": mediaSessionActionsEnabled ? "enabled" : "inactive",
         "data-media-session-supported": mediaSessionSupported ? "true" : "false",
         "data-player-audio": "true",
+        "data-player-runtime-status": runtimeStatus,
         preload: "metadata",
         ref: audioRef
       }
     ),
-    contextValue === null ? loadingFallback : /* @__PURE__ */ jsx(PlayerRuntimeContext.Provider, { value: contextValue, children })
+    /* @__PURE__ */ jsx(PlayerRuntimeContext.Provider, { value: contextValue, children: consumerTree })
   ] });
 }
 function MiniPlayerHost({
@@ -2511,6 +2662,7 @@ function usePlayer() {
     () => context.store.getState()
   );
   return {
+    runtimeStatus: context.runtimeStatus,
     state,
     commands: context.commands,
     experience: context.experience,
@@ -2799,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,
@@ -2989,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,
@@ -2996,78 +3230,51 @@ function BoundCompactPlayerView({
   contextId,
   contextMode,
   options,
+  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-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,
         {
-          className: "player-bound-compact__main",
-          "data-active": state.isActive ? "true" : "false",
-          "data-playback-context-id": contextId,
-          "data-playback-context-mode": contextMode,
-          "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
-              }
-            )
-          ]
+          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
     }
   );
 }
@@ -3087,6 +3294,7 @@ function BoundCompactPlayer({
       commands: bound.commands,
       contextId: context.id,
       contextMode: context.mode,
+      runtimeStatus: player.runtimeStatus,
       options: {
         seekCommitMode: player.state.experienceConfig.seekCommitMode,
         waveformOpacity: player.state.experienceConfig.waveformOpacity,