+
-
),
},
- "youtube-music": {
+ "video-player": {
component: () => (
- (null)
const [panelRect, setPanelRect] = useState({
- height: 0,
- left: 0,
+ height: "100%",
+ left: "100%",
top: 0,
width: 0,
})
@@ -37,8 +37,8 @@ export function BlockPreviewWithToolbar({
if (!panelRef.current) return
const rect = panelRef.current.getBoundingClientRect()
setPanelRect({
- height: rect.height,
- left: rect.left,
+ height: rect.height as any,
+ left: rect.left as any,
top: rect.top,
width: rect.width,
})
diff --git a/apps/www/components/hero-buttons.tsx b/apps/www/components/hero-buttons.tsx
index 7a8ab326..dedc6d2a 100644
--- a/apps/www/components/hero-buttons.tsx
+++ b/apps/www/components/hero-buttons.tsx
@@ -5,7 +5,7 @@ import { motion } from "motion/react"
import Link from "next/link"
import { useCopyToClipboard } from "react-use"
-const command = "npx shadcn add @limeplay/linear-player"
+const command = "npx shadcn add @limeplay/video-player"
const MotionLink = motion.create(Link)
export default function HeroButtons() {
@@ -84,7 +84,7 @@ export default function HeroButtons() {
hover:bg-primary/90
md:flex
`}
- href="/blocks/linear-player"
+ href="/blocks/video-player"
initial={{ padding: "0px 20px" }}
transition={{
bounce: 0.6,
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index a86fa5b5..8e36d5bf 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -1,4 +1,5 @@
import type { MDXComponents } from "mdx/types"
+import type { ReactNode } from "react"
import { createGenerator } from "fumadocs-typescript"
import { AutoTypeTable } from "fumadocs-typescript/ui"
@@ -17,7 +18,9 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
) => (
+
+ )
+}
+
+function License() {
+ return (
+
+
+ )
+}
diff --git a/apps/www/components/players/audio-player/demo-player.tsx b/apps/www/components/players/audio-player/demo-player.tsx
new file mode 100644
index 00000000..5735e53f
--- /dev/null
+++ b/apps/www/components/players/audio-player/demo-player.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import type { AudioPlayerAsset } from "@/registry/default/blocks/audio-player/components/media-player"
+
+import { AudioPlayer } from "@/registry/default/blocks/audio-player/components/media-player"
+
+import {
+ AUDIO_PLAYER_DEMO_PLAYLIST_ID,
+ fetchAudioPlayerDemoPlaylist,
+} from "./demo"
+
+export interface AudioPlayerDemoProps {
+ playlistId?: string
+}
+
+export function AudioPlayerDemo({
+ playlistId = AUDIO_PLAYER_DEMO_PLAYLIST_ID,
+}: AudioPlayerDemoProps) {
+ const [playlist, setPlaylist] = useState([])
+
+ useEffect(() => {
+ const abortController = new AbortController()
+
+ void fetchAudioPlayerDemoPlaylist(playlistId, abortController.signal)
+ .then((items) => {
+ if (!abortController.signal.aborted) {
+ setPlaylist(items)
+ }
+ })
+ .catch((error: unknown) => {
+ if (error instanceof DOMException && error.name === "AbortError") return
+ console.error("Failed to load audio player demo playlist:", error)
+ })
+
+ return () => {
+ abortController.abort()
+ }
+ }, [playlistId])
+
+ return {
+ const response = await fetch(`${API_BASE_URL}/${playlistId}`, { signal })
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch playlist: ${response.statusText}`)
+ }
+
+ const data: AudioPlayerPlaylistApiResponse = await response.json()
+ return data.items.map(toAudioPlayerAsset)
+}
+
+function toAudioPlayerAsset(
+ item: AudioPlayerPlaylistAssetItem
+): AudioPlayerAsset {
+ return {
+ description: item.description,
+ duration: item.duration,
+ genre: item.genre,
+ id: item.urn,
+ playbackUrls: item.playback,
+ poster: item.artwork_url,
+ title: item.title,
+ }
+}
diff --git a/apps/www/components/youtube-music-hover-player.tsx b/apps/www/components/players/audio-player/hover-player.tsx
similarity index 61%
rename from apps/www/components/youtube-music-hover-player.tsx
rename to apps/www/components/players/audio-player/hover-player.tsx
index c00e3a59..60abefd6 100644
--- a/apps/www/components/youtube-music-hover-player.tsx
+++ b/apps/www/components/players/audio-player/hover-player.tsx
@@ -1,13 +1,14 @@
"use client"
-import { SquareArrowOutUpRightIcon } from "lucide-react"
+import { AudioLinesIcon, SquareArrowOutUpRightIcon } from "lucide-react"
import { motion } from "motion/react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
-import { YouTubeMusicPlayer } from "@/registry/pro/blocks/youtube-music/components/media-player"
-export function YouTubeMusicHoverPlayer() {
+import { AudioPlayerDemo } from "./demo-player"
+
+export function AudioPlayerHover() {
return (
-
-
- )
-}
-```
-
-## Attribution
-
-[Linear](https://linear.app/quality)
diff --git a/apps/www/content/docs/blocks/video-player.mdx b/apps/www/content/docs/blocks/video-player.mdx
new file mode 100644
index 00000000..70cad183
--- /dev/null
+++ b/apps/www/content/docs/blocks/video-player.mdx
@@ -0,0 +1,60 @@
+---
+title: Video Player
+description: A polished video player with playlist support, captions, picture-in-picture, playback speed, preloading, and smooth overlay controls.
+component: video-player
+preview: video-player
+registry: default
+status: free
+---
+
+## Installation
+
+```npm
+npx shadcn add @limeplay/video-player
+```
+
+## Usage
+
+```tsx
+import {
+ VideoPlayer,
+ type VideoPlayerAsset,
+} from "@/components/limeplay/video-player/components/media-player"
+
+const playlist: VideoPlayerAsset[] = [
+ {
+ id: "sing-2",
+ src: "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8",
+ title: "Sing 2 Trailer",
+ },
+]
+
+export function Player() {
+ return ({
+ getAssetId: (asset) => asset.slug,
+ resolveSource: ({ asset }) => ({
+ config: asset.config,
+ src: asset.playbackUrl,
+ }),
})
-// Load a single asset
-loadAsset({
- id: "movie-1",
- src: "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
- title: "Angel One",
-})
-
-// Load a playlist
-loadPlaylist([asset1, asset2, asset3])
+ return (
+
+ Requires [`assetFeature`](/docs/hooks/use-asset) registered in your
+ [`createMediaKit`](/docs/components/media-provider).
+
+
+## Usage
+
+Use `PlaybackSourceController` inside a block to load exactly one source model: `asset`, `playlist`, or `mediaSrc`.
+
+```tsx
+import { PlaybackSourceController } from "@/hooks/limeplay/use-playback-source"
+
+export function SourceController({ src }: { src?: string }) {
+ return asset.slug}
+ playlist={playlist}
+ resolveSource={({ asset }) => asset.playbackUrl}
+ />
+ )
+}
+```
+
+## Feature Registration
+
+`use-playback-source` is a controller helper, not a store feature. Register `assetFeature` with your media kit, then mount `PlaybackSourceController` inside the player tree.
+
+```tsx title="lib/media.ts"
+"use client"
+
+import { assetFeature } from "@/hooks/limeplay/use-asset"
+import { playbackFeature } from "@/hooks/limeplay/use-playback"
+import { playerFeature } from "@/hooks/limeplay/use-player"
+import { playlistFeature } from "@/hooks/limeplay/use-playlist"
+import { createMediaKit } from "@/components/limeplay/media-provider"
+
+export const media = createMediaKit({
+ features: [
+ playerFeature(),
+ playlistFeature(),
+ playbackFeature(),
+ assetFeature(),
+ ] as const,
+})
+```
+
+```tsx
+import type { UsePlaybackSourceOptions } from "@/hooks/limeplay/use-playback-source"
+import { PlaybackSourceController } from "@/hooks/limeplay/use-playback-source"
+
+export function Source(
+ props: UsePlaybackSourceOptions
+) {
+ return ("")
+
+ const toggleGroupProps = {
+ onValueChange: (next: string | string[]) => {
+ setValue(Array.isArray(next) ? (next[0] ?? "") : next)
+ },
+ spacing: 2,
+ type: "single" as const,
+ value,
+ }
+
+ return (
+ ,
+ "getAssetId" | "resolveSource"
+ >
+ autoLoad?: boolean
+ children?: React.ReactNode
+ getAssetId?: GetAssetId
+ initialIndex?: number
+ mediaSrc?: string
+ playlist?: AudioPlayerAsset[]
+ resolveSource?: ResolveSource
+}
+
+export interface PlaybackUrls {
+ primary: string
+ secondary?: string
+}
+
+const AudioSourceContext = React.createContext(
+ null
+)
+
+interface RawPlaybackResponse {
+ expires_at: string
+ url: string
+}
+
+export function AudioSourceProvider({
+ asset,
+ assetOptions,
+ autoLoad = true,
+ children,
+ getAssetId,
+ initialIndex,
+ mediaSrc,
+ playlist,
+ resolveSource,
+}: AudioSourceProviderProps) {
+ const items = React.useMemo(() => {
+ if (playlist) return playlist
+ if (asset) return [asset]
+ return []
+ }, [asset, playlist])
+
+ const resolvedAssetOptions = React.useMemo>(
+ () => ({
+ onLoadError: (_asset: AudioPlayerAsset, _error: unknown, { hasNext }) => {
+ return hasNext ? "skip" : "stop"
+ },
+ onPlaybackError: async (
+ _asset: AudioPlayerAsset,
+ error: Error,
+ { currentTime }: { currentTime: number }
+ ): Promise<
+ | { action: "reload"; startTime?: number }
+ | { action: "skip" }
+ | { action: "stop" }
+ > => {
+ if (isNetworkError(error)) {
+ return { action: "reload", startTime: currentTime }
+ }
+
+ return { action: "skip" }
+ },
+ ...assetOptions,
+ }),
+ [assetOptions]
+ )
+ const resolvedGetAssetId = React.useCallback>(
+ (asset, context) =>
+ getAssetId?.(asset, context) ??
+ asset.id ??
+ asset.src ??
+ asset.playbackUrls?.primary,
+ [getAssetId]
+ )
+ const resolvedSource = React.useCallback>(
+ async (context) => {
+ if (resolveSource) return resolveSource(context)
+
+ const { asset, signal } = context
+ if (asset.src) {
+ return {
+ config: asset.config,
+ src: asset.src,
+ }
+ }
+
+ if (!asset.playbackUrls?.primary) {
+ throw new Error("AudioPlayerAsset requires src or playbackUrls.primary")
+ }
+
+ const src = await fetchPlaybackUrl(asset.playbackUrls.primary, signal)
+ if (signal.aborted) {
+ throw new DOMException("Playback source request aborted", "AbortError")
+ }
+
+ return {
+ config: asset.config,
+ src,
+ }
+ },
+ [resolveSource]
+ )
+
+ const value = React.useMemo(
+ () => ({
+ items,
+ }),
+ [items]
+ )
+
+ return (
+
+
+ )
+}
+
+export function useAudioSource() {
+ const context = React.useContext(AudioSourceContext)
+
+ if (!context) {
+ throw new Error("Missing AudioSourceProvider")
+ }
+
+ return context
+}
+
+async function fetchPlaybackUrl(
+ playbackUrl: string,
+ signal?: AbortSignal
+): Promise {
+ const url = new URL(playbackUrl)
+ url.searchParams.set("raw", "true")
+
+ const response = await fetch(url.toString(), { signal })
+ if (!response.ok) {
+ throw new Error(`Failed to fetch playback URL: ${response.statusText}`)
+ }
+
+ const data: RawPlaybackResponse = await response.json()
+ return data.url
+}
+
+function isNetworkError(error: unknown) {
+ return (
+ error &&
+ typeof error === "object" &&
+ "category" in error &&
+ (error as { category: number }).category === 1
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/button.tsx b/apps/www/registry/default/blocks/audio-player/components/button.tsx
new file mode 100644
index 00000000..e731e484
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/button.tsx
@@ -0,0 +1,64 @@
+import { Slot } from "@radix-ui/react-slot"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface ButtonProps extends React.ButtonHTMLAttributes {
+ asChild?: boolean
+ render?: React.ReactElement
+ size?: "default" | "large" | "sm" | "xl"
+}
+
+const Button = React.forwardRef(
+ ({ asChild = false, className, render, size = "large", ...props }, ref) => {
+ const Comp = render ? Slot : asChild ? Slot : "button"
+ const buttonProps =
+ Comp === "button" ? { type: props.type ?? "button", ...props } : props
+
+ return (
+
+ {render
+ ? React.cloneElement(render, undefined, props.children)
+ : props.children}
+
+ )
+ }
+)
+
+Button.displayName = "AudioPlayerButton"
+
+export { Button }
diff --git a/apps/www/registry/default/blocks/audio-player/components/controls.tsx b/apps/www/registry/default/blocks/audio-player/components/controls.tsx
new file mode 100644
index 00000000..b9f6c5e3
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/controls.tsx
@@ -0,0 +1,31 @@
+import { ActionControls } from "@/registry/default/blocks/audio-player/components/action-controls"
+import { TimeLabels } from "@/registry/default/blocks/audio-player/components/fixed-timeline-control"
+import { PlaybackControls } from "@/registry/default/blocks/audio-player/components/playback-controls"
+import {
+ RepeatControl,
+ ShuffleControl,
+} from "@/registry/default/blocks/audio-player/components/playback-mode-controls"
+import { Playlist } from "@/registry/default/blocks/audio-player/components/playlist"
+import { TrackInfo } from "@/registry/default/blocks/audio-player/components/track-info"
+import { VolumeControl } from "@/registry/default/blocks/audio-player/components/volume-group-control"
+
+export function PlayerControls() {
+ return (
+ ) {
+ return (
+
+ )
+}
+
+export function DislikeSelectedIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function LikeIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function LikeSelectedIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function NextIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function PauseIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function PlayIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function PreviousIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function RepeatAllIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function RepeatIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function RepeatOneIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function ShuffleOffIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function ShuffleOneIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function VolumeFullIcon(props: SVGProps) {
+ return (
+
+ )
+}
+
+export function VolumeMutedIcon(props: SVGProps) {
+ return (
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/media-player.tsx b/apps/www/registry/default/blocks/audio-player/components/media-player.tsx
new file mode 100644
index 00000000..4499328c
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/media-player.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import type {
+ AudioHTMLAttributes,
+ ComponentPropsWithoutRef,
+ ReactNode,
+} from "react"
+
+import type {
+ AudioPlayerAsset,
+ AudioSourceProviderProps,
+ PlaybackUrls,
+} from "@/registry/default/blocks/audio-player/components/audio-source"
+
+import { cn } from "@/lib/utils"
+import { AudioSourceProvider } from "@/registry/default/blocks/audio-player/components/audio-source"
+import { PlayerControls } from "@/registry/default/blocks/audio-player/components/controls"
+import { TimelineControl } from "@/registry/default/blocks/audio-player/components/fixed-timeline-control"
+import { MediaProvider } from "@/registry/default/blocks/audio-player/lib/media-kit"
+import { Media } from "@/registry/default/ui/media"
+
+import styles from "../audio-player.module.css"
+
+export type { AudioPlayerAsset, PlaybackUrls }
+
+export interface AudioPlayerProps {
+ asset?: AudioSourceProviderProps["asset"]
+ assetOptions?: AudioSourceProviderProps["assetOptions"]
+ autoLoad?: boolean
+ autoPlay?: boolean
+ children?: ReactNode
+ className?: string
+ debug?: boolean
+ getAssetId?: AudioSourceProviderProps["getAssetId"]
+ initialIndex?: number
+ /**
+ * Props to pass to the underlying audio element.
+ */
+ mediaProps?: Omit<
+ AudioHTMLAttributes,
+ "as" | "autoPlay" | "className"
+ >
+ playlist?: AudioPlayerAsset[]
+ resolveSource?: AudioSourceProviderProps["resolveSource"]
+}
+
+export function AudioPlayer({
+ asset,
+ assetOptions,
+ autoLoad,
+ autoPlay = false,
+ children,
+ className,
+ debug,
+ getAssetId,
+ initialIndex,
+ mediaProps,
+ playlist,
+ resolveSource,
+}: AudioPlayerProps = {}) {
+ const { src: mediaSrc, ...safeMediaProps } = mediaProps ?? {}
+
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/playback-controls.tsx b/apps/www/registry/default/blocks/audio-player/components/playback-controls.tsx
new file mode 100644
index 00000000..fa27d261
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/playback-controls.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import { CircleNotchIcon } from "@phosphor-icons/react"
+import { AnimatePresence, motion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+
+import { Button } from "@/registry/default/blocks/audio-player/components/button"
+import {
+ NextIcon,
+ PauseIcon,
+ PlayIcon,
+ PreviousIcon,
+} from "@/registry/default/blocks/audio-player/components/icons"
+import { usePlaybackStore } from "@/registry/default/hooks/use-playback"
+import { RECOMMENDED_PLAYER_BUFFERING_THROTTLE_MS } from "@/registry/default/hooks/use-player"
+import { usePlaylist } from "@/registry/default/hooks/use-playlist"
+import { PlaybackControl } from "@/registry/default/ui/playback-control"
+
+export function PlaybackControls() {
+ const status = usePlaybackStore((state) => state.status)
+ const { hasNext, hasPrevious, next, previous } = usePlaylist()
+
+ const rawBuffering = status === "buffering" || status === "loading"
+ const { isBuffering, isPlaying } = useStablePlaybackState(
+ rawBuffering,
+ status,
+ RECOMMENDED_PLAYER_BUFFERING_THROTTLE_MS
+ )
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+function useStablePlaybackState(
+ isBuffering: boolean,
+ status: string,
+ delayMs: number
+) {
+ const [showSpinner, setShowSpinner] = useState(false)
+ const timeoutRef = useRef>(null)
+ const lastIntentRef = useRef("paused")
+
+ useEffect(() => {
+ if (status === "playing" || status === "paused") {
+ lastIntentRef.current = status
+ }
+ }, [status])
+
+ useEffect(() => {
+ if (isBuffering && lastIntentRef.current === "playing") {
+ timeoutRef.current = setTimeout(() => setShowSpinner(true), delayMs)
+ } else {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ timeoutRef.current = null
+ }
+ setShowSpinner(false)
+ }
+
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ timeoutRef.current = null
+ }
+ }
+ // DEV: The spinner from lastIntentRef.current, but this effect never reruns when status changes while isBuffering stays true. A pause during buffering can still show the delayed loading spinner because the old timeout is left in place.
+ }, [isBuffering, delayMs, status])
+
+ // During transient buffering, hold the last intent as the visual state
+ const stableIsPlaying = isBuffering
+ ? lastIntentRef.current === "playing"
+ : status === "playing"
+
+ return { isBuffering: showSpinner, isPlaying: stableIsPlaying }
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/playback-mode-controls.tsx b/apps/www/registry/default/blocks/audio-player/components/playback-mode-controls.tsx
new file mode 100644
index 00000000..2901e400
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/playback-mode-controls.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { AnimatePresence, motion } from "motion/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/blocks/audio-player/components/button"
+import {
+ RepeatAllIcon,
+ RepeatIcon,
+ RepeatOneIcon,
+ ShuffleOffIcon,
+ ShuffleOneIcon,
+} from "@/registry/default/blocks/audio-player/components/icons"
+import {
+ usePlaylist,
+ usePlaylistStore,
+} from "@/registry/default/hooks/use-playlist"
+
+export function RepeatControl() {
+ const { cycleRepeatMode } = usePlaylist()
+ const repeatMode = usePlaylistStore((state) => state.repeatMode)
+ const isActive = repeatMode !== "off"
+
+ return (
+
+ )
+}
+
+export function ShuffleControl() {
+ const { toggleShuffle } = usePlaylist()
+ const shuffle = usePlaylistStore((state) => state.shuffle)
+
+ const handleToggleShuffle = () => {
+ toggleShuffle()
+ }
+
+ return (
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/playlist.tsx b/apps/www/registry/default/blocks/audio-player/components/playlist.tsx
new file mode 100644
index 00000000..de1cc938
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/playlist.tsx
@@ -0,0 +1,246 @@
+"use client"
+
+import { CardsThreeIcon, PlayIcon } from "@phosphor-icons/react"
+import { Volume2Icon } from "lucide-react"
+import { useCallback, useMemo, useRef } from "react"
+
+import type { AudioPlayerAsset } from "@/registry/default/blocks/audio-player/components/audio-source"
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { useAudioSource } from "@/registry/default/blocks/audio-player/components/audio-source"
+import { Button } from "@/registry/default/blocks/audio-player/components/button"
+import { usePlayerStore } from "@/registry/default/hooks/use-player"
+import { usePlaylistStore } from "@/registry/default/hooks/use-playlist"
+
+export function Playlist() {
+ const currentItem = usePlaylistStore(
+ (state) =>
+ state.currentItem as null | { id: string; properties: AudioPlayerAsset }
+ )
+ const preloadManagers = usePlayerStore((state) => state.preloadManagers)
+ const queue = usePlaylistStore(
+ (state) => state.queue as { id: string; properties: AudioPlayerAsset }[]
+ )
+ const shuffle = usePlaylistStore((state) => state.shuffle)
+ const shuffleOrder = usePlaylistStore((state) => state.shuffleOrder)
+ const skipToId = usePlaylistStore((state) => state.skipToId)
+ const scrollRef = useRef(null)
+
+ const { items } = useAudioSource()
+ const orderedItems = useMemo(() => {
+ if (!shuffle || shuffleOrder.length === 0) return queue
+
+ return shuffleOrder
+ .map((index) => queue[index])
+ .filter((item): item is { id: string; properties: AudioPlayerAsset } =>
+ Boolean(item)
+ )
+ }, [queue, shuffle, shuffleOrder])
+
+ const displayAssets = useMemo(() => {
+ if (orderedItems.length > 0)
+ return orderedItems.map((item) => ({
+ asset: item.properties,
+ id: item.id,
+ }))
+ return items.map((asset, index) => ({
+ asset,
+ id:
+ asset.id ??
+ asset.src ??
+ asset.playbackUrls?.primary ??
+ `asset:${index}`,
+ }))
+ }, [orderedItems, items])
+
+ const handleAssetSelect = useCallback(
+ (assetId: string) => {
+ skipToId(assetId)
+ },
+ [skipToId]
+ )
+
+ const scrollToActive = useCallback(() => {
+ const container = scrollRef.current
+ if (!container || !currentItem) return
+ const activeEl = container.querySelector("[data-active='true']")
+ if (activeEl) {
+ activeEl.scrollIntoView({ behavior: "instant", block: "center" })
+ }
+ }, [currentItem])
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+function formatDuration(ms?: number) {
+ if (typeof ms !== "number" || !Number.isFinite(ms)) return "--:--"
+
+ const secs = Math.floor(ms / 1000)
+ const m = Math.floor(secs / 60)
+ const s = secs % 60
+ return `${m}:${String(s).padStart(2, "0")}`
+}
+
+function TrackRow({
+ asset,
+ index,
+ isActive,
+ onSelect,
+ preloaded,
+ setSize,
+}: {
+ asset: AudioPlayerAsset
+ index: number
+ isActive: boolean
+ onSelect: () => void
+ preloaded: boolean
+ setSize: number
+}) {
+ return (
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/track-info.tsx b/apps/www/registry/default/blocks/audio-player/components/track-info.tsx
new file mode 100644
index 00000000..2d0e0ab2
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/track-info.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import type { AudioPlayerAsset } from "@/registry/default/blocks/audio-player/components/audio-source"
+
+import { useAsset } from "@/registry/default/hooks/use-asset"
+
+export function TrackInfo() {
+ const { currentItem } = useAsset()
+
+ const asset = currentItem?.properties
+ const title = asset?.title ?? "No track playing"
+ const genre = asset?.genre ?? ""
+ const releaseYear = asset?.releaseYear ?? asset?.year
+
+ return (
+ {
+ items: PlaylistAsset[]
+}
+
+export function usePlaylistAsset(): UsePlaylistAssetReturn {
+ const asset = useAsset()
+ const source = useAudioSource()
+
+ return {
+ ...asset,
+ items: source.items,
+ }
+}
diff --git a/apps/www/registry/default/blocks/audio-player/lib/media-kit.ts b/apps/www/registry/default/blocks/audio-player/lib/media-kit.ts
new file mode 100644
index 00000000..1cc8c7db
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/lib/media-kit.ts
@@ -0,0 +1,26 @@
+"use client"
+
+import { assetFeature } from "@/registry/default/hooks/use-asset"
+import { captionsFeature } from "@/registry/default/hooks/use-captions"
+import { mediaFeature } from "@/registry/default/hooks/use-media"
+import { playbackFeature } from "@/registry/default/hooks/use-playback"
+import { playerFeature } from "@/registry/default/hooks/use-player"
+import { playlistFeature } from "@/registry/default/hooks/use-playlist"
+import { timelineFeature } from "@/registry/default/hooks/use-timeline"
+import { volumeFeature } from "@/registry/default/hooks/use-volume"
+import { createMediaKit } from "@/registry/default/ui/media-provider"
+
+export const media = createMediaKit({
+ features: [
+ mediaFeature(),
+ playerFeature(),
+ playbackFeature(),
+ playlistFeature(),
+ volumeFeature(),
+ timelineFeature(),
+ captionsFeature(),
+ assetFeature(),
+ ] as const,
+})
+
+export const MediaProvider = media.MediaProvider
diff --git a/apps/www/registry/default/blocks/basic-player/components/media-element.tsx b/apps/www/registry/default/blocks/basic-player/components/media-element.tsx
deleted file mode 100644
index d2933ffd..00000000
--- a/apps/www/registry/default/blocks/basic-player/components/media-element.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-
-import { useMediaStore } from "@/registry/default/hooks/use-media"
-import { usePlayerStore } from "@/registry/default/hooks/use-player"
-import { Media } from "@/registry/default/ui/media"
-
-export function MediaElement({ src }: { src: string }) {
- const player = usePlayerStore((state) => state.instance)
- const mediaElement = useMediaStore((state) => state.mediaElement)
-
- useEffect(() => {
- if (player && mediaElement) {
- if (src) {
- try {
- const parsedUrl = new URL(src)
-
- if (!["http:", "https:"].includes(parsedUrl.protocol)) {
- throw new Error("Invalid URL protocol")
- }
- } catch (error) {
- console.error(
- "Invalid playback URL:",
- error instanceof Error ? error.message : "Unknown error"
- )
- }
- }
-
- void player
- .load(src)
- .then(() => {
- console.debug("[limeplay] media loaded")
- })
- .catch((error: unknown) => {
- console.error("[limeplay] error loading media:", error)
- })
- }
- }, [player, mediaElement, src])
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- )
-})
-
-LimeplayMediaPlayer.displayName = "LimeplayMediaPlayer"
diff --git a/apps/www/registry/default/blocks/basic-player/components/playback-state-control.tsx b/apps/www/registry/default/blocks/basic-player/components/playback-state-control.tsx
deleted file mode 100644
index b3b48c7c..00000000
--- a/apps/www/registry/default/blocks/basic-player/components/playback-state-control.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-
-import {
- CircleNotchIcon,
- PauseIcon,
- PlayIcon,
- RepeatIcon,
-} from "@phosphor-icons/react"
-
-import { Button } from "@/components/ui/button"
-import { usePlaybackStore } from "@/registry/default/hooks/use-playback"
-import { PlaybackControl } from "@/registry/default/ui/playback-control"
-
-export function PlaybackStateControl() {
- const status = usePlaybackStore((state) => state.status)
-
- return (
-
- )
-}
diff --git a/apps/www/registry/default/blocks/basic-player/lib/media-kit.ts b/apps/www/registry/default/blocks/basic-player/lib/media-kit.ts
deleted file mode 100644
index 4a35473c..00000000
--- a/apps/www/registry/default/blocks/basic-player/lib/media-kit.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client"
-
-import { mediaFeature } from "@/registry/default/hooks/use-media"
-import { playbackFeature } from "@/registry/default/hooks/use-playback"
-import { playerFeature } from "@/registry/default/hooks/use-player"
-import { createMediaKit } from "@/registry/default/ui/media-provider"
-
-export const media = createMediaKit({
- features: [mediaFeature(), playerFeature(), playbackFeature()] as const,
-})
-
-export const MediaProvider = media.MediaProvider
diff --git a/apps/www/registry/default/blocks/basic-player/page.tsx b/apps/www/registry/default/blocks/basic-player/page.tsx
deleted file mode 100644
index a4a117a0..00000000
--- a/apps/www/registry/default/blocks/basic-player/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { LimeplayMediaPlayer } from "@/registry/default/blocks/basic-player/components/media-player"
-
-export default function Page() {
- return (
-
-
- )
-}
diff --git a/apps/www/registry/default/blocks/linear-player/components/media-player.tsx b/apps/www/registry/default/blocks/linear-player/components/media-player.tsx
deleted file mode 100644
index c82cb335..00000000
--- a/apps/www/registry/default/blocks/linear-player/components/media-player.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react"
-
-import type { Asset } from "@/registry/default/hooks/use-asset"
-
-import { cn } from "@/lib/utils"
-import { BottomControls } from "@/registry/default/blocks/linear-player/components/bottom-controls"
-import { MediaProvider } from "@/registry/default/blocks/linear-player/lib/media-kit"
-import { CaptionsContainer } from "@/registry/default/ui/captions"
-import { FallbackPoster } from "@/registry/default/ui/fallback-poster"
-import { LimeplayLogo } from "@/registry/default/ui/limeplay-logo"
-import { Media, type MediaProps } from "@/registry/default/ui/media"
-import * as Layout from "@/registry/default/ui/player-layout"
-import { RootContainer } from "@/registry/default/ui/root-container"
-
-export interface LinearMediaPlayerProps<
- T extends MediaType = "audio" | "video",
-> {
- /**
- * The type of media element to render
- * @default "video"
- */
- as?: T
- asset?: Asset
- children?: React.ReactNode
- className?: string
- /**
- * Props to pass to the underlying media element (video/audio)
- */
- mediaProps?: MediaPropsForType
- /**
- * Ref to the underlying media element
- */
- mediaRef?: React.Ref>
-}
-
-type MediaElementType = T extends "audio"
- ? HTMLAudioElement
- : HTMLVideoElement
-
-type MediaPropsForType = T extends "audio"
- ? Omit, "as" | "className">
- : Omit, "as" | "className">
-
-type MediaType = MediaProps["as"]
-
-export const LinearMediaPlayer = React.forwardRef<
- HTMLDivElement,
- LinearMediaPlayerProps
->(({ as = "video", children, className, mediaProps, mediaRef }, ref) => {
- return (
-
-
-
-
-
- )}
- as={as}
- className="size-full object-cover"
- ref={mediaRef as React.Ref}
- />
-
-
-
-
- {children}
-
- )
-})
-
-LinearMediaPlayer.displayName = "LinearMediaPlayer"
diff --git a/apps/www/registry/default/blocks/linear-player/page.tsx b/apps/www/registry/default/blocks/linear-player/page.tsx
deleted file mode 100644
index 44fff496..00000000
--- a/apps/www/registry/default/blocks/linear-player/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { LinearMediaPlayer } from "@/registry/default/blocks/linear-player/components/media-player"
-
-export default function Page() {
- return (
-
-
- )
-}
diff --git a/apps/www/registry/default/blocks/linear-player/components/bottom-controls.tsx b/apps/www/registry/default/blocks/video-player/components/bottom-controls.tsx
similarity index 56%
rename from apps/www/registry/default/blocks/linear-player/components/bottom-controls.tsx
rename to apps/www/registry/default/blocks/video-player/components/bottom-controls.tsx
index 52113f7e..aeecb875 100644
--- a/apps/www/registry/default/blocks/linear-player/components/bottom-controls.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/bottom-controls.tsx
@@ -1,10 +1,10 @@
-import { CaptionsStateControl } from "@/registry/default/blocks/linear-player/components/captions-state-control"
-import { PictureInPictureControl } from "@/registry/default/blocks/linear-player/components/pip-control"
-import { PlaybackRateControl } from "@/registry/default/blocks/linear-player/components/playback-rate-control"
-import { PlaybackStateControl } from "@/registry/default/blocks/linear-player/components/playback-state-control"
-import { Playlist } from "@/registry/default/blocks/linear-player/components/playlist"
-import { TimelineSliderControl } from "@/registry/default/blocks/linear-player/components/timeline-slider-control"
-import { VolumeGroupControl } from "@/registry/default/blocks/linear-player/components/volume-group-control"
+import { CaptionsStateControl } from "@/registry/default/blocks/video-player/components/captions-state-control"
+import { PictureInPictureControl } from "@/registry/default/blocks/video-player/components/pip-control"
+import { PlaybackRateControl } from "@/registry/default/blocks/video-player/components/playback-rate-control"
+import { PlaybackStateControl } from "@/registry/default/blocks/video-player/components/playback-state-control"
+import { Playlist } from "@/registry/default/blocks/video-player/components/playlist"
+import { TimelineSliderControl } from "@/registry/default/blocks/video-player/components/timeline-slider-control"
+import { VolumeGroupControl } from "@/registry/default/blocks/video-player/components/volume-group-control"
import * as Layout from "@/registry/default/ui/player-layout"
export function BottomControls() {
diff --git a/apps/www/registry/default/blocks/linear-player/components/button.tsx b/apps/www/registry/default/blocks/video-player/components/button.tsx
similarity index 100%
rename from apps/www/registry/default/blocks/linear-player/components/button.tsx
rename to apps/www/registry/default/blocks/video-player/components/button.tsx
diff --git a/apps/www/registry/default/blocks/linear-player/components/captions-state-control.tsx b/apps/www/registry/default/blocks/video-player/components/captions-state-control.tsx
similarity index 87%
rename from apps/www/registry/default/blocks/linear-player/components/captions-state-control.tsx
rename to apps/www/registry/default/blocks/video-player/components/captions-state-control.tsx
index b43af10c..e1fe35e6 100644
--- a/apps/www/registry/default/blocks/linear-player/components/captions-state-control.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/captions-state-control.tsx
@@ -2,7 +2,7 @@
import { ClosedCaptioningIcon } from "@phosphor-icons/react"
-import { Button } from "@/registry/default/blocks/linear-player/components/button"
+import { Button } from "@/registry/default/blocks/video-player/components/button"
import { useCaptionsStore } from "@/registry/default/hooks/use-captions"
import { CaptionsControl } from "@/registry/default/ui/captions"
diff --git a/apps/www/registry/default/blocks/video-player/components/media-player.tsx b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
new file mode 100644
index 00000000..300e7105
--- /dev/null
+++ b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
@@ -0,0 +1,103 @@
+import React from "react"
+
+import type {
+ Asset,
+ GetAssetId,
+ ResolveSource,
+ UseAssetOptions,
+} from "@/registry/default/hooks/use-asset"
+
+import { cn } from "@/lib/utils"
+import { BottomControls } from "@/registry/default/blocks/video-player/components/bottom-controls"
+import { MediaProvider } from "@/registry/default/blocks/video-player/lib/media-kit"
+import { PlaybackSourceController } from "@/registry/default/hooks/use-playback-source"
+import { CaptionsContainer } from "@/registry/default/ui/captions"
+import { FallbackPoster } from "@/registry/default/ui/fallback-poster"
+import { LimeplayLogo } from "@/registry/default/ui/limeplay-logo"
+import { Media } from "@/registry/default/ui/media"
+import * as Layout from "@/registry/default/ui/player-layout"
+import { RootContainer } from "@/registry/default/ui/root-container"
+
+export interface VideoPlayerAsset extends Asset {
+ description?: string
+ poster?: string
+ title?: string
+}
+
+export interface VideoPlayerProps {
+ asset?: VideoPlayerAsset
+ assetOptions?: Omit<
+ UseAssetOptions,
+ "getAssetId" | "resolveSource"
+ >
+ children?: React.ReactNode
+ className?: string
+ debug?: boolean
+ getAssetId?: GetAssetId
+ initialIndex?: number
+ /**
+ * Props to pass to the underlying video element.
+ */
+ mediaProps?: Omit<
+ React.VideoHTMLAttributes,
+ "as" | "className"
+ >
+ playlist?: VideoPlayerAsset[]
+ resolveSource?: ResolveSource
+}
+
+export const VideoPlayer = React.forwardRef(
+ (
+ {
+ asset,
+ assetOptions,
+ children,
+ className,
+ debug,
+ getAssetId,
+ initialIndex,
+ mediaProps,
+ playlist,
+ resolveSource,
+ },
+ ref
+ ) => {
+ const { src: mediaSrc, ...safeMediaProps } = mediaProps ?? {}
+
+ return (
+
+
+
+
+
+ )}
+ as="video"
+ className="size-full object-cover"
+ />
+
+
+
+
+ {children}
+
+ )
+ }
+)
+
+VideoPlayer.displayName = "VideoPlayer"
diff --git a/apps/www/registry/default/blocks/linear-player/components/pip-control.tsx b/apps/www/registry/default/blocks/video-player/components/pip-control.tsx
similarity index 89%
rename from apps/www/registry/default/blocks/linear-player/components/pip-control.tsx
rename to apps/www/registry/default/blocks/video-player/components/pip-control.tsx
index 7fd5d8ff..c8202d42 100644
--- a/apps/www/registry/default/blocks/linear-player/components/pip-control.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/pip-control.tsx
@@ -2,7 +2,7 @@
import { PictureInPictureIcon } from "@phosphor-icons/react"
-import { Button } from "@/registry/default/blocks/linear-player/components/button"
+import { Button } from "@/registry/default/blocks/video-player/components/button"
import { usePictureInPictureStore } from "@/registry/default/hooks/use-picture-in-picture"
import { PictureInPictureControl as PictureInPictureControlPrimitive } from "@/registry/default/ui/picture-in-picture-control"
diff --git a/apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx b/apps/www/registry/default/blocks/video-player/components/playback-rate-control.tsx
similarity index 100%
rename from apps/www/registry/default/blocks/linear-player/components/playback-rate-control.tsx
rename to apps/www/registry/default/blocks/video-player/components/playback-rate-control.tsx
diff --git a/apps/www/registry/default/blocks/linear-player/components/playback-state-control.tsx b/apps/www/registry/default/blocks/video-player/components/playback-state-control.tsx
similarity index 91%
rename from apps/www/registry/default/blocks/linear-player/components/playback-state-control.tsx
rename to apps/www/registry/default/blocks/video-player/components/playback-state-control.tsx
index 8eb7073f..d46ee2ba 100644
--- a/apps/www/registry/default/blocks/linear-player/components/playback-state-control.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/playback-state-control.tsx
@@ -7,7 +7,7 @@ import {
RepeatIcon,
} from "@phosphor-icons/react"
-import { Button } from "@/registry/default/blocks/linear-player/components/button"
+import { Button } from "@/registry/default/blocks/video-player/components/button"
import { usePlaybackStore } from "@/registry/default/hooks/use-playback"
import { PlaybackControl } from "@/registry/default/ui/playback-control"
diff --git a/apps/www/registry/default/blocks/linear-player/components/playlist.tsx b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
similarity index 52%
rename from apps/www/registry/default/blocks/linear-player/components/playlist.tsx
rename to apps/www/registry/default/blocks/video-player/components/playlist.tsx
index 6a01099d..d15b9c0c 100644
--- a/apps/www/registry/default/blocks/linear-player/components/playlist.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
@@ -1,11 +1,9 @@
"use client"
-import type shaka from "shaka-player"
-
import { CardsThreeIcon, PlayIcon } from "@phosphor-icons/react"
-import { useEffect } from "react"
+import { useMemo } from "react"
-import type { Asset } from "@/registry/default/hooks/use-asset"
+import type { VideoPlayerAsset } from "@/registry/default/blocks/video-player/components/media-player"
import {
DropdownMenu,
@@ -16,77 +14,43 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
-import { Button } from "@/registry/default/blocks/linear-player/components/button"
-import { useAsset } from "@/registry/default/hooks/use-asset"
+import { Button } from "@/registry/default/blocks/video-player/components/button"
+import { useAssetStore } from "@/registry/default/hooks/use-asset"
import { usePlayerStore } from "@/registry/default/hooks/use-player"
-
-/**
- * Demo assets for the linear-player
- */
-export const ASSETS: Asset[] = [
- {
- config: {
- drm: {
- advanced: {
- "com.widevine.alpha": {
- serverCertificateUri:
- "https://cwip-shaka-proxy.appspot.com/service-cert",
- },
- },
- servers: {
- "com.widevine.alpha": "https://cwip-shaka-proxy.appspot.com/no_auth",
- },
- } as unknown as shaka.extern.DrmConfiguration,
- } as shaka.extern.PlayerConfiguration,
- description:
- "A Blender Foundation short film, protected by Widevine encryption",
- id: "sintel",
- poster: "https://storage.googleapis.com/shaka-asset-icons/sintel.png",
- src: "https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd",
- title: "Blender Foundation - Sintel",
- },
- {
- description: "Media Tailor HLS Stream",
- id: "sing2",
- poster: "https://storage.googleapis.com/shaka-asset-icons/sing.png",
- src: "https://ad391cc0d55b44c6a86d232548adc225.mediatailor.us-east-1.amazonaws.com/v1/master/d02fedbbc5a68596164208dd24e9b48aa60dadc7/singssai/master.m3u8",
- title: "Sing 2 Trailer",
- },
- {
- description: "A Blender Foundation short film, Media Tailor Live DASH",
- id: "bbb",
- poster:
- "https://storage.googleapis.com/shaka-asset-icons/big_buck_bunny.png",
- src: "https://d305rncpy6ne2q.cloudfront.net/v1/dash/94063eadf7d8c56e9e2edd84fdf897826a70d0df/SFP-MediaTailor-Live-HLS-DASH/channel/sfp-channel1/dash.mpd",
- title: "Big Buck Bunny",
- },
- {
- description: "HLS Video",
- id: "natgeo",
- poster: "https://demo.theoplayer.com/hubfs/videos/natgeo/poster.jpg",
- src: "https://demo.theoplayer.com/hubfs/videos/natgeo/playlist.m3u8",
- title: "National Geographic - VR equirectangular",
- },
-]
+import { usePlaylistStore } from "@/registry/default/hooks/use-playlist"
export function Playlist() {
- const player = usePlayerStore((state) => state.instance)
-
- const { currentItem, isPreloaded, loadPlaylist, preloadAsset, skipToId } =
- useAsset()
+ const currentItem = usePlaylistStore(
+ (state) =>
+ state.currentItem as null | { id: string; properties: VideoPlayerAsset }
+ )
+ const preloadAsset = useAssetStore((state) => state.preloadAsset) as (
+ asset: VideoPlayerAsset
+ ) => Promise
+ const preloadManagers = usePlayerStore((state) => state.preloadManagers)
+ const queue = usePlaylistStore(
+ (state) => state.queue as { id: string; properties: VideoPlayerAsset }[]
+ )
+ const shuffle = usePlaylistStore((state) => state.shuffle)
+ const shuffleOrder = usePlaylistStore((state) => state.shuffleOrder)
+ const skipToId = usePlaylistStore((state) => state.skipToId)
- useEffect(() => {
- if (!player) return
+ const orderedItems = useMemo(() => {
+ if (!shuffle || shuffleOrder.length === 0) return queue
- loadPlaylist(ASSETS)
- }, [player])
+ return shuffleOrder
+ .map((index) => queue[index])
+ .filter((item): item is { id: string; properties: VideoPlayerAsset } =>
+ Boolean(item)
+ )
+ }, [queue, shuffle, shuffleOrder])
- const handleAssetSelect = async (asset: Asset) => {
- await skipToId(asset.id)
+ const handleAssetSelect = async (assetId: string) => {
+ await skipToId(assetId)
}
- const handleAssetHover = async (asset: Asset) => {
- if (!isPreloaded(asset.id) && currentItem?.id !== asset.id) {
+ const handleAssetHover = async (assetId: string, asset: VideoPlayerAsset) => {
+ if (!preloadManagers.has(assetId) && currentItem?.id !== assetId) {
await preloadAsset(asset)
}
}
@@ -109,9 +73,10 @@ export function Playlist() {
Playlist
+
-
diff --git a/apps/www/components/blocks/info-pane.tsx b/apps/www/components/blocks/info-pane.tsx
index 56915424..0cf54ae2 100644
--- a/apps/www/components/blocks/info-pane.tsx
+++ b/apps/www/components/blocks/info-pane.tsx
@@ -24,8 +24,18 @@ export function BlockInfoPane({
`}
>
- {title}
- {description}
+
+ {title}
+
+
+ {description}
+
{content}
diff --git a/apps/www/components/blocks/preview-pane.tsx b/apps/www/components/blocks/preview-pane.tsx
index a06cbb24..14beda1a 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -25,8 +25,8 @@ export function BlockPreviewWithToolbar({
const [reloadKey, setReloadKey] = useState(0)
const panelRef = useRef{props.children}
@@ -26,3 +29,46 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
...components,
}
}
+
+function Attribution({
+ children,
+ href,
+ name,
+}: {
+ children?: ReactNode
+ href?: string
+ name: string
+}) {
+ return (
+ Attribution
++ Inspired by{" "} + {href ? ( + + {name} + + ) : ( + name + )} + . +
+ {children} +License & Usage
+-
+
- Free to use and modify in personal and commercial projects. +
- Attribution to Limeplay is appreciated but not required. +
- + Do not resell the registry item as a standalone component library. + +
-
+
+
-
- )
-}
-```
diff --git a/apps/www/content/docs/hooks/meta.json b/apps/www/content/docs/hooks/meta.json
index 6a3ca26f..fe46b196 100644
--- a/apps/www/content/docs/hooks/meta.json
+++ b/apps/www/content/docs/hooks/meta.json
@@ -3,6 +3,7 @@
"description": "Player state and utility hooks",
"pages": [
"use-asset",
+ "use-playback-source",
"use-player",
"use-playback",
"use-volume",
diff --git a/apps/www/content/docs/hooks/use-asset.mdx b/apps/www/content/docs/hooks/use-asset.mdx
index ef0bbf9a..8d4e9f15 100644
--- a/apps/www/content/docs/hooks/use-asset.mdx
+++ b/apps/www/content/docs/hooks/use-asset.mdx
@@ -1,6 +1,6 @@
---
title: use-asset
-description: Higher-order feature combining player and playlist for managing media assets.
+description: Asset playback orchestration for player, playlist, preloading, and source resolution.
---
## Installation
@@ -9,16 +9,19 @@ description: Higher-order feature combining player and playlist for managing med
npx shadcn add @limeplay/use-asset
```
-Register the feature (requires `playerFeature`, `playlistFeature`, and `playbackFeature`):
+Register the feature after `playerFeature`, `playlistFeature`, and `playbackFeature`:
```tsx title="lib/media.ts"
"use client"
import { assetFeature } from "@/hooks/limeplay/use-asset"
+import { playbackFeature } from "@/hooks/limeplay/use-playback"
+import { playerFeature } from "@/hooks/limeplay/use-player"
+import { playlistFeature } from "@/hooks/limeplay/use-playlist"
+import { createMediaKit } from "@/components/limeplay/media-provider"
createMediaKit({
features: [
- ...,
playerFeature(),
playlistFeature(),
playbackFeature(),
@@ -27,41 +30,70 @@ createMediaKit({
})
```
-## useAsset Hook
+## Usage
```tsx
import { useAsset, type Asset } from "@/hooks/limeplay/use-asset"
-const { loadAsset, loadPlaylist, next, previous, hasNext, currentItem } =
- useAsset({
- onAssetLoaded: (asset) => console.log("Loaded:", asset.title),
- onLoadError: (asset, error, ctx) => {
- console.error("Failed:", asset.title, error)
- return "skip" // or "retry" or "stop"
- },
+interface VideoAsset extends Asset {
+ playbackUrl: string
+ slug: string
+}
+
+export function PlaylistController({ assets }: { assets: VideoAsset[] }) {
+ const { currentItem, loadPlaylist, next, previous } = useAsset
+
+
+
+ {currentItem?.properties.title}
+
+ )
+}
```
+Use `loadAsset` for a single item and `loadPlaylist` for a queue. When a playlist advances, `useAsset` loads the active item and can preload the next item.
+
### Asset Interface
-| Field | Type | Required | Description |
-| ------------- | ---------------------------------- | -------- | ---------------------- |
-| `id` | `string` | Yes | Unique identifier |
-| `src` | `string` | Yes | Media source URL |
-| `title` | `string` | No | Display title |
-| `description` | `string` | No | Description |
-| `poster` | `string` | No | Poster image URL |
-| `config` | `shaka.extern.PlayerConfiguration` | No | Per-asset Shaka config |
+| Field | Type | Required | Description |
+| ------------- | ---------------------------------- | -------- | -------------------------------- |
+| `id` | `string` | No | Stable identifier for the asset. |
+| `src` | `string` | No | Media source URL. |
+| `config` | `shaka.extern.PlayerConfiguration` | No | Per-asset Shaka config. |
+| `title` | `string` | No | Display title. |
+| `description` | `string` | No | Description. |
+| `poster` | `string` | No | Poster image URL. |
+
+If `id` is omitted, `useAsset` derives one from `getAssetId` or `src`. Assets without `src` should provide `resolveSource`.
+
+### Source Resolution
+
+Use `resolveSource` when the playable source is not stored directly on `asset.src`.
+
+```tsx
+useAsset({
+ resolveSource: async ({ asset, operation, signal }) => {
+ const response = await fetch(`/api/assets/${asset.id}/source`, { signal })
+ const source = await response.json()
+
+ return {
+ config: source.config,
+ src: source.url,
+ }
+ },
+})
+```
+
+`operation` is `"load"` or `"preload"`, so source endpoints can avoid expensive work during preloading when needed.
### Options
@@ -77,4 +109,31 @@ loadPlaylist([asset1, asset2, asset3])
name="UseAssetReturn"
/>
-`useAsset` orchestrates `usePlayer` and `usePlaylist` ā it automatically loads assets when the playlist advances, handles preloading, auto-advances on playback end, and provides error recovery.
+## Store
+
+`assetFeature` adds a store slice that tracks active options, load cancellation, retry state, and preload cancellation.
+
+### State
+
+
+ )}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/audio-source.tsx b/apps/www/registry/default/blocks/audio-player/components/audio-source.tsx
new file mode 100644
index 00000000..9253865c
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/audio-source.tsx
@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+
+import type {
+ Asset,
+ GetAssetId,
+ ResolveSource,
+ UseAssetOptions,
+} from "@/registry/default/hooks/use-asset"
+
+import { PlaybackSourceController } from "@/registry/default/hooks/use-playback-source"
+
+export interface AudioPlayerAsset extends Asset {
+ description?: string
+ duration?: number
+ genre?: string
+ playbackUrls?: PlaybackUrls
+ poster?: string
+ releaseYear?: number | string
+ title?: string
+ year?: number | string
+}
+
+export interface AudioSourceContextValue {
+ items: AudioPlayerAsset[]
+}
+
+export interface AudioSourceProviderProps {
+ asset?: AudioPlayerAsset
+ assetOptions?: Omit<
+ UseAssetOptions
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx b/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx
new file mode 100644
index 00000000..153e2714
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/fixed-timeline-control.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import * as TimelineSlider from "@/registry/default/ui/timeline-control"
+import {
+ Duration,
+ Elapsed,
+ HoverTime,
+} from "@/registry/default/ui/timeline-labels"
+
+export function TimeLabels() {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+export function TimelineControl() {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/icons.tsx b/apps/www/registry/default/blocks/audio-player/components/icons.tsx
new file mode 100644
index 00000000..bbb683c8
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/icons.tsx
@@ -0,0 +1,241 @@
+import type { SVGProps } from "react"
+
+export function DislikeIcon(props: SVGProps
+ )}
+ as="audio"
+ autoPlay={autoPlay}
+ />
+
+ {children}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function AnimatedIcon({
+ children,
+ id,
+}: {
+ children: React.ReactNode
+ id: string
+}) {
+ return (
+
+
+
+ + Queue +
+
+ {shuffle && (
+
+ Shuffled
+
+ )}
+
+ {displayAssets.length} tracks
+
+
+
+ {displayAssets.length === 0 && (
+ handleAssetSelect(id)}
+ preloaded={preloadManagers.has(id)}
+ setSize={displayAssets.length}
+ />
+ ))}
+
+
+ Queue is empty
+
+ )}
+
+ {displayAssets.map(({ asset, id }, index) => (
+
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/components/volume-group-control.tsx b/apps/www/registry/default/blocks/audio-player/components/volume-group-control.tsx
new file mode 100644
index 00000000..83cf49b9
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/components/volume-group-control.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { AnimatePresence, motion } from "motion/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/default/blocks/audio-player/components/button"
+import {
+ VolumeFullIcon,
+ VolumeMutedIcon,
+} from "@/registry/default/blocks/audio-player/components/icons"
+import { useVolumeStore } from "@/registry/default/hooks/use-volume"
+import { MuteControl } from "@/registry/default/ui/mute-control"
+import * as VolumeSlider from "@/registry/default/ui/volume-control"
+
+export function VolumeControl() {
+ const muted = useVolumeStore((state) => state.muted)
+ const volume = useVolumeStore((state) => state.level)
+
+ const isMuted = muted || volume === 0
+
+ return (
+
+ {asset?.poster ? (
+ 
+ ) : (
+
+ )}
+
+
+
+
+ {title}
+
+ {genre && (
+
+ {genre}
+ {releaseYear ? ` ā¢ ${releaseYear}` : ""}
+
+ )}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/www/registry/default/blocks/audio-player/hooks/use-playlist-asset.ts b/apps/www/registry/default/blocks/audio-player/hooks/use-playlist-asset.ts
new file mode 100644
index 00000000..1cfa4f53
--- /dev/null
+++ b/apps/www/registry/default/blocks/audio-player/hooks/use-playlist-asset.ts
@@ -0,0 +1,28 @@
+"use client"
+
+import type {
+ AudioPlayerAsset,
+ PlaybackUrls,
+} from "@/registry/default/blocks/audio-player/components/audio-source"
+import type { UseAssetReturn } from "@/registry/default/hooks/use-asset"
+
+import { useAudioSource } from "@/registry/default/blocks/audio-player/components/audio-source"
+import { useAsset } from "@/registry/default/hooks/use-asset"
+
+export type { PlaybackUrls }
+
+export type PlaylistAsset = AudioPlayerAsset
+
+export interface UsePlaylistAssetReturn extends UseAssetReturn
- {ASSETS.map((asset) => {
- const isCurrentAsset = currentItem?.id === asset.id
- const isAssetPreloaded = isPreloaded(asset.id)
+ {orderedItems.map((item) => {
+ const asset = item.properties
+ const isCurrentAsset = currentItem?.id === item.id
+ const isAssetPreloaded = preloadManagers.has(item.id)
return (
handleAssetSelect(asset)}
- onMouseEnter={() => handleAssetHover(asset)}
+ key={item.id}
+ onClick={() => handleAssetSelect(item.id)}
+ onMouseEnter={() => handleAssetHover(item.id, asset)}
>
+ {
+export interface AssetLoadContext {
asset: TAsset
- defaultLoad: (
- source?: null | shaka.media.PreloadManager | string,
- startTime?: number
+ loadDefault: (
+ source?: null | PlaybackSource | shaka.media.PreloadManager | string,
+ options?: number | { startTime?: number }
) => Promise
media: HTMLMediaElement
player: shaka.Player
preloadManager?: shaka.media.PreloadManager
+ previousError?: unknown
+ retryCount: number
+ signal: AbortSignal
+ startTime?: number
+}
+
+export interface AssetPreloadContext {
+ asset: TAsset
+ player: shaka.Player
+ preloadDefault: (
+ source?: PlaybackSource | string
+ ) => Promise
+ previousError?: unknown
+ retryCount: number
+ signal: AbortSignal
+}
+
+export type AssetSourceOperation = "load" | "preload"
+
+export type GetAssetId = (
+ asset: TAsset,
+ context: {
+ index?: number
+ origin: "asset" | "media-props" | "playlist"
+ }
+) => null | string | undefined
+
+export interface NormalizedAsset {
+ id: string
+ properties: TAsset
+}
+
+export interface PlaybackSource {
+ config?: shaka.extern.PlayerConfiguration
+ src?: string
+}
+
+export type ResolveSource = (
+ context: ResolveSourceContext
+) => MaybePromise
+
+export interface ResolveSourceContext {
+ asset: TAsset
+ operation: AssetSourceOperation
+ previousError?: unknown
+ retryCount: number
signal: AbortSignal
startTime?: number
}
+export interface UseAssetActions {
+ clearOptions: (ownerId: string) => void
+ loadAsset: (asset: Asset, startTime?: number) => Promise
+ loadPlaylist: (assets: Asset[], startIndex?: number) => void
+ preloadAsset: (asset: Asset) => Promise
+ preloadNext: () => Promise
+ setOptions: (options: UseAssetOptions, ownerId: string) => void
+}
+
+export interface UseAssetEvents {
+ ended: "advance to the next playlist item when available"
+ playbackerror: "delegate reload, skip, or stop decisions to onPlaybackError"
+ playlistchange: "load the newly active playlist item"
+}
+
+export type UseAssetLoadContext = AssetLoadContext
+
export interface UseAssetLoader {
- load?: (context: UseAssetLoadContext) => Promise
+ load?: (context: AssetLoadContext) => Promise
preload?: (
- context: UseAssetPreloadContext
+ context: AssetPreloadContext
) => Promise
}
export interface UseAssetOptions {
autoplayFirst?: boolean
+ getAssetId?: GetAssetId
loader?: UseAssetLoader
maxRetries?: number
onAssetChange?: (event: PlaylistChangeEvent) => void
onAssetLoaded?: (asset: TAsset) => void
+ onError?: (error: Error, asset?: TAsset) => void
onLoadError?: (
asset: TAsset,
error: unknown,
@@ -81,16 +145,11 @@ export interface UseAssetOptions {
| { action: "skip" }
| { action: "stop" }
>
- playerOptions?: Partial>
+ resolveSource?: ResolveSource
}
-export interface UseAssetPreloadContext {
- asset: TAsset
- defaultPreload: (
- source?: string
- ) => Promise
- player: shaka.Player
-}
+export type UseAssetPreloadContext =
+ AssetPreloadContext
export interface UseAssetReturn {
cancelPreload: (assetId: string) => void
@@ -131,25 +190,48 @@ export interface UseAssetReturn {
toggleShuffle: () => void
}
+export interface UseAssetState {
+ installedOptions?: UseAssetOptions
+ isFirstLoad: boolean
+ loadAbortController: AbortController | null
+ loadGeneration: number
+ optionsOwnerId: null | string
+ previousError: unknown
+ retryCount: number
+}
+
export const ASSET_FEATURE_KEY = "asset"
export interface AssetStore {
[ASSET_FEATURE_KEY]: {
+ clearOptions: (ownerId: string) => void
installedOptions?: UseAssetOptions
isFirstLoad: boolean
loadAbortController: AbortController | null
loadAsset: (asset: Asset, startTime?: number) => Promise
loadGeneration: number
loadPlaylist: (assets: Asset[], startIndex?: number) => void
+ optionsByOwner: Record>
+ optionsOwnerId: null | string
+ optionsOwnerOrder: string[]
+ preloadAbortControllers: Record
preloadAsset: (asset: Asset) => Promise
preloadNext: () => Promise
+ previousError: unknown
retryCount: number
- setOptions: (options?: UseAssetOptions) => void
+ setOptions: (options: UseAssetOptions, ownerId: string) => void
}
}
type AssetSetupStore = AssetStore & PlaybackStore & PlayerStore & PlaylistStore
+type MaybePromise = Promise | T
+
+type NormalizedSource = {
+ config?: shaka.extern.PlayerConfiguration
+ source?: null | shaka.media.PreloadManager | string
+}
+
export function assetFeature(): MediaFeature<
AssetStore,
AssetStore & MediaStore & PlaybackStore & PlayerStore & PlaylistStore
@@ -157,6 +239,26 @@ export function assetFeature(): MediaFeature<
return {
createSlice: (set, get) => ({
[ASSET_FEATURE_KEY]: {
+ clearOptions: (ownerId) => {
+ if (!get().asset.optionsByOwner[ownerId]) return
+
+ set(({ asset }) => {
+ delete asset.optionsByOwner[ownerId]
+ asset.optionsOwnerOrder = asset.optionsOwnerOrder.filter(
+ (id) => id !== ownerId
+ )
+
+ if (asset.optionsOwnerId !== ownerId) return
+
+ const nextOwnerId =
+ asset.optionsOwnerOrder[asset.optionsOwnerOrder.length - 1] ??
+ null
+ asset.optionsOwnerId = nextOwnerId
+ asset.installedOptions = nextOwnerId
+ ? asset.optionsByOwner[nextOwnerId]
+ : undefined
+ })
+ },
installedOptions: undefined,
isFirstLoad: true,
loadAbortController: null,
@@ -171,6 +273,10 @@ export function assetFeature(): MediaFeature<
return false
}
+ const assetId = getNormalizedAssetId(asset, options, {
+ origin: "asset",
+ })
+
const generation = get().asset.loadGeneration + 1
get().asset.loadAbortController?.abort()
@@ -183,60 +289,89 @@ export function assetFeature(): MediaFeature<
media.pause()
- const {
- onError: onPlayerError,
- onLoad,
- onPreload: _onPreload,
- } = options?.playerOptions ?? {}
-
try {
const preloadManagers = get().player.preloadManagers as Map<
string,
shaka.media.PreloadManager
>
- const preloadManager = preloadManagers.get(asset.id)
-
- const defaultLoad = async (
- source?: null | shaka.media.PreloadManager | string,
- customStartTime?: number
+ const preloadManager = preloadManagers.get(assetId)
+ const retryCount = get().asset.retryCount
+ const previousError = get().asset.previousError ?? undefined
+
+ const loadDefault = async (
+ source?:
+ | null
+ | PlaybackSource
+ | shaka.media.PreloadManager
+ | string,
+ loadOptions?: number | { startTime?: number }
) => {
+ const normalizedSource = normalizePlaybackSource(source)
player.resetConfiguration()
+
if (asset.config) {
player.configure(asset.config)
}
- const resolvedSource =
- source === undefined ? (preloadManager ?? asset.src) : source
+ if (normalizedSource.config) {
+ player.configure(normalizedSource.config)
+ }
- const finalStartTime = customStartTime ?? startTime
+ const shouldUseFallbackSource =
+ source === undefined ||
+ source === null ||
+ (Boolean(normalizedSource.config) && !normalizedSource.source)
+ const resolvedSource = shouldUseFallbackSource
+ ? (preloadManager ?? normalizedSource.source ?? asset.src)
+ : normalizedSource.source
+
+ const finalStartTime =
+ typeof loadOptions === "number"
+ ? loadOptions
+ : (loadOptions?.startTime ?? startTime)
const timeToLoad = finalStartTime ?? undefined
- if (resolvedSource) {
- await player.load(resolvedSource, timeToLoad)
- } else {
- await player.load(asset.src, timeToLoad)
+ if (!resolvedSource) {
+ throw new Error(
+ `[useAsset] Missing playback source for asset "${assetId}". Provide asset.src or resolveSource.`
+ )
}
+
+ await player.load(resolvedSource, timeToLoad)
}
if (options?.loader?.load) {
await options.loader.load({
asset,
- defaultLoad,
+ loadDefault,
media,
player,
preloadManager,
+ previousError,
+ retryCount,
signal: abortController.signal,
startTime,
})
- } else if (onLoad) {
- await onLoad(asset, player, media, preloadManager, startTime)
} else {
- await defaultLoad()
+ const resolved = await resolveSourceValue(options, {
+ asset,
+ operation: "load",
+ previousError,
+ retryCount,
+ signal: abortController.signal,
+ startTime,
+ })
+
+ if (abortController.signal.aborted) {
+ return false
+ }
+
+ await loadDefault(resolved)
}
if (preloadManager) {
const updated = new Map(preloadManagers)
- updated.delete(asset.id)
+ updated.delete(assetId)
set(({ player }) => {
player.preloadManagers = updated
})
@@ -258,6 +393,7 @@ export function assetFeature(): MediaFeature<
set(({ asset }) => {
asset.isFirstLoad = false
+ asset.previousError = null
asset.retryCount = 0
})
@@ -272,17 +408,17 @@ export function assetFeature(): MediaFeature<
return false
}
- onPlayerError?.(
- error instanceof Error
- ? error
- : Object.assign(new Error(String(error)), error as object),
- asset
- )
+ const normalizedError = toError(error)
+ options?.onError?.(normalizedError, asset)
const playlist = get().playlist
const maxRetries = options?.maxRetries ?? 0
const currentRetryCount = get().asset.retryCount
const hasNext = playlist.getNextIndex() !== -1
+ set(({ asset }) => {
+ asset.previousError = error
+ })
+
if (options?.onLoadError) {
const decision = options.onLoadError(asset, error, {
hasNext,
@@ -302,6 +438,7 @@ export function assetFeature(): MediaFeature<
hasNext
) {
set(({ asset }) => {
+ asset.previousError = null
asset.retryCount = 0
})
playlist.next()
@@ -309,6 +446,7 @@ export function assetFeature(): MediaFeature<
}
set(({ asset }) => {
+ asset.previousError = null
asset.retryCount = 0
})
return false
@@ -316,6 +454,7 @@ export function assetFeature(): MediaFeature<
if (hasNext) {
set(({ asset }) => {
+ asset.previousError = null
asset.retryCount = 0
})
playlist.next()
@@ -325,18 +464,23 @@ export function assetFeature(): MediaFeature<
},
loadGeneration: 0,
loadPlaylist: (assets, startIndex = 0) => {
+ const options = get().asset.installedOptions as
+ | undefined
+ | UseAssetOptions
+ const normalizedAssets = normalizeAssets(assets, options)
+
set(({ asset }) => {
asset.isFirstLoad = true
+ asset.previousError = null
+ asset.retryCount = 0
})
- get().playlist.load(
- assets.map((asset) => ({
- id: asset.id,
- properties: asset,
- })),
- startIndex
- )
+ get().playlist.load(normalizedAssets, startIndex)
},
+ optionsByOwner: {},
+ optionsOwnerId: null,
+ optionsOwnerOrder: [],
+ preloadAbortControllers: {},
preloadAsset: async (asset) => {
const player = get().player.instance as null | shaka.Player
const options = get().asset.installedOptions as
@@ -344,20 +488,53 @@ export function assetFeature(): MediaFeature<
| UseAssetOptions
if (!player) return
- const { onError: onPlayerError, onPreload } =
- options?.playerOptions ?? {}
+ const assetId = getNormalizedAssetId(asset, options, {
+ origin: "asset",
+ })
+ get().asset.preloadAbortControllers[assetId]?.abort()
+ const abortController = new AbortController()
+
+ set(({ asset }) => {
+ asset.preloadAbortControllers[assetId] = abortController
+ })
+
+ const isCurrentPreload = () => {
+ return (
+ get().asset.preloadAbortControllers[assetId] ===
+ abortController && !abortController.signal.aborted
+ )
+ }
try {
- const defaultPreload = async (
- source?: string
+ const retryCount = get().asset.retryCount
+ const previousError = get().asset.previousError ?? undefined
+
+ const preloadDefault = async (
+ source?: PlaybackSource | string
): Promise => {
- const resolvedSource = source ?? asset.src
- return player.preload(
+ if (!isCurrentPreload()) return null
+
+ const normalizedSource = normalizePlaybackSource(source)
+ const resolvedSource = normalizedSource.source ?? asset.src
+
+ if (!resolvedSource || typeof resolvedSource !== "string") {
+ throw new Error(
+ `[useAsset] Missing preload source for asset "${assetId}". Provide asset.src or resolveSource.`
+ )
+ }
+
+ const manager = await player.preload(
resolvedSource,
undefined,
undefined,
- asset.config
+ mergePlayerConfiguration(asset.config, normalizedSource.config)
)
+ if (!isCurrentPreload()) {
+ void manager?.destroy()
+ return null
+ }
+
+ return manager
}
let manager: null | shaka.media.PreloadManager = null
@@ -365,13 +542,29 @@ export function assetFeature(): MediaFeature<
if (options?.loader?.preload) {
manager = await options.loader.preload({
asset,
- defaultPreload,
player,
+ preloadDefault,
+ previousError,
+ retryCount,
+ signal: abortController.signal,
})
- } else if (onPreload) {
- manager = await onPreload(asset, player)
} else {
- manager = await defaultPreload()
+ const resolved = await resolveSourceValue(options, {
+ asset,
+ operation: "preload",
+ previousError,
+ retryCount,
+ signal: abortController.signal,
+ })
+
+ if (!isCurrentPreload()) return
+
+ manager = await preloadDefault(resolved ?? undefined)
+ }
+
+ if (!isCurrentPreload()) {
+ void manager?.destroy()
+ return
}
if (manager) {
@@ -379,25 +572,28 @@ export function assetFeature(): MediaFeature<
string,
shaka.media.PreloadManager
>
+ const previousManager = existing.get(assetId)
+
+ if (previousManager && previousManager !== manager) {
+ void previousManager.destroy()
+ }
+
const updated = new Map(existing)
- updated.set(asset.id, manager)
+ updated.set(assetId, manager)
set(({ player }) => {
player.preloadManagers = updated
})
}
} catch (error) {
- const err =
- error instanceof Error
- ? error
- : typeof error === "object" && error !== null
- ? Object.assign(
- new Error(
- String((error as { message?: string }).message ?? error)
- ),
- error
- )
- : new Error(String(error))
- onPlayerError?.(err, asset)
+ if (
+ abortController.signal.aborted ||
+ (error instanceof DOMException && error.name === "AbortError")
+ ) {
+ return
+ }
+
+ const err = toError(error)
+ options?.onError?.(err, asset)
console.error("[useAsset] Preload error:", error)
}
},
@@ -413,10 +609,17 @@ export function assetFeature(): MediaFeature<
)
}
},
+ previousError: null,
retryCount: 0,
- setOptions: (options) => {
+ setOptions: (options, ownerId) => {
set(({ asset }) => {
+ asset.optionsByOwner[ownerId] = options
+ asset.optionsOwnerOrder = [
+ ...asset.optionsOwnerOrder.filter((id) => id !== ownerId),
+ ownerId,
+ ]
asset.installedOptions = options
+ asset.optionsOwnerId = ownerId
})
},
},
@@ -425,11 +628,11 @@ export function assetFeature(): MediaFeature<
Setup: AssetSetup,
}
}
-
export function useAsset(
options?: UseAssetOptions
): UseAssetReturn {
const api = useMediaFeatureApi(ASSET_FEATURE_KEY)
+ const optionsOwnerId = useId()
const playlist = usePlaylist()
const loadAsset = useAssetStore((state) => state.loadAsset) as (
asset: TAsset,
@@ -447,13 +650,24 @@ export function useAsset(
useEffect(() => {
if (!options) return
- api.setState(({ asset }) => {
- asset.installedOptions = options as unknown as UseAssetOptions
- })
- }, [api, options])
+ api
+ .getState()
+ .asset.setOptions(
+ options as unknown as UseAssetOptions,
+ optionsOwnerId
+ )
+
+ return () => {
+ api.getState().asset.clearOptions(optionsOwnerId)
+ }
+ }, [api, options, optionsOwnerId])
const cancelPreload = useCallback(
(assetId: string) => {
+ const preloadAbortController =
+ api.getState().asset.preloadAbortControllers[assetId]
+ preloadAbortController?.abort()
+
const preloadManagers = (api.getState() as unknown as PlayerStore).player
.preloadManagers as Map
const manager = preloadManagers.get(assetId)
@@ -467,6 +681,10 @@ export function useAsset(
}
)
}
+
+ ;(api as unknown as ImmerStoreApi).setState(({ asset }) => {
+ delete asset.preloadAbortControllers[assetId]
+ })
},
[api]
)
@@ -547,6 +765,9 @@ function AssetSetup() {
const assetToLoad = (decision.asset ??
currentItem.properties) as unknown as Asset
const startTime = decision.startTime ?? currentTime
+ api.setState(({ asset }) => {
+ asset.previousError = payload.error
+ })
void api.getState().asset.loadAsset(assetToLoad, startTime)
} else if (decision.action === "skip" && getHasNext()) {
api.getState().playlist.next()
@@ -575,3 +796,114 @@ function AssetSetup() {
return null
}
+
+function getNormalizedAssetId(
+ asset: Asset,
+ options: undefined | UseAssetOptions,
+ context: { index?: number; origin: "asset" | "media-props" | "playlist" }
+): string {
+ const id = asset.id ?? options?.getAssetId?.(asset, context)
+ if (id) return id
+
+ if (asset.src) {
+ return `lp_src_${hashString(asset.src)}`
+ }
+
+ throw new Error(
+ `[useAsset] Missing asset id. Provide asset.id, asset.src, or getAssetId for ${context.origin} assets.`
+ )
+}
+
+function hashString(value: string): string {
+ let hash = 0
+
+ for (let index = 0; index < value.length; index++) {
+ hash = (hash << 5) - hash + value.charCodeAt(index)
+ hash |= 0
+ }
+
+ return Math.abs(hash).toString(36)
+}
+
+function mergePlayerConfiguration(
+ base?: shaka.extern.PlayerConfiguration,
+ override?: shaka.extern.PlayerConfiguration
+): shaka.extern.PlayerConfiguration | undefined {
+ if (!base) return override
+ if (!override) return base
+
+ return {
+ ...base,
+ ...override,
+ }
+}
+
+function normalizeAssets(
+ assets: Asset[],
+ options?: UseAssetOptions
+): NormalizedAsset[] {
+ const usedIds = new Set()
+
+ return assets.map((asset, index) => {
+ const id = getNormalizedAssetId(asset, options, {
+ index,
+ origin: "playlist",
+ })
+
+ if (usedIds.has(id)) {
+ throw new Error(
+ `[useAsset] Duplicate asset id "${id}". Provide explicit ids for duplicate playlist entries.`
+ )
+ }
+
+ usedIds.add(id)
+
+ return {
+ id,
+ properties: asset,
+ }
+ })
+}
+
+function normalizePlaybackSource(
+ source?: null | PlaybackSource | shaka.media.PreloadManager | string
+): NormalizedSource {
+ if (typeof source === "string") {
+ return { source }
+ }
+
+ if (!source) {
+ return {}
+ }
+
+ if ("src" in source || "config" in source) {
+ const playbackSource = source as PlaybackSource
+
+ return {
+ config: playbackSource.config,
+ source: playbackSource.src,
+ }
+ }
+
+ return { source: source as shaka.media.PreloadManager }
+}
+
+async function resolveSourceValue(
+ options: undefined | UseAssetOptions,
+ context: ResolveSourceContext
+): Promise {
+ return options?.resolveSource?.(context)
+}
+
+function toError(error: unknown): Error {
+ if (error instanceof Error) return error
+
+ if (typeof error === "object" && error !== null) {
+ return Object.assign(
+ new Error(String((error as { message?: string }).message ?? error)),
+ error
+ )
+ }
+
+ return new Error(String(error))
+}
diff --git a/apps/www/registry/default/hooks/use-media.ts b/apps/www/registry/default/hooks/use-media.ts
index 8636c9c4..99f2c756 100644
--- a/apps/www/registry/default/hooks/use-media.ts
+++ b/apps/www/registry/default/hooks/use-media.ts
@@ -6,8 +6,9 @@ import { useMediaFeatureStore } from "@/registry/default/ui/media-provider"
export const MEDIA_FEATURE_KEY = "media"
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface MediaProviderProps {}
+export interface MediaProviderProps {
+ debug?: boolean
+}
export interface MediaStore {
media: {
diff --git a/apps/www/registry/default/hooks/use-playback-source.ts b/apps/www/registry/default/hooks/use-playback-source.ts
new file mode 100644
index 00000000..5eaacfbd
--- /dev/null
+++ b/apps/www/registry/default/hooks/use-playback-source.ts
@@ -0,0 +1,100 @@
+"use client"
+
+import { useEffect, useMemo, useRef } from "react"
+
+import type {
+ Asset,
+ GetAssetId,
+ ResolveSource,
+ UseAssetOptions,
+} from "@/registry/default/hooks/use-asset"
+
+import { useAsset } from "@/registry/default/hooks/use-asset"
+import { usePlayerStore } from "@/registry/default/hooks/use-player"
+
+export interface UsePlaybackSourceOptions {
+ asset?: TAsset
+ assetOptions?: Omit, "getAssetId" | "resolveSource">
+ autoLoad?: boolean
+ getAssetId?: GetAssetId
+ initialIndex?: number
+ mediaSrc?: string
+ playlist?: TAsset[]
+ resolveSource?: ResolveSource
+ sourceKey?: string
+}
+
+export function PlaybackSourceController(
+ props: UsePlaybackSourceOptions
+) {
+ usePlaybackSource(props)
+
+ return null
+}
+
+export function usePlaybackSource(
+ options: UsePlaybackSourceOptions
+): void {
+ const {
+ asset,
+ assetOptions,
+ autoLoad = true,
+ getAssetId,
+ initialIndex = 0,
+ mediaSrc,
+ playlist,
+ resolveSource,
+ sourceKey,
+ } = options
+
+ const player = usePlayerStore((state) => state.instance)
+ const installedOptions = useMemo>(
+ () => ({
+ ...assetOptions,
+ getAssetId,
+ resolveSource,
+ }),
+ [assetOptions, getAssetId, resolveSource]
+ )
+ const { loadPlaylist } = useAsset(installedOptions)
+ const loadedSourceKeyRef = useRef(null)
+
+ useEffect(() => {
+ loadedSourceKeyRef.current = null
+ }, [player])
+
+ const assets = useMemo(() => {
+ if (playlist) return playlist
+ if (asset) return [asset]
+ if (mediaSrc) return [{ src: mediaSrc } as TAsset]
+
+ return []
+ }, [asset, mediaSrc, playlist])
+
+ const resolvedSourceKey = useMemo(() => {
+ if (sourceKey) return sourceKey
+
+ return assets
+ .map((item, index) => {
+ const id =
+ item.id ??
+ getAssetId?.(item, {
+ index,
+ origin: playlist ? "playlist" : asset ? "asset" : "media-props",
+ }) ??
+ item.src
+
+ return id ?? `item:${index}`
+ })
+ .join("|")
+ }, [asset, assets, getAssetId, playlist, sourceKey])
+
+ useEffect(() => {
+ if (!autoLoad || !player || assets.length === 0) return
+
+ if (loadedSourceKeyRef.current === resolvedSourceKey) return
+ loadedSourceKeyRef.current = resolvedSourceKey
+
+ loadPlaylist(assets, initialIndex)
+ }, [assets, autoLoad, initialIndex, loadPlaylist, player, resolvedSourceKey])
+}
diff --git a/apps/www/registry/default/hooks/use-player.ts b/apps/www/registry/default/hooks/use-player.ts
index d16a14d5..1646bc70 100644
--- a/apps/www/registry/default/hooks/use-player.ts
+++ b/apps/www/registry/default/hooks/use-player.ts
@@ -261,7 +261,8 @@ function PlayerSetup() {
const localPlayer = new shakaLib.Player() as shaka.Player
try {
- await localPlayer.attach(mediaElement)
+ // DEV: initializeMediaSource is false, otherwise player is in loaded status by default
+ await localPlayer.attach(mediaElement, false)
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- mutated by cleanup closure during await
if (aborted) {
diff --git a/apps/www/registry/default/hooks/use-playlist.ts b/apps/www/registry/default/hooks/use-playlist.ts
index 4379f918..7eecbfad 100644
--- a/apps/www/registry/default/hooks/use-playlist.ts
+++ b/apps/www/registry/default/hooks/use-playlist.ts
@@ -254,8 +254,13 @@ export function playlistFeature(): MediaFeature {
load: (items, startIndex = 0) => {
const playlist = get().playlist as PlaylistStore["playlist"]
const normalized = normalizeItems(items)
+ const normalizedStartIndex = clamp(
+ startIndex,
+ 0,
+ Math.max(normalized.length - 1, 0)
+ )
const shuffleOrder = playlist.shuffle
- ? createShuffleOrder(normalized.length, startIndex)
+ ? createShuffleOrder(normalized.length, normalizedStartIndex)
: []
set(({ playlist }) => {
@@ -267,17 +272,17 @@ export function playlistFeature(): MediaFeature {
playlist.shuffleOrder = shuffleOrder
})
- if (normalized.length > 0 && startIndex < normalized.length) {
- const startItem = normalized[startIndex] as PlaylistItem
+ if (normalized.length > 0) {
+ const startItem = normalized[normalizedStartIndex] as PlaylistItem
set(({ playlist }) => {
- playlist.currentIndex = startIndex
+ playlist.currentIndex = normalizedStartIndex
playlist.currentItem = startItem
})
emitPlaylistChange(
events.emit,
- startIndex,
+ normalizedStartIndex,
startItem,
-1,
null,
diff --git a/apps/www/registry/default/ui/limeplay-logo.tsx b/apps/www/registry/default/ui/limeplay-logo.tsx
index 43502bf3..4e03fc33 100644
--- a/apps/www/registry/default/ui/limeplay-logo.tsx
+++ b/apps/www/registry/default/ui/limeplay-logo.tsx
@@ -5,15 +5,7 @@ export function LimeplayLogo(props: React.SVGProps) {
return (