use-playlist
Hook for managing playback queue, shuffle, and repeat modes
Installation
Install the hook
npx shadcn add @limeplay/use-playlistAdd to PlayerHooks
Import the usePlaylistStates hook in your existing PlayerHooks component.
import React from "react"
import { usePlaylistStates } from "@/hooks/limeplay/use-playlist"
export const PlayerHooks = React.memo(() => {
usePlaylistStates()
return null
})Add to Store
import { createPlaylistStore, PlaylistStore } from "@/hooks/limeplay/use-playlist"
export type TypeMediaStore = PlaylistStore & {}
export function createMediaStore(initProps?: Partial<CreateMediaStoreProps>) {
const mediaStore = create<TypeMediaStore>()((...etc) => ({
...createPlaylistStore(...etc),
...initProps,
}))
return mediaStore
}Example Usage
import { usePlaylist } from "@/hooks/limeplay/use-playlist"
export function PlaylistControls() {
const { next, previous, toggleShuffle, setRepeatMode } = usePlaylist({
onLoadItem: async (item) => {
// Load the item into the player
console.log("Loading", item)
}
})
return (
<div>
<button onClick={previous}>Previous</button>
<button onClick={next}>Next</button>
<button onClick={toggleShuffle}>Shuffle</button>
<button onClick={() => setRepeatMode('all')}>Repeat All</button>
</div>
)
}Understanding
The use-playlist hook provides a robust queue management system. It handles:
- Queue Management: Add, remove, reorder items.
- Navigation: Next, previous, skip to index.
- Modes: Shuffle and Repeat (All, One, Off).
- History: Tracks played items for previous button navigation.
It works in conjunction with usePlaylistStates which listens for the ended event to automatically advance the queue.
API Reference
usePlaylistStates()
Sets up event listeners (like ended) to handle automatic playlist advancement.
usePlaylist(options)
Options
Prop
Type
Returns
Prop
Type
Store State
Prop
Type