@vidstack/react - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

dist/dev.js

@@ -7,6 +7,9 @@ // src/components.ts
   FullscreenButtonDefinition,
+  LiveIndicatorDefinition,
   MuteButtonDefinition,
   PlayButtonDefinition,
   PosterDefinition,
-  SliderValueTextDefinition,
+  SeekButtonDefinition,
+  SliderThumbnailDefinition,
+  SliderValueDefinition,
   SliderVideoDefinition,
@@ -22,6 +25,9 @@ SliderDefinition,
 var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
 var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
 var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
 var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSliderValueText = /* @__PURE__ */ createLiteReactElement(SliderValueTextDefinition);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
 var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
@@ -177,2 +183,4 @@ var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
     "aria-hidden": "true",
+    focusable: "false",
+    "data-media-icon": "true",
     ref,
@@ -212,2 +220,4 @@ dangerouslySetInnerHTML: { __html: __paths }
   eyePaths,
+  fastBackwardPaths,
+  fastForwardPaths,
   flagPaths,
@@ -366,2 +376,8 @@ fullscreenArrowExitPaths,
 });
+var FastBackwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastBackwardPaths });
+});
+var FastForwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastForwardPaths });
+});
 var FlagIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -605,2 +621,4 @@ return createElement2(Icon, { ...props, ref, __paths: flagPaths });
   EyeIcon,
+  FastBackwardIcon,
+  FastForwardIcon,
   FlagIcon,
@@ -619,2 +637,3 @@ FullscreenArrowExitIcon,
   MediaFullscreenButton,
+  MediaLiveIndicator,
   MediaMuteButton,
@@ -625,4 +644,6 @@ MediaOutlet,
   MediaPoster,
+  MediaSeekButton,
   MediaSlider,
-  MediaSliderValueText,
+  MediaSliderThumbnail,
+  MediaSliderValue,
   MediaSliderVideo,
@@ -629,0 +650,0 @@ MediaTime,

dist/prod.js

@@ -7,6 +7,9 @@ // src/components.ts
   FullscreenButtonDefinition,
+  LiveIndicatorDefinition,
   MuteButtonDefinition,
   PlayButtonDefinition,
   PosterDefinition,
-  SliderValueTextDefinition,
+  SeekButtonDefinition,
+  SliderThumbnailDefinition,
+  SliderValueDefinition,
   SliderVideoDefinition,
@@ -22,6 +25,9 @@ SliderDefinition,
 var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
 var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
 var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
 var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSliderValueText = /* @__PURE__ */ createLiteReactElement(SliderValueTextDefinition);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
 var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
@@ -177,2 +183,4 @@ var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
     "aria-hidden": "true",
+    focusable: "false",
+    "data-media-icon": "true",
     ref,
@@ -212,2 +220,4 @@ dangerouslySetInnerHTML: { __html: __paths }
   eyePaths,
+  fastBackwardPaths,
+  fastForwardPaths,
   flagPaths,
@@ -366,2 +376,8 @@ fullscreenArrowExitPaths,
 });
+var FastBackwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastBackwardPaths });
+});
+var FastForwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastForwardPaths });
+});
 var FlagIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -605,2 +621,4 @@ return createElement2(Icon, { ...props, ref, __paths: flagPaths });
   EyeIcon,
+  FastBackwardIcon,
+  FastForwardIcon,
   FlagIcon,
@@ -619,2 +637,3 @@ FullscreenArrowExitIcon,
   MediaFullscreenButton,
+  MediaLiveIndicator,
   MediaMuteButton,
@@ -625,4 +644,6 @@ MediaOutlet,
   MediaPoster,
+  MediaSeekButton,
   MediaSlider,
-  MediaSliderValueText,
+  MediaSliderThumbnail,
+  MediaSliderValue,
   MediaSliderVideo,
@@ -629,0 +650,0 @@ MediaTime,

dist/server.js

@@ -7,6 +7,9 @@ // src/components.ts
   FullscreenButtonDefinition,
+  LiveIndicatorDefinition,
   MuteButtonDefinition,
   PlayButtonDefinition,
   PosterDefinition,
-  SliderValueTextDefinition,
+  SeekButtonDefinition,
+  SliderThumbnailDefinition,
+  SliderValueDefinition,
   SliderVideoDefinition,
@@ -22,6 +25,9 @@ SliderDefinition,
 var MediaFullscreenButton = /* @__PURE__ */ createLiteReactElement(FullscreenButtonDefinition);
+var MediaLiveIndicator = /* @__PURE__ */ createLiteReactElement(LiveIndicatorDefinition);
 var MediaMuteButton = /* @__PURE__ */ createLiteReactElement(MuteButtonDefinition);
 var MediaPlayButton = /* @__PURE__ */ createLiteReactElement(PlayButtonDefinition);
 var MediaPoster = /* @__PURE__ */ createLiteReactElement(PosterDefinition);
-var MediaSliderValueText = /* @__PURE__ */ createLiteReactElement(SliderValueTextDefinition);
+var MediaSeekButton = /* @__PURE__ */ createLiteReactElement(SeekButtonDefinition);
+var MediaSliderThumbnail = /* @__PURE__ */ createLiteReactElement(SliderThumbnailDefinition);
+var MediaSliderValue = /* @__PURE__ */ createLiteReactElement(SliderValueDefinition);
 var MediaSliderVideo = /* @__PURE__ */ createLiteReactElement(SliderVideoDefinition);
@@ -177,2 +183,4 @@ var MediaSlider = /* @__PURE__ */ createLiteReactElement(SliderDefinition);
     "aria-hidden": "true",
+    focusable: "false",
+    "data-media-icon": "true",
     ref,
@@ -212,2 +220,4 @@ dangerouslySetInnerHTML: { __html: __paths }
   eyePaths,
+  fastBackwardPaths,
+  fastForwardPaths,
   flagPaths,
@@ -366,2 +376,8 @@ fullscreenArrowExitPaths,
 });
+var FastBackwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastBackwardPaths });
+});
+var FastForwardIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
+  return createElement2(Icon, { ...props, ref, __paths: fastForwardPaths });
+});
 var FlagIcon = /* @__PURE__ */ forwardRef2((props, ref) => {
@@ -605,2 +621,4 @@ return createElement2(Icon, { ...props, ref, __paths: flagPaths });
   EyeIcon,
+  FastBackwardIcon,
+  FastForwardIcon,
   FlagIcon,
@@ -619,2 +637,3 @@ FullscreenArrowExitIcon,
   MediaFullscreenButton,
+  MediaLiveIndicator,
   MediaMuteButton,
@@ -625,4 +644,6 @@ MediaOutlet,
   MediaPoster,
+  MediaSeekButton,
   MediaSlider,
-  MediaSliderValueText,
+  MediaSliderThumbnail,
+  MediaSliderValue,
   MediaSliderVideo,
@@ -629,0 +650,0 @@ MediaTime,

dist/types/components.d.ts

@@ -41,2 +41,24 @@ /**
 /**
+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<import("vidstack").MediaLiveIndicatorElement>;
+/**
 A button for toggling the muted state of the player.
@@ -75,13 +97,42 @@
 /**
+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<import("vidstack").MediaSeekButtonElement>;
+/**
+Used to show preview thumbnails when the user is hovering or dragging the time slider. The
+point at which they're hovering or dragging (`pointerValue`) is the preview time position.
+
+* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-thumbnail}
+* @example
+*```tsx
+*<MediaTimeSlider>
+*  <MediaSliderThumbnail
+*    src="https://mediaFiles.vidstack.io/thumbnails.vtt"
+*    slot="preview"
+*  ></MediaSliderThumbnail>
+*</MediaTimeSlider>
+*```
+*/
+export declare const MediaSliderThumbnail: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderThumbnailElement>;
+/**
 Outputs the current slider value as text.
 
-* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-value-text}
+* @docs {@link https://www.vidstack.io/docs/react/player/components/sliders/slider-value}
 * @example
 *```tsx
 *<MediaTimeSlider>
-*  <MediaSliderValueText
+*  <MediaSliderValue
 *    type="pointer"
 *    format="time"
 *    slot="preview"
-*  ></MediaSliderValueText>
+*  ></MediaSliderValue>
 *</MediaTimeSlider>
@@ -91,26 +142,26 @@ *```
 *```tsx
-*<MediaSliderValueText
+*<MediaSliderValue
 *  type="current"
-*></MediaSliderValueText>
+*></MediaSliderValue>
 *```
 * @example
 *```tsx
-*<MediaSliderValueText
+*<MediaSliderValue
 *  format="time"
 *  showHours
 *  padHours
-*></MediaSliderValueText>
+*></MediaSliderValue>
 *```
 * @example
 *```tsx
-*<MediaSliderValueText
+*<MediaSliderValue
 *  format="percent"
 *  decimalPlaces={2}
-*></MediaSliderValueText>
+*></MediaSliderValue>
 *```
 */
-export declare const MediaSliderValueText: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderValueTextElement>;
+export declare const MediaSliderValue: import("maverick.js/react").ReactElement<import("vidstack").MediaSliderValueElement>;
 /**
 Used to load a low-resolution video to be displayed when the user is hovering or dragging
-the slider. The point at which they're hovering or dragging (`pointerValue`) is the preview
+the time slider. The point at which they're hovering or dragging (`pointerValue`) is the preview
 time position. The video will automatically be updated to match, so ensure it's of the same
@@ -151,7 +202,7 @@ length as the original.
 *<MediaTimeSlider>
-*  <MediaSliderValueText
+*  <MediaSliderValue
 *    type="pointer"
 *    format="time"
 *    slot="preview"
-*  ></MediaSliderValueText>
+*  ></MediaSliderValue>
 *</MediaTimeSlider>
@@ -201,6 +252,6 @@ *```
 *<MediaVolumeSlider>
-*  <MediaSliderValueText
+*  <MediaSliderValue
 *    type="pointer"
 *    format="percent"
-*  ></MediaSliderValueText>
+*  ></MediaSliderValue>
 *</MediaVolumeSlider>
@@ -207,0 +258,0 @@ *```

dist/types/icons.d.ts

@@ -56,2 +56,6 @@ import { type IconComponent } from './icon';
 export declare const EyeIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=fast-backward) */
+export declare const FastBackwardIcon: IconComponent;
+/** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=fast-forward) */
+export declare const FastForwardIcon: IconComponent;
 /** [Click here to preview icon](https://vidstack.io/media-icons?lib=react&icon=flag) */
@@ -58,0 +62,0 @@ export declare const FlagIcon: IconComponent;

package.json

 {
   "name": "@vidstack/react",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Build awesome media experiences on the web.",
@@ -27,5 +27,5 @@ "license": "MIT",
     "maverick.js": "^0.32.3",
-    "media-icons": "0.3.3",
+    "media-icons": "0.4.0",
     "react": "^18.0.0",
-    "vidstack": "0.3.3"
+    "vidstack": "0.4.0"
   },
@@ -32,0 +32,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

140366

increased by4.3%

Lines of code

3346

increased by4.2%

No dependency changes