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

package/docs/reference/tooltip.md

@@ -2,6 +2,14 @@
 
 A tooltip component for displaying contextual labels on hover and focus
 
+## Import
+
+tsx
+
+```
+import { Tooltip } from '@videojs/react';
+```
+
 ## Anatomy
 
 tsx
@@ -27,6 +35,8 @@ The `side` and `align` props control the preferred placement relative to the tri
 
 The component is composed from six parts: `Root` manages state and context, `Trigger` renders a button that activates the tooltip, `Popup` contains the label content, `Label` renders the tooltip body, `Shortcut` renders an optional keyboard hint, and `Arrow` renders a decorative pointer. Wrap multiple tooltips in a `Tooltip.Provider` to coordinate open/close timing across a group — once a tooltip becomes visible, adjacent tooltips open instantly within the `timeout` window, skipping the normal `delay`.
 
+Tooltips inside a [Container](./player-container.md) also observe its popup group. By default, a tooltip does not open—or closes if already open—while a menu or popover attached to the same trigger is open. Set `sticky` when the tooltip should remain visible with that trigger’s popup. `Tooltip.Provider` and `<media-tooltip-group>` coordinate tooltip delay timing only; they do not replace the container’s popup group.
+
 ## Styling
 
 Use [CSS custom properties](#root-css-custom-properties) for positioning offsets:
@@ -67,7 +77,7 @@ css
 
 ## Accessibility
 
-The trigger receives `aria-describedby` pointing to the popup when open. The popup renders with `role="tooltip"` and `popover="manual"`. Tooltips open on focus and close when focus leaves, ensuring keyboard-only users can access the label.
+Tooltips are visual-only, supplementary labels. The popup renders with `role="presentation"` and is not referenced by the trigger with `aria-describedby`. Give the trigger its own accessible name instead of relying on tooltip content. Built-in media buttons already expose a state-aware `aria-label`, and their tooltips reuse that translated label. Tooltips still open on focus so keyboard users who can see the label receive the same visual hint.
 
 ## Examples
 
@@ -218,52 +228,6 @@ export default function Grouping() {
 
 Provider
 
-#### Props
-
-Prop
-
-Type
-
-Default
-
-Details
-
-`closeDelay`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Default close delay in ms for tooltips in this group.
-
-`delay`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Default open delay in ms for tooltips in this group.
-
-`timeout`
-
-`number`
-
-`—`
-
-▸
-
-Description
-
-Duration in ms after a tooltip closes during which the next tooltip opens instantly.
-
 ### 
 
 Root
@@ -374,6 +338,18 @@ Description
 
 Preferred side of the trigger for the tooltip.
 
+`sticky`
+
+`boolean`
+
+`false`
+
+▸
+
+Description
+
+Whether the tooltip stays open when another popup opens from its trigger.
+
 #### State
 
 State is accessible via the `render`, `className`, and `style` props.
@@ -384,7 +360,7 @@ Type
 
 Details
 
-`open`
+`transitionStarting`
 
 `boolean`
 
@@ -392,57 +368,57 @@ Details
 
 Description
 
-Whether the tooltip is currently visible.
+Whether the open transition is in progress.
 
-`status`
+`transitionEnding`
 
-`'idle' | 'starting' | 'ending'`
+`boolean`
 
 ▸
 
 Description
 
-Current phase of the transition lifecycle.
+Whether the close transition is in progress.
 
-`side`
+`open`
 
-`'top' | 'bottom' | 'left' | 'right'`
+`boolean`
 
 ▸
 
 Description
 
-Preferred side of the trigger for the tooltip.
+Whether the tooltip is currently visible.
 
-`align`
+`status`
 
-`'start' | 'center' | 'end'`
+`'idle' | 'starting' | 'ending'`
 
 ▸
 
 Description
 
-How the tooltip is aligned relative to the specified side.
+Current phase of the transition lifecycle.
 
-`transitionStarting`
+`side`
 
-`boolean`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
 Description
 
-Whether the open transition is in progress.
+Preferred side of the trigger for the tooltip.
 
-`transitionEnding`
+`align`
 
-`boolean`
+`'start' | 'center' | 'end'`
 
 ▸
 
 Description
 
-Whether the close transition is in progress.
+How the tooltip is aligned relative to the specified side.
 
 #### Data attributes
 
@@ -462,7 +438,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -472,7 +448,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -548,6 +524,52 @@ Trigger
 
 Element that triggers the tooltip on hover and focus. Renders a `<button>` element.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: TooltipState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: TooltipState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: TooltipState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -566,7 +588,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -576,7 +598,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -590,6 +612,52 @@ Popup
 
 Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: TooltipState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: TooltipState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: TooltipState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -608,7 +676,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -618,7 +686,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -632,6 +700,52 @@ Label
 
 Tooltip body label; defaults to context `content.label` from the linked trigger.
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: TooltipState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: TooltipState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: TooltipState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -650,7 +764,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -660,7 +774,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -674,6 +788,52 @@ Shortcut
 
 Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`).
 
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: TooltipState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: TooltipState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: TooltipState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.
+
 #### Data attributes
 
 Attribute
@@ -692,7 +852,7 @@ Present when the tooltip is open.
 
 `data-side`
 
-`'left' | 'right' | 'top' | 'bottom'`
+`'top' | 'bottom' | 'left' | 'right'`
 
 ▸
 
@@ -702,7 +862,7 @@ Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
-`'center' | 'start' | 'end'`
+`'start' | 'center' | 'end'`
 
 ▸
 
@@ -714,4 +874,50 @@ Indicates how the tooltip is aligned relative to the specified side.
 
 Arrow
 
-Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology.
+Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology.
+
+#### Props
+
+Prop
+
+Type
+
+Default
+
+Details
+
+`className`
+
+`string | ((state: TooltipState) => string | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Class name or function returning class name from state.
+
+`render`
+
+`ReactElement | ((props: HTMLProps, state: TooltipState) => ReactElement | null)`
+
+`—`
+
+▸
+
+Description
+
+Render prop for custom element.
+
+`style`
+
+`CSSProperties | ((state: TooltipState) => CSSProperties | undefined)`
+
+`—`
+
+▸
+
+Description
+
+Style or function returning style from state.

package/docs/reference/translation-phrases.md

@@ -450,4 +450,4 @@ Subtitles track option
 
 ## Related
 
-*   [Override translations](../how-to/i18n-override-translations.md)
+*   [Internationalize the player](../how-to/internationalize-the-player.md)

package/docs/reference/twitch-video.md

@@ -2,7 +2,7 @@
 
 Video component that plays Twitch videos and live channels through the Twitch embed player
 
-Video component that plays Twitch videos and live channels through the [Twitch embed player](https://dev.twitch.tv/docs/embed/video-and-clips/). Twitch’s own chrome stays hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use Twitch’s UI instead.
+The [Twitch embed player](https://dev.twitch.tv/docs/embed/video-and-clips/) handles both recorded videos and live channels. Its own chrome stays hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use Twitch’s UI instead.
 
 ## Load a source
 
@@ -136,7 +136,7 @@ Details
 
 `source`
 
-`TwitchSource | null`
+`{ src?: string; engine?: TwitchSourceEngineConfig } | null`
 
 `null`
 
@@ -168,7 +168,7 @@ Details
 
 `collection`
 
-`string`
+`string | undefined`
 
 ▸
 
@@ -178,7 +178,7 @@ Collection to play through, starting from the video named by `src`.
 
 `parent`
 
-`string | readonly string[]`
+`string | readonly string[] | undefined`
 
 ▸
 
@@ -188,7 +188,7 @@ Every hostname the embed may be framed by. Twitch checks the frame's ancestors a
 
 `referrerPolicy`
 
-`ReferrerPolicy`
+`ReferrerPolicy | undefined`
 
 ▸
 
@@ -198,7 +198,7 @@ Description
 
 `time`
 
-`string`
+`string | undefined`
 
 ▸
 

package/docs/reference/use-attach-media.md

@@ -0,0 +1,59 @@
+# useAttachMedia
+
+Hook that attaches an HTML media element to a media engine host
+
+## Import
+
+tsx
+
+```
+import { useAttachMedia } from "@videojs/react";
+```
+
+## Usage
+
+Pass a media engine host to receive a callback ref for its rendered `<video>` or `<audio>` element.
+
+tsx
+
+```
+import { HlsJsMedia } from "@videojs/media/dom/hls-js";
+import { useAttachMedia, useMediaInstance } from "@videojs/react";
+
+function CustomHlsVideo() {
+  const media = useMediaInstance(HlsJsMedia);
+  const attachRef = useAttachMedia(media);
+
+  return <video ref={attachRef} />;
+}
+```
+
+The callback attaches a non-null element and detaches the host when React clears or cleans up the ref.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`media*`
+
+`MediaEngineHost`
+
+`—`
+
+▸
+
+Description
+
+Media engine host to attach and detach.
+
+### Return Value
+
+`RefCallback<T>`

package/docs/reference/use-audio-track-options.md

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