@vidstack/react/dist/types/components.d.ts

Build awesome media experiences on the web.

import { type ReactElementProps } from 'maverick.js/react';
import { type MediaOutletElement, type MediaPlayerElement, type MediaCommunitySkinElement, type MediaBufferingIndicatorElement, type MediaCaptionButtonElement, type MediaFullscreenButtonElement, type MediaMuteButtonElement, type MediaPIPButtonElement, type MediaPlayButtonElement, type MediaSeekButtonElement, type MediaToggleButtonElement, type MediaCaptionsElement, type MediaGestureElement, type MediaLiveIndicatorElement, type MediaAudioMenuButtonElement, type MediaAudioMenuItemsElement, type MediaCaptionsMenuButtonElement, type MediaCaptionsMenuItemsElement, type MediaChaptersMenuItemsElement, type MediaMenuButtonElement, type MediaMenuItemsElement, type MediaMenuElement, type MediaPlaybackRateMenuButtonElement, type MediaPlaybackRateMenuItemsElement, type MediaQualityMenuButtonElement, type MediaQualityMenuItemsElement, type MediaRadioGroupElement, type MediaRadioElement, type MediaPosterElement, type MediaSliderThumbnailElement, type MediaSliderValueElement, type MediaSliderVideoElement, type MediaSliderElement, type MediaTimeSliderElement, type MediaVolumeSliderElement, type MediaThumbnailElement, type MediaTimeElement, type MediaTooltipElement } from 'vidstack';
/**
Used to render the current provider.

* @docs {@link https://www.vidstack.io/docs/react/player/components/media/outlet}
* @example
*```tsx
*<MediaPlayer>
*  <MediaOutlet></MediaOutlet>
*  ...
*</MediaPlayer>
*```
*/
export declare const MediaOutlet: import("maverick.js/react").ReactElement<MediaOutletProps>;
export interface MediaOutletProps extends ReactElementProps<MediaOutletElement> {
}
/**
All media elements exist inside the `<media-player>` component. This component's main
responsibilities are to manage media state updates, dispatch media events, handle media
requests, and expose media state through HTML attributes and CSS properties for styling
purposes.

* @docs {@link https://www.vidstack.io/docs/react/player/components/media/player}
* @example
*```tsx
*<MediaPlayer src="...">
*  <MediaOutlet></MediaOutlet>
*  Other components that use/manage media state here.
*</MediaPlayer>
*```
*/
export declare const MediaPlayer: import("maverick.js/react").ReactElement<MediaPlayerProps>;
export interface MediaPlayerProps extends ReactElementProps<MediaPlayerElement> {
}
/**
undefined

* @docs {@link https://www.vidstack.io/docs/react/player/core-concepts/skins#community-skin}
* @example
*```tsx
*<MediaPlayer>
*  <MediaOutlet />
*  <MediaCommunitySkin />
*</MediaPlayer>
*```
*/
export declare const MediaCommunitySkin: import("maverick.js/react").ReactElement<MediaCommunitySkinProps>;
export interface MediaCommunitySkinProps extends ReactElementProps<MediaCommunitySkinElement> {
}
/**
Display a loading indicator to users before the media is ready for playback or when
waiting for media to buffer.

* @docs {@link https://www.vidstack.io/docs/react/player/components/display/buffering-indicator}
* @example
*```tsx
*<MediaBufferingIndicator></MediaBufferingIndicator>
*```
*/
export declare const MediaBufferingIndicator: import("maverick.js/react").ReactElement<MediaBufferingIndicatorProps>;
export interface MediaBufferingIndicatorProps extends ReactElementProps<MediaBufferingIndicatorElement> {
}
/**
A button for toggling the showing state of the captions.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/caption-button}
* @example
*```tsx
*<MediaCaptionButton></MediaCaptionButton>
*```
*/
export declare const MediaCaptionButton: import("maverick.js/react").ReactElement<MediaCaptionButtonProps>;
export interface MediaCaptionButtonProps extends ReactElementProps<MediaCaptionButtonElement> {
}
/**
A button for toggling the fullscreen mode of the player.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/fullscreen-button}
* @example
*```tsx
*<MediaFullscreenButton></MediaFullscreenButton>
*```
*/
export declare const MediaFullscreenButton: import("maverick.js/react").ReactElement<MediaFullscreenButtonProps>;
export interface MediaFullscreenButtonProps extends ReactElementProps<MediaFullscreenButtonElement> {
}
/**
A button for toggling the muted state of the player.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/mute-button}
* @example
*```tsx
*<MediaMuteButton></MediaMuteButton>
*```
*/
export declare const MediaMuteButton: import("maverick.js/react").ReactElement<MediaMuteButtonProps>;
export interface MediaMuteButtonProps extends ReactElementProps<MediaMuteButtonElement> {
}
/**
A button for toggling the picture-in-picture (PIP) mode of the player.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/pip-button}
* @example
*```tsx
*<MediaPipButton></MediaPipButton>
*```
*/
export declare const MediaPIPButton: import("maverick.js/react").ReactElement<MediaPIPButtonProps>;
export interface MediaPIPButtonProps extends ReactElementProps<MediaPIPButtonElement> {
}
/**
A button for toggling the playback state (play/pause) of the current media.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/play-button}
* @example
*```tsx
*<MediaPlayButton></MediaPlayButton>
*```
*/
export declare const MediaPlayButton: import("maverick.js/react").ReactElement<MediaPlayButtonProps>;
export interface MediaPlayButtonProps extends ReactElementProps<MediaPlayButtonElement> {
}
/**
A button for seeking the current media playback forwards or backwards by a specified amount.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/seek-button}
* @example
*```tsx
*Forward +30s on each press.
*<MediaSeekButton seconds="+30"></MediaSeekButton>
*Backward -30s on each press.
*<MediaSeekButton seconds="-30"></MediaSeekButton>
*```
*/
export declare const MediaSeekButton: import("maverick.js/react").ReactElement<MediaSeekButtonProps>;
export interface MediaSeekButtonProps extends ReactElementProps<MediaSeekButtonElement> {
}
/**
A toggle button is a two-state button that can be either off (not pressed) or on (pressed).

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/toggle-button}
* @example
*```tsx
*<MediaToggleButton ariaLabel="...">
*  <svg slot="on">...</svg>
*  <svg slot="off">...</svg>
*</MediaToggleButton>
*```
*/
export declare const MediaToggleButton: import("maverick.js/react").ReactElement<MediaToggleButtonProps>;
export interface MediaToggleButtonProps extends ReactElementProps<MediaToggleButtonElement> {
}
/**
Renders and displays captions/subtitles. This will be an overlay for video and a simple
captions box for audio.

* @docs {@link https://www.vidstack.io/docs/react/player/components/display/captions}
* @example
*```tsx
*<MediaCaptions></MediaCaptions>
*```
*/
export declare const MediaCaptions: import("maverick.js/react").ReactElement<MediaCaptionsProps>;
export interface MediaCaptionsProps extends ReactElementProps<MediaCaptionsElement> {
}
/**
This component enables actions to be performed on the media based on user gestures.

* @docs {@link https://www.vidstack.io/docs/react/player/components/media/gesture}
* @example
*```tsx
*<MediaPlayer>
*  <MediaOutlet>
*    <MediaGesture event="pointerup" action="toggle:paused"></MediaGesture>
*    <MediaGesture
*      event="dblpointerup"
*      action="toggle:fullscreen"
*    ></MediaGesture>
*  </MediaOutlet>
*</MediaPlayer>
*```
*/
export declare const MediaGesture: import("maverick.js/react").ReactElement<MediaGestureProps>;
export interface MediaGestureProps extends ReactElementProps<MediaGestureElement> {
}
/**
This component displays the current live status of the stream. This includes whether it's
live, at the live edge, or not live. In addition, this component is a button during live streams
and will skip ahead to the live edge when pressed.

🚨 This component will contain no content, sizing, or role when the current stream is _not_ live.

* @docs {@link https://www.vidstack.io/docs/react/player/components/display/live-indicator}
* @example
*```tsx
*<MediaLiveIndicator></MediaLiveIndicator>
*```
* @example
*```tsx
*<MediaLiveIndicator>
*  <div slot="live"></div>
*  <div slot="liveEdge"></div>
*  <div slot="notLive"></div>
*</MediaLiveIndicator>
*```
*/
export declare const MediaLiveIndicator: import("maverick.js/react").ReactElement<MediaLiveIndicatorProps>;
export interface MediaLiveIndicatorProps extends ReactElementProps<MediaLiveIndicatorElement> {
}
/**
This component is a pre-styled menu button that controls the opening and closing of a audio
tracks menu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/audio-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaAudioMenuButton label="Audio"></MediaAudioMenuButton>
*  <MediaAudioMenuItems></MediaAudioMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaAudioMenuButton: import("maverick.js/react").ReactElement<MediaAudioMenuButtonProps>;
export interface MediaAudioMenuButtonProps extends ReactElementProps<MediaAudioMenuButtonElement> {
}
/**
This component displays menu radio options to the user so they can manually change the current
audio track.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/audio-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaAudioMenuButton label="Audio"></MediaAudioMenuButton>
*  <MediaAudioMenuItems></MediaAudioMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaAudioMenuItems: import("maverick.js/react").ReactElement<MediaAudioMenuItemsProps>;
export interface MediaAudioMenuItemsProps extends ReactElementProps<MediaAudioMenuItemsElement> {
}
/**
This component is a pre-styled menu button that controls the opening and closing of a captions
menu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/captions-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaCaptionsMenuButton label="Captions"></MediaCaptionsMenuButton>
*  <MediaCaptionsMenuItems></MediaCaptionsMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaCaptionsMenuButton: import("maverick.js/react").ReactElement<MediaCaptionsMenuButtonProps>;
export interface MediaCaptionsMenuButtonProps extends ReactElementProps<MediaCaptionsMenuButtonElement> {
}
/**
This component displays menu radio options to the user so they can manually change the current
captions/subtitles track.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/captions-menu-items}
* @example
*```tsx
*<MediaMenu>
*  <MediaCaptionsMenuButton label="Captions"></MediaCaptionsMenuButton>
*  <MediaCaptionsMenuItems></MediaCaptionsMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaCaptionsMenuItems: import("maverick.js/react").ReactElement<MediaCaptionsMenuItemsProps>;
export interface MediaCaptionsMenuItemsProps extends ReactElementProps<MediaCaptionsMenuItemsElement> {
}
/**
This component displays media chapters inside of a menu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/chapters-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaMenuButton ariaLabel="Chapters">
*    <MediaIcon type="chapters"></MediaIcon>
*  </MediaMenuButton>
*  <MediaChaptersMenuItems></MediaChaptersMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaChaptersMenuItems: import("maverick.js/react").ReactElement<MediaChaptersMenuItemsProps>;
export interface MediaChaptersMenuItemsProps extends ReactElementProps<MediaChaptersMenuItemsElement> {
}
/**
A button that controls the opening and closing of a menu component. The button will become a
menuitem when used inside a submenu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaMenuButton ariaLabel="Settings">
*    <MediaIcon type="settings"></MediaIcon>
*  </MediaMenuButton>
*  <MediaMenuItems>
*    ...
*  </MediaMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaMenuButton: import("maverick.js/react").ReactElement<MediaMenuButtonProps>;
export interface MediaMenuButtonProps extends ReactElementProps<MediaMenuButtonElement> {
}
/**
Menu items can be used to display settings or arbitrary content in a floating panel.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaMenuButton ariaLabel="Settings">
*    <MediaIcon type="settings"></MediaIcon>
*  </MediaMenuButton>
*  <MediaMenuItems>
*    ...
*  </MediaMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaMenuItems: import("maverick.js/react").ReactElement<MediaMenuItemsProps>;
export interface MediaMenuItemsProps extends ReactElementProps<MediaMenuItemsElement> {
}
/**
This component is used to display options in a floating panel.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaMenuButton ariaLabel="Settings">
*    <MediaIcon type="settings"></MediaIcon>
*  </MediaMenuButton>
*  <MediaMenuItems>
*    ...
*  </MediaMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaMenu: import("maverick.js/react").ReactElement<MediaMenuProps>;
export interface MediaMenuProps extends ReactElementProps<MediaMenuElement> {
}
/**
This component is a pre-styled menu button that controls the opening and closing of a playback
rate menu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/playback-rate-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaPlaybackRateMenuButton label="Speed"></MediaPlaybackRateMenuButton>
*  <MediaPlaybackRateMenuItems></MediaPlaybackRateMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaPlaybackRateMenuButton: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuButtonProps>;
export interface MediaPlaybackRateMenuButtonProps extends ReactElementProps<MediaPlaybackRateMenuButtonElement> {
}
/**
This component displays menu radio options to the user so they can manually change the current
playback speed.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/playback-rate-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaPlaybackRateMenuButton label="Speed"></MediaPlaybackRateMenuButton>
*  <MediaPlaybackRateMenuItems></MediaPlaybackRateMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaPlaybackRateMenuItems: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuItemsProps>;
export interface MediaPlaybackRateMenuItemsProps extends ReactElementProps<MediaPlaybackRateMenuItemsElement> {
}
/**
This component is a pre-filled menu button that controls the opening and closing of a quality
rate menu.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/quality-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaQualityMenuButton label="Quality"></MediaQualityMenuButton>
*  <MediaQualityMenuItems></MediaQualityMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaQualityMenuButton: import("maverick.js/react").ReactElement<MediaQualityMenuButtonProps>;
export interface MediaQualityMenuButtonProps extends ReactElementProps<MediaQualityMenuButtonElement> {
}
/**
This component displays menu radio options to the user so they can manually change the current
playback quality.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/quality-menu}
* @example
*```tsx
*<MediaMenu>
*  <MediaQualityMenuButton label="Quality"></MediaQualityMenuButton>
*  <MediaQualityMenuItems></MediaQualityMenuItems>
*</MediaMenu>
*```
*/
export declare const MediaQualityMenuItems: import("maverick.js/react").ReactElement<MediaQualityMenuItemsProps>;
export interface MediaQualityMenuItemsProps extends ReactElementProps<MediaQualityMenuItemsElement> {
}
/**
A radio group consists of options where only one of them can be checked. Each option is
provided as a radio (i.e., a selectable element).

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/radio-group}
* @example
*```tsx
*<MediaRadioGroup value={720}>
*  <MediaRadio value={1080}>1080p</MediaRadio>
*  <MediaRadio value={720}>720p</MediaRadio>
*  ...
*</MediaRadioGroup>
*```
*/
export declare const MediaRadioGroup: import("maverick.js/react").ReactElement<MediaRadioGroupProps>;
export interface MediaRadioGroupProps extends ReactElementProps<MediaRadioGroupElement> {
}
/**
A radio represents a option that a user can select inside of a radio group. Only one radio
can be checked in a group.

* @docs {@link https://www.vidstack.io/docs/react/player/components/menu/radio}
* @example
*```tsx
*<MediaRadioGroup value={720}>
*  <MediaRadio value={1080}>1080p</MediaRadio>
*  <MediaRadio value={720}>720p</MediaRadio>
*  ...
*</MediaRadioGroup>
*```
*/
export declare const MediaRadio: import("maverick.js/react").ReactElement<MediaRadioProps>;
export interface MediaRadioProps extends ReactElementProps<MediaRadioElement> {
}
/**
Loads and displays the current media poster image. By default, the media provider's
loading strategy is respected meaning the poster won't load until the media can.

* @docs {@link https://www.vidstack.io/docs/react/player/components/layout/poster}
* @example
*```tsx
*<MediaPlayer poster="...">
*  <MediaPoster alt="Large alien ship hovering over New York."></MediaPoster>
*</MediaPlayer>
*```
*/
export declare const MediaPoster: import("maverick.js/react").ReactElement<MediaPosterProps>;
export interface MediaPosterProps extends ReactElementProps<MediaPosterElement> {
}
/**
Used to display preview thumbnails when the user is hovering or dragging the time slider.
The time ranges in the WebVTT file will automatically be matched based on the current slider
pointer position.

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-thumbnail}
* @example
*```tsx
*<MediaPlayer thumbnails="https://mediaFiles.vidstack.io/thumbnails.vtt">
*  <MediaTimeSlider>
*    <MediaSliderThumbnail slot="preview"></MediaSliderThumbnail>
*  </MediaTimeSlider>
*</MediaPlayer>
*```
*/
export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<MediaSliderThumbnailProps>;
export interface MediaSliderThumbnailProps extends ReactElementProps<MediaSliderThumbnailElement> {
}
/**
Outputs the current slider value as text.

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-value}
* @example
*```tsx
*<MediaTimeSlider>
*  <MediaSliderValue
*    type="pointer"
*    format="time"
*    slot="preview"
*  ></MediaSliderValue>
*</MediaTimeSlider>
*```
* @example
*```tsx
*<MediaSliderValue
*  type="current"
*></MediaSliderValue>
*```
* @example
*```tsx
*<MediaSliderValue
*  format="time"
*  showHours
*  padHours
*></MediaSliderValue>
*```
* @example
*```tsx
*<MediaSliderValue
*  format="percent"
*  decimalPlaces={2}
*></MediaSliderValue>
*```
*/
export declare const MediaSliderValue: import("maverick.js/react").ReactElement<MediaSliderValueProps>;
export interface MediaSliderValueProps extends ReactElementProps<MediaSliderValueElement> {
}
/**
Used to load a low-resolution video to be displayed when the user is hovering over or dragging
the time slider. The preview video will automatically be updated to be in-sync with the current
preview position, so ensure it has the same length as the original media (i.e., same duration).

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-video}
* @example
*```tsx
*<MediaTimeSlider>
*  <MediaSliderVideo src="/lowRes-video.mp4" slot="preview"></MediaSliderVideo>
*</MediaTimeSlider>
*```
*/
export declare const MediaSliderVideo: import("maverick.js/react").ReactElement<MediaSliderVideoProps>;
export interface MediaSliderVideoProps extends ReactElementProps<MediaSliderVideoElement> {
}
/**
A custom-built range input that is cross-browser friendly, ARIA friendly, mouse/touch-friendly
and easily style-able. The slider allows users to input numeric values between a minimum and
maximum value.

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider}
* @example
*```tsx
*<MediaSlider min={0} max={100} value={50} ariaLabel="..."></MediaSlider>
*```
*/
export declare const MediaSlider: import("maverick.js/react").ReactElement<MediaSliderProps>;
export interface MediaSliderProps extends ReactElementProps<MediaSliderElement> {
}
/**
A slider control that lets the user specify their desired time level.

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/time-slider}
* @example
*```tsx
*<MediaTimeSlider></MediaTimeSlider>
*```
* @example
*```tsx
*<MediaTimeSlider>
*  <MediaSliderValue
*    type="pointer"
*    format="time"
*    slot="preview"
*  ></MediaSliderValue>
*</MediaTimeSlider>
*```
*/
export declare const MediaTimeSlider: import("maverick.js/react").ReactElement<MediaTimeSliderProps>;
export interface MediaTimeSliderProps extends ReactElementProps<MediaTimeSliderElement> {
}
/**
A slider control that lets the user specify their desired volume level.

* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/volume-slider}
* @example
*```tsx
*<MediaVolumeSlider></MediaVolumeSlider>
*```
* @example
*```tsx
*<MediaVolumeSlider>
*  <MediaSliderValue
*    type="pointer"
*    format="percent"
*  ></MediaSliderValue>
*</MediaVolumeSlider>
*```
*/
export declare const MediaVolumeSlider: import("maverick.js/react").ReactElement<MediaVolumeSliderProps>;
export interface MediaVolumeSliderProps extends ReactElementProps<MediaVolumeSliderElement> {
}
/**
Used to load and display a preview thumbnail at the given `time`.

* @docs {@link https://www.vidstack.io/docs/react/player/components/display/thumbnail}
* @example
*```tsx
*<MediaPlayer thumbnails="https://mediaFiles.vidstack.io/thumbnails.vtt">
*  ...
*  <MediaThumbnail time={10}></MediaThumbnail>
*</MediaPlayer>
*```
*/
export declare const MediaThumbnail: import("maverick.js/react").ReactElement<MediaThumbnailProps>;
export interface MediaThumbnailProps extends ReactElementProps<MediaThumbnailElement> {
}
/**
Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
formatted text.

* @docs {@link https://www.vidstack.io/docs/react/player/components/display/time}
* @example
*```tsx
*<MediaTime type="current"></MediaTime>
*```
* @example
*```tsx
*Remaining time.
*<MediaTime type="current" remainder></MediaTime>
*```
*/
export declare const MediaTime: import("maverick.js/react").ReactElement<MediaTimeProps>;
export interface MediaTimeProps extends ReactElementProps<MediaTimeElement> {
}
/**
A contextual text bubble that displays a description for an element that appears on pointer
hover or keyboard focus.

* @docs {@link https://www.vidstack.io/docs/react/player/components/buttons/tooltip}
* @example
*```tsx
*<MediaPlayButton>
*  <MediaTooltip position="top left">
*    <span slot="play">Play</span>
*    <span slot="pause">Pause</span>
*  </MediaTooltip>
*</MediaPlayButton>
*```
*/
export declare const MediaTooltip: import("maverick.js/react").ReactElement<MediaTooltipProps>;
export interface MediaTooltipProps extends ReactElementProps<MediaTooltipElement> {
}