@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/docs/reference/use-optional-menu-context.md

@@ -0,0 +1,101 @@
+# useOptionalMenuContext
+
+Hook to access a Menu context when one is available
+
+## Import
+
+tsx
+
+```
+import { useOptionalMenuContext } from "@videojs/react";
+```
+
+## Usage
+
+Use the optional hook when a component can work both inside and outside `Menu.Root`.
+
+tsx
+
+```
+function MenuAwareLabel() {
+  const menu = useOptionalMenuContext();
+
+  return <span>{menu ? "Nested in a menu" : "Standalone"}</span>;
+}
+```
+
+It returns `null` instead of throwing when no menu context is available.
+
+## API Reference
+
+### Return Value
+
+Property
+
+Type
+
+Details
+
+`core`
+
+`MenuCore`
+
+`menu`
+
+`object`
+
+▸
+
+Type
+
+`{ input: State<MenuInput>; triggerProps: MenuTriggerProps; contentProps: MenuContentProps; triggerElement: HTMLElement | null; contentElement: HTMLElement | null; popupElement: HTMLElement | null; setTriggerElement: ((element: HTMLElement | null) => void); setContentElement: ((element: HTMLElement | null) => void); setPopupElement: ((element: HTMLElement | null) => void); registerItem: ((element: HTMLElement) => (() => void)); registerSubmenu: ((menu: MenuApi) => (() => void)); highlight: ((element: HTMLElement | null, options?: MenuHighlightOptions) => void); highlightFirstItem: ((options?: MenuHighlightOptions) => void); restoreFocus: ((options?: FocusOptions) => void); open: ((reason?: MenuOpenChangeReason) => void); close: ((reason?: MenuOpenChangeReason) => void); syncOpen: ((open: boolean) => void); destroy: (() => void) }`
+
+`parent`
+
+`object`
+
+▸
+
+Type
+
+`{ core: MenuCore; menu: MenuApi; parent: MenuContextValue | null; state: MenuState; preferredSide: MenuState['side']; setPositionedSide: ((side: MenuState['side']) => void); contentId: string; anchorName: string; boundary: PositioningBoundary; container: MediaContainer | null } | null`
+
+`state`
+
+`MenuState`
+
+`preferredSide`
+
+`MenuState['side']`
+
+`setPositionedSide`
+
+`function`
+
+▸
+
+Type
+
+`((side: MenuState['side']) => void)`
+
+`contentId`
+
+`string`
+
+`anchorName`
+
+`string`
+
+`boundary`
+
+`'viewport' | 'container' | string & o...`
+
+▸
+
+Type
+
+`'viewport' | 'container' | string & object | Element | null | undefined`
+
+`container`
+
+`object | null`

package/docs/reference/use-optional-player.md

@@ -0,0 +1,77 @@
+# useOptionalPlayer
+
+Hook to access or select Player state when a Player is available
+
+## Import
+
+tsx
+
+```
+import { useOptionalPlayer } from "@videojs/react";
+```
+
+## Usage
+
+Without a selector, the hook returns the player store or `undefined` outside `Player`.
+
+tsx
+
+```
+const store = useOptionalPlayer();
+```
+
+With a selector, it subscribes while a player is available and returns the selected value. The selector is not called outside `Player`.
+
+tsx
+
+```
+import { selectPlayback, useOptionalPlayer } from "@videojs/react";
+
+const playback = useOptionalPlayer(selectPlayback);
+```
+
+Use `usePlayer` when the component requires a surrounding player.
+
+## API Reference
+
+### Without Selector
+
+Returns the player store when available, or `undefined` outside a Player.
+
+#### Return Value
+
+`UnknownStore | undefined`
+
+### With Selector
+
+Selects a player value when available, or returns `undefined` outside a Player.
+
+#### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`selector*`
+
+`function`
+
+`—`
+
+▸
+
+Description
+
+Derives a value from the player store state.
+
+Type
+
+`((state: UnknownState) => R)`
+
+#### Return Value
+
+`R | undefined`

package/docs/reference/use-playback-rate-options.md

@@ -44,7 +44,7 @@ Details
 
 `props`
 
-`PlaybackRateOptionsProps`
+`object`
 
 `—`
 
@@ -56,4 +56,60 @@ Optional `label`, `formatRate`, and `disabled` overrides.
 
 ### Return Value
 
-`PlaybackRateOptionsResult | null`
+Property
+
+Type
+
+Details
+
+`state`
+
+`PlaybackRateRadioGroupCore.State`
+
+`label`
+
+`string`
+
+`rate`
+
+`number`
+
+`value`
+
+`string`
+
+`selectedLabel`
+
+`string`
+
+`options`
+
+`PlaybackRateOption[]`
+
+`disabled`
+
+`boolean`
+
+`hidden`
+
+`boolean`
+
+`setRate`
+
+`function`
+
+▸
+
+Type
+
+`((rate: number) => void)`
+
+`setValue`
+
+`function`
+
+▸
+
+Type
+
+`((value: string) => void)`

package/docs/reference/use-player-context.md

@@ -65,7 +65,7 @@ Details
 
 `store`
 
-`BaseStore & UnknownState`
+`UnknownStore`
 
 `media`
 
@@ -77,7 +77,7 @@ Details
 
 `container`
 
-`MediaContainer | null`
+`object | null`
 
 `setContainer`
 

package/docs/reference/use-player.md

@@ -196,7 +196,7 @@ This standalone hook has no knowledge of your configured features, so it returns
 
 #### Return Value
 
-`BaseStore & UnknownState`
+`UnknownStore`
 
 ### With Selector
 

package/docs/reference/use-popover-context.md

@@ -0,0 +1,95 @@
+# usePopoverContext
+
+Hook to access the nearest Popover compound-component context
+
+## Import
+
+tsx
+
+```
+import { usePopoverContext } from "@videojs/react";
+```
+
+## Usage
+
+Use this hook to build a custom part rendered inside `Popover.Root`.
+
+tsx
+
+```
+function ClosePopoverButton() {
+  const { popover } = usePopoverContext();
+
+  return <button onClick={() => popover.close()}>Close popover</button>;
+}
+```
+
+The hook throws when there is no surrounding `Popover.Root`.
+
+## API Reference
+
+### Return Value
+
+Property
+
+Type
+
+Details
+
+`core`
+
+`PopoverCore`
+
+`popover`
+
+`object`
+
+▸
+
+Type
+
+`{ input: State<PopoverInput>; triggerProps: PopoverTriggerProps; popupProps: PopoverPopupProps; triggerElement: HTMLElement | null; setTriggerElement: ((el: HTMLElement | null) => void); setPopupElement: ((el: HTMLElement | null) => void); open: ((reason?: PopoverOpenChangeReason) => void); close: ((reason?: PopoverOpenChangeReason) => void); syncOpen: ((open: boolean) => void); destroy: (() => void) }`
+
+`state`
+
+`PopoverCore.State`
+
+`preferredSide`
+
+`PopoverCore.State['side']`
+
+`setPositionedSide`
+
+`function`
+
+▸
+
+Type
+
+`((side: PopoverCore.State['side']) => void)`
+
+`stateAttrMap`
+
+`{ [Key in keyof State]?: string; }`
+
+`anchorName`
+
+`string`
+
+`popupId`
+
+`string`
+
+`boundary`
+
+`'viewport' | 'container' | string & o...`
+
+▸
+
+Type
+
+`'viewport' | 'container' | string & object | Element | null | undefined`
+
+`container`
+
+`object | null`

package/docs/reference/use-quality-options.md

@@ -44,7 +44,7 @@ Details
 
 `props`
 
-`QualityOptionsProps`
+`object`
 
 `—`
 
@@ -56,4 +56,46 @@ Optional `label`, `formatRendition`, and `disabled` overrides.
 
 ### Return Value
 
-`QualityOptionsResult | null`
+Property
+
+Type
+
+Details
+
+`state`
+
+`QualityRadioGroupCore.State`
+
+`label`
+
+`string`
+
+`value`
+
+`string`
+
+`selectedLabel`
+
+`string`
+
+`options`
+
+`QualityOption[]`
+
+`disabled`
+
+`boolean`
+
+`hidden`
+
+`boolean`
+
+`setValue`
+
+`function`
+
+▸
+
+Type
+
+`((value: string) => void)`

package/docs/reference/use-selector.md

@@ -105,7 +105,7 @@ Type
 
 `selector*`
 
-`Selector<S, R>`
+`object`
 
 `—`
 
@@ -115,9 +115,13 @@ Description
 
 Derives a value from the snapshot.
 
-`isEqual`
+Type
+
+`{ (state: State): Result;; displayName?: string }`
+
+`isEqual*`
 
-`Comparator<R>`
+`unknown`
 
 `—`
 

package/docs/reference/use-slider.md

@@ -0,0 +1,133 @@
+# useSlider
+
+Hook for connecting slider input behavior to custom React elements
+
+`useSlider` is the low-level hook behind the [Slider](./slider.md), [TimeSlider](./time-slider.md), and [VolumeSlider](./volume-slider.md) components. Use it when you need to build a new slider primitive with custom state calculations. For standard player controls, use the built-in components.
+
+## Import
+
+tsx
+
+```
+import { useSlider } from "@videojs/react";
+```
+
+## Usage
+
+Pass callbacks that convert raw slider input into your component state, values, and CSS variables. Attach the returned root props, ref, and styles to the pointer target. Attach the thumb props and ref to the focusable thumb.
+
+tsx
+
+```
+function CustomSlider({ options }: { options: useSlider.Options }) {
+  const {
+    state,
+    input,
+    cssVars,
+    rootRef,
+    thumbRef,
+    rootProps,
+    rootStyle,
+    thumbProps,
+  } = useSlider(options);
+
+  return (
+    <div
+      ref={rootRef}
+      {...rootProps}
+      style={{ ...cssVars, ...rootStyle }}
+      data-dragging={state.dragging || undefined}
+    >
+      <div
+        ref={thumbRef}
+        {...thumbProps}
+        data-focused={input.current.focused || undefined}
+      />
+    </div>
+  );
+}
+```
+
+`state` is the derived state for the current render. `input` is the underlying reactive state container. Read `input.current` for the latest raw input or call `input.subscribe(listener)` when another system needs to observe changes outside React rendering.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`options*`
+
+`object`
+
+`—`
+
+▸
+
+Type
+
+`{ computeState: ((input: SliderInput) => State); orientation?: 'horizontal' | 'vertical'; disabled?: boolean; adjustPercent?: ((rawPercent: number, thumbSize: number, trackSize: number) => number); getCSSVars: ((state: State) => Record<string, string>) }`
+
+### Return Value
+
+Property
+
+Type
+
+Details
+
+`state`
+
+`State`
+
+`input`
+
+`SliderApi['input']`
+
+`cssVars`
+
+`Record<string, string>`
+
+`rootRef`
+
+`RefCallback<HTMLElement>`
+
+`thumbRef`
+
+`RefCallback<HTMLElement>`
+
+`rootProps`
+
+`function`
+
+▸
+
+Type
+
+`{ onPointerDown: ((event: UIPointerEvent) => void); onPointerMove: ((event: UIPointerEvent) => void); onPointerUp: ((event: UIPointerEvent) => void); onPointerLeave: ((event: UIPointerEvent) => void); onLostPointerCapture: (() => void) }`
+
+`rootStyle`
+
+`object`
+
+▸
+
+Type
+
+`{ touchAction: string; userSelect: string }`
+
+`thumbProps`
+
+`function`
+
+▸
+
+Type
+
+`{ onKeyDown: ((event: UIKeyboardEvent) => void); onFocus: (() => void); onBlur: (() => void) }`

package/docs/reference/use-snapshot.md

@@ -56,8 +56,6 @@ Use `useSnapshot` when working with standalone `State` containers outside the pl
 
 ### Without Selector
 
-Subscribe to a State container's current value.
-
 #### Parameters
 
 Parameter
@@ -70,13 +68,19 @@ Details
 
 `state*`
 
-`State<object>`
+`function`
 
 `—`
 
+▸
+
+Type
+
+`{ current: Readonly<T>; subscribe(callback: StateChange, options?: SubscribeOptions): (() => void) }`
+
 #### Return Value
 
-`object`
+`T`
 
 ### With Selector
 
@@ -94,13 +98,19 @@ Details
 
 `state*`
 
-`State<object>`
+`function`
 
 `—`
 
+▸
+
+Type
+
+`{ current: Readonly<T>; subscribe(callback: StateChange, options?: SubscribeOptions): (() => void) }`
+
 `selector*`
 
-`Selector<object, R>`
+`object`
 
 `—`
 
@@ -110,9 +120,13 @@ Description
 
 Derives a value from state.
 
+Type
+
+`{ (state: State): Result;; displayName?: string }`
+
 `isEqual`
 
-`Comparator<R>`
+`function`
 
 `—`
 
@@ -122,6 +136,10 @@ Description
 
 Custom equality function. Defaults to `shallowEqual`.
 
+Type
+
+`((a: R, b: R) => boolean)`
+
 #### Return Value
 
 `R`

package/docs/reference/use-store.md

@@ -172,10 +172,6 @@ export default function Selector() {
 
 ### Without Selector
 
-Access store state and actions.
-
-Without selector: Returns the store, does NOT subscribe to changes. With selector: Returns selected state, re-renders when selected state changes (shallowEqual).
-
 #### Parameters
 
 Parameter
@@ -218,7 +214,7 @@ Details
 
 `selector*`
 
-`Selector<InferStoreState<S>, R>`
+`object`
 
 `—`
 
@@ -228,9 +224,13 @@ Description
 
 Derives a value from the store state.
 
+Type
+
+`{ (state: State): Result;; displayName?: string }`
+
 `isEqual`
 
-`Comparator<R>`
+`function`
 
 `—`
 
@@ -240,6 +240,10 @@ Description
 
 Custom equality function. Defaults to `shallowEqual`.
 
+Type
+
+`((a: R, b: R) => boolean)`
+
 #### Return Value
 
 `R`