Audio Store

pnpmnpmyarnbun
pnpm add zustand
Copy

Copyimport {
  useAudioStore,
  calculateNextIndex,
  calculatePreviousIndex,
  canUseDOM,
  type AudioStore,
  type RepeatMode,
  type InsertMode,
} from "@/lib/audio-store"

Copyconst currentTime = useAudioStore((s) => s.currentTime)
const isPlaying = useAudioStore((s) => s.isPlaying)

Copyfunction PlayerStatus() {
  const currentTrack = useAudioStore((s) => s.currentTrack)
  const duration = useAudioStore((s) => s.duration)
  const isPlaying = useAudioStore((s) => s.isPlaying)
  
  return (
    <p>
      {currentTrack?.title} ({duration}s) — {isPlaying ? "▶" : "⏸"}
    </p>
  )
}

Copyconst nextIndex = calculateNextIndex(
  queue,
  currentQueueIndex,
  shuffleEnabled,
  repeatMode
)
// Returns: number (track index or -1 if none)

Copyconst prevIndex = calculatePreviousIndex(
  queue,
  currentQueueIndex,
  shuffleEnabled,
  repeatMode
)
// Returns: number (track index or -1 if none)

Copyif (canUseDOM()) {
  // Browser-only code
}

Copyimport { useAudioStore } from "@/lib/audio-store"
import { formatDuration } from "@/lib/audio"
 
function PlayerStatus() {
  // Access state with selectors
  const currentTrack = useAudioStore((s) => s.currentTrack)
  const currentTime = useAudioStore((s) => s.currentTime)
  const duration = useAudioStore((s) => s.duration)
  const isPlaying = useAudioStore((s) => s.isPlaying)
  
  // Access actions
  const togglePlay = useAudioStore((s) => s.togglePlay)
  const next = useAudioStore((s) => s.next)
  const previous = useAudioStore((s) => s.previous)
 
  return (
    <div>
      <p>Track: {currentTrack?.title ?? "None"}</p>
      <p>Time: {formatDuration(currentTime)} / {formatDuration(duration)}</p>
      <p>Status: {isPlaying ? "▶" : "⏸"}</p>
      <div className="flex gap-2">
        <button onClick={previous}>◀ Prev</button>
        <button onClick={togglePlay}>{isPlaying ? "⏸" : "▶"}</button>
        <button onClick={next}>Next ▶</button>
      </div>
    </div>
  )
}

Copyfunction QueueManager() {
  const queue = useAudioStore((s) => s.queue)
  const addToQueue = useAudioStore((s) => s.addToQueue)
  const removeFromQueue = useAudioStore((s) => s.removeFromQueue)
  const clearQueue = useAudioStore((s) => s.clearQueue)
 
  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={() => addToQueue(newTrack, "last")}>Add Track</button>
        <button onClick={clearQueue}>Clear</button>
      </div>
      <div className="space-y-1">
        {queue.map((track) => (
          <div key={track.id} className="flex justify-between">
            <span>{track.title}</span>
            <button onClick={() => removeFromQueue(track.id)}>Remove</button>
          </div>
        ))}
      </div>
    </div>
  )
}

Copyimport { useAudioStore } from "@/lib/audio-store"
 
// Read state without React subscriptions
const state = useAudioStore.getState()
console.log(state.isPlaying)
 
// Call actions directly
await useAudioStore.getState().play()
 
// Subscribe to changes (returns unsubscribe function)
const unsubscribe = useAudioStore.subscribe(
  (s) => s.isPlaying,
  (isPlaying) => console.log("Playing:", isPlaying)
)