react-helios 2.4.0 → 2.5.0

package/README.md

@@ -1,6 +1,6 @@
 # react-helios
 
-Production-grade React video player with HLS streaming, adaptive quality selection, live stream support, subtitle tracks, VTT sprite sheet thumbnail preview, Picture-in-Picture, and full keyboard control.
+Production-grade React video player with HLS streaming, audio mode, adaptive quality selection, live stream support, subtitle tracks, VTT sprite sheet thumbnail preview, Picture-in-Picture, and full keyboard control.
 
 ## Installation
 
@@ -24,8 +24,13 @@ export default function App() {
   return (
     <VideoPlayer
       src="https://example.com/video.mp4"
+      poster="https://example.com/poster.jpg"
       controls
-      autoplay={false}
+      options={{
+        autoplay: false,
+        loop: false,
+        thumbnailVtt: "https://example.com/thumbs/storyboard.vtt",
+      }}
     />
   );
 }
@@ -41,12 +46,64 @@ Pass any `.m3u8` URL — HLS.js is initialised automatically:
 <VideoPlayer
   src="https://example.com/stream.m3u8"
   controls
-  enableHLS        // default: true
+  options={{
+    enableHLS: true,         // default: true
+    hlsConfig: {
+      maxBufferLength: 60,
+      capLevelToPlayerSize: true,
+    },
+  }}
 />
 ```
 
 On Safari the browser's native HLS engine is used. A **LIVE** badge and **GO LIVE** button appear automatically for live streams.
 
+## Audio Mode
+
+Audio mode hides the video, shows the poster artwork, and keeps the audio stream playing — useful when bandwidth is poor or the user wants to background the content.
+
+```tsx
+<VideoPlayer
+  src="https://example.com/stream.m3u8"
+  poster="https://example.com/artwork.jpg"
+  controls
+  options={{
+    audioSrc: "https://example.com/audio-only.m3u8",
+    audioModeLabel: "Switch to Audio",
+    videoModeLabel: "Switch to Video",
+    defaultAudioMode: false,
+    onAudioModeChange: (isAudio) => console.log("audio mode:", isAudio),
+  }}
+/>
+```
+
+The audio toggle button only appears in the control bar when `audioSrc` is provided. Custom icons can be passed via `audioModeIcon` / `videoModeIcon`.
+
+### Automatic bandwidth switching
+
+For HLS streams the player monitors bandwidth and switches to audio mode automatically when conditions drop below a threshold:
+
+```tsx
+import { AUDIO_BANDWIDTH_THRESHOLDS } from "react-helios";
+
+<VideoPlayer
+  src="https://example.com/stream.m3u8"
+  options={{
+    audioBandwidthThreshold: AUDIO_BANDWIDTH_THRESHOLDS.POOR, // 300 Kbps (default)
+    // audioBandwidthThreshold: 0,  // disable automatic switching
+  }}
+/>
+```
+
+| Preset | Kbps | Typical connection |
+|--------|------|--------------------|
+| `EXTREME` | 100 | 2G / Edge |
+| `POOR` | 300 | Slow 3G ← **default** |
+| `FAIR` | 700 | 3G |
+| `GOOD` | 1500 | 4G / Wi-Fi |
+
+After the user manually toggles audio mode a 60-second cooldown suppresses automatic switching so the player respects their choice.
+
 ## Thumbnail Preview
 
 Hover over the progress bar to see a time tooltip. For rich sprite-sheet thumbnails, pass a `thumbnailVtt` URL pointing to a [WebVTT thumbnail file](https://developer.bitmovin.com/playback/docs/webvtt-based-thumbnails).
@@ -54,7 +111,9 @@ Hover over the progress bar to see a time tooltip. For rich sprite-sheet thumbna
 ```tsx
 <VideoPlayer
   src="https://example.com/video.mp4"
-  thumbnailVtt="https://example.com/thumbs/storyboard.vtt"
+  options={{
+    thumbnailVtt: "https://example.com/thumbs/storyboard.vtt",
+  }}
 />
 ```
 
@@ -80,38 +139,88 @@ The player fetches the VTT file once, parses all cues, and uses CSS `background-
 To disable the preview entirely:
 
 ```tsx
-<VideoPlayer src="..." enablePreview={false} />
+<VideoPlayer src="..." options={{ enablePreview: false }} />
 ```
 
 ## Props
 
+### Top-level props
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `src` | `string` | — | Video URL (MP4, WebM, HLS `.m3u8`, …) |
-| `poster` | `string` | — | Poster image shown before playback |
+| `poster` | `string` | — | Poster image shown before playback and in audio mode |
 | `controls` | `boolean` | `true` | Show the built-in control bar |
+| `className` | `string` | — | CSS class on the player container |
+| `options` | `VideoPlayerOptions` | `{}` | All configuration (see below) |
+
+### `options` — Playback
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
 | `autoplay` | `boolean` | `false` | Start playback on mount |
 | `muted` | `boolean` | `false` | Start muted |
 | `loop` | `boolean` | `false` | Loop the video |
 | `preload` | `"none" \| "metadata" \| "auto"` | `"metadata"` | Native `preload` attribute |
-| `playbackRates` | `PlaybackRate[]` | `[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]` | Available speed options |
+| `playbackRates` | `PlaybackRate[]` | `[0.25 … 2]` | Available speed options |
+| `crossOrigin` | `"anonymous" \| "use-credentials"` | — | CORS attribute for the video element |
+| `subtitles` | `SubtitleTrack[]` | — | Subtitle / caption tracks |
+
+### `options` — HLS
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
 | `enableHLS` | `boolean` | `true` | Enable HLS.js for `.m3u8` sources |
+| `hlsConfig` | `Partial<HlsConfig>` | — | Override any [hls.js config](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) option |
+
+### `options` — Preview
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
 | `enablePreview` | `boolean` | `true` | Show thumbnail / time tooltip on progress bar hover |
 | `thumbnailVtt` | `string` | — | URL to a WebVTT sprite sheet file for rich thumbnail preview |
-| `hlsConfig` | `Partial<HlsConfig>` | — | Override any [hls.js configuration](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) option |
-| `subtitles` | `SubtitleTrack[]` | — | Subtitle / caption tracks |
-| `crossOrigin` | `"anonymous" \| "use-credentials"` | — | CORS attribute for the video element |
-| `className` | `string` | — | CSS class on the player container |
-| `onPlay` | `() => void` | — | Fired when playback starts |
-| `onPause` | `() => void` | — | Fired when playback pauses |
-| `onEnded` | `() => void` | — | Fired when playback ends |
-| `onError` | `(error: VideoError) => void` | — | Fired on playback or stream errors |
-| `onTimeUpdate` | `(time: number) => void` | — | Fired every ~250 ms during playback |
-| `onDurationChange` | `(duration: number) => void` | — | Fired when video duration becomes known |
-| `onBuffering` | `(isBuffering: boolean) => void` | — | Fired when buffering starts / stops |
-| `onTheaterModeChange` | `(isTheater: boolean) => void` | — | Fired when theater mode is toggled |
-| `contextMenuItems` | `ContextMenuItem[]` | — | Extra items appended to the right-click context menu |
-| `controlBarItems` | `ControlBarItem[]` | — | Extra icon buttons appended to the right side of the control bar |
+
+### `options` — UI
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `autoHideControls` | `boolean` | `true` | Hide control bar on mouse leave when playing (video mode only) |
+
+### `options` — Audio mode
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `audioSrc` | `string` | — | Audio-only stream URL; the audio toggle button only shows when this is set |
+| `showAudioButton` | `boolean` | `!!audioSrc` | Force-show or hide the audio toggle button |
+| `defaultAudioMode` | `boolean` | `false` | Start in audio mode |
+| `audioModeLabel` | `string` | `"Audio"` | Label on the toggle button when in video mode |
+| `videoModeLabel` | `string` | `"Video"` | Label on the toggle button when in audio mode |
+| `audioModeIcon` | `ReactNode` | built-in headphones icon | Icon shown when in video mode (click → audio) |
+| `videoModeIcon` | `ReactNode` | built-in video icon | Icon shown when in audio mode (click → video) |
+| `audioModeFallback` | `ReactNode` | — | Custom content shown in audio mode when no `poster` is provided |
+| `logo` | `string \| ReactNode` | — | Logo shown in audio mode when no `poster` or `audioModeFallback` is provided |
+| `audioBandwidthThreshold` | `number` | `300` | Kbps — auto-switch to audio mode below this bandwidth. `0` = disabled (HLS only) |
+
+### `options` — Callbacks
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `onPlay` | `() => void` | Fired when playback starts |
+| `onPause` | `() => void` | Fired when playback pauses |
+| `onEnded` | `() => void` | Fired when playback ends |
+| `onError` | `(error: VideoError) => void` | Fired on playback or stream errors |
+| `onTimeUpdate` | `(time: number) => void` | Fired every ~250 ms during playback |
+| `onDurationChange` | `(duration: number) => void` | Fired when video duration becomes known |
+| `onBuffering` | `(isBuffering: boolean) => void` | Fired when buffering starts / stops |
+| `onTheaterModeChange` | `(isTheater: boolean) => void` | Fired when theater mode is toggled |
+| `onAudioModeChange` | `(isAudio: boolean) => void` | Fired when audio mode is toggled (manual or automatic) |
+
+### `options` — Custom controls
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `contextMenuItems` | `ContextMenuItem[]` | Extra items appended to the right-click context menu |
+| `controlBarItems` | `ControlBarItem[]` | Extra icon buttons appended to the right side of the control bar |
 
 ## Quality Selection
 
@@ -120,8 +229,6 @@ For HLS streams (`.m3u8`) the player automatically parses the available quality
 - **Speed tab** — always visible, lets you change playback rate.
 - **Quality tab** — appears only for HLS streams. Lists all levels sorted by bitrate (e.g. 1080p, 720p, 480p) plus an **Auto** option that enables ABR (adaptive bitrate). The current auto-selected level is shown in parentheses next to "Auto".
 
-For plain MP4/WebM files there are no quality levels to switch between, so the Quality tab never appears.
-
 You can also switch quality programmatically via the ref:
 
 ```tsx
@@ -131,49 +238,41 @@ playerRef.current?.setQualityLevel(-1);  // back to ABR auto
 
 ## Custom Control Bar Buttons
 
-Inject your own icon buttons into the right side of the control bar (between the settings gear and the PiP/Theater/Fullscreen buttons) using `controlBarItems`:
+Inject your own icon buttons into the right side of the control bar using `controlBarItems`:
 
 ```tsx
-import { VideoPlayer, ControlBarItem } from "react-helios";
+import { VideoPlayer } from "react-helios";
+import type { ControlBarItem } from "react-helios";
 
 const items: ControlBarItem[] = [
   {
-    key: "download",
-    label: "Download",
-    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zm-8 2V5h2v6h1.17L12 13.17 9.83 11H11zm-6 7h14v2H5v-2z"/></svg>,
-    onClick: () => downloadVideo(),
-  },
-  {
-    key: "share",
-    label: "Share",
-    title: "Share this video",
-    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 0 0 18 8a3 3 0 1 0-3-3c0 .24.04.47.09.7L8.04 9.81A2.99 2.99 0 0 0 6 9a3 3 0 1 0 3 3c0-.24-.04-.47-.09-.7l7.05-4.11c.52.47 1.2.77 1.96.77a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>,
-    onClick: () => openShareDialog(),
+    key: "bookmark",
+    label: "Bookmark",
+    title: "Save current position",
+    icon: <BookmarkIcon />,
+    onClick: () => saveBookmark(playerRef.current?.getState().currentTime ?? 0),
   },
 ];
 
-<VideoPlayer src="..." controlBarItems={items} />
+<VideoPlayer src="..." options={{ controlBarItems: items }} />
 ```
 
-Buttons receive the same `controlButton` CSS class as built-in buttons (hover highlight, active press scale, no focus outline).
-
 ## Context Menu
 
-Right-clicking the player shows a built-in menu (Play/Pause, Loop, Copy URL, Picture-in-Picture). You can append your own items by passing `contextMenuItems`:
+Right-clicking the player shows a built-in menu (Play/Pause, Loop, Copy URL, Picture-in-Picture). Append your own items via `contextMenuItems`:
 
 ```tsx
-import { VideoPlayer, ContextMenuItem } from "react-helios";
+import { VideoPlayer } from "react-helios";
+import type { ContextMenuItem } from "react-helios";
 
 const items: ContextMenuItem[] = [
   { label: "Add to Watchlist", onClick: () => addToWatchlist() },
   { label: "Share", onClick: () => openShareDialog() },
 ];
 
-<VideoPlayer src="..." contextMenuItems={items} />
+<VideoPlayer src="..." options={{ contextMenuItems: items }} />
 ```
 
-Each item closes the menu automatically after its `onClick` is called.
-
 ## Imperative API (Ref)
 
 Use a `ref` to control the player programmatically:
@@ -192,7 +291,7 @@ export default function App() {
       <button onClick={() => playerRef.current?.pause()}>Pause</button>
       <button onClick={() => playerRef.current?.seek(30)}>Jump to 30s</button>
       <button onClick={() => playerRef.current?.setVolume(0.5)}>50% volume</button>
-      <button onClick={() => playerRef.current?.setPlaybackRate(1.5)}>1.5× speed</button>
+      <button onClick={() => playerRef.current?.toggleAudioMode()}>Toggle Audio</button>
     </>
   );
 }
@@ -213,12 +312,13 @@ export default function App() {
 | `toggleFullscreen` | `() => Promise<void>` | Toggle fullscreen |
 | `togglePictureInPicture` | `() => Promise<void>` | Toggle Picture-in-Picture |
 | `toggleTheaterMode` | `() => void` | Toggle theater (wide) mode |
+| `toggleAudioMode` | `() => void` | Toggle audio-only mode |
 | `getState` | `() => PlayerState` | Snapshot of current player state |
 | `getVideoElement` | `() => HTMLVideoElement \| null` | Access the underlying `<video>` element |
 
 ## Theater Mode
 
-The player fires `onTheaterModeChange` when theater mode is toggled (via the `T` key, the control bar button, or `playerRef.current?.toggleTheaterMode()`). Wire it to your layout state to widen your container:
+The player fires `onTheaterModeChange` when theater mode is toggled. Wire it to your layout state to widen your container:
 
 ```tsx
 "use client";
@@ -237,24 +337,26 @@ export default function Page() {
       <VideoPlayer
         src="https://example.com/stream.m3u8"
         controls
-        onTheaterModeChange={(t) => setIsTheater(t)}
+        options={{
+          onTheaterModeChange: (t) => setIsTheater(t),
+        }}
       />
     </main>
   );
 }
 ```
 
-The player itself does not manage your page layout — it only notifies you so you can adapt your design.
-
 ## Subtitles
 
 ```tsx
 <VideoPlayer
   src="https://example.com/video.mp4"
-  subtitles={[
-    { id: "en", src: "/subs/en.vtt", label: "English", srclang: "en", default: true },
-    { id: "es", src: "/subs/es.vtt", label: "Español", srclang: "es" },
-  ]}
+  options={{
+    subtitles: [
+      { id: "en", src: "/subs/en.vtt", label: "English", srclang: "en", default: true },
+      { id: "es", src: "/subs/es.vtt", label: "Español", srclang: "es" },
+    ],
+  }}
 />
 ```
 
@@ -292,6 +394,7 @@ All types are exported from the package:
 ```ts
 import type {
   VideoPlayerProps,
+  VideoPlayerOptions,
   VideoPlayerRef,
   PlayerState,
   PlaybackRate,
@@ -300,13 +403,15 @@ import type {
   BufferedRange,
   VideoError,
   VideoErrorCode,
-  ThumbnailCue,
   ContextMenuItem,
   ControlBarItem,
 } from "react-helios";
 
+import { AUDIO_BANDWIDTH_THRESHOLDS } from "react-helios";
+
 // VTT utilities (useful for server-side pre-parsing or custom UIs)
 import { parseThumbnailVtt, findThumbnailCue } from "react-helios";
+import type { ThumbnailCue } from "react-helios";
 ```
 
 ### `PlayerState`
@@ -325,6 +430,7 @@ interface PlayerState {
   isFullscreen: boolean;
   isPictureInPicture: boolean;
   isTheaterMode: boolean;
+  isAudioMode: boolean;
   isLive: boolean;
   qualityLevels: HLSQualityLevel[];
   currentQualityLevel: number; // -1 = ABR auto
@@ -349,20 +455,6 @@ interface VideoError {
 }
 ```
 
-### `ThumbnailCue`
-
-```ts
-interface ThumbnailCue {
-  start: number; // seconds
-  end: number;   // seconds
-  url: string;   // absolute URL to the sprite image
-  x: number;     // pixel offset within sprite
-  y: number;
-  w: number;     // cell width in pixels
-  h: number;     // cell height in pixels
-}
-```
-
 ### `ControlBarItem`
 
 ```ts
@@ -384,9 +476,21 @@ interface ContextMenuItem {
 }
 ```
 
-## Utility Functions
+### `ThumbnailCue`
+
+```ts
+interface ThumbnailCue {
+  start: number; // seconds
+  end: number;   // seconds
+  url: string;   // absolute URL to the sprite image
+  x: number;     // pixel offset within sprite
+  y: number;
+  w: number;     // cell width in pixels
+  h: number;     // cell height in pixels
+}
+```
 
-The package exports a few helper utilities used internally, exposed for custom integrations:
+## Utility Functions
 
 ```ts
 import { formatTime, isHLSUrl, getMimeType } from "react-helios";
@@ -422,15 +526,17 @@ The player is architected to produce **zero React re-renders during playback**:
 
 - `timeupdate` and `progress` events are handled by direct DOM mutation (refs), not React state.
 - `ProgressBar` and `TimeDisplay` self-subscribe to the video element — the parent tree never re-renders on seek or time change.
+- `Controls` and `AudioModeOverlay` are wrapped in `React.memo` — they only re-render when their own props change, not when unrelated state (buffering, errors) updates.
 - VTT sprite thumbnails are looked up via binary search (O(log n)) and rendered via CSS `background-position` — no hidden `<video>` element, no canvas, no network requests per hover.
 - Buffered ranges are the only state that triggers a re-render (fires every few seconds during buffering, not 60× per second).
+- In audio mode the `<video>` element stays mounted with `visibility: hidden` — audio keeps playing without any re-initialisation cost on toggle.
 
 ## Project Structure
 
 ```
 react-helios/
 ├── src/                    # Library source
-│   ├── components/         # VideoPlayer, Controls, control elements
+│   ├── components/         # VideoPlayer, Controls, AudioModeOverlay, control elements
 │   ├── hooks/              # useVideoPlayer (state + HLS init)
 │   ├── lib/                # Types, HLS utilities, VTT parser, format helpers
 │   └── styles/             # CSS

package/dist/index.d.mts

@@ -101,39 +101,36 @@ interface ControlBarItem {
     title?: string;
     onClick: () => void;
 }
-interface VideoPlayerProps {
-    src: string;
-    poster?: string;
+interface VideoPlayerOptions {
     autoplay?: boolean;
     muted?: boolean;
     loop?: boolean;
-    controls?: boolean;
     preload?: "none" | "metadata" | "auto";
     playbackRates?: PlaybackRate[];
-    className?: string;
     enableHLS?: boolean;
+    hlsConfig?: Partial<HlsConfig>;
     enablePreview?: boolean;
-    /**
-     * URL to a WebVTT thumbnail track for sprite-sheet preview on the progress bar.
-     *
-     * The VTT file should map time ranges to sprite-sheet coordinates using the
-     * standard `#xywh=x,y,w,h` fragment format:
-     *
-     * ```
-     * WEBVTT
-     *
-     * 00:00:00.000 --> 00:00:05.000
-     * https://cdn.example.com/thumbs/storyboard0.jpg#xywh=0,0,160,90
-     * ```
-     *
-     * When provided, hovering the progress bar shows a thumbnail instead of
-     * requiring a second video decode. If omitted, only the timestamp tooltip
-     * is shown.
-     */
     thumbnailVtt?: string;
-    hlsConfig?: Partial<HlsConfig>;
+    autoHideControls?: boolean;
     subtitles?: SubtitleTrack[];
     crossOrigin?: "anonymous" | "use-credentials";
+    logo?: string | ReactNode;
+    audioSrc?: string;
+    showAudioButton?: boolean;
+    audioModeIcon?: ReactNode;
+    videoModeIcon?: ReactNode;
+    /**
+     * Custom content shown in audio mode when no `poster` is provided.
+     * Replaces the default animated-gradient + waveform fallback entirely.
+     * The `logo` prop is still rendered on top of this if also provided.
+     */
+    audioModeFallback?: ReactNode;
+    /** Label shown next to the icon when in video mode (click → switches to audio). Default: "Audio" */
+    audioModeLabel?: string;
+    /** Label shown next to the icon when in audio mode (click → switches to video). Default: "Video" */
+    videoModeLabel?: string;
+    defaultAudioMode?: boolean;
+    audioBandwidthThreshold?: number;
     onPlay?: () => void;
     onPause?: () => void;
     onEnded?: () => void;
@@ -142,37 +139,17 @@ interface VideoPlayerProps {
     onDurationChange?: (duration: number) => void;
     onBuffering?: (isBuffering: boolean) => void;
     onTheaterModeChange?: (isTheater: boolean) => void;
-    /**
-     * Image URL or ReactNode shown as artwork in audio mode.
-     * Priority: `poster` prop → `logo` string/ReactNode → waveform-only.
-     * If a string URL is provided the image is rendered white-normalised (filter invert)
-     * so it stands out on the dark background.
-     */
-    logo?: string | ReactNode;
-    /**
-     * Show the headphones / audio-mode toggle button in the control bar.
-     * @default true
-     */
-    showAudioButton?: boolean;
-    /**
-     * Start the player in audio-only mode on mount.
-     * @default false
-     */
-    defaultAudioMode?: boolean;
-    /**
-     * Bandwidth threshold in **Kbps**. When the measured download speed falls below
-     * this value the player automatically switches to audio mode.
-     * Use the exported `AUDIO_BANDWIDTH_THRESHOLDS` presets for convenience.
-     * Set to `0` to disable automatic switching.
-     * Only applies to HLS streams (where hls.js measures real segment bandwidth).
-     * @default 300  (AUDIO_BANDWIDTH_THRESHOLDS.POOR)
-     */
-    audioBandwidthThreshold?: number;
-    /** Fired whenever audio mode is toggled — either automatically or by the user. */
     onAudioModeChange?: (isAudio: boolean) => void;
     contextMenuItems?: ContextMenuItem[];
     controlBarItems?: ControlBarItem[];
 }
+interface VideoPlayerProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    controls?: boolean;
+    options?: VideoPlayerOptions;
+}
 
 declare const VideoPlayer: react__default.ForwardRefExoticComponent<VideoPlayerProps & react__default.RefAttributes<VideoPlayerRef>>;
 
@@ -192,12 +169,17 @@ interface ControlsProps {
     isTheaterMode: boolean;
     isAudioMode: boolean;
     showAudioButton: boolean;
+    audioModeIcon?: ReactNode;
+    videoModeIcon?: ReactNode;
+    audioModeLabel?: string;
+    videoModeLabel?: string;
     isLive: boolean;
     qualityLevels: HLSQualityLevel[];
     currentQualityLevel: number;
     controlBarItems?: ControlBarItem[];
+    autoHideControls: boolean;
 }
-declare const Controls: react__default.FC<ControlsProps>;
+declare const Controls: react__default.NamedExoticComponent<ControlsProps>;
 
 interface TimeDisplayProps {
     videoRef: React.RefObject<HTMLVideoElement | null>;
@@ -339,4 +321,4 @@ declare function parseThumbnailVtt(text: string, baseUrl?: string): ThumbnailCue
  */
 declare function findThumbnailCue(cues: ThumbnailCue[], time: number): ThumbnailCue | null;
 
-export { AUDIO_BANDWIDTH_THRESHOLDS, type BufferedRange, type ContextMenuItem, type ControlBarItem, index as ControlElements, Controls, type HLSQualityLevel, type PlaybackRate, type PlayerState, type SubtitleTrack, type ThumbnailCue, type VideoError, type VideoErrorCode, VideoPlayer, type VideoPlayerProps, type VideoPlayerRef, findThumbnailCue, formatTime, getMimeType, isHLSUrl, parseThumbnailVtt };
+export { AUDIO_BANDWIDTH_THRESHOLDS, type BufferedRange, type ContextMenuItem, type ControlBarItem, index as ControlElements, Controls, type HLSQualityLevel, type PlaybackRate, type PlayerState, type SubtitleTrack, type ThumbnailCue, type VideoError, type VideoErrorCode, VideoPlayer, type VideoPlayerOptions, type VideoPlayerProps, type VideoPlayerRef, findThumbnailCue, formatTime, getMimeType, isHLSUrl, parseThumbnailVtt };