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

package/dist/ui/index.d.ts

@@ -1,19 +1,27 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { C as PlayerViewProps, h as PlayerAppearance, c as PlaybackContextInput, Q as QueueItem, v as PlayerMediaItem, y as PlayerState, j as PlayerCommands, n as PlayerError, R as RepeatMode, f as PlaybackStatus, S as SeekCommitMode, D as PlayerWaveform } from '../player-BxNFzRq4.js';
+import { C as PlayerViewProps, h as PlayerAppearance, B as BoundPlayerCommands, a as BoundPlayerViewState, S as SeekCommitMode, d as PlaybackContextMode, v as PlayerMediaItem, y as PlayerState, j as PlayerCommands, n as PlayerError, R as RepeatMode, f as PlaybackStatus, D as PlayerWaveform } from '../player-BxNFzRq4.js';
 
 interface CompactPlayerProps extends PlayerViewProps {
     readonly className?: string;
 }
 declare function CompactPlayer({ appearance, className, commands, state, }: CompactPlayerProps): react.JSX.Element;
 
-interface BoundCompactPlayerProps {
+interface BoundCompactPlayerViewOptions {
+    readonly seekCommitMode: SeekCommitMode;
+    readonly waveformOpacity: number;
+    readonly waveformPlayedStateEnabled: boolean;
+}
+interface BoundCompactPlayerViewProps {
     readonly appearance: PlayerAppearance;
-    readonly context: PlaybackContextInput;
-    readonly queueItem: QueueItem;
+    readonly commands: BoundPlayerCommands;
+    readonly state: Readonly<BoundPlayerViewState>;
+    readonly options: Readonly<BoundCompactPlayerViewOptions>;
     readonly className?: string;
+    readonly contextId?: string;
+    readonly contextMode?: PlaybackContextMode;
 }
-declare function BoundCompactPlayer({ appearance, className, context, queueItem, }: BoundCompactPlayerProps): react.JSX.Element;
+declare function BoundCompactPlayerView({ appearance, className, commands, contextId, contextMode, options, state, }: BoundCompactPlayerViewProps): react.JSX.Element;
 
 interface DetailedPlayerProps extends PlayerViewProps {
     readonly className?: string;
@@ -148,4 +156,4 @@ interface WidePlayerProps extends PlayerViewProps {
 }
 declare function WidePlayer({ appearance, className, commands, state, }: WidePlayerProps): react.JSX.Element;
 
-export { Artwork, type ArtworkProps, BoundCompactPlayer, type BoundCompactPlayerProps, CompactPlayer, type CompactPlayerProps, DetailedPlayer, type DetailedPlayerProps, IconButton, type IconButtonProps, MiniPlayer, type MiniPlayerProps, PlayerErrorNotice, type PlayerErrorNoticeProps, PlayerStatus, type PlayerStatusProps, PlayerSurface, type PlayerSurfaceProps, PodcastPlayer, type PodcastPlayerProps, PopoverVolumeControl, type PopoverVolumeControlProps, PrimaryPlaybackButton, type PrimaryPlaybackButtonProps, QueuePanel, type QueuePanelProps, QueueToggle, type QueueToggleProps, SeekBar, type SeekBarProps, TimeReadout, type TimeReadoutProps, TrackMetadata, type TrackMetadataProps, TransportControls, type TransportControlsProps, VolumeControl, type VolumeControlProps, Waveform, type WaveformProps, WidePlayer, type WidePlayerProps, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };
+export { Artwork, type ArtworkProps, BoundCompactPlayerView, type BoundCompactPlayerViewOptions, type BoundCompactPlayerViewProps, CompactPlayer, type CompactPlayerProps, DetailedPlayer, type DetailedPlayerProps, IconButton, type IconButtonProps, MiniPlayer, type MiniPlayerProps, PlayerErrorNotice, type PlayerErrorNoticeProps, PlayerStatus, type PlayerStatusProps, PlayerSurface, type PlayerSurfaceProps, PodcastPlayer, type PodcastPlayerProps, PopoverVolumeControl, type PopoverVolumeControlProps, PrimaryPlaybackButton, type PrimaryPlaybackButtonProps, QueuePanel, type QueuePanelProps, QueueToggle, type QueueToggleProps, SeekBar, type SeekBarProps, TimeReadout, type TimeReadoutProps, TrackMetadata, type TrackMetadataProps, TransportControls, type TransportControlsProps, VolumeControl, type VolumeControlProps, Waveform, type WaveformProps, WidePlayer, type WidePlayerProps, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };

package/dist/ui/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useId, useEffect, useMemo, useSyncExternalStore, useContext } from 'react';
+import { useState, useRef, useId, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/player-primitives.tsx
@@ -781,79 +781,6 @@ function CompactPlayer({
     }
   );
 }
-var PlayerRuntimeContext = createContext(null);
-function usePlayerRuntimeContext() {
-  const context = useContext(PlayerRuntimeContext);
-  if (context === null) {
-    throw new Error("usePlayer must be used inside PlayerProvider.");
-  }
-  return context;
-}
-function usePlayer() {
-  const context = usePlayerRuntimeContext();
-  const state = useSyncExternalStore(
-    (listener) => context.store.subscribe(listener),
-    () => context.store.getState(),
-    () => context.store.getState()
-  );
-  return {
-    state,
-    commands: context.commands,
-    experience: context.experience,
-    audioContextState: context.audioContextState,
-    audioMode: context.audioMode,
-    mediaSessionSupported: context.mediaSessionSupported,
-    mediaSessionActionsEnabled: context.mediaSessionActionsEnabled
-  };
-}
-function deriveBoundPlayerViewState(playerState, contextId, queueItem) {
-  const isActive = playerState.activeContext?.id === contextId && playerState.currentQueueItemId === queueItem.queueItemId;
-  return Object.freeze({
-    queueItemId: queueItem.queueItemId,
-    item: isActive ? playerState.currentItem ?? queueItem.item : queueItem.item,
-    isActive,
-    status: isActive ? playerState.status : "paused",
-    currentTimeSec: isActive ? playerState.currentTimeSec : 0,
-    durationSec: isActive ? playerState.durationSec : queueItem.item.durationHintSec ?? null,
-    canSeek: isActive && playerState.canSeek,
-    isPlaying: isActive && playerState.status === "playing"
-  });
-}
-function useBoundPlayer({
-  context,
-  queueItem
-}) {
-  const player = usePlayer();
-  const state = useMemo(
-    () => deriveBoundPlayerViewState(player.state, context.id, queueItem),
-    [context.id, player.state, queueItem]
-  );
-  const commands = useMemo(() => {
-    const play = () => player.commands.activateContext({
-      contextId: context.id,
-      mode: context.mode,
-      ...context.label === void 0 ? {} : { label: context.label },
-      queue: context.mode === "manual-history" ? [queueItem] : context.queue,
-      startQueueItemId: queueItem.queueItemId,
-      autoplay: true
-    });
-    return Object.freeze({
-      play,
-      togglePlayback() {
-        if (player.state.activeContext?.id === context.id && player.state.currentQueueItemId === queueItem.queueItemId) {
-          return player.commands.togglePlayback();
-        }
-        return play();
-      },
-      seekTo(seconds) {
-        if (player.state.activeContext?.id === context.id && player.state.currentQueueItemId === queueItem.queueItemId && player.state.canSeek) {
-          player.commands.seekTo(seconds);
-        }
-      }
-    });
-  }, [context, player.commands, player.state, queueItem]);
-  return { state, commands };
-}
 function SeekBar({
   canSeek,
   className,
@@ -948,85 +875,80 @@ function SeekBar({
     }
   );
 }
-function BoundCompactPlayer({
+function BoundCompactPlayerView({
   appearance,
   className,
-  context,
-  queueItem
+  commands,
+  contextId,
+  contextMode,
+  options,
+  state
 }) {
-  const bound = useBoundPlayer({ context, queueItem });
-  const player = usePlayer();
-  const progress = bound.state.durationSec === null || bound.state.durationSec <= 0 ? 0 : bound.state.currentTimeSec / bound.state.durationSec;
+  const progress = state.durationSec === null || state.durationSec <= 0 ? 0 : state.currentTimeSec / state.durationSec;
   return /* @__PURE__ */ jsx(
     PlayerSurface,
     {
       appearance,
       className: ["player-bound-compact", className].filter(Boolean).join(" "),
-      label: `Inline player: ${queueItem.item.title}`,
+      label: `Inline player: ${state.item.title}`,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "player-bound-compact__main",
-          "data-active": bound.state.isActive ? "true" : "false",
-          "data-playback-context-id": context.id,
-          "data-playback-context-mode": context.mode,
-          "data-queue-item-id": queueItem.queueItemId,
+          "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: bound.state.isPlaying ? "Pause" : "Play",
+                label: state.isPlaying ? "Pause" : "Play",
                 onClick: () => {
-                  void bound.commands.togglePlayback();
+                  void commands.togglePlayback();
                 },
-                children: bound.state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
+                children: state.isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { size: 22 }) : /* @__PURE__ */ jsx(PlayIcon, { size: 22 })
               }
             ),
             /* @__PURE__ */ jsx(
               Artwork,
               {
                 className: "player-bound-compact__artwork",
-                item: bound.state.item
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TrackMetadata,
-              {
-                item: bound.state.item,
-                scrollTitle: bound.state.isPlaying
+                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: player.state.experienceConfig.waveformOpacity,
-                  playedStateEnabled: player.state.experienceConfig.waveformPlayedStateEnabled,
+                  opacity: options.waveformOpacity,
+                  playedStateEnabled: options.waveformPlayedStateEnabled,
                   progress,
-                  waveform: bound.state.item.waveform
+                  waveform: state.item.waveform
                 }
               ),
               /* @__PURE__ */ jsx(
                 TimeReadout,
                 {
-                  currentTimeSec: bound.state.currentTimeSec,
-                  durationSec: bound.state.durationSec
+                  currentTimeSec: state.currentTimeSec,
+                  durationSec: state.durationSec
                 }
               )
             ] }),
             /* @__PURE__ */ jsx(
               SeekBar,
               {
-                canSeek: bound.state.canSeek,
-                commitMode: player.state.experienceConfig.seekCommitMode,
-                currentTimeSec: bound.state.currentTimeSec,
-                durationSec: bound.state.durationSec,
-                label: `Seek in ${queueItem.item.title}`,
+                canSeek: state.canSeek,
+                commitMode: options.seekCommitMode,
+                currentTimeSec: state.currentTimeSec,
+                durationSec: state.durationSec,
+                label: `Seek in ${state.item.title}`,
                 onSeek: (seconds) => {
-                  bound.commands.seekTo(seconds);
+                  commands.seekTo(seconds);
                 },
-                status: bound.state.status
+                status: state.status
               }
             )
           ]
@@ -1510,6 +1432,6 @@ function WidePlayer({
   );
 }
 
-export { Artwork, BoundCompactPlayer, CompactPlayer, DetailedPlayer, IconButton, MiniPlayer, PlayerErrorNotice, PlayerStatus, PlayerSurface, PodcastPlayer, PopoverVolumeControl, PrimaryPlaybackButton, QueuePanel, QueueToggle, SeekBar, TimeReadout, TrackMetadata, TransportControls, VolumeControl, Waveform, WidePlayer, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };
+export { Artwork, BoundCompactPlayerView, CompactPlayer, DetailedPlayer, IconButton, MiniPlayer, PlayerErrorNotice, PlayerStatus, PlayerSurface, PodcastPlayer, PopoverVolumeControl, PrimaryPlaybackButton, QueuePanel, QueueToggle, SeekBar, TimeReadout, TrackMetadata, TransportControls, VolumeControl, Waveform, WidePlayer, clamp, formatTime, formatTimeAria, getErrorMessage, getNextRepeatMode, getRepeatLabel, getStatusLabel };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map