Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vidstack/react
Advanced tools
@vidstack/react - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
@@ -1,2 +0,3 @@ | ||
| import { type MediaOutletElement, type MediaPlayerElement, 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 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 MediaTimeElement, type MediaTooltipElement } from 'vidstack'; | ||
| import { type ReactElementProps } from 'maverick.js/react'; | ||
| import { type MediaOutletElement, type MediaPlayerElement, 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'; | ||
| /** | ||
@@ -14,3 +15,5 @@ Used to render the current provider. | ||
| */ | ||
| export declare const MediaOutlet: import("maverick.js/react").ReactElement<MediaOutletElement>; | ||
| export declare const MediaOutlet: import("maverick.js/react").ReactElement<MediaOutletProps>; | ||
| export interface MediaOutletProps extends ReactElementProps<MediaOutletElement> { | ||
| } | ||
| /** | ||
@@ -31,3 +34,5 @@ All media elements exist inside the `<media-player>` component. This component's main | ||
| */ | ||
| export declare const MediaPlayer: import("maverick.js/react").ReactElement<MediaPlayerElement>; | ||
| export declare const MediaPlayer: import("maverick.js/react").ReactElement<MediaPlayerProps>; | ||
| export interface MediaPlayerProps extends ReactElementProps<MediaPlayerElement> { | ||
| } | ||
| /** | ||
@@ -43,3 +48,5 @@ Display a loading indicator to users before the media is ready for playback or when | ||
| */ | ||
| export declare const MediaBufferingIndicator: import("maverick.js/react").ReactElement<MediaBufferingIndicatorElement>; | ||
| export declare const MediaBufferingIndicator: import("maverick.js/react").ReactElement<MediaBufferingIndicatorProps>; | ||
| export interface MediaBufferingIndicatorProps extends ReactElementProps<MediaBufferingIndicatorElement> { | ||
| } | ||
| /** | ||
@@ -54,3 +61,5 @@ A button for toggling the showing state of the captions. | ||
| */ | ||
| export declare const MediaCaptionButton: import("maverick.js/react").ReactElement<MediaCaptionButtonElement>; | ||
| export declare const MediaCaptionButton: import("maverick.js/react").ReactElement<MediaCaptionButtonProps>; | ||
| export interface MediaCaptionButtonProps extends ReactElementProps<MediaCaptionButtonElement> { | ||
| } | ||
| /** | ||
@@ -65,3 +74,5 @@ A button for toggling the fullscreen mode of the player. | ||
| */ | ||
| export declare const MediaFullscreenButton: import("maverick.js/react").ReactElement<MediaFullscreenButtonElement>; | ||
| export declare const MediaFullscreenButton: import("maverick.js/react").ReactElement<MediaFullscreenButtonProps>; | ||
| export interface MediaFullscreenButtonProps extends ReactElementProps<MediaFullscreenButtonElement> { | ||
| } | ||
| /** | ||
@@ -76,3 +87,5 @@ A button for toggling the muted state of the player. | ||
| */ | ||
| export declare const MediaMuteButton: import("maverick.js/react").ReactElement<MediaMuteButtonElement>; | ||
| export declare const MediaMuteButton: import("maverick.js/react").ReactElement<MediaMuteButtonProps>; | ||
| export interface MediaMuteButtonProps extends ReactElementProps<MediaMuteButtonElement> { | ||
| } | ||
| /** | ||
@@ -87,3 +100,5 @@ A button for toggling the picture-in-picture (PIP) mode of the player. | ||
| */ | ||
| export declare const MediaPIPButton: import("maverick.js/react").ReactElement<MediaPIPButtonElement>; | ||
| export declare const MediaPIPButton: import("maverick.js/react").ReactElement<MediaPIPButtonProps>; | ||
| export interface MediaPIPButtonProps extends ReactElementProps<MediaPIPButtonElement> { | ||
| } | ||
| /** | ||
@@ -98,3 +113,5 @@ A button for toggling the playback state (play/pause) of the current media. | ||
| */ | ||
| export declare const MediaPlayButton: import("maverick.js/react").ReactElement<MediaPlayButtonElement>; | ||
| export declare const MediaPlayButton: import("maverick.js/react").ReactElement<MediaPlayButtonProps>; | ||
| export interface MediaPlayButtonProps extends ReactElementProps<MediaPlayButtonElement> { | ||
| } | ||
| /** | ||
@@ -112,3 +129,5 @@ A button for seeking the current media playback forwards or backwards by a specified amount. | ||
| */ | ||
| export declare const MediaSeekButton: import("maverick.js/react").ReactElement<MediaSeekButtonElement>; | ||
| export declare const MediaSeekButton: import("maverick.js/react").ReactElement<MediaSeekButtonProps>; | ||
| export interface MediaSeekButtonProps extends ReactElementProps<MediaSeekButtonElement> { | ||
| } | ||
| /** | ||
@@ -126,3 +145,5 @@ A toggle button is a two-state button that can be either off (not pressed) or on (pressed). | ||
| */ | ||
| export declare const MediaToggleButton: import("maverick.js/react").ReactElement<MediaToggleButtonElement>; | ||
| export declare const MediaToggleButton: import("maverick.js/react").ReactElement<MediaToggleButtonProps>; | ||
| export interface MediaToggleButtonProps extends ReactElementProps<MediaToggleButtonElement> { | ||
| } | ||
| /** | ||
@@ -138,3 +159,5 @@ Renders and displays captions/subtitles. This will be an overlay for video and a simple | ||
| */ | ||
| export declare const MediaCaptions: import("maverick.js/react").ReactElement<MediaCaptionsElement>; | ||
| export declare const MediaCaptions: import("maverick.js/react").ReactElement<MediaCaptionsProps>; | ||
| export interface MediaCaptionsProps extends ReactElementProps<MediaCaptionsElement> { | ||
| } | ||
| /** | ||
@@ -157,3 +180,5 @@ This component enables actions to be performed on the media based on user gestures. | ||
| */ | ||
| export declare const MediaGesture: import("maverick.js/react").ReactElement<MediaGestureElement>; | ||
| export declare const MediaGesture: import("maverick.js/react").ReactElement<MediaGestureProps>; | ||
| export interface MediaGestureProps extends ReactElementProps<MediaGestureElement> { | ||
| } | ||
| /** | ||
@@ -180,3 +205,5 @@ This component displays the current live status of the stream. This includes whether it's | ||
| */ | ||
| export declare const MediaLiveIndicator: import("maverick.js/react").ReactElement<MediaLiveIndicatorElement>; | ||
| export declare const MediaLiveIndicator: import("maverick.js/react").ReactElement<MediaLiveIndicatorProps>; | ||
| export interface MediaLiveIndicatorProps extends ReactElementProps<MediaLiveIndicatorElement> { | ||
| } | ||
| /** | ||
@@ -195,3 +222,5 @@ This component is a pre-styled menu button that controls the opening and closing of a audio | ||
| */ | ||
| export declare const MediaAudioMenuButton: import("maverick.js/react").ReactElement<MediaAudioMenuButtonElement>; | ||
| export declare const MediaAudioMenuButton: import("maverick.js/react").ReactElement<MediaAudioMenuButtonProps>; | ||
| export interface MediaAudioMenuButtonProps extends ReactElementProps<MediaAudioMenuButtonElement> { | ||
| } | ||
| /** | ||
@@ -210,3 +239,5 @@ This component displays menu radio options to the user so they can manually change the current | ||
| */ | ||
| export declare const MediaAudioMenuItems: import("maverick.js/react").ReactElement<MediaAudioMenuItemsElement>; | ||
| export declare const MediaAudioMenuItems: import("maverick.js/react").ReactElement<MediaAudioMenuItemsProps>; | ||
| export interface MediaAudioMenuItemsProps extends ReactElementProps<MediaAudioMenuItemsElement> { | ||
| } | ||
| /** | ||
@@ -225,3 +256,5 @@ This component is a pre-styled menu button that controls the opening and closing of a captions | ||
| */ | ||
| export declare const MediaCaptionsMenuButton: import("maverick.js/react").ReactElement<MediaCaptionsMenuButtonElement>; | ||
| export declare const MediaCaptionsMenuButton: import("maverick.js/react").ReactElement<MediaCaptionsMenuButtonProps>; | ||
| export interface MediaCaptionsMenuButtonProps extends ReactElementProps<MediaCaptionsMenuButtonElement> { | ||
| } | ||
| /** | ||
@@ -240,4 +273,23 @@ This component displays menu radio options to the user so they can manually change the current | ||
| */ | ||
| export declare const MediaCaptionsMenuItems: import("maverick.js/react").ReactElement<MediaCaptionsMenuItemsElement>; | ||
| 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 | ||
@@ -259,3 +311,5 @@ menuitem when used inside a submenu. | ||
| */ | ||
| export declare const MediaMenuButton: import("maverick.js/react").ReactElement<MediaMenuButtonElement>; | ||
| export declare const MediaMenuButton: import("maverick.js/react").ReactElement<MediaMenuButtonProps>; | ||
| export interface MediaMenuButtonProps extends ReactElementProps<MediaMenuButtonElement> { | ||
| } | ||
| /** | ||
@@ -277,3 +331,5 @@ Menu items can be used to display settings or arbitrary content in a floating panel. | ||
| */ | ||
| export declare const MediaMenuItems: import("maverick.js/react").ReactElement<MediaMenuItemsElement>; | ||
| export declare const MediaMenuItems: import("maverick.js/react").ReactElement<MediaMenuItemsProps>; | ||
| export interface MediaMenuItemsProps extends ReactElementProps<MediaMenuItemsElement> { | ||
| } | ||
| /** | ||
@@ -295,3 +351,5 @@ This component is used to display options in a floating panel. | ||
| */ | ||
| export declare const MediaMenu: import("maverick.js/react").ReactElement<MediaMenuElement>; | ||
| export declare const MediaMenu: import("maverick.js/react").ReactElement<MediaMenuProps>; | ||
| export interface MediaMenuProps extends ReactElementProps<MediaMenuElement> { | ||
| } | ||
| /** | ||
@@ -310,3 +368,5 @@ This component is a pre-styled menu button that controls the opening and closing of a playback | ||
| */ | ||
| export declare const MediaPlaybackRateMenuButton: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuButtonElement>; | ||
| export declare const MediaPlaybackRateMenuButton: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuButtonProps>; | ||
| export interface MediaPlaybackRateMenuButtonProps extends ReactElementProps<MediaPlaybackRateMenuButtonElement> { | ||
| } | ||
| /** | ||
@@ -325,3 +385,5 @@ This component displays menu radio options to the user so they can manually change the current | ||
| */ | ||
| export declare const MediaPlaybackRateMenuItems: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuItemsElement>; | ||
| export declare const MediaPlaybackRateMenuItems: import("maverick.js/react").ReactElement<MediaPlaybackRateMenuItemsProps>; | ||
| export interface MediaPlaybackRateMenuItemsProps extends ReactElementProps<MediaPlaybackRateMenuItemsElement> { | ||
| } | ||
| /** | ||
@@ -340,3 +402,5 @@ This component is a pre-filled menu button that controls the opening and closing of a quality | ||
| */ | ||
| export declare const MediaQualityMenuButton: import("maverick.js/react").ReactElement<MediaQualityMenuButtonElement>; | ||
| export declare const MediaQualityMenuButton: import("maverick.js/react").ReactElement<MediaQualityMenuButtonProps>; | ||
| export interface MediaQualityMenuButtonProps extends ReactElementProps<MediaQualityMenuButtonElement> { | ||
| } | ||
| /** | ||
@@ -355,3 +419,5 @@ This component displays menu radio options to the user so they can manually change the current | ||
| */ | ||
| export declare const MediaQualityMenuItems: import("maverick.js/react").ReactElement<MediaQualityMenuItemsElement>; | ||
| export declare const MediaQualityMenuItems: import("maverick.js/react").ReactElement<MediaQualityMenuItemsProps>; | ||
| export interface MediaQualityMenuItemsProps extends ReactElementProps<MediaQualityMenuItemsElement> { | ||
| } | ||
| /** | ||
@@ -371,3 +437,5 @@ A radio group consists of options where only one of them can be checked. Each option is | ||
| */ | ||
| export declare const MediaRadioGroup: import("maverick.js/react").ReactElement<MediaRadioGroupElement>; | ||
| export declare const MediaRadioGroup: import("maverick.js/react").ReactElement<MediaRadioGroupProps>; | ||
| export interface MediaRadioGroupProps extends ReactElementProps<MediaRadioGroupElement> { | ||
| } | ||
| /** | ||
@@ -387,3 +455,5 @@ A radio represents a option that a user can select inside of a radio group. Only one radio | ||
| */ | ||
| export declare const MediaRadio: import("maverick.js/react").ReactElement<MediaRadioElement>; | ||
| export declare const MediaRadio: import("maverick.js/react").ReactElement<MediaRadioProps>; | ||
| export interface MediaRadioProps extends ReactElementProps<MediaRadioElement> { | ||
| } | ||
| /** | ||
@@ -396,3 +466,3 @@ Loads and displays the current media poster image. By default, the media provider's | ||
| *```tsx | ||
| *<MediaPlayer> | ||
| *<MediaPlayer poster="..."> | ||
| * <MediaPoster alt="Large alien ship hovering over New York."></MediaPoster> | ||
@@ -402,7 +472,9 @@ *</MediaPlayer> | ||
| */ | ||
| export declare const MediaPoster: import("maverick.js/react").ReactElement<MediaPosterElement>; | ||
| export declare const MediaPoster: import("maverick.js/react").ReactElement<MediaPosterProps>; | ||
| export interface MediaPosterProps extends ReactElementProps<MediaPosterElement> { | ||
| } | ||
| /** | ||
| Used to load/parse WebVTT files and display preview thumbnails when the user is hovering hover | ||
| or dragging the time slider. The time ranges in the WebVTT file will automatically be matched | ||
| based on the current pointer position. | ||
| 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. | ||
@@ -412,11 +484,12 @@ * @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-thumbnail} | ||
| *```tsx | ||
| *<MediaTimeSlider> | ||
| * <MediaSliderThumbnail | ||
| * src="https://mediaFiles.vidstack.io/thumbnails.vtt" | ||
| * slot="preview" | ||
| * ></MediaSliderThumbnail> | ||
| *</MediaTimeSlider> | ||
| *<MediaPlayer thumbnails="https://mediaFiles.vidstack.io/thumbnails.vtt"> | ||
| * <MediaTimeSlider> | ||
| * <MediaSliderThumbnail slot="preview"></MediaSliderThumbnail> | ||
| * </MediaTimeSlider> | ||
| *</MediaPlayer> | ||
| *``` | ||
| */ | ||
| export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<MediaSliderThumbnailElement>; | ||
| export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<MediaSliderThumbnailProps>; | ||
| export interface MediaSliderThumbnailProps extends ReactElementProps<MediaSliderThumbnailElement> { | ||
| } | ||
| /** | ||
@@ -458,3 +531,5 @@ Outputs the current slider value as text. | ||
| */ | ||
| export declare const MediaSliderValue: import("maverick.js/react").ReactElement<MediaSliderValueElement>; | ||
| export declare const MediaSliderValue: import("maverick.js/react").ReactElement<MediaSliderValueProps>; | ||
| export interface MediaSliderValueProps extends ReactElementProps<MediaSliderValueElement> { | ||
| } | ||
| /** | ||
@@ -473,3 +548,5 @@ Used to load a low-resolution video to be displayed when the user is hovering over or dragging | ||
| */ | ||
| export declare const MediaSliderVideo: import("maverick.js/react").ReactElement<MediaSliderVideoElement>; | ||
| export declare const MediaSliderVideo: import("maverick.js/react").ReactElement<MediaSliderVideoProps>; | ||
| export interface MediaSliderVideoProps extends ReactElementProps<MediaSliderVideoElement> { | ||
| } | ||
| /** | ||
@@ -486,3 +563,5 @@ A custom-built range input that is cross-browser friendly, ARIA friendly, mouse/touch-friendly | ||
| */ | ||
| export declare const MediaSlider: import("maverick.js/react").ReactElement<MediaSliderElement>; | ||
| export declare const MediaSlider: import("maverick.js/react").ReactElement<MediaSliderProps>; | ||
| export interface MediaSliderProps extends ReactElementProps<MediaSliderElement> { | ||
| } | ||
| /** | ||
@@ -507,3 +586,5 @@ A slider control that lets the user specify their desired time level. | ||
| */ | ||
| export declare const MediaTimeSlider: import("maverick.js/react").ReactElement<MediaTimeSliderElement>; | ||
| export declare const MediaTimeSlider: import("maverick.js/react").ReactElement<MediaTimeSliderProps>; | ||
| export interface MediaTimeSliderProps extends ReactElementProps<MediaTimeSliderElement> { | ||
| } | ||
| /** | ||
@@ -527,4 +608,21 @@ A slider control that lets the user specify their desired volume level. | ||
| */ | ||
| export declare const MediaVolumeSlider: import("maverick.js/react").ReactElement<MediaVolumeSliderElement>; | ||
| 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 | ||
@@ -544,3 +642,5 @@ formatted text. | ||
| */ | ||
| export declare const MediaTime: import("maverick.js/react").ReactElement<MediaTimeElement>; | ||
| export declare const MediaTime: import("maverick.js/react").ReactElement<MediaTimeProps>; | ||
| export interface MediaTimeProps extends ReactElementProps<MediaTimeElement> { | ||
| } | ||
| /** | ||
@@ -561,2 +661,4 @@ A contextual text bubble that displays a description for an element that appears on pointer | ||
| */ | ||
| export declare const MediaTooltip: import("maverick.js/react").ReactElement<MediaTooltipElement>; | ||
| export declare const MediaTooltip: import("maverick.js/react").ReactElement<MediaTooltipProps>; | ||
| export interface MediaTooltipProps extends ReactElementProps<MediaTooltipElement> { | ||
| } |
| { | ||
| "name": "@vidstack/react", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "description": "Build awesome media experiences on the web.", | ||
@@ -26,10 +26,10 @@ "license": "MIT", | ||
| "@types/react": "^18.0.0", | ||
| "maverick.js": "0.36.1", | ||
| "maverick.js": "0.36.2", | ||
| "media-icons": "0.5.0", | ||
| "react": "^18.0.0", | ||
| "vidstack": "0.5.0" | ||
| "vidstack": "0.5.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^18.0.0", | ||
| "maverick.js": "0.36.1", | ||
| "maverick.js": "0.36.2", | ||
| "media-icons": "0.5.0", | ||
@@ -36,0 +36,0 @@ "react": "^18.0.0", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.72%
169654
- Lines of code
- increased by2.54%
4084
No dependency changes