4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 51:T34ae,"use client" import * as React from "react" import { useStore } from "zustand" import { immer } from "zustand/middleware/immer" import { createStore, type StoreApi } from "zustand/vanilla" import { type MediaProviderProps, type MediaStore, } from "@/registry/default/hooks/use-media" export type { MediaProviderProps, MediaStore } /** * A Zustand store API extended with Immer-style `setState`. * * Unlike vanilla Zustand's `setState(partial)`, this accepts a mutator function * that receives a mutable draft of the state: * * ```ts * store.setState(({ volume }) => { * volume.level = 0.5 * }) * ``` */ export type ImmerStoreApi = StoreApi & { setState: (updater: (state: T) => void) => void } // ── Event bridge ────────────────────────────────────────────────────── export declare const mediaEventMap: unique symbol /** * Typed event emitter interface. Features call `emit()`, consumers call `on()` / `once()`. */ // eslint-disable-next-line @typescript-eslint/no-empty-object-type export interface MediaEvents { emit: >( name: TName, ...args: EventArgs ) => void on: >( name: TName, listener: EventListener ) => () => void once: >( name: TName, listener: EventListener ) => () => void } /** * Brand interface that marks a store slice with its event types. * When multiple slices are intersected, their event maps merge automatically. * * ```ts * export interface VolumeEvents { * volumeChange: { muted: boolean; volume: number } * } * export interface VolumeStore extends MediaEventSlice { * volume: { level: number; muted: boolean } * } * ``` */ export interface MediaEventSlice< // eslint-disable-next-line @typescript-eslint/no-empty-object-type TEvents extends {} = {}, > { readonly [mediaEventMap]?: TEvents } /** * Defines a media feature slice. Each feature owns a namespaced key in the store. * * @typeParam TSlice - The shape of this feature's state (e.g. `VolumeStore`). * @typeParam TStore - The full store shape visible to `createSlice`. Defaults to the * base `MediaStore`. Widen this when your slice needs cross-feature access * (e.g. `MediaStore & PlayerStore`). * * ```ts * export function volumeFeature(): MediaFeature { * return { * key: "volume", * createSlice: (set, get) => ({ volume: { level: 1, ... } }), * Setup: VolumeSetup, // optional component mounted inside MediaProvider * } * } * ``` */ export interface MediaFeature< TSlice extends MediaShape, TStore extends MediaShape & MediaStore = AnyMediaStore, > { createSlice: ( set: ImmerStoreApi["setState"], get: StoreApi["getState"], store: ImmerStoreApi, // eslint-disable-next-line @typescript-eslint/no-explicit-any events: MediaEvents ) => TSlice key: keyof TSlice & string Setup?: React.ComponentType } /** * Derives the full store type from an array of features. * * ```ts * type Store = MediaStoreFromFeatures * // MediaStore & VolumeStore & PlaybackStore & ... * ``` */ export type MediaStoreFromFeatures< TFeatures extends readonly MediaFeature[], > = Simplify< MediaStore & UnionToIntersection> > // ── Event bridge internal types ─────────────────────────────────────── type AnyEventListener = (payload?: unknown) => void // eslint-disable-next-line @typescript-eslint/no-empty-object-type type AnyEvents = {} type AnyMediaStore = MediaShape & MediaStore type EventArgs = 0 extends 1 & TPayload ? [payload?: TPayload] : [TPayload] extends [void] ? [] : [payload: TPayload] type EventListener = [TPayload] extends [void] ? () => void : (payload: TPayload) => void type EventsFromStore = TStore extends MediaEventSlice ? TEvents : AnyEvents interface MediaRuntimeContextValue { events: MediaEvents featureKeys: Set store: ImmerStoreApi } type MediaShape = Record type Simplify = { [Key in keyof T]: T[Key] } & {} type SliceFromFeature = TFeature extends MediaFeature ? TSlice : never type UnionToIntersection = ( TUnion extends unknown ? (value: TUnion) => void : never ) extends (value: infer TIntersection) => void ? TIntersection : never // ── Event bridge class ─────────────────────────────────────────────── class MediaEventEmitter< TEvents extends AnyEvents, > implements MediaEvents { private listeners = new Map>() emit = >( name: TName, ...args: EventArgs ) => { const listeners = this.listeners.get(name) if (!listeners) return for (const listener of [...listeners]) { try { listener(args[0]) } catch (err) { console.error(`[MediaEvents] Error in "${name}" listener:`, err) } } } on = >( name: TName, listener: EventListener ) => { let listeners = this.listeners.get(name) if (!listeners) { listeners = new Set() this.listeners.set(name, listeners) } listeners.add(listener as AnyEventListener) let removed = false return () => { if (removed) return removed = true listeners.delete(listener as AnyEventListener) if (listeners.size === 0 && this.listeners.get(name) === listeners) { this.listeners.delete(name) } } } once = >( name: TName, listener: EventListener ) => { const off = this.on(name, ((...args: unknown[]) => { off() ;(listener as AnyEventListener)(...args) }) as EventListener) return off } } const MediaRuntimeContext = React.createContext(null) /** * Creates a fully-typed media runtime from a list of feature slices. * * Returns a `MediaProvider` component and typed hooks scoped to all registered features. * * ```ts * const media = createMediaKit({ * features: [ * mediaFeature(), * playerFeature(), * volumeFeature(), * ] as const, * }) * * // Use in your app: * * * * * // Access store from any child: * const volume = media.useMediaStore(s => s.volume.level) * const api = media.useMediaApi() // full store API for mutations * ``` */ export function createMediaKit< const TFeatures extends readonly MediaFeature[] = readonly MediaFeature[], >({ features }: { features: TFeatures }) { type RuntimeStore = MediaStoreFromFeatures type RuntimeEvents = EventsFromStore function createMediaStore() { const events = new MediaEventEmitter() const store = createStore()( immer((set, get, store) => Object.assign( {}, ...features.map((feature) => feature.createSlice( set as ImmerStoreApi["setState"], get as StoreApi["getState"], store as ImmerStoreApi, events as unknown as MediaEvents> ) ) ) ) ) return { events: events as MediaEvents, store: store as unknown as ImmerStoreApi, } } function MediaProvider({ children, debug, }: React.PropsWithChildren) { const runtimeRef = React.useRef store: ImmerStoreApi }>(null) const featureKeysRef = React.useRef( new Set(features.map((feature) => feature.key)) ) if (!runtimeRef.current) { runtimeRef.current = createMediaStore() if (typeof debug === "boolean") { setMediaDebug(runtimeRef.current.store, debug) } } const runtime = runtimeRef.current React.useLayoutEffect(() => { if (typeof debug !== "boolean") return setMediaDebug(runtime.store, debug) }, [debug, runtime.store]) return ( , featureKeys: featureKeysRef.current, store: runtime.store as ImmerStoreApi, }} > {children} {features.map((feature) => { if (!feature.Setup) { return null } const Setup = feature.Setup return })} ) } function useTypedMediaStore( selector: (state: RuntimeStore) => TSelected ): TSelected { const { store } = useMediaRuntime() return useStore(store as unknown as StoreApi, selector) } function useTypedMediaApi(): ImmerStoreApi { const { store } = useMediaRuntime() return store as unknown as ImmerStoreApi } function useTypedMediaEvents(): MediaEvents { const { events } = useMediaRuntime() return events as unknown as MediaEvents } return { features, MediaProvider, useMediaApi: useTypedMediaApi, useMediaEvents: useTypedMediaEvents, useMediaStore: useTypedMediaStore, } } /** * Returns the raw Immer store API for direct state reads and mutations. * Use this in effects, callbacks, or when you need `getState()` / `setState()` * without subscribing to re-renders. * * For most components, prefer `useMediaStore` or per-feature hooks instead. * * ```ts * const api = useMediaApi() * api.getState().volume.level // read without subscribing * api.setState(({ volume }) => { * volume.level = 0.5 * }) * ``` */ export function useMediaApi() { const { store } = useMediaRuntime() return store as unknown as ImmerStoreApi } /** * Returns the event emitter for the current MediaProvider. * Features emit events; consumers subscribe via `on()` / `once()`. * * ```ts * const events = useMediaEvents() * useEffect(() => { * return events.on(\"volumechange\", ({ volume }) => { * console.log("Volume:", volume) * }) * }, [events]) * ``` */ export function useMediaEvents< TEvents extends AnyEvents = AnyEvents, >(): MediaEvents { const { events } = useMediaRuntime() return events as unknown as MediaEvents } /** * Returns the Immer store API scoped to a specific feature slice. * Throws if the feature is not registered in `createMediaKit`. * * Primarily used inside `Setup` components and hooks that belong to a feature. * * ```ts * const store = useMediaFeatureApi("volume") * store.getState().volume.level * store.setState(({ volume }) => { volume.muted = true }) * ``` */ export function useMediaFeatureApi( featureKey: string ): ImmerStoreApi { const { featureKeys, store } = useMediaRuntime() assertFeature(featureKey, featureKeys) return store as unknown as ImmerStoreApi } /** * Subscribes to a specific feature's state with a selector. * Throws if the feature is not registered. Only re-renders when the * selected value changes (compared via `Object.is`). * * Typically wrapped by per-feature convenience hooks like `useVolumeStore`. * * ```ts * const level = useMediaFeatureStore( * "volume", * (state) => state.volume.level * ) * ``` */ export function useMediaFeatureStore( featureKey: string, selector: (state: MediaStore & TSlice) => TSelected ): TSelected { const { featureKeys, store } = useMediaRuntime() assertFeature(featureKey, featureKeys) return useStore(store as StoreApi, selector) } function assertFeature(featureKey: string, featureKeys: Set) { if (!featureKeys.has(featureKey)) { throw new Error( `Missing "${featureKey}" feature in MediaProvider. Add ${featureKey}Feature() to createMediaKit({ features }).` ) } } function setMediaDebug(store: ImmerStoreApi, debug: boolean) { const state = store.getState() if (!("media" in state) || typeof state.media !== "object") { return } store.setState((state) => { if ("media" in state && typeof state.media === "object") { ;(state.media as MediaStore["media"]).debug = debug } }) } function useMediaRuntime() { const context = React.useContext(MediaRuntimeContext) if (!context) { throw new Error("Missing MediaProvider in root") } return context } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","zustand",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/zustand","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"zustand"}]]}]}],["$","li","immer",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/immer","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"immer"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://limeplay.winoffrg.dev/r/media-provider.json","proxyUrl":"https://shadcnregistry.com/r/limeplay/media-provider","itemId":"@limeplay/media-provider"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/ui/media-provider.tsx","content":"$51","type":"registry:ui","target":"components/limeplay/media-provider.tsx"}]}]]}],"$L52"]}]

Media Provider

Installation

Files

components

Styles