@videojs/react 10.0.0-beta.24 → 10.0.0-beta.26

package/docs/reference/tooltip.md

@@ -12,7 +12,8 @@ tsx
     <Tooltip.Trigger>Hover me</Tooltip.Trigger>
     <Tooltip.Popup>
       <Tooltip.Arrow />
-      Label text
+      <Tooltip.Label>Label text</Tooltip.Label>
+      <Tooltip.Shortcut>K</Tooltip.Shortcut>
     </Tooltip.Popup>
   </Tooltip.Root>
 </Tooltip.Provider>
@@ -22,9 +23,9 @@ tsx
 
 Displays a short label anchored to a trigger element. Opens after a configurable `delay` (default 600ms) on hover or immediately on focus. Closes when the pointer leaves or focus moves away, with an optional `closeDelay`.
 
-The `side` and `align` props control placement relative to the trigger. Positioning uses CSS Anchor Positioning where supported, with a JavaScript measurement fallback.
+The `side` and `align` props control the preferred placement relative to the trigger. When the preferred side overflows the positioning boundary, the tooltip uses the opposite side if it has more space. Positioning uses CSS Anchor Positioning where supported, with a JavaScript measurement fallback.
 
-The component is composed from four parts: `Root` manages state and context, `Trigger` renders a button that activates the tooltip, `Popup` contains the label content, 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`.
+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`.
 
 ## Styling
 
@@ -38,10 +39,11 @@ css
 .tooltip-popup {
   --media-tooltip-side-offset: 8px;
   --media-tooltip-align-offset: 0px;
+  --media-tooltip-boundary-offset: 8px;
 }
 ```
 
-Style based on open state and transition phases:
+Style based on open state, rendered side, and transition phases. `data-side` reflects the rendered side and can differ from the preferred `side` prop after collision handling:
 
 css
 
@@ -87,7 +89,7 @@ export default function BasicUsage() {
         <Tooltip.Trigger className="trigger">Hover me</Tooltip.Trigger>
         <Tooltip.Popup className="media-tooltip">
           <Tooltip.Arrow className="arrow" />
-          Tooltip content
+          <Tooltip.Label>Tooltip content</Tooltip.Label>
         </Tooltip.Popup>
       </Tooltip.Root>
     </div>
@@ -152,21 +154,21 @@ export default function Grouping() {
           <Tooltip.Trigger className="trigger">Play</Tooltip.Trigger>
           <Tooltip.Popup className="media-tooltip">
             <Tooltip.Arrow className="arrow" />
-            Play video
+            <Tooltip.Label>Play video</Tooltip.Label>
           </Tooltip.Popup>
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger className="trigger">Mute</Tooltip.Trigger>
           <Tooltip.Popup className="media-tooltip">
             <Tooltip.Arrow className="arrow" />
-            Mute audio
+            <Tooltip.Label>Mute audio</Tooltip.Label>
           </Tooltip.Popup>
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger className="trigger">Fullscreen</Tooltip.Trigger>
           <Tooltip.Popup className="media-tooltip">
             <Tooltip.Arrow className="arrow" />
-            Enter fullscreen
+            <Tooltip.Label>Enter fullscreen</Tooltip.Label>
           </Tooltip.Popup>
         </Tooltip.Root>
       </Tooltip.Provider>
@@ -370,7 +372,7 @@ Controlled open state.
 
 Description
 
-Which side of the trigger the tooltip appears on.
+Preferred side of the trigger for the tooltip.
 
 #### State
 
@@ -410,7 +412,7 @@ Current phase of the transition lifecycle.
 
 Description
 
-Which side of the trigger the tooltip is positioned on.
+Preferred side of the trigger for the tooltip.
 
 `align`
 
@@ -466,7 +468,7 @@ Present when the tooltip is open.
 
 Description
 
-Indicates which side the tooltip is positioned relative to the trigger.
+Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
@@ -570,7 +572,7 @@ Present when the tooltip is open.
 
 Description
 
-Indicates which side the tooltip is positioned relative to the trigger.
+Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 
@@ -612,7 +614,91 @@ Present when the tooltip is open.
 
 Description
 
-Indicates which side the tooltip is positioned relative to the trigger.
+Indicates the rendered side of the tooltip after collision handling.
+
+`data-align`
+
+`'start' | 'center' | 'end'`
+
+▸
+
+Description
+
+Indicates how the tooltip is aligned relative to the specified side.
+
+### 
+
+Label
+
+Tooltip body label; defaults to context `content.label` from the linked trigger.
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-open`
+
+▸
+
+Description
+
+Present when the tooltip is open.
+
+`data-side`
+
+`'top' | 'bottom' | 'left' | 'right'`
+
+▸
+
+Description
+
+Indicates the rendered side of the tooltip after collision handling.
+
+`data-align`
+
+`'start' | 'center' | 'end'`
+
+▸
+
+Description
+
+Indicates how the tooltip is aligned relative to the specified side.
+
+### 
+
+Shortcut
+
+Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`).
+
+#### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-open`
+
+▸
+
+Description
+
+Present when the tooltip is open.
+
+`data-side`
+
+`'top' | 'bottom' | 'left' | 'right'`
+
+▸
+
+Description
+
+Indicates the rendered side of the tooltip after collision handling.
 
 `data-align`
 

package/docs/reference/translation-phrases.md

@@ -0,0 +1,429 @@
+# Translation phrases
+
+Semantic i18n keys, their English defaults, and the player UI that uses them
+
+Video.js uses opaque semantic keys so English copy can change without breaking translation packs. English defaults are defined in `packages/core/src/core/i18n/locales/en.ts`. Both HTML and React controls use the same keys.
+
+Locale packs and provider overrides use nested objects, so `buttons.play` is authored as `{ buttons: { play: '…' } }`. The dotted form is used by translators and the HTML `<media-text token>` attribute.
+
+## Playback controls
+
+Key
+
+English default
+
+Used by
+
+`buttons.play`
+
+Play
+
+Play button and its tooltip
+
+`buttons.pause`
+
+Pause
+
+Play button and its tooltip
+
+`buttons.replay`
+
+Replay
+
+Play button and its tooltip
+
+`buttons.mute`
+
+Mute
+
+Mute button and its tooltip
+
+`buttons.unmute`
+
+Unmute
+
+Mute button and its tooltip
+
+`seek.forward`
+
+Seek forward `{seconds}` seconds
+
+Seek-forward button and its tooltip
+
+`seek.backward`
+
+Seek backward `{seconds}` seconds
+
+Seek-backward button and its tooltip
+
+`fullscreen.enter`
+
+Enter fullscreen
+
+Fullscreen button
+
+`fullscreen.exit`
+
+Exit fullscreen
+
+Fullscreen button
+
+`captions.enable`
+
+Enable captions
+
+Captions button and captions selection control
+
+`captions.disable`
+
+Disable captions
+
+Captions button and captions selection control
+
+`pip.enter`
+
+Enter picture-in-picture
+
+Picture-in-picture button
+
+`pip.exit`
+
+Exit picture-in-picture
+
+Picture-in-picture button
+
+`live.playing`
+
+Playing live
+
+Live button
+
+`live.seekToEdge`
+
+Seek to live edge
+
+Live button
+
+`live.badge`
+
+Live
+
+Live button badge
+
+`cast.start`
+
+Start casting
+
+Cast button
+
+`cast.stop`
+
+Stop casting
+
+Cast button
+
+`cast.connecting`
+
+Connecting
+
+Cast button
+
+`airplay.start`
+
+Start AirPlay
+
+AirPlay button
+
+`airplay.stop`
+
+Stop AirPlay
+
+AirPlay button
+
+## Time and volume
+
+Key
+
+English default
+
+Used by
+
+`slider.seek`
+
+Seek
+
+Time slider aria label
+
+`time.current`
+
+Current time
+
+Current-time display aria label
+
+`time.duration`
+
+Duration
+
+Duration display aria label
+
+`time.remaining`
+
+Remaining
+
+Remaining-time display aria label
+
+`time.remainingSuffix`
+
+`{duration} remaining`
+
+Remaining time display
+
+`time.showElapsed`
+
+`{duration}. Show elapsed time.`
+
+Toggleable time display aria label
+
+`time.showDuration`
+
+`{duration}. Show duration.`
+
+Toggleable time display aria label
+
+`time.showRemaining`
+
+`{duration}. Show remaining time.`
+
+Toggleable time display aria label
+
+`time.position`
+
+`{current} of {duration}`
+
+Time slider value text
+
+`playback.rate`
+
+Playback rate `{rate}`
+
+Playback-rate button and radio group
+
+`volume.mutedValue`
+
+`{percent}, muted`
+
+Muted volume slider value text
+
+`volume.muted`
+
+Muted
+
+Volume input feedback
+
+`volume.label`
+
+Volume
+
+Volume slider aria label
+
+`volume.value`
+
+Volume `{value}`
+
+Volume input feedback
+
+## Playback feedback
+
+Key
+
+English default
+
+Used by
+
+`status.captionsOn`
+
+Captions on
+
+Input feedback after enabling captions
+
+`status.captionsOff`
+
+Captions off
+
+Input feedback after disabling captions
+
+`status.paused`
+
+Paused
+
+Input feedback after pausing
+
+`status.playing`
+
+Playing
+
+Input feedback after starting playback
+
+`status.fullscreen`
+
+Fullscreen
+
+Input feedback after entering fullscreen
+
+`status.pip`
+
+Picture in picture
+
+Input feedback after entering picture-in-picture
+
+`status.exitPip`
+
+Exit picture in picture
+
+Input feedback after exiting picture-in-picture
+
+## Errors
+
+Key
+
+English default
+
+Used by
+
+`errors.aborted`
+
+You stopped media playback before it finished.
+
+Media error dialog for `MEDIA_ERR_ABORTED`
+
+`errors.network`
+
+This media could not be loaded due to a network or server issue.
+
+Media error dialog for `MEDIA_ERR_NETWORK`
+
+`errors.decode`
+
+This media could not be played. It may be corrupted, or your browser may not support its format.
+
+Media error dialog for `MEDIA_ERR_DECODE`
+
+`errors.source`
+
+This media could not be loaded. It may be unavailable, or your browser may not support its format.
+
+Media error dialog for `MEDIA_ERR_SRC_NOT_SUPPORTED`
+
+`errors.encrypted`
+
+This media could not be played because it could not be decrypted.
+
+Media error dialog for `MEDIA_ERR_ENCRYPTED`
+
+`errors.title`
+
+Something went wrong.
+
+Generic media error dialog title
+
+`errors.unexpected`
+
+An unexpected error occurred.
+
+Generic media error dialog fallback description
+
+`common.empty`
+
+`''`
+
+Empty description for a custom media error
+
+`common.ok`
+
+OK
+
+Error dialog confirmation button
+
+## Settings and track menus
+
+Key
+
+English default
+
+Used by
+
+`menu.settings`
+
+Settings
+
+Video settings menu trigger
+
+`menu.quality`
+
+Quality
+
+Quality menu
+
+`menu.audio`
+
+Audio
+
+Audio-track menu and fallback track label
+
+`menu.default`
+
+Default
+
+Reserved default-option label; no stock control currently emits it
+
+`menu.speed`
+
+Speed
+
+Playback-rate menu
+
+`menu.captions`
+
+Captions
+
+Captions menu
+
+`menu.playbackRate`
+
+Playback rate
+
+Playback-rate radio group
+
+`menu.back`
+
+Back
+
+Nested settings-menu back button
+
+`menu.off`
+
+Off
+
+Captions menu option
+
+`menu.auto`
+
+Auto
+
+Automatic-quality option
+
+`menu.autoWithLabel`
+
+Auto (`{label}`)
+
+Automatic-quality option with the active rendition
+
+`menu.subtitles`
+
+Subtitles
+
+Subtitles track option
+
+## Related
+
+*   [Override translations](../how-to/i18n-override-translations.md)

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

@@ -0,0 +1,59 @@
+# useAudioTrackOptions
+
+Hook to build audio track menu options from the player audio track state
+
+`useAudioTrackOptions` returns the currently enabled audio track, the available options, and a `setValue` callback for wiring track selection into a menu. It returns `null` when the [audio track feature](./feature-audio-track.md) is not configured.
+
+AudioMenu.tsx
+
+```
+import { Menu, useAudioTrackOptions } from "@videojs/react";
+
+function AudioMenu() {
+  const audioTrack = useAudioTrackOptions();
+  if (audioTrack?.state.availability !== "available") return null;
+
+  return (
+    <Menu.RadioGroup value={audioTrack.value} onValueChange={audioTrack.setValue} aria-label="Audio">
+      {audioTrack.options.map((option) => (
+        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
+          {option.label}
+          <Menu.ItemIndicator checked={option.value === audioTrack.value} />
+        </Menu.RadioItem>
+      ))}
+    </Menu.RadioGroup>
+  );
+}
+```
+
+Option labels use the track label, then language, then kind. Pass `formatTrack` to customize the visible labels.
+
+See [AudioTrackRadioGroup](./audio-track-radio-group.md) for the component-level pattern, and [Menu](./menu.md) for a complete settings menu example.
+
+## API Reference
+
+### Parameters
+
+Parameter
+
+Type
+
+Default
+
+Details
+
+`props`
+
+`AudioTrackOptionsProps`
+
+`—`
+
+▸
+
+Description
+
+Optional `label`, `formatTrack`, and `disabled` overrides.
+
+### Return Value
+
+`AudioTrackOptionsResult | null`