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

package/README.md

@@ -39,6 +39,19 @@ 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`.
 
+## WP-04.4 SSR-transparent Provider
+
+Version 0.2.2 renders consumer children inside the same Player Context from
+server rendering through hydration and Runtime readiness. `usePlayer()`
+exposes `runtimeStatus` as `pending` or `ready`; pending state uses an inert,
+SSR-safe Store bridge and never creates browser audio infrastructure.
+
+`BoundCompactPlayer` renders its occurrence metadata while pending. Runtime
+attachment updates the shared external Store without replacing or remounting
+the consumer subtree. The built-package smoke now performs server rendering,
+hydration, duplicate-ID, stable-sentinel, shared Mini Player, and single-audio
+checks. See `docs/WP-04.4-SSR-TRANSPARENT-PROVIDER.md`.
+
 ## WP-04.3 React package boundary
 
 Version 0.2.1 keeps React Context consumers in the `/react` entrypoint and

package/dist/config/index.d.ts

@@ -1,4 +1,4 @@
-import { p as PlayerExperienceConfig, y as PlayerState } from '../player-BxNFzRq4.js';
+import { p as PlayerExperienceConfig, z as PlayerState } from '../player-CE714iU_.js';
 import { PlayerExperienceConfigValidationResult } from '../contracts/index.js';
 
 declare const PLAYER_EXPERIENCE_CONFIG_SCHEMA_VERSION: 2;

package/dist/consumer/index.d.ts

@@ -1,4 +1,4 @@
-import { Q as QueueItem, u as PlayerMediaAdapter } from '../player-BxNFzRq4.js';
+import { Q as QueueItem, u as PlayerMediaAdapter } from '../player-CE714iU_.js';
 
 interface PlayerQueueCandidate<TSource> {
     /** Host-owned stable identity for this occurrence in a queue context. */

package/dist/contracts/index.d.ts

@@ -1,5 +1,5 @@
-import { p as PlayerExperienceConfig } from '../player-BxNFzRq4.js';
-export { A as ActivatePlaybackContextOptions, B as BoundPlayerCommands, a as BoundPlayerViewState, F as FadeCurve, M as MediaKind, P as PauseOptions, b as PersistMode, c as PlaybackContextInput, d as PlaybackContextMode, e as PlaybackContextState, f as PlaybackStatus, g as PlaybackTransitionCause, h as PlayerAppearance, i as PlayerCommandResult, j as PlayerCommands, k as PlayerConfigImportResult, l as PlayerDebugController, m as PlayerDebugSnapshot, n as PlayerError, o as PlayerErrorCode, q as PlayerExperienceConfigEnvelope, r as PlayerExperienceConfigStore, s as PlayerExperiencePreset, t as PlayerHostConfig, u as PlayerMediaAdapter, v as PlayerMediaItem, w as PlayerMediaSource, x as PlayerMediaSyncReason, y as PlayerState, z as PlayerStore, C as PlayerViewProps, D as PlayerWaveform, E as PodcastPreviousMode, Q as QueueItem, R as RepeatMode, S as SeekCommitMode, G as SetQueueOptions, H as StopOptions } from '../player-BxNFzRq4.js';
+import { p as PlayerExperienceConfig } from '../player-CE714iU_.js';
+export { A as ActivatePlaybackContextOptions, B as BoundPlayerCommands, a as BoundPlayerViewState, F as FadeCurve, M as MediaKind, P as PauseOptions, b as PersistMode, c as PlaybackContextInput, d as PlaybackContextMode, e as PlaybackContextState, f as PlaybackStatus, g as PlaybackTransitionCause, h as PlayerAppearance, i as PlayerCommandResult, j as PlayerCommands, k as PlayerConfigImportResult, l as PlayerDebugController, m as PlayerDebugSnapshot, n as PlayerError, o as PlayerErrorCode, q as PlayerExperienceConfigEnvelope, r as PlayerExperienceConfigStore, s as PlayerExperiencePreset, t as PlayerHostConfig, u as PlayerMediaAdapter, v as PlayerMediaItem, w as PlayerMediaSource, x as PlayerMediaSyncReason, y as PlayerRuntimeStatus, z as PlayerState, C as PlayerStore, D as PlayerViewProps, E as PlayerWaveform, G as PodcastPreviousMode, Q as QueueItem, R as RepeatMode, S as SeekCommitMode, H as SetQueueOptions, I as StopOptions } from '../player-CE714iU_.js';
 
 interface ConfigValidationSuccess {
     readonly ok: true;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { ConfigValidationFailure, ConfigValidationSuccess, PlayerExperienceConfigValidationResult } from './contracts/index.js';
-export { A as ActivatePlaybackContextOptions, B as BoundPlayerCommands, a as BoundPlayerViewState, F as FadeCurve, M as MediaKind, P as PauseOptions, b as PersistMode, c as PlaybackContextInput, d as PlaybackContextMode, e as PlaybackContextState, f as PlaybackStatus, g as PlaybackTransitionCause, h as PlayerAppearance, i as PlayerCommandResult, j as PlayerCommands, k as PlayerConfigImportResult, l as PlayerDebugController, m as PlayerDebugSnapshot, n as PlayerError, o as PlayerErrorCode, p as PlayerExperienceConfig, q as PlayerExperienceConfigEnvelope, r as PlayerExperienceConfigStore, s as PlayerExperiencePreset, t as PlayerHostConfig, u as PlayerMediaAdapter, v as PlayerMediaItem, w as PlayerMediaSource, x as PlayerMediaSyncReason, y as PlayerState, z as PlayerStore, C as PlayerViewProps, D as PlayerWaveform, E as PodcastPreviousMode, Q as QueueItem, R as RepeatMode, S as SeekCommitMode, G as SetQueueOptions, H as StopOptions } from './player-BxNFzRq4.js';
+export { A as ActivatePlaybackContextOptions, B as BoundPlayerCommands, a as BoundPlayerViewState, F as FadeCurve, M as MediaKind, P as PauseOptions, b as PersistMode, c as PlaybackContextInput, d as PlaybackContextMode, e as PlaybackContextState, f as PlaybackStatus, g as PlaybackTransitionCause, h as PlayerAppearance, i as PlayerCommandResult, j as PlayerCommands, k as PlayerConfigImportResult, l as PlayerDebugController, m as PlayerDebugSnapshot, n as PlayerError, o as PlayerErrorCode, p as PlayerExperienceConfig, q as PlayerExperienceConfigEnvelope, r as PlayerExperienceConfigStore, s as PlayerExperiencePreset, t as PlayerHostConfig, u as PlayerMediaAdapter, v as PlayerMediaItem, w as PlayerMediaSource, x as PlayerMediaSyncReason, y as PlayerRuntimeStatus, z as PlayerState, C as PlayerStore, D as PlayerViewProps, E as PlayerWaveform, G as PodcastPreviousMode, Q as QueueItem, R as RepeatMode, S as SeekCommitMode, H as SetQueueOptions, I as StopOptions } from './player-CE714iU_.js';
 export { PLAYER_EXPERIENCE_CONFIG_LIMITS, PLAYER_EXPERIENCE_CONFIG_SCHEMA_VERSION, PREVIEW_PLAYER_EXPERIENCE_CONFIG, createInitialPlayerState, parsePlayerExperienceConfigJson, resolvePlayerExperienceConfig, serializePlayerExperienceConfig, validatePlayerExperienceConfig, validatePlayerExperienceConfigOverride } from './config/index.js';
 export { AudioSampleEncoding, FutureUploadFormat, MEDIA_DELIVERY_CONTRACT_VERSION, MediaAccessClass, MediaDeliveryDescriptor, MediaDeliverySourceReference, MediaLoudnessMetadata, MediaSourceRole, MediaStorageReferences, MediaUploadEvidence, MediaUploadValidationResult, NormalizedUploadIdentity, PlaybackSourceResolveErrorCode, PlaybackSourceResolveReason, PlaybackSourceResolveRequest, PlaybackSourceResolveResult, PlayerDeliveryHostAdapter, PlayerMediaDescriptor, ProcessedMediaMetadata, ResolvedPlaybackSource, SupportedUploadFormat, UploadHeaderFormat, UploadValidationError, UploadValidationErrorCode, WaveformPeaksV1, validateMediaUploadEvidence, validateWaveformPeaks } from './media-delivery/index.js';
 export { GainPort, GainTransition, PlayerPersistencePort, PodcastProgress, PodcastProgressPort } from './ports/index.js';
-export { M as MediaElementPort, a as MediaElementStateSnapshot, P as PlayerMediaEvent, b as PlayerMediaEventListener, c as PlayerMediaEventType } from './media-element-DyMO-PhK.js';
+export { M as MediaElementPort, a as MediaElementStateSnapshot, P as PlayerMediaEvent, b as PlayerMediaEventListener, c as PlayerMediaEventType } from './media-element-vFtmw4mQ.js';

package/dist/media-delivery/index.d.ts

@@ -1,4 +1,4 @@
-import { w as PlayerMediaSource, v as PlayerMediaItem } from '../player-BxNFzRq4.js';
+import { w as PlayerMediaSource, v as PlayerMediaItem } from '../player-CE714iU_.js';
 
 declare const MEDIA_DELIVERY_CONTRACT_VERSION: 1;
 type SupportedUploadFormat = "wav" | "mp3";

package/dist/{media-element-DyMO-PhK.d.ts → media-element-vFtmw4mQ.d.ts}

@@ -1,4 +1,4 @@
-import { n as PlayerError, w as PlayerMediaSource } from './player-BxNFzRq4.js';
+import { n as PlayerError, w as PlayerMediaSource } from './player-CE714iU_.js';
 
 type PlayerMediaEventType = "loadstart" | "loadedmetadata" | "canplay" | "play" | "playing" | "pause" | "waiting" | "stalled" | "seeking" | "seeked" | "timeupdate" | "ended" | "error" | "durationchange" | "volumechange";
 interface PlayerMediaEvent {

package/dist/{player-BxNFzRq4.d.ts → player-CE714iU_.d.ts}

@@ -1,4 +1,5 @@
 type PlaybackStatus = "idle" | "loading" | "playing" | "paused" | "seeking" | "ended" | "error";
+type PlayerRuntimeStatus = "pending" | "ready";
 type PlaybackTransitionCause = "user-play" | "user-pause" | "user-stop" | "natural-end" | "os-interruption" | "background-suspension" | "autoplay-blocked" | "source-error";
 type PlayerMediaSyncReason = "visibilitychange" | "pageshow" | "focus" | "audio-context-statechange" | "manual";
 type RepeatMode = "off" | "all" | "one";
@@ -261,4 +262,4 @@ interface PlayerDebugController {
     exportProductionConfigJson(): string;
 }
 
-export type { ActivatePlaybackContextOptions as A, BoundPlayerCommands as B, PlayerViewProps as C, PlayerWaveform as D, PodcastPreviousMode as E, FadeCurve as F, SetQueueOptions as G, StopOptions as H, MediaKind as M, PauseOptions as P, QueueItem as Q, RepeatMode as R, SeekCommitMode as S, BoundPlayerViewState as a, PersistMode as b, PlaybackContextInput as c, PlaybackContextMode as d, PlaybackContextState as e, PlaybackStatus as f, PlaybackTransitionCause as g, PlayerAppearance as h, PlayerCommandResult as i, PlayerCommands as j, PlayerConfigImportResult as k, PlayerDebugController as l, PlayerDebugSnapshot as m, PlayerError as n, PlayerErrorCode as o, PlayerExperienceConfig as p, PlayerExperienceConfigEnvelope as q, PlayerExperienceConfigStore as r, PlayerExperiencePreset as s, PlayerHostConfig as t, PlayerMediaAdapter as u, PlayerMediaItem as v, PlayerMediaSource as w, PlayerMediaSyncReason as x, PlayerState as y, PlayerStore as z };
+export type { ActivatePlaybackContextOptions as A, BoundPlayerCommands as B, PlayerStore as C, PlayerViewProps as D, PlayerWaveform as E, FadeCurve as F, PodcastPreviousMode as G, SetQueueOptions as H, StopOptions as I, MediaKind as M, PauseOptions as P, QueueItem as Q, RepeatMode as R, SeekCommitMode as S, BoundPlayerViewState as a, PersistMode as b, PlaybackContextInput as c, PlaybackContextMode as d, PlaybackContextState as e, PlaybackStatus as f, PlaybackTransitionCause as g, PlayerAppearance as h, PlayerCommandResult as i, PlayerCommands as j, PlayerConfigImportResult as k, PlayerDebugController as l, PlayerDebugSnapshot as m, PlayerError as n, PlayerErrorCode as o, PlayerExperienceConfig as p, PlayerExperienceConfigEnvelope as q, PlayerExperienceConfigStore as r, PlayerExperiencePreset as s, PlayerHostConfig as t, PlayerMediaAdapter as u, PlayerMediaItem as v, PlayerMediaSource as w, PlayerMediaSyncReason as x, PlayerRuntimeStatus as y, PlayerState as z };

package/dist/ports/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FadeCurve } from '../player-BxNFzRq4.js';
-export { M as MediaElementPort, a as MediaElementStateSnapshot, P as PlayerMediaEvent, b as PlayerMediaEventListener, c as PlayerMediaEventType } from '../media-element-DyMO-PhK.js';
+import { F as FadeCurve } from '../player-CE714iU_.js';
+export { M as MediaElementPort, a as MediaElementStateSnapshot, P as PlayerMediaEvent, b as PlayerMediaEventListener, c as PlayerMediaEventType } from '../media-element-vFtmw4mQ.js';
 
 interface GainTransition {
     readonly durationMs: number;

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { j as PlayerCommands, x as PlayerMediaSyncReason, Q as QueueItem, p as PlayerExperienceConfig, z as PlayerStore, r as PlayerExperienceConfigStore, y as PlayerState, c as PlaybackContextInput, a as BoundPlayerViewState, B as BoundPlayerCommands, h as PlayerAppearance } from '../player-BxNFzRq4.js';
-import { c as PlayerMediaEventType, a as MediaElementStateSnapshot } from '../media-element-DyMO-PhK.js';
+import { j as PlayerCommands, x as PlayerMediaSyncReason, Q as QueueItem, p as PlayerExperienceConfig, y as PlayerRuntimeStatus, C as PlayerStore, r as PlayerExperienceConfigStore, z as PlayerState, c as PlaybackContextInput, a as BoundPlayerViewState, B as BoundPlayerCommands, h as PlayerAppearance } from '../player-CE714iU_.js';
+import { c as PlayerMediaEventType, a as MediaElementStateSnapshot } from '../media-element-vFtmw4mQ.js';
 
 type PlayerAudioMode = "auto" | "web-audio" | "html-media";
 type ResolvedPlayerAudioMode = "web-audio" | "html-media";
@@ -44,6 +44,7 @@ interface PlayerProviderProps {
     readonly initialQueue?: readonly QueueItem[];
     readonly initialQueueItemId?: string;
     readonly experienceConfig?: Partial<PlayerExperienceConfig>;
+    /** Used only when children is null or undefined while Runtime is pending. */
     readonly loadingFallback?: ReactNode;
     /**
      * auto uses native HTML audio on iOS/iPadOS and Web Audio elsewhere.
@@ -54,6 +55,7 @@ interface PlayerProviderProps {
     readonly onDiagnosticEvent?: PlayerRuntimeDiagnosticListener;
 }
 interface PlayerRuntimeContextValue {
+    readonly runtimeStatus: PlayerRuntimeStatus;
     readonly store: PlayerStore;
     readonly commands: PlayerCommands;
     readonly experience: PlayerExperienceConfigStore;
@@ -73,6 +75,7 @@ interface MiniPlayerHostProps {
 declare function MiniPlayerHost({ children, className, onInsetChange, visible, }: MiniPlayerHostProps): react.JSX.Element | null;
 
 interface UsePlayerResult {
+    readonly runtimeStatus: PlayerRuntimeStatus;
     readonly state: Readonly<PlayerState>;
     readonly commands: PlayerCommands;
     readonly experience: PlayerExperienceConfigStore;
@@ -102,4 +105,4 @@ interface BoundCompactPlayerProps {
 }
 declare function BoundCompactPlayer({ appearance, className, context, queueItem, }: BoundCompactPlayerProps): react.JSX.Element;
 
-export { BoundCompactPlayer, type BoundCompactPlayerProps, MiniPlayerHost, type MiniPlayerHostProps, PlayerProvider, type PlayerProviderProps, type PlayerRuntimeContextValue, type PlayerRuntimeDiagnosticEvent, type PlayerRuntimeDiagnosticListener, type PlayerRuntimeDiagnosticPayload, type UseBoundPlayerOptions, type UseBoundPlayerResult, type UsePlayerResult, deriveBoundPlayerViewState, useBoundPlayer, usePlayer };
+export { BoundCompactPlayer, type BoundCompactPlayerProps, MiniPlayerHost, type MiniPlayerHostProps, PlayerProvider, type PlayerProviderProps, type PlayerRuntimeContextValue, type PlayerRuntimeDiagnosticEvent, type PlayerRuntimeDiagnosticListener, type PlayerRuntimeDiagnosticPayload, PlayerRuntimeStatus, type UseBoundPlayerOptions, type UseBoundPlayerResult, type UsePlayerResult, deriveBoundPlayerViewState, useBoundPlayer, usePlayer };

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,
@@ -2996,6 +3148,7 @@ function BoundCompactPlayerView({
   contextId,
   contextMode,
   options,
+  runtimeStatus,
   state
 }) {
   const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
@@ -3012,6 +3165,7 @@ function BoundCompactPlayerView({
           "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(
@@ -3087,6 +3241,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,