Shares the player docked at the bottom of every page with the whole app. The cards and previews that start playback read and drive it, and GlobalPlayer draws it. It is two contexts, one for the queue and the controls and one for the playhead alone, which changes several times a second. PlayerProvider provides both around the whole app.
Returns a key that identifies item whatever its stream URL, so that a
re-resolved track is still the same track. GlobalPlayer keys its tracklist
on it and tells a new item by it; PlayerProvider tells repeated failures of
one track by it.
Provided by PlayerProvider through PlayerContext. Cards and previews read what plays and call the controls; GlobalPlayer and MediaPlayer use the internal fields to report the media's state back.
-
autoplay: boolean
Whether the current item starts on mount. A restored session appears paused, since no user gesture is behind it; a fresh
play()autoplays. -
current: PlayerItem | null
Always
queue[queueIndex], or null when nothing plays. - hasNext: boolean
- hasPrevious: boolean
- next(): void
-
onEnded(): void
Called by MediaPlayer at its media's end, to play the next item.
-
onError(): void
Called by MediaPlayer when its media fails, to re-resolve a stream.
-
onPlayStateChange(playing: boolean): void
Called by MediaPlayer when its media starts or stops.
-
onTimeUpdate(): voidtime: number,duration: number
Called by MediaPlayer as its media plays.
-
play(item: PlayerItem): void
Plays
itemalone, replacing the queue. -
playAt(index: number): void
Plays the queue's item at
index, or restarts it when it is current. -
playQueue(): voiditems: PlayerItem[],startIndex?: number
Replaces the queue with
itemsand plays it fromstartIndex. - playing: boolean
-
previous(): void
Restarts the item after its first 3 seconds, else plays the previous one.
-
queue: PlayerItem[]
The queue. Every playback is a queue of at least one item, so single tracks and albums share one code path.
- queueIndex: number
-
resolving: boolean
True while a stream's URLs are re-resolved, which GlobalPlayer shows.
-
seekRef: { current: ((t: number) => void) | null; }
Where the mounted MediaPlayer registers its seek handle, for
seekTo. -
seekTo(time: number): void
Seeks a file or stream to
timeseconds. An embed doesn't move. -
startTime: number
Where MediaPlayer starts the current item, in seconds: not 0 only for an item restored from a previous session, or resumed after a re-resolve.
-
stop(): void
Empties the queue, which closes the player.
-
togglePlay(): void
Pauses or resumes a file or stream. An embed has its own controls.
-
toggleRef: { current: (() => void) | null; }
Where the mounted MediaPlayer registers its play/pause handle.
The fields of every PlayerItem, which GlobalPlayer's header shows.
-
artworkUrl: string
A raw URL, which
Thumbnailproxies when it must. -
dumpHref: string
The dump page the header's title links to.
-
subtitle: string
Shown under the title. It holds the artist, the site's name or the file's name.
- title: string
Provided by PlayerProvider through PlayerTimeContext, apart from the rest because it changes several times a second while something plays. Only what draws a position, like the dump page's audio preview, reads it, so the cards that read PlayerContext don't re-render with it.
-
currentTime: number
In seconds.
-
duration: number
In seconds, 0 until the media's metadata loads.
& { kind: "embed"; embedUrl: string; type: string; }
| (
& { kind: "file"; fileUrl: string; mimeType: string; waveformUrl?: string; }
| (
& { kind: "stream"; streamUrl: string; type: string; duration?: number; trackNum?: number; resolveUrl: string; resolveIndex: number; resolvedAt: number; embedUrl?: string; }
Built by the cards and previews that start playback, and held in
PlayerProvider's queue, which localStorage keeps across reloads. An embed
plays in the provider's iframe; a file (an upload) and a stream play in
MediaPlayer.
Given by PlayerTimeContext outside PlayerProvider.
Given by PlayerContext outside PlayerProvider: nothing plays and no control does anything. The tests' render helper starts from it.
The player's state and controls, from PlayerProvider.
The playhead of the current file or stream, from PlayerProvider.
Usage
import * as mod from "src/contexts/player/PlayerContext.ts";