@vidstack/react - npm Package Compare versions

Comparing version 1.9.8 to 1.10.0

dist/dev/player/vidstack-default-components.js

 "use client"
 
-import * as React from 'react';
-import { u as usePlayerQuery, R as Root, q as Trigger, w as Content, P as PlayButton, M as MuteButton, C as CaptionButton, a as PIPButton, F as FullscreenButton, S as SeekButton, x as Root$1, y as Track, z as TrackFill, A as Thumb, B as Preview, V as Value, D as Root$2, E as Chapters, H as Progress, I as Thumbnail, J as ChapterTitle, K as Value$1, d as ChapterTitle$1, L as LiveButton, T as Time, n as useChapterOptions, N as Items, O as Root$3, Q as Item, U as Root$4, W as Img, X as Root$5, Y as Button, Z as Portal, k as useAudioOptions, p as usePlaybackRateOptions, o as useVideoQualityOptions, l as useCaptionOptions, e as Captions, _ as Root$6, $ as Group, G as Gesture, a0 as Root$7, a1 as Track$1, a2 as TrackFill$1 } from '../chunks/vidstack-gTK07e3G.js';
-import { f as isString, a as useSignal, C as useReactContext, X as computed } from '../chunks/vidstack-HvwwRO6V.js';
-import { u as useMediaState, _ as isTrackCaptionKind, k as isRemotionSource, v as mediaContext } from '../chunks/vidstack-SP75z4Xt.js';
-import { a as RemotionSliderThumbnail, R as RemotionThumbnail } from '../chunks/vidstack-ggjrSlGx.js';
+export { j as DefaultAirPlayButton, b as DefaultAudioLayout, g as DefaultBufferingIndicator, n as DefaultCaptionButton, v as DefaultChapterTitle, B as DefaultChaptersMenu, y as DefaultControlsSpacer, p as DefaultFullscreenButton, k as DefaultGoogleCastButton, w as DefaultLiveButton, m as DefaultMuteButton, o as DefaultPIPButton, l as DefaultPlayButton, q as DefaultSeekButton, C as DefaultSettingsMenu, x as DefaultTimeGroup, z as DefaultTimeInfo, A as DefaultTimeInvert, s as DefaultTimeSlider, t as DefaultTitle, h as DefaultTooltip, f as DefaultVideoGestures, d as DefaultVideoLargeLayout, c as DefaultVideoLayout, e as DefaultVideoSmallLayout, r as DefaultVolumeSlider } from '../chunks/vidstack-CVtkJ3Hs.js';
+import 'react';
+import '../chunks/vidstack-Dc86Tk_O.js';
+import '../chunks/vidstack-TCWkz0UK.js';
+import '../chunks/vidstack-efK3NSwM.js';
+import '../chunks/vidstack-RReHBpAj.js';
 import 'react-dom';
-
-const DefaultLayoutContext = React.createContext({});
-function useDefaultLayoutLang(word) {
-  const { translations } = React.useContext(DefaultLayoutContext);
-  return translations?.[word] ?? word;
-}
-
-function createDefaultMediaLayout({
-  type,
-  smLayoutWhen,
-  SmallLayout,
-  LargeLayout,
-  UnknownStreamType
-}) {
-  const Layout = React.forwardRef(
-    ({
-      className,
-      icons,
-      thumbnails,
-      translations,
-      showMenuDelay,
-      showTooltipDelay = type === "video" ? 500 : 700,
-      smallLayoutWhen = smLayoutWhen,
-      noModal = false,
-      menuGroup = "bottom",
-      hideQualityBitrate = false,
-      children,
-      ...props
-    }, forwardRef) => {
-      const $canLoad = useMediaState("canLoad"), $viewType = useMediaState("viewType"), $streamType = useMediaState("streamType"), isMatch = $viewType === type, isForcedLayout = typeof smallLayoutWhen === "boolean", isSmallLayoutMatch = usePlayerQuery(isString(smallLayoutWhen) ? smallLayoutWhen : ""), isSmallLayout = isForcedLayout ? smallLayoutWhen : isSmallLayoutMatch;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ...props,
-          className: `vds-${type}-layout` + (className ? ` ${className}` : ""),
-          "data-match": isMatch ? "" : null,
-          "data-size": isSmallLayout ? "sm" : null,
-          ref: forwardRef
-        },
-        ($canLoad || isForcedLayout) && isMatch ? /* @__PURE__ */ React.createElement(
-          DefaultLayoutContext.Provider,
-          {
-            value: {
-              thumbnails,
-              translations,
-              isSmallLayout,
-              showMenuDelay,
-              showTooltipDelay,
-              hideQualityBitrate,
-              noModal,
-              menuGroup,
-              Icons: icons
-            }
-          },
-          $streamType === "unknown" ? UnknownStreamType ? /* @__PURE__ */ React.createElement(UnknownStreamType, null) : null : isSmallLayout ? /* @__PURE__ */ React.createElement(SmallLayout, null) : /* @__PURE__ */ React.createElement(LargeLayout, null),
-          children
-        ) : null
-      );
-    }
-  );
-  Layout.displayName = "DefaultMediaLayout";
-  return Layout;
-}
-function DefaultTooltip({ content, placement, children }) {
-  const { showTooltipDelay } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(Root, { showDelay: showTooltipDelay }, /* @__PURE__ */ React.createElement(Trigger, { asChild: true }, children), /* @__PURE__ */ React.createElement(Content, { className: "vds-tooltip-content", placement }, content));
-}
-DefaultTooltip.displayName = "DefaultTooltip";
-function DefaultPlayButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), playText = useDefaultLayoutLang("Play"), pauseText = useDefaultLayoutLang("Pause"), paused = useMediaState("paused"), ended = useMediaState("ended"), label = paused ? playText : pauseText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: paused ? playText : pauseText, placement: tooltip }, /* @__PURE__ */ React.createElement(PlayButton, { className: "vds-play-button vds-button", "aria-label": label }, ended ? /* @__PURE__ */ React.createElement(Icons.PlayButton.Replay, { className: "vds-icon" }) : paused ? /* @__PURE__ */ React.createElement(Icons.PlayButton.Play, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.PlayButton.Pause, { className: "vds-icon" })));
-}
-DefaultPlayButton.displayName = "DefaultPlayButton";
-function DefaultMuteButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), muteText = useDefaultLayoutLang("Mute"), unmuteText = useDefaultLayoutLang("Unmute"), muted = useMediaState("muted"), volume = useMediaState("volume"), label = muted ? unmuteText : muteText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React.createElement(MuteButton, { className: "vds-mute-button vds-button", "aria-label": label }, muted || volume == 0 ? /* @__PURE__ */ React.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : volume < 0.5 ? /* @__PURE__ */ React.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
-}
-DefaultMuteButton.displayName = "DefaultMuteButton";
-function DefaultCaptionButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), onText = useDefaultLayoutLang("Closed-Captions On"), offText = useDefaultLayoutLang("Closed-Captions Off"), track = useMediaState("textTrack"), isOn = track && isTrackCaptionKind(track), label = track ? offText : onText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: isOn ? onText : offText, placement: tooltip }, /* @__PURE__ */ React.createElement(CaptionButton, { className: "vds-caption-button vds-button", "aria-label": label }, isOn ? /* @__PURE__ */ React.createElement(Icons.CaptionButton.On, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.CaptionButton.Off, { className: "vds-icon" })));
-}
-DefaultCaptionButton.displayName = "DefaultCaptionButton";
-function DefaultPIPButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), enterText = useDefaultLayoutLang("Enter PiP"), exitText = useDefaultLayoutLang("Exit PiP"), pip = useMediaState("pictureInPicture"), label = pip ? exitText : enterText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: pip ? exitText : enterText, placement: tooltip }, /* @__PURE__ */ React.createElement(PIPButton, { className: "vds-pip-button vds-button", "aria-label": label }, pip ? /* @__PURE__ */ React.createElement(Icons.PIPButton.Exit, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.PIPButton.Enter, { className: "vds-icon" })));
-}
-DefaultPIPButton.displayName = "DefaultPIPButton";
-function DefaultFullscreenButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), enterText = useDefaultLayoutLang("Enter Fullscreen"), exitText = useDefaultLayoutLang("Exit Fullscreen"), fullscreen = useMediaState("fullscreen"), label = fullscreen ? exitText : enterText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: fullscreen ? exitText : enterText, placement: tooltip }, /* @__PURE__ */ React.createElement(FullscreenButton, { className: "vds-fullscreen-button vds-button", "aria-label": label }, fullscreen ? /* @__PURE__ */ React.createElement(Icons.FullscreenButton.Exit, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.FullscreenButton.Enter, { className: "vds-icon" })));
-}
-DefaultFullscreenButton.displayName = "DefaultFullscreenButton";
-function DefaultSeekButton({ seconds, tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), seekForwardText = useDefaultLayoutLang("Seek Forward"), seekBackwardText = useDefaultLayoutLang("Seek Backward"), label = seconds >= 0 ? seekForwardText : seekBackwardText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: label, placement: tooltip }, /* @__PURE__ */ React.createElement(SeekButton, { className: "vds-seek-button vds-button", seconds, "aria-label": label }, seconds >= 0 ? /* @__PURE__ */ React.createElement(Icons.SeekButton.Forward, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.SeekButton.Backward, { className: "vds-icon" })));
-}
-DefaultSeekButton.displayName = "DefaultSeekButton";
-function DefaultVolumeSlider() {
-  const label = useDefaultLayoutLang("Volume");
-  return /* @__PURE__ */ React.createElement(Root$1, { className: "vds-volume-slider vds-slider", "aria-label": label }, /* @__PURE__ */ React.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React.createElement(Preview, { className: "vds-slider-preview", noClamp: true }, /* @__PURE__ */ React.createElement(Value, { className: "vds-slider-value" })));
-}
-DefaultVolumeSlider.displayName = "DefaultVolumeSlider";
-function DefaultTimeSlider() {
-  const $src = useMediaState("currentSrc"), width = useMediaState("width"), { thumbnails } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Seek"), $RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
-  return /* @__PURE__ */ React.createElement(Root$2, { className: "vds-time-slider vds-slider", "aria-label": label }, /* @__PURE__ */ React.createElement(Chapters, { className: "vds-slider-chapters", disabled: width < 768 }, (cues, forwardRef) => cues.map((cue) => /* @__PURE__ */ React.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef }, /* @__PURE__ */ React.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React.createElement(
-    Thumbnail.Root,
-    {
-      src: thumbnails,
-      className: "vds-slider-thumbnail vds-thumbnail"
-    },
-    /* @__PURE__ */ React.createElement(Thumbnail.Img, null)
-  ) : $RemotionSliderThumbnail && isRemotionSource($src) ? /* @__PURE__ */ React.createElement($RemotionSliderThumbnail, { className: "vds-slider-thumbnail vds-thumbnail" }) : null, /* @__PURE__ */ React.createElement(ChapterTitle, { className: "vds-slider-chapter-title" }), /* @__PURE__ */ React.createElement(Value$1, { className: "vds-slider-value" })));
-}
-DefaultTimeSlider.displayName = "DefaultTimeSlider";
-function DefaultChapterTitle() {
-  return /* @__PURE__ */ React.createElement(ChapterTitle$1, { className: "vds-chapter-title" });
-}
-DefaultChapterTitle.displayName = "DefaultChapterTitle";
-function DefaultLiveButton() {
-  const live = useMediaState("live"), label = useDefaultLayoutLang("Skip To Live"), liveText = useDefaultLayoutLang("LIVE");
-  return live ? /* @__PURE__ */ React.createElement(LiveButton, { className: "vds-live-button", "aria-label": label }, /* @__PURE__ */ React.createElement("span", { className: "vds-live-button-text" }, liveText)) : null;
-}
-DefaultLiveButton.displayName = "DefaultLiveButton";
-function DefaultTimeGroup() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-time-group" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "current" }), /* @__PURE__ */ React.createElement("div", { className: "vds-time-divider" }, "/"), /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" }));
-}
-DefaultTimeGroup.displayName = "DefaultTimeGroup";
-function DefaultTimeInfo() {
-  const live = useMediaState("live");
-  return live ? /* @__PURE__ */ React.createElement(DefaultLiveButton, null) : /* @__PURE__ */ React.createElement(DefaultTimeGroup, null);
-}
-DefaultTimeInfo.displayName = "DefaultTimeInfo";
-function DefaultChaptersMenu({ tooltip, placement, portalClass }) {
-  const { showMenuDelay, noModal, isSmallLayout, Icons, menuGroup } = React.useContext(DefaultLayoutContext), chaptersText = useDefaultLayoutLang("Chapters"), options = useChapterOptions(), disabled = !options.length, { thumbnails } = React.useContext(DefaultLayoutContext), $src = useMediaState("currentSrc"), $viewType = useMediaState("viewType"), $offset = !isSmallLayout && menuGroup === "bottom" && $viewType === "video" ? 26 : 0, $RemotionThumbnail = useSignal(RemotionThumbnail);
-  const Content = /* @__PURE__ */ React.createElement(
-    Items,
-    {
-      className: "vds-chapters-menu-items vds-menu-items",
-      placement,
-      offset: $offset
-    },
-    /* @__PURE__ */ React.createElement(
-      Root$3,
-      {
-        className: "vds-chapters-radio-group vds-radio-group",
-        value: options.selectedValue,
-        "data-thumbnails": !!thumbnails
-      },
-      options.map(
-        ({ cue, label, value, startTimeText, durationText, select, setProgressVar }) => /* @__PURE__ */ React.createElement(
-          Item,
-          {
-            className: "vds-chapter-radio vds-radio",
-            value,
-            key: value,
-            onSelect: select,
-            ref: setProgressVar
-          },
-          thumbnails ? /* @__PURE__ */ React.createElement(Root$4, { src: thumbnails, className: "vds-thumbnail", time: cue.startTime }, /* @__PURE__ */ React.createElement(Img, null)) : $RemotionThumbnail && isRemotionSource($src) ? /* @__PURE__ */ React.createElement($RemotionThumbnail, { className: "vds-thumbnail", frame: cue.startTime * $src.fps }) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "vds-chapter-radio-content" }, /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-label" }, label), /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-start-time" }, startTimeText), /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-duration" }, durationText))
-        )
-      )
-    )
-  );
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-chapters-menu vds-menu", showDelay: showMenuDelay }, /* @__PURE__ */ React.createElement(DefaultTooltip, { content: chaptersText, placement: tooltip }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: "vds-menu-button vds-button",
-      disabled,
-      "aria-label": chaptersText
-    },
-    /* @__PURE__ */ React.createElement(Icons.Menu.Chapters, { className: "vds-icon" })
-  )), noModal || !isSmallLayout ? Content : /* @__PURE__ */ React.createElement(
-    Portal,
-    {
-      className: portalClass,
-      disabled: "fullscreen",
-      "data-size": isSmallLayout ? "sm" : null
-    },
-    Content
-  ));
-}
-DefaultChaptersMenu.displayName = "DefaultChaptersMenu";
-function DefaultSettingsMenu({ tooltip, placement, portalClass }) {
-  const { $state } = useReactContext(mediaContext), { showMenuDelay, Icons, isSmallLayout, menuGroup, noModal } = React.useContext(DefaultLayoutContext), settingsText = useDefaultLayoutLang("Settings"), $viewType = useMediaState("viewType"), $offset = !isSmallLayout && menuGroup === "bottom" && $viewType === "video" ? 26 : 0, $$hasMenuItems = React.useMemo(
-    () => computed(() => {
-      const { canSetPlaybackRate, canSetQuality, qualities, audioTracks, textTracks } = $state;
-      return canSetPlaybackRate() || canSetQuality() && qualities().length || audioTracks().length || textTracks().filter(isTrackCaptionKind).length;
-    }),
-    []
-  ), $hasMenuItems = useSignal($$hasMenuItems);
-  if (!$hasMenuItems)
-    return null;
-  const Content = /* @__PURE__ */ React.createElement(
-    Items,
-    {
-      className: "vds-settings-menu-items vds-menu-items",
-      placement,
-      offset: $offset
-    },
-    /* @__PURE__ */ React.createElement(DefaultAudioSubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultSpeedSubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultQualitySubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultCaptionSubmenu, null)
-  );
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-settings-menu vds-menu", showDelay: showMenuDelay }, /* @__PURE__ */ React.createElement(DefaultTooltip, { content: settingsText, placement: tooltip }, /* @__PURE__ */ React.createElement(Button, { className: "vds-menu-button vds-button", "aria-label": settingsText }, /* @__PURE__ */ React.createElement(Icons.Menu.Settings, { className: "vds-icon vds-rotate-icon" }))), noModal || !isSmallLayout ? Content : /* @__PURE__ */ React.createElement(
-    Portal,
-    {
-      className: portalClass,
-      disabled: "fullscreen",
-      "data-size": isSmallLayout ? "sm" : null
-    },
-    Content
-  ));
-}
-DefaultSettingsMenu.displayName = "DefaultSettingsMenu";
-function DefaultSubmenuButton({ label, hint, Icon, disabled }) {
-  const { Icons } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(Button, { className: "vds-menu-button", disabled }, /* @__PURE__ */ React.createElement(Icons.Menu.ArrowLeft, { className: "vds-menu-button-close-icon vds-icon" }), /* @__PURE__ */ React.createElement(Icon, { className: "vds-menu-button-icon" }), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-button-label" }, label), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-button-hint" }, hint), /* @__PURE__ */ React.createElement(Icons.Menu.ArrowRight, { className: "vds-menu-button-open-icon vds-icon" }));
-}
-DefaultSubmenuButton.displayName = "DefaultSubmenuButton";
-function DefaultAudioSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Audio"), defaultText = useDefaultLayoutLang("Default"), track = useMediaState("audioTrack"), options = useAudioOptions();
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-audio-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint: track?.label ?? defaultText,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Audio
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-audio-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-audio-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultAudioSubmenu.displayName = "DefaultAudioSubmenu";
-function DefaultSpeedSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Speed"), normalText = useDefaultLayoutLang("Normal"), options = usePlaybackRateOptions({
-    normalLabel: normalText
-  }), hint = options.selectedValue === "1" ? normalText : options.selectedValue + "x";
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-speed-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Speed
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-speed-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-speed-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultSpeedSubmenu.displayName = "DefaultSpeedSubmenu";
-function DefaultQualitySubmenu() {
-  const { hideQualityBitrate, Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Quality"), autoText = useDefaultLayoutLang("Auto"), options = useVideoQualityOptions({ auto: autoText, sort: "descending" }), currentQuality = options.selectedQuality?.height, hint = options.selectedValue !== "auto" && currentQuality ? `${currentQuality}p` : `${autoText}${currentQuality ? ` (${currentQuality}p)` : ""}`;
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-quality-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Quality
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-quality-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, bitrateText, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-quality-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2),
-      !hideQualityBitrate && bitrateText ? /* @__PURE__ */ React.createElement("span", { className: "vds-radio-hint" }, bitrateText) : null
-    ))
-  )));
-}
-DefaultQualitySubmenu.displayName = "DefaultQualitySubmenu";
-function DefaultCaptionSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Captions"), offText = useDefaultLayoutLang("Off"), options = useCaptionOptions({ off: offText }), hint = options.selectedTrack?.label ?? offText;
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-captions-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Captions
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-captions-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-caption-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultCaptionSubmenu.displayName = "DefaultCaptionSubmenu";
-
-function DefaultAudioMenus() {
-  const { isSmallLayout, noModal } = React.useContext(DefaultLayoutContext), placement = noModal ? "top end" : !isSmallLayout ? "top end" : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultChaptersMenu, { tooltip: "top", placement, portalClass: "vds-audio-layout" }), /* @__PURE__ */ React.createElement(DefaultSettingsMenu, { tooltip: "top end", placement, portalClass: "vds-audio-layout" }));
-}
-DefaultAudioMenus.displayName = "DefaultAudioMenus";
-
-function DefaultAudioLayoutLarge() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: -10, tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: 10, tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultVolumeSlider, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultAudioMenus, null))));
-}
-DefaultAudioLayoutLarge.displayName = "DefaultAudioLayoutLarge";
-
-function DefaultAudioLayoutSmall() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultLivePlayButton, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultLiveButton, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultAudioMenus, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(DefaultTimeControlsGroup, null), /* @__PURE__ */ React.createElement(DefaultBottomControlsGroup, null)));
-}
-DefaultAudioLayoutSmall.displayName = "DefaultAudioLayoutSmall";
-function DefaultLivePlayButton() {
-  const live = useMediaState("live"), canSeek = useMediaState("canSeek");
-  return live && !canSeek ? /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top start" }) : null;
-}
-DefaultLivePlayButton.displayName = "DefaultLivePlayButton";
-function DefaultTimeControlsGroup() {
-  const live = useMediaState("live");
-  return !live ? /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "current" }), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" })) : null;
-}
-DefaultTimeControlsGroup.displayName = "DefaultTimeControlsGroup";
-function DefaultBottomControlsGroup() {
-  const canSeek = useMediaState("canSeek");
-  return canSeek ? /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: -10, tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: 10, tooltip: "top center" }), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" })) : null;
-}
-DefaultBottomControlsGroup.displayName = "DefaultBottomControlsGroup";
-
-const MediaLayout$1 = createDefaultMediaLayout({
-  type: "audio",
-  smLayoutWhen: "(width < 576)",
-  SmallLayout: DefaultAudioLayoutSmall,
-  LargeLayout: DefaultAudioLayoutLarge
-});
-function DefaultAudioLayout(props) {
-  return /* @__PURE__ */ React.createElement(MediaLayout$1, { ...props });
-}
-DefaultAudioLayout.displayName = "DefaultAudioLayout";
-
-const MediaLayout = createDefaultMediaLayout({
-  type: "video",
-  smLayoutWhen: "(width < 576) or (height < 380)",
-  SmallLayout: DefaultVideoLayoutSmall,
-  LargeLayout: DefaultVideoLayoutLarge,
-  UnknownStreamType: DefaultBufferingIndicator
-});
-function DefaultVideoLayout(props) {
-  return /* @__PURE__ */ React.createElement(MediaLayout, { ...props });
-}
-DefaultVideoLayout.displayName = "DefaultVideoLayout";
-function DefaultVideoLayoutLarge() {
-  const { menuGroup } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null), /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), menuGroup === "top" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, null)), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultVolumeSlider, null), /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top" }), menuGroup === "bottom" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, null), /* @__PURE__ */ React.createElement(DefaultPIPButton, { tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" }))));
-}
-DefaultVideoLayoutLarge.displayName = "DefaultVideoLayoutLarge";
-function DefaultVideoLayoutSmall() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null), /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "bottom" }), /* @__PURE__ */ React.createElement(DefaultVideoMenus, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "bottom end" })), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top" })), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" })), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null))), /* @__PURE__ */ React.createElement(DefaultVideoStartDuration, null));
-}
-DefaultVideoLayoutSmall.displayName = "DefaultVideoLayoutSmall";
-function DefaultVideoStartDuration() {
-  const $duration = useMediaState("duration");
-  if ($duration === 0)
-    return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-start-duration" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" }));
-}
-DefaultVideoStartDuration.displayName = "DefaultVideoStartDuration";
-function DefaultVideoGestures() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-gestures" }, /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "pointerup", action: "toggle:paused" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "pointerup", action: "toggle:controls" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "toggle:fullscreen" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "seek:-10" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "seek:10" }));
-}
-DefaultVideoGestures.displayName = "DefaultVideoGestures";
-function DefaultBufferingIndicator() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-buffering-indicator" }, /* @__PURE__ */ React.createElement(Root$7, { className: "vds-buffering-spinner" }, /* @__PURE__ */ React.createElement(Track$1, { className: "vds-buffering-track" }), /* @__PURE__ */ React.createElement(TrackFill$1, { className: "vds-buffering-track-fill" })));
-}
-DefaultBufferingIndicator.displayName = "DefaultBufferingIndicator";
-function DefaultVideoMenus() {
-  const { isSmallLayout, noModal, menuGroup } = React.useContext(DefaultLayoutContext), side = menuGroup === "top" || isSmallLayout ? "bottom" : "top", tooltip = `${side} end`, placement = noModal ? `${side} end` : !isSmallLayout ? `${side} end` : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultChaptersMenu, { tooltip, placement, portalClass: "vds-video-layout" }), /* @__PURE__ */ React.createElement(DefaultSettingsMenu, { tooltip, placement, portalClass: "vds-video-layout" }));
-}
-DefaultVideoMenus.displayName = "DefaultVideoMenus";
-
-export { DefaultLayoutContext as D, DefaultAudioLayout, DefaultBufferingIndicator, DefaultCaptionButton, DefaultChapterTitle, DefaultChaptersMenu, DefaultFullscreenButton, DefaultLiveButton, DefaultMuteButton, DefaultPIPButton, DefaultPlayButton, DefaultSeekButton, DefaultSettingsMenu, DefaultSubmenuButton, DefaultTimeGroup, DefaultTimeInfo, DefaultTimeSlider, DefaultTooltip, DefaultVideoGestures, DefaultVideoLayout, DefaultVideoLayoutLarge, DefaultVideoLayoutSmall, DefaultVolumeSlider, createDefaultMediaLayout, useDefaultLayoutLang as u };
+import '../chunks/vidstack-PifQo4e7.js';
+import '../chunks/vidstack-xvPalyVO.js';

dist/dev/player/vidstack-default-icons.js

 "use client"
 
 import * as React from 'react';
-import { I as Icon } from '../chunks/vidstack-WDwMHJsO.js';
+import Icon$22 from '../chunks/vidstack-Fm3lXEFm.js';
+import { I as Icon } from '../chunks/vidstack-g-zwyrW6.js';
 
+var Icon$4 = `<path d="M5.33334 6.00001C5.33334 5.63182 5.63181 5.33334 6 5.33334H26C26.3682 5.33334 26.6667 5.63182 26.6667 6.00001V20.6667C26.6667 21.0349 26.3682 21.3333 26 21.3333H23.7072C23.4956 21.3333 23.2966 21.233 23.171 21.0628L22.1859 19.7295C21.8607 19.2894 22.1749 18.6667 22.7221 18.6667H23.3333C23.7015 18.6667 24 18.3682 24 18V8.66668C24 8.29849 23.7015 8.00001 23.3333 8.00001H8.66667C8.29848 8.00001 8 8.29849 8 8.66668V18C8 18.3682 8.29848 18.6667 8.66667 18.6667H9.29357C9.84072 18.6667 10.1549 19.2894 9.82976 19.7295L8.84467 21.0628C8.71898 21.233 8.52 21.3333 8.30848 21.3333H6C5.63181 21.3333 5.33334 21.0349 5.33334 20.6667V6.00001Z" fill="currentColor"/> <path d="M8.78528 25.6038C8.46013 26.0439 8.77431 26.6667 9.32147 26.6667L22.6785 26.6667C23.2256 26.6667 23.5398 26.0439 23.2146 25.6038L16.5358 16.5653C16.2693 16.2046 15.73 16.2047 15.4635 16.5653L8.78528 25.6038Z" fill="currentColor"/>`;
+
 var Icon$10 = `<path d="M13.0908 14.3334C12.972 14.3334 12.9125 14.1898 12.9965 14.1058L17.7021 9.40022C17.9625 9.13987 17.9625 8.71776 17.7021 8.45741L16.2879 7.04319C16.0275 6.78284 15.6054 6.78284 15.3451 7.04319L6.8598 15.5285C6.59945 15.7888 6.59945 16.2109 6.8598 16.4713L8.27401 17.8855L8.27536 17.8868L15.3453 24.9568C15.6057 25.2172 16.0278 25.2172 16.2881 24.9568L17.7024 23.5426C17.9627 23.2822 17.9627 22.8601 17.7024 22.5998L12.9969 17.8944C12.9129 17.8104 12.9724 17.6668 13.0912 17.6668L26 17.6668C26.3682 17.6668 26.6667 17.3683 26.6667 17.0001V15.0001C26.6667 14.6319 26.3682 14.3334 26 14.3334L13.0908 14.3334Z" fill="currentColor"/>`;
@@ -56,2 +59,8 @@
 const defaultLayoutIcons = {
+  AirPlayButton: {
+    Default: createIcon(Icon$4)
+  },
+  GoogleCastButton: {
+    Default: createIcon(Icon$22)
+  },
   PlayButton: {
@@ -91,3 +100,19 @@ Play: createIcon(Icon$59),
     Settings: createIcon(Icon$85),
-    Speed: createIcon(Icon$55)
+    Speed: createIcon(Icon$55),
+    Font: createIcon(
+      `<path d="M22.6667 10.6667H26.6667V26.6667H28V28H22.6667V26.6667H24V22.6667H18.6667L16.6667 26.6667H18.6667V28H13.3333V26.6667H14.6667L22.6667 10.6667ZM24 12L19.3333 21.3333H24V12ZM6.66667 4H13.3333C14.8133 4 16 5.18667 16 6.66667V21.3333H12V14.6667H8V21.3333H4V6.66667C4 5.18667 5.18667 4 6.66667 4ZM8 6.66667V12H12V6.66667H8Z" fill="currentColor" />`
+    )
+  },
+  KeyboardAction: {
+    Play: createIcon(Icon$59),
+    Pause: createIcon(Icon$56),
+    Mute: createIcon(Icon$52),
+    VolumeUp: createIcon(Icon$101),
+    VolumeDown: createIcon(Icon$102),
+    EnterFullscreen: createIcon(Icon$38),
+    ExitFullscreen: createIcon(Icon$37),
+    EnterPiP: createIcon(Icon$58),
+    ExitPiP: createIcon(Icon$57),
+    CaptionsOn: createIcon(Icon$24),
+    CaptionsOff: createIcon(Icon$25)
   }
@@ -94,0 +119,0 @@ };

dist/dev/player/vidstack-default-layout.js

 "use client"
 
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultCaptionButton, DefaultChapterTitle, DefaultChaptersMenu, DefaultFullscreenButton, D as DefaultLayoutContext, DefaultLiveButton, DefaultMuteButton, DefaultPIPButton, DefaultPlayButton, DefaultSeekButton, DefaultSettingsMenu, DefaultSubmenuButton, DefaultTimeGroup, DefaultTimeInfo, DefaultTimeSlider, DefaultTooltip, DefaultVideoGestures, DefaultVideoLayout, DefaultVideoLayoutLarge, DefaultVideoLayoutSmall, DefaultVolumeSlider, createDefaultMediaLayout, u as useDefaultLayoutLang } from './vidstack-default-components.js';
+export { j as DefaultAirPlayButton, b as DefaultAudioLayout, g as DefaultBufferingIndicator, n as DefaultCaptionButton, v as DefaultChapterTitle, B as DefaultChaptersMenu, y as DefaultControlsSpacer, p as DefaultFullscreenButton, k as DefaultGoogleCastButton, D as DefaultLayoutContext, w as DefaultLiveButton, m as DefaultMuteButton, o as DefaultPIPButton, l as DefaultPlayButton, q as DefaultSeekButton, C as DefaultSettingsMenu, x as DefaultTimeGroup, z as DefaultTimeInfo, A as DefaultTimeInvert, s as DefaultTimeSlider, t as DefaultTitle, h as DefaultTooltip, f as DefaultVideoGestures, d as DefaultVideoLargeLayout, c as DefaultVideoLayout, e as DefaultVideoSmallLayout, r as DefaultVolumeSlider, i as i18n, u as useDefaultLayoutContext, a as useDefaultLayoutWord } from '../chunks/vidstack-CVtkJ3Hs.js';
 import 'react';
-import '../chunks/vidstack-WDwMHJsO.js';
-import '../chunks/vidstack-gTK07e3G.js';
-import '../chunks/vidstack-HvwwRO6V.js';
-import '../chunks/vidstack-SP75z4Xt.js';
+import '../chunks/vidstack-Fm3lXEFm.js';
+import '../chunks/vidstack-g-zwyrW6.js';
+import '../chunks/vidstack-Dc86Tk_O.js';
+import '../chunks/vidstack-TCWkz0UK.js';
+import '../chunks/vidstack-efK3NSwM.js';
+import '../chunks/vidstack-RReHBpAj.js';
 import 'react-dom';
-import '../chunks/vidstack-ggjrSlGx.js';
+import '../chunks/vidstack-PifQo4e7.js';
+import '../chunks/vidstack-xvPalyVO.js';

dist/dev/player/vidstack-remotion.js

 "use client"
 
 import * as React from 'react';
-import { v as createDisposalBin, z as animationFrameThrottle, A as noop } from '../chunks/vidstack-HvwwRO6V.js';
+import { f as createDisposalBin, d as animationFrameThrottle, I as noop } from '../chunks/vidstack-Dc86Tk_O.js';
 import { Internals, random } from 'remotion';
-import { I as IS_SERVER, u as useMediaState, k as isRemotionSource, P as Primitive } from '../chunks/vidstack-SP75z4Xt.js';
-export { q as isRemotionProvider } from '../chunks/vidstack-SP75z4Xt.js';
-import { u as useSliderState } from '../chunks/vidstack-MulRyKr-.js';
-import { R as RemotionThumbnail$1, a as RemotionSliderThumbnail$1 } from '../chunks/vidstack-ggjrSlGx.js';
+import { I as IS_SERVER, u as useMediaState, q as isRemotionSource, P as Primitive } from '../chunks/vidstack-efK3NSwM.js';
+export { z as isRemotionProvider } from '../chunks/vidstack-efK3NSwM.js';
+import { u as useSliderState } from '../chunks/vidstack-fmOuaZbD.js';
+import { b as RemotionThumbnail$1, a as RemotionSliderThumbnail$1, R as RemotionPoster$1 } from '../chunks/vidstack-xvPalyVO.js';
 
@@ -308,2 +308,7 @@ class RemotionLayoutEngine {
 
+var poster = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: RemotionPoster
+});
+
 const RemotionSliderThumbnail = React.forwardRef(
@@ -334,4 +339,6 @@ (props, ref) => {
   constructor() {
+    this.name = "remotion";
     RemotionThumbnail$1.set(React.lazy(() => Promise.resolve().then(function () { return thumbnail; })));
     RemotionSliderThumbnail$1.set(React.lazy(() => Promise.resolve().then(function () { return sliderThumbnail; })));
+    RemotionPoster$1.set(React.lazy(() => Promise.resolve().then(function () { return poster; })));
   }
@@ -344,4 +351,4 @@ canPlay(src) {
   }
-  async load() {
-    return new (await import('../chunks/vidstack-UHslH3wr.js')).RemotionProvider(this.target);
+  async load(ctx) {
+    return new (await import('../chunks/vidstack-zGfPK2nM.js')).RemotionProvider(this.target, ctx);
   }
@@ -348,0 +355,0 @@ }

dist/dev/vidstack.js

 "use client"
 
-import { d as TextTrackSymbol, P as Primitive, M as MediaPlayerInstance, q as isRemotionProvider, r as MediaProviderInstance, t as mediaState, v as mediaContext, b as TextTrack, w as ToggleButtonInstance, x as PosterInstance, u as useMediaState, y as MediaRemoteControl, z as findActiveCue, A as ThumbnailsLoader, I as IS_SERVER, B as updateSliderPreviewPlacement } from './chunks/vidstack-SP75z4Xt.js';
-export { V as ARIAKeyShortcuts, a6 as AudioProviderLoader, aH as AudioRadioGroup, a1 as AudioTrackList, aN as CaptionButtonInstance, b9 as CaptionsInstance, aI as CaptionsRadioGroup, aG as ChaptersRadioGroup, ar as ControlsGroup, aM as ControlsGroupInstance, aL as ControlsInstance, am as DefaultAudioLayout, al as DefaultLayout, an as DefaultVideoLayout, aO as FullscreenButtonInstance, K as FullscreenController, ba as GestureInstance, a9 as HLSProviderLoader, J as List, aP as LiveButtonInstance, C as Logger, U as MEDIA_KEY_SHORTCUTS, R as MediaControls, aA as MenuButton, b3 as MenuButtonInstance, b2 as MenuInstance, aB as MenuItem, b5 as MenuItemInstance, aE as MenuItems, b4 as MenuItemsInstance, aC as MenuPortal, b6 as MenuPortalInstance, aQ as MuteButtonInstance, aR as PIPButtonInstance, aS as PlayButtonInstance, a4 as PlayerQueryList, aK as QualityRadioGroup, aF as Radio, b7 as RadioGroupInstance, b8 as RadioInstance, O as ScreenOrientationController, aT as SeekButtonInstance, az as SliderChapters, b1 as SliderChaptersInstance, au as SliderController, S as SliderInstance, ay as SliderPreview, b0 as SliderPreviewInstance, av as SliderThumbnail, aZ as SliderThumbnailInstance, ax as SliderValue, a_ as SliderValueInstance, aw as SliderVideo, a$ as SliderVideoInstance, aJ as SpeedRadioGroup, Z as TextRenderers, a0 as TextTrackList, bb as ThumbnailInstance, bc as TimeInstance, T as TimeRange, aX as TimeSliderInstance, at as TooltipContent, aW as TooltipContentInstance, aU as TooltipInstance, as as TooltipTrigger, aV as TooltipTriggerInstance, a7 as VideoProviderLoader, a5 as VideoQualityList, aa as VimeoProviderLoader, aY as VolumeSliderInstance, a8 as YouTubeProviderLoader, F as canChangeVolume, N as canFullscreen, G as canOrientScreen, o as canPlayHLSNatively, H as canRotateScreen, m as canUsePictureInPicture, n as canUseVideoPresentation, ao as defaultLayoutContext, E as formatSpokenTime, D as formatTime, ap as getDefaultLayoutLang, Y as getTimeRangesEnd, X as getTimeRangesStart, ab as isAudioProvider, a2 as isCueActive, ad as isHLSProvider, ag as isHTMLAudioElement, aj as isHTMLIFrameElement, ai as isHTMLMediaElement, ah as isHTMLVideoElement, _ as isTrackCaptionKind, ac as isVideoProvider, af as isVimeoProvider, ae as isYouTubeProvider, aD as menuPortalContext, a3 as observeActiveTextTrack, $ as parseJSONCaptionsFile, ak as sliderContext, s as sliderState, W as softResetMediaState, aq as useDefaultLayoutContext, bd as useMediaStore } from './chunks/vidstack-SP75z4Xt.js';
+import { i as TextTrackSymbol, P as Primitive, a as MediaPlayerInstance, z as isRemotionProvider, C as MediaProviderInstance, D as mediaState, b as TextTrack, E as ToggleButtonInstance, F as PosterInstance, u as useMediaState, G as ThumbnailsLoader, H as updateSliderPreviewPlacement } from './chunks/vidstack-efK3NSwM.js';
+export { a0 as ARIAKeyShortcuts, aN as AUDIO_EXTENSIONS, aO as AUDIO_TYPES, a$ as AirPlayButtonInstance, ad as AudioProviderLoader, aJ as AudioRadioGroup, a7 as AudioTrackList, aV as CaptionButtonInstance, bj as CaptionsInstance, aK as CaptionsRadioGroup, aI as ChaptersRadioGroup, at as ControlsGroup, aU as ControlsGroupInstance, aT as ControlsInstance, aW as FullscreenButtonInstance, W as FullscreenController, bk as GestureInstance, b0 as GoogleCastButtonInstance, ae as HLSProviderLoader, aR as HLS_VIDEO_EXTENSIONS, aS as HLS_VIDEO_TYPES, V as List, aX as LiveButtonInstance, _ as LocalMediaStorage, J as Logger, $ as MEDIA_KEY_SHORTCUTS, Z as MediaControls, M as MediaRemoteControl, aC as MenuButton, bd as MenuButtonInstance, bc as MenuInstance, aD as MenuItem, bf as MenuItemInstance, aG as MenuItems, be as MenuItemsInstance, aE as MenuPortal, bg as MenuPortalInstance, aY as MuteButtonInstance, aZ as PIPButtonInstance, a_ as PlayButtonInstance, aM as QualityRadioGroup, aH as Radio, bh as RadioGroupInstance, bi as RadioInstance, Y as ScreenOrientationController, b1 as SeekButtonInstance, aB as SliderChapters, bb as SliderChaptersInstance, aw as SliderController, S as SliderInstance, aA as SliderPreview, ba as SliderPreviewInstance, ax as SliderThumbnail, b7 as SliderThumbnailInstance, az as SliderValue, b8 as SliderValueInstance, ay as SliderVideo, b9 as SliderVideoInstance, aL as SpeedRadioGroup, a4 as TextRenderers, a6 as TextTrackList, bl as ThumbnailInstance, bm as TimeInstance, T as TimeRange, b5 as TimeSliderInstance, av as TooltipContent, b4 as TooltipContentInstance, b2 as TooltipInstance, au as TooltipTrigger, b3 as TooltipTriggerInstance, aP as VIDEO_EXTENSIONS, aQ as VIDEO_TYPES, af as VideoProviderLoader, ac as VideoQualityList, ag as VimeoProviderLoader, b6 as VolumeSliderInstance, ah as YouTubeProviderLoader, O as canChangeVolume, X as canFullscreen, g as canGoogleCastSrc, R as canOrientScreen, y as canPlayHLSNatively, U as canRotateScreen, w as canUsePictureInPicture, x as canUseVideoPresentation, a8 as findActiveCue, N as formatSpokenTime, K as formatTime, a3 as getTimeRangesEnd, a2 as getTimeRangesStart, ai as isAudioProvider, t as isAudioSrc, a9 as isCueActive, an as isGoogleCastProvider, ak as isHLSProvider, m as isHLSSrc, ao as isHTMLAudioElement, ar as isHTMLIFrameElement, aq as isHTMLMediaElement, ap as isHTMLVideoElement, o as isMediaStream, A as isTrackCaptionKind, aj as isVideoProvider, v as isVideoSrc, am as isVimeoProvider, al as isYouTubeProvider, B as mediaContext, aF as menuPortalContext, a5 as parseJSONCaptionsFile, as as sliderContext, s as sliderState, a1 as softResetMediaState, bn as useMediaStore, r as usePlyrLayoutClasses, aa as watchActiveTextTrack, ab as watchCueTextChange } from './chunks/vidstack-efK3NSwM.js';
 import * as React from 'react';
-import { f as isString, l as listenEvent, D as DOMEvent, B as createReactComponent, u as useStateContext, C as useReactContext, a as useSignal, E as composeRefs, b as useSignalRecord, e as effect, F as useReactScope, s as signal, y as scoped } from './chunks/vidstack-HvwwRO6V.js';
-export { J as appendTriggerEvent, I as findTriggerEvent, G as hasTriggerEvent, L as isKeyboardClick, M as isKeyboardEvent, K as isPointerEvent, H as walkTriggerEventChain } from './chunks/vidstack-HvwwRO6V.js';
-export { I as Icon } from './chunks/vidstack-WDwMHJsO.js';
-export { C as CaptionButton, e as Captions, d as ChapterTitle, c as Controls, F as FullscreenButton, G as Gesture, L as LiveButton, m as Menu, M as MuteButton, a as PIPButton, P as PlayButton, r as RadioGroup, S as SeekButton, s as Slider, g as Spinner, f as Thumbnail, T as Time, b as TimeSlider, t as Tooltip, v as VolumeSlider, i as useActiveTextCues, j as useActiveTextTrack, k as useAudioOptions, l as useCaptionOptions, n as useChapterOptions, p as usePlaybackRateOptions, u as usePlayerQuery, h as useTextCues, o as useVideoQualityOptions } from './chunks/vidstack-gTK07e3G.js';
-export { u as useSliderState, a as useSliderStore } from './chunks/vidstack-MulRyKr-.js';
+import { j as isString, l as listenEvent, D as DOMEvent, M as createReactComponent, u as useStateContext, a as useSignal, E as composeRefs, b as useSignalRecord, g as effect, K as useReactScope, s as signal } from './chunks/vidstack-Dc86Tk_O.js';
+export { Q as appendTriggerEvent, P as findTriggerEvent, N as hasTriggerEvent, G as isKeyboardClick, F as isKeyboardEvent, R as isPointerEvent, O as walkTriggerEventChain } from './chunks/vidstack-Dc86Tk_O.js';
+import { u as useMediaContext } from './chunks/vidstack-RReHBpAj.js';
+export { A as AirPlayButton, C as CaptionButton, F as FullscreenButton, G as Gesture, L as LiveButton, E as Menu, M as MuteButton, b as PIPButton, P as PlayButton, D as RadioGroup, S as SeekButton, x as Slider, H as Thumbnail, e as Time, z as TimeSlider, y as VolumeSlider, h as useAudioOptions, l as useCaptionOptions, a as useMediaPlayer, k as usePlaybackRateOptions, m as useVideoQualityOptions } from './chunks/vidstack-RReHBpAj.js';
+import { I as Icon } from './chunks/vidstack-g-zwyrW6.js';
+import { l as createSignal, m as useScoped } from './chunks/vidstack-TCWkz0UK.js';
+export { d as Captions, b as ChapterTitle, n as Controls, G as GoogleCastButton, s as Spinner, a as Title, t as Tooltip, p as useActiveTextCues, q as useActiveTextTrack, u as useChapterOptions, g as useChapterTitle, o as useTextCues } from './chunks/vidstack-TCWkz0UK.js';
+export { u as useMediaRemote } from './chunks/vidstack-9XplDcvT.js';
+export { u as useSliderState, a as useSliderStore } from './chunks/vidstack-fmOuaZbD.js';
 import 'react-dom';
@@ -73,5 +77,5 @@
   "onAudioTracksChange",
-  "onAutoplay",
-  "onAutoplayChange",
-  "onAutoplayFail",
+  "onAutoPlay",
+  "onAutoPlayChange",
+  "onAutoPlayFail",
   "onCanLoad",
@@ -103,3 +107,3 @@ "onCanPlay",
   "onPlaying",
-  "onPlaysinlineChange",
+  "onPlaysInlineChange",
   "onPosterChange",
@@ -134,3 +138,4 @@ "onProgress",
   events: playerCallbacks,
-  eventsRegex: /^on(Hls|Media)/
+  eventsRegex: /^onHls/,
+  domEventsRegex: /^onMedia/
 });
@@ -164,10 +169,29 @@ const MediaPlayer = React.forwardRef(
 MediaProvider.displayName = "MediaProvider";
-const YOUTUBE_TYPE = { src: "", type: "video/youtube" }, VIMEO_TYPE = { src: "", type: "video/vimeo" }, REMOTION_TYPE = { src: "", type: "video/remotion" };
 function MediaOutlet({ provider, ...props }) {
-  const { controls, crossorigin, poster } = useStateContext(mediaState), { loader } = provider.$state, {
+  const { controls, crossOrigin, poster, remotePlaybackInfo } = useStateContext(mediaState), { loader } = provider.$state, {
     $iosControls: $$iosControls,
     $provider: $$provider,
     $providerSetup: $$providerSetup
-  } = useReactContext(mediaContext), $controls = useSignal(controls), $iosControls = useSignal($$iosControls), $nativeControls = $controls || $iosControls, $crossorigin = useSignal(crossorigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $mediaType = $loader?.mediaType(), isYouTubeEmbed = $loader?.canPlay(YOUTUBE_TYPE), isVimeoEmbed = $loader?.canPlay(VIMEO_TYPE), isEmbed = isYouTubeEmbed || isVimeoEmbed;
-  if ($loader?.canPlay(REMOTION_TYPE)) {
+  } = useMediaContext(), $controls = useSignal(controls), $iosControls = useSignal($$iosControls), $nativeControls = $controls || $iosControls, $crossOrigin = useSignal(crossOrigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $remoteInfo = useSignal(remotePlaybackInfo), $mediaType = $loader?.mediaType(), isYouTubeEmbed = $loader?.name === "youtube", isVimeoEmbed = $loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isRemotion = $loader?.name === "remotion", isGoogleCast = $loader?.name === "google-cast", [googleCastIconPaths, setGoogleCastIconPaths] = React.useState("");
+  React.useEffect(() => {
+    if (!isGoogleCast || googleCastIconPaths)
+      return;
+    import('./chunks/vidstack-Fm3lXEFm.js').then((mod) => {
+      setGoogleCastIconPaths(mod.default);
+    });
+  }, [isGoogleCast]);
+  if (isGoogleCast) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "vds-google-cast",
+        ref: (el) => {
+          provider.load(el);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { paths: googleCastIconPaths }),
+      $remoteInfo?.deviceName ? /* @__PURE__ */ React.createElement("span", { className: "vds-google-cast-info" }, "Google Cast on", " ", /* @__PURE__ */ React.createElement("span", { className: "vds-google-cast-device-name" }, $remoteInfo.deviceName)) : null
+    );
+  }
+  if (isRemotion) {
     return /* @__PURE__ */ React.createElement("div", { "data-remotion-canvas": true }, /* @__PURE__ */ React.createElement(
@@ -190,2 +214,3 @@ "div",
       suppressHydrationWarning: true,
+      "aria-hidden": "true",
       "data-no-controls": !$nativeControls ? "" : void 0,
@@ -199,4 +224,4 @@ ref(el) {
     ...props,
-    controls: $nativeControls ? "" : null,
-    crossOrigin: typeof $crossorigin === "boolean" ? "" : $crossorigin,
+    controls: $nativeControls ? "true" : null,
+    crossOrigin: typeof $crossOrigin === "boolean" ? "" : $crossOrigin,
     poster: $mediaType === "video" && $nativeControls && $poster ? $poster : null,
@@ -214,3 +239,3 @@ preload: "none",
 function createTextTrack(init) {
-  const media = useReactContext(mediaContext), track = React.useMemo(() => new TextTrack(init), Object.values(init));
+  const media = useMediaContext(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
   React.useEffect(() => {
@@ -246,3 +271,3 @@ media.textTracks.add(track);
   ({ instance, children, ...props }, forwardRef) => {
-    const { crossorigin } = useStateContext(mediaState), { src, alt, img } = instance.$state, $crossorigin = useSignal(crossorigin), $src = useSignal(src), $alt = useSignal(alt);
+    const { src, img, alt, crossOrigin } = instance.$state, $src = useSignal(src), $alt = useSignal(alt), $crossOrigin = useSignal(crossOrigin);
     return /* @__PURE__ */ React.createElement(
@@ -252,5 +277,5 @@ Primitive.img,
         ...props,
-        src: $src || void 0,
+        src: $src || "",
         alt: $alt || void 0,
-        crossOrigin: /ytimg\.com|vimeo/.test($src || "") ? void 0 : $crossorigin,
+        crossOrigin: $crossOrigin || void 0,
         ref: composeRefs(img.set, forwardRef)
@@ -331,14 +356,4 @@ },
 
-function useMediaPlayer() {
-  const context = useReactContext(mediaContext);
-  if (!context) {
-    throw Error(
-      "[vidstack] no media context was found - was this called outside of `<MediaPlayer>`?"
-    );
-  }
-  return context?.player || null;
-}
-
 function useMediaProvider() {
-  const [provider, setProvider] = React.useState(null), context = useReactContext(mediaContext);
+  const [provider, setProvider] = React.useState(null), context = useMediaContext();
   if (!context) {
@@ -359,31 +374,4 @@ throw Error(
 
-function useMediaRemote(target) {
-  const media = useReactContext(mediaContext), remote = React.useRef();
-  if (!remote.current) {
-    remote.current = new MediaRemoteControl();
-  }
-  React.useEffect(() => {
-    const ref = target && "current" in target ? target.current : target, isPlayerRef = ref instanceof MediaPlayerInstance, player = isPlayerRef ? ref : media?.player;
-    remote.current.setPlayer(player ?? null);
-    remote.current.setTarget(ref ?? null);
-  }, [media, target && "current" in target ? target.current : target]);
-  return remote.current;
-}
-
-function useThumbnails(src) {
-  const scope = useReactScope(), $src = React.useMemo(() => signal(src), []), loader = React.useMemo(() => scoped(() => ThumbnailsLoader.create($src), scope), []), $cues = useSignal(loader.$cues), data = React.useMemo(() => {
-    const items = [], baseURL = /^https?:/.test(src) || IS_SERVER ? src : location.href;
-    for (const cue of $cues) {
-      const [url, dataText = ""] = (cue.text || "").split("#"), data2 = resolveThumbnailData(dataText);
-      items.push({
-        url: resolveThumbnailSrc(url, baseURL),
-        cue,
-        x: data2.x ?? -1,
-        y: data2.y ?? -1,
-        width: data2.width ?? -1,
-        height: data2.height ?? -1
-      });
-    }
-    return items;
-  }, [$cues]);
+function useThumbnails(src, crossOrigin = null) {
+  const scope = useReactScope(), $src = createSignal(src), $crossOrigin = createSignal(crossOrigin), loader = useScoped(() => ThumbnailsLoader.create($src, $crossOrigin));
   if (!scope) {
@@ -397,29 +385,20 @@ console.warn(
   }, [src]);
-  return data;
+  React.useEffect(() => {
+    $crossOrigin.set(crossOrigin);
+  }, [crossOrigin]);
+  return useSignal(loader.$images);
 }
 function useActiveThumbnail(thumbnails, time) {
-  const cues = React.useMemo(() => thumbnails.map((t) => t.cue), [thumbnails]);
   return React.useMemo(() => {
-    const cue = findActiveCue(cues, time);
-    return thumbnails.find((t) => t.cue === cue) || null;
-  }, [thumbnails, cues, time]);
+    let activeIndex = -1;
+    for (let i = thumbnails.length - 1; i >= 0; i--) {
+      const image = thumbnails[i];
+      if (time >= image.startTime && (!image.endTime || time < image.endTime)) {
+        activeIndex = i;
+        break;
+      }
+    }
+    return thumbnails[activeIndex] || null;
+  }, [thumbnails, time]);
 }
-function resolveThumbnailSrc(src, baseURL) {
-  return /^https?:/.test(src) ? src : new URL(src, baseURL).href;
-}
-const propNames = {
-  x: "x",
-  y: "y",
-  w: "width",
-  h: "height"
-};
-function resolveThumbnailData(data) {
-  const [props, values] = data.split("="), resolvedData = {}, dataValues = values?.split(",");
-  if (!props || !values)
-    return {};
-  for (let i = 0; i < props.length; i++) {
-    resolvedData[propNames[props[i]]] = +dataValues[i];
-  }
-  return resolvedData;
-}
 
@@ -516,2 +495,2 @@ function useSliderPreview({
 
-export { caption as Caption, LibASSTextRenderer, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, MediaRemoteControl, Poster, PosterInstance, TextTrack, ThumbnailsLoader, ToggleButton, ToggleButtonInstance, Track, createTextTrack, findActiveCue, mediaContext, mediaState, updateSliderPreviewPlacement, useActiveThumbnail, useMediaPlayer, useMediaProvider, useMediaRemote, useMediaState, useSliderPreview, useState, useStore, useThumbnails };
+export { caption as Caption, Icon, LibASSTextRenderer, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, TextTrack, ThumbnailsLoader, ToggleButton, ToggleButtonInstance, Track, createTextTrack, mediaState, updateSliderPreviewPlacement, useActiveThumbnail, useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };

dist/prod/player/vidstack-default-components.js

 "use client"
 
-import * as React from 'react';
-import { u as usePlayerQuery, R as Root, q as Trigger, w as Content, P as PlayButton, M as MuteButton, C as CaptionButton, a as PIPButton, F as FullscreenButton, S as SeekButton, x as Root$1, y as Track, z as TrackFill, A as Thumb, B as Preview, V as Value, D as Root$2, E as Chapters, H as Progress, I as Thumbnail, J as ChapterTitle, K as Value$1, d as ChapterTitle$1, L as LiveButton, T as Time, n as useChapterOptions, N as Items, O as Root$3, Q as Item, U as Root$4, W as Img, X as Root$5, Y as Button, Z as Portal, k as useAudioOptions, p as usePlaybackRateOptions, o as useVideoQualityOptions, l as useCaptionOptions, e as Captions, _ as Root$6, $ as Group, G as Gesture, a0 as Root$7, a1 as Track$1, a2 as TrackFill$1 } from '../chunks/vidstack-tByH5fGk.js';
-import { f as isString, a as useSignal, B as useReactContext, X as computed } from '../chunks/vidstack-8AXyyPGc.js';
-import { u as useMediaState, _ as isTrackCaptionKind, k as isRemotionSource, v as mediaContext } from '../chunks/vidstack-rVU9ynQ5.js';
-import { a as RemotionSliderThumbnail, R as RemotionThumbnail } from '../chunks/vidstack-ov2wCP54.js';
+export { j as DefaultAirPlayButton, b as DefaultAudioLayout, g as DefaultBufferingIndicator, n as DefaultCaptionButton, v as DefaultChapterTitle, B as DefaultChaptersMenu, y as DefaultControlsSpacer, p as DefaultFullscreenButton, k as DefaultGoogleCastButton, w as DefaultLiveButton, m as DefaultMuteButton, o as DefaultPIPButton, l as DefaultPlayButton, q as DefaultSeekButton, C as DefaultSettingsMenu, x as DefaultTimeGroup, z as DefaultTimeInfo, A as DefaultTimeInvert, s as DefaultTimeSlider, t as DefaultTitle, h as DefaultTooltip, f as DefaultVideoGestures, d as DefaultVideoLargeLayout, c as DefaultVideoLayout, e as DefaultVideoSmallLayout, r as DefaultVolumeSlider } from '../chunks/vidstack-L4BEZGzb.js';
+import 'react';
+import '../chunks/vidstack-ZNeeDUTQ.js';
+import '../chunks/vidstack-IaZbfosI.js';
+import '../chunks/vidstack-FaKLNJoR.js';
+import '../chunks/vidstack-ODtybqq9.js';
 import 'react-dom';
-
-const DefaultLayoutContext = React.createContext({});
-function useDefaultLayoutLang(word) {
-  const { translations } = React.useContext(DefaultLayoutContext);
-  return translations?.[word] ?? word;
-}
-
-function createDefaultMediaLayout({
-  type,
-  smLayoutWhen,
-  SmallLayout,
-  LargeLayout,
-  UnknownStreamType
-}) {
-  const Layout = React.forwardRef(
-    ({
-      className,
-      icons,
-      thumbnails,
-      translations,
-      showMenuDelay,
-      showTooltipDelay = type === "video" ? 500 : 700,
-      smallLayoutWhen = smLayoutWhen,
-      noModal = false,
-      menuGroup = "bottom",
-      hideQualityBitrate = false,
-      children,
-      ...props
-    }, forwardRef) => {
-      const $canLoad = useMediaState("canLoad"), $viewType = useMediaState("viewType"), $streamType = useMediaState("streamType"), isMatch = $viewType === type, isForcedLayout = typeof smallLayoutWhen === "boolean", isSmallLayoutMatch = usePlayerQuery(isString(smallLayoutWhen) ? smallLayoutWhen : ""), isSmallLayout = isForcedLayout ? smallLayoutWhen : isSmallLayoutMatch;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ...props,
-          className: `vds-${type}-layout` + (className ? ` ${className}` : ""),
-          "data-match": isMatch ? "" : null,
-          "data-size": isSmallLayout ? "sm" : null,
-          ref: forwardRef
-        },
-        ($canLoad || isForcedLayout) && isMatch ? /* @__PURE__ */ React.createElement(
-          DefaultLayoutContext.Provider,
-          {
-            value: {
-              thumbnails,
-              translations,
-              isSmallLayout,
-              showMenuDelay,
-              showTooltipDelay,
-              hideQualityBitrate,
-              noModal,
-              menuGroup,
-              Icons: icons
-            }
-          },
-          $streamType === "unknown" ? UnknownStreamType ? /* @__PURE__ */ React.createElement(UnknownStreamType, null) : null : isSmallLayout ? /* @__PURE__ */ React.createElement(SmallLayout, null) : /* @__PURE__ */ React.createElement(LargeLayout, null),
-          children
-        ) : null
-      );
-    }
-  );
-  Layout.displayName = "DefaultMediaLayout";
-  return Layout;
-}
-function DefaultTooltip({ content, placement, children }) {
-  const { showTooltipDelay } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(Root, { showDelay: showTooltipDelay }, /* @__PURE__ */ React.createElement(Trigger, { asChild: true }, children), /* @__PURE__ */ React.createElement(Content, { className: "vds-tooltip-content", placement }, content));
-}
-DefaultTooltip.displayName = "DefaultTooltip";
-function DefaultPlayButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), playText = useDefaultLayoutLang("Play"), pauseText = useDefaultLayoutLang("Pause"), paused = useMediaState("paused"), ended = useMediaState("ended"), label = paused ? playText : pauseText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: paused ? playText : pauseText, placement: tooltip }, /* @__PURE__ */ React.createElement(PlayButton, { className: "vds-play-button vds-button", "aria-label": label }, ended ? /* @__PURE__ */ React.createElement(Icons.PlayButton.Replay, { className: "vds-icon" }) : paused ? /* @__PURE__ */ React.createElement(Icons.PlayButton.Play, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.PlayButton.Pause, { className: "vds-icon" })));
-}
-DefaultPlayButton.displayName = "DefaultPlayButton";
-function DefaultMuteButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), muteText = useDefaultLayoutLang("Mute"), unmuteText = useDefaultLayoutLang("Unmute"), muted = useMediaState("muted"), volume = useMediaState("volume"), label = muted ? unmuteText : muteText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React.createElement(MuteButton, { className: "vds-mute-button vds-button", "aria-label": label }, muted || volume == 0 ? /* @__PURE__ */ React.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : volume < 0.5 ? /* @__PURE__ */ React.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
-}
-DefaultMuteButton.displayName = "DefaultMuteButton";
-function DefaultCaptionButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), onText = useDefaultLayoutLang("Closed-Captions On"), offText = useDefaultLayoutLang("Closed-Captions Off"), track = useMediaState("textTrack"), isOn = track && isTrackCaptionKind(track), label = track ? offText : onText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: isOn ? onText : offText, placement: tooltip }, /* @__PURE__ */ React.createElement(CaptionButton, { className: "vds-caption-button vds-button", "aria-label": label }, isOn ? /* @__PURE__ */ React.createElement(Icons.CaptionButton.On, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.CaptionButton.Off, { className: "vds-icon" })));
-}
-DefaultCaptionButton.displayName = "DefaultCaptionButton";
-function DefaultPIPButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), enterText = useDefaultLayoutLang("Enter PiP"), exitText = useDefaultLayoutLang("Exit PiP"), pip = useMediaState("pictureInPicture"), label = pip ? exitText : enterText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: pip ? exitText : enterText, placement: tooltip }, /* @__PURE__ */ React.createElement(PIPButton, { className: "vds-pip-button vds-button", "aria-label": label }, pip ? /* @__PURE__ */ React.createElement(Icons.PIPButton.Exit, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.PIPButton.Enter, { className: "vds-icon" })));
-}
-DefaultPIPButton.displayName = "DefaultPIPButton";
-function DefaultFullscreenButton({ tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), enterText = useDefaultLayoutLang("Enter Fullscreen"), exitText = useDefaultLayoutLang("Exit Fullscreen"), fullscreen = useMediaState("fullscreen"), label = fullscreen ? exitText : enterText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: fullscreen ? exitText : enterText, placement: tooltip }, /* @__PURE__ */ React.createElement(FullscreenButton, { className: "vds-fullscreen-button vds-button", "aria-label": label }, fullscreen ? /* @__PURE__ */ React.createElement(Icons.FullscreenButton.Exit, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.FullscreenButton.Enter, { className: "vds-icon" })));
-}
-DefaultFullscreenButton.displayName = "DefaultFullscreenButton";
-function DefaultSeekButton({ seconds, tooltip }) {
-  const { Icons } = React.useContext(DefaultLayoutContext), seekForwardText = useDefaultLayoutLang("Seek Forward"), seekBackwardText = useDefaultLayoutLang("Seek Backward"), label = seconds >= 0 ? seekForwardText : seekBackwardText;
-  return /* @__PURE__ */ React.createElement(DefaultTooltip, { content: label, placement: tooltip }, /* @__PURE__ */ React.createElement(SeekButton, { className: "vds-seek-button vds-button", seconds, "aria-label": label }, seconds >= 0 ? /* @__PURE__ */ React.createElement(Icons.SeekButton.Forward, { className: "vds-icon" }) : /* @__PURE__ */ React.createElement(Icons.SeekButton.Backward, { className: "vds-icon" })));
-}
-DefaultSeekButton.displayName = "DefaultSeekButton";
-function DefaultVolumeSlider() {
-  const label = useDefaultLayoutLang("Volume");
-  return /* @__PURE__ */ React.createElement(Root$1, { className: "vds-volume-slider vds-slider", "aria-label": label }, /* @__PURE__ */ React.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React.createElement(Preview, { className: "vds-slider-preview", noClamp: true }, /* @__PURE__ */ React.createElement(Value, { className: "vds-slider-value" })));
-}
-DefaultVolumeSlider.displayName = "DefaultVolumeSlider";
-function DefaultTimeSlider() {
-  const $src = useMediaState("currentSrc"), width = useMediaState("width"), { thumbnails } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Seek"), $RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
-  return /* @__PURE__ */ React.createElement(Root$2, { className: "vds-time-slider vds-slider", "aria-label": label }, /* @__PURE__ */ React.createElement(Chapters, { className: "vds-slider-chapters", disabled: width < 768 }, (cues, forwardRef) => cues.map((cue) => /* @__PURE__ */ React.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef }, /* @__PURE__ */ React.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React.createElement(
-    Thumbnail.Root,
-    {
-      src: thumbnails,
-      className: "vds-slider-thumbnail vds-thumbnail"
-    },
-    /* @__PURE__ */ React.createElement(Thumbnail.Img, null)
-  ) : $RemotionSliderThumbnail && isRemotionSource($src) ? /* @__PURE__ */ React.createElement($RemotionSliderThumbnail, { className: "vds-slider-thumbnail vds-thumbnail" }) : null, /* @__PURE__ */ React.createElement(ChapterTitle, { className: "vds-slider-chapter-title" }), /* @__PURE__ */ React.createElement(Value$1, { className: "vds-slider-value" })));
-}
-DefaultTimeSlider.displayName = "DefaultTimeSlider";
-function DefaultChapterTitle() {
-  return /* @__PURE__ */ React.createElement(ChapterTitle$1, { className: "vds-chapter-title" });
-}
-DefaultChapterTitle.displayName = "DefaultChapterTitle";
-function DefaultLiveButton() {
-  const live = useMediaState("live"), label = useDefaultLayoutLang("Skip To Live"), liveText = useDefaultLayoutLang("LIVE");
-  return live ? /* @__PURE__ */ React.createElement(LiveButton, { className: "vds-live-button", "aria-label": label }, /* @__PURE__ */ React.createElement("span", { className: "vds-live-button-text" }, liveText)) : null;
-}
-DefaultLiveButton.displayName = "DefaultLiveButton";
-function DefaultTimeGroup() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-time-group" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "current" }), /* @__PURE__ */ React.createElement("div", { className: "vds-time-divider" }, "/"), /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" }));
-}
-DefaultTimeGroup.displayName = "DefaultTimeGroup";
-function DefaultTimeInfo() {
-  const live = useMediaState("live");
-  return live ? /* @__PURE__ */ React.createElement(DefaultLiveButton, null) : /* @__PURE__ */ React.createElement(DefaultTimeGroup, null);
-}
-DefaultTimeInfo.displayName = "DefaultTimeInfo";
-function DefaultChaptersMenu({ tooltip, placement, portalClass }) {
-  const { showMenuDelay, noModal, isSmallLayout, Icons, menuGroup } = React.useContext(DefaultLayoutContext), chaptersText = useDefaultLayoutLang("Chapters"), options = useChapterOptions(), disabled = !options.length, { thumbnails } = React.useContext(DefaultLayoutContext), $src = useMediaState("currentSrc"), $viewType = useMediaState("viewType"), $offset = !isSmallLayout && menuGroup === "bottom" && $viewType === "video" ? 26 : 0, $RemotionThumbnail = useSignal(RemotionThumbnail);
-  const Content = /* @__PURE__ */ React.createElement(
-    Items,
-    {
-      className: "vds-chapters-menu-items vds-menu-items",
-      placement,
-      offset: $offset
-    },
-    /* @__PURE__ */ React.createElement(
-      Root$3,
-      {
-        className: "vds-chapters-radio-group vds-radio-group",
-        value: options.selectedValue,
-        "data-thumbnails": !!thumbnails
-      },
-      options.map(
-        ({ cue, label, value, startTimeText, durationText, select, setProgressVar }) => /* @__PURE__ */ React.createElement(
-          Item,
-          {
-            className: "vds-chapter-radio vds-radio",
-            value,
-            key: value,
-            onSelect: select,
-            ref: setProgressVar
-          },
-          thumbnails ? /* @__PURE__ */ React.createElement(Root$4, { src: thumbnails, className: "vds-thumbnail", time: cue.startTime }, /* @__PURE__ */ React.createElement(Img, null)) : $RemotionThumbnail && isRemotionSource($src) ? /* @__PURE__ */ React.createElement($RemotionThumbnail, { className: "vds-thumbnail", frame: cue.startTime * $src.fps }) : null,
-          /* @__PURE__ */ React.createElement("div", { className: "vds-chapter-radio-content" }, /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-label" }, label), /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-start-time" }, startTimeText), /* @__PURE__ */ React.createElement("span", { className: "vds-chapter-radio-duration" }, durationText))
-        )
-      )
-    )
-  );
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-chapters-menu vds-menu", showDelay: showMenuDelay }, /* @__PURE__ */ React.createElement(DefaultTooltip, { content: chaptersText, placement: tooltip }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: "vds-menu-button vds-button",
-      disabled,
-      "aria-label": chaptersText
-    },
-    /* @__PURE__ */ React.createElement(Icons.Menu.Chapters, { className: "vds-icon" })
-  )), noModal || !isSmallLayout ? Content : /* @__PURE__ */ React.createElement(
-    Portal,
-    {
-      className: portalClass,
-      disabled: "fullscreen",
-      "data-size": isSmallLayout ? "sm" : null
-    },
-    Content
-  ));
-}
-DefaultChaptersMenu.displayName = "DefaultChaptersMenu";
-function DefaultSettingsMenu({ tooltip, placement, portalClass }) {
-  const { $state } = useReactContext(mediaContext), { showMenuDelay, Icons, isSmallLayout, menuGroup, noModal } = React.useContext(DefaultLayoutContext), settingsText = useDefaultLayoutLang("Settings"), $viewType = useMediaState("viewType"), $offset = !isSmallLayout && menuGroup === "bottom" && $viewType === "video" ? 26 : 0, $$hasMenuItems = React.useMemo(
-    () => computed(() => {
-      const { canSetPlaybackRate, canSetQuality, qualities, audioTracks, textTracks } = $state;
-      return canSetPlaybackRate() || canSetQuality() && qualities().length || audioTracks().length || textTracks().filter(isTrackCaptionKind).length;
-    }),
-    []
-  ), $hasMenuItems = useSignal($$hasMenuItems);
-  if (!$hasMenuItems)
-    return null;
-  const Content = /* @__PURE__ */ React.createElement(
-    Items,
-    {
-      className: "vds-settings-menu-items vds-menu-items",
-      placement,
-      offset: $offset
-    },
-    /* @__PURE__ */ React.createElement(DefaultAudioSubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultSpeedSubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultQualitySubmenu, null),
-    /* @__PURE__ */ React.createElement(DefaultCaptionSubmenu, null)
-  );
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-settings-menu vds-menu", showDelay: showMenuDelay }, /* @__PURE__ */ React.createElement(DefaultTooltip, { content: settingsText, placement: tooltip }, /* @__PURE__ */ React.createElement(Button, { className: "vds-menu-button vds-button", "aria-label": settingsText }, /* @__PURE__ */ React.createElement(Icons.Menu.Settings, { className: "vds-icon vds-rotate-icon" }))), noModal || !isSmallLayout ? Content : /* @__PURE__ */ React.createElement(
-    Portal,
-    {
-      className: portalClass,
-      disabled: "fullscreen",
-      "data-size": isSmallLayout ? "sm" : null
-    },
-    Content
-  ));
-}
-DefaultSettingsMenu.displayName = "DefaultSettingsMenu";
-function DefaultSubmenuButton({ label, hint, Icon, disabled }) {
-  const { Icons } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(Button, { className: "vds-menu-button", disabled }, /* @__PURE__ */ React.createElement(Icons.Menu.ArrowLeft, { className: "vds-menu-button-close-icon vds-icon" }), /* @__PURE__ */ React.createElement(Icon, { className: "vds-menu-button-icon" }), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-button-label" }, label), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-button-hint" }, hint), /* @__PURE__ */ React.createElement(Icons.Menu.ArrowRight, { className: "vds-menu-button-open-icon vds-icon" }));
-}
-DefaultSubmenuButton.displayName = "DefaultSubmenuButton";
-function DefaultAudioSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Audio"), defaultText = useDefaultLayoutLang("Default"), track = useMediaState("audioTrack"), options = useAudioOptions();
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-audio-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint: track?.label ?? defaultText,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Audio
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-audio-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-audio-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultAudioSubmenu.displayName = "DefaultAudioSubmenu";
-function DefaultSpeedSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Speed"), normalText = useDefaultLayoutLang("Normal"), options = usePlaybackRateOptions({
-    normalLabel: normalText
-  }), hint = options.selectedValue === "1" ? normalText : options.selectedValue + "x";
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-speed-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Speed
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-speed-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-speed-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultSpeedSubmenu.displayName = "DefaultSpeedSubmenu";
-function DefaultQualitySubmenu() {
-  const { hideQualityBitrate, Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Quality"), autoText = useDefaultLayoutLang("Auto"), options = useVideoQualityOptions({ auto: autoText, sort: "descending" }), currentQuality = options.selectedQuality?.height, hint = options.selectedValue !== "auto" && currentQuality ? `${currentQuality}p` : `${autoText}${currentQuality ? ` (${currentQuality}p)` : ""}`;
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-quality-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Quality
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-quality-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, bitrateText, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-quality-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2),
-      !hideQualityBitrate && bitrateText ? /* @__PURE__ */ React.createElement("span", { className: "vds-radio-hint" }, bitrateText) : null
-    ))
-  )));
-}
-DefaultQualitySubmenu.displayName = "DefaultQualitySubmenu";
-function DefaultCaptionSubmenu() {
-  const { Icons } = React.useContext(DefaultLayoutContext), label = useDefaultLayoutLang("Captions"), offText = useDefaultLayoutLang("Off"), options = useCaptionOptions({ off: offText }), hint = options.selectedTrack?.label ?? offText;
-  return /* @__PURE__ */ React.createElement(Root$5, { className: "vds-captions-menu vds-menu" }, /* @__PURE__ */ React.createElement(
-    DefaultSubmenuButton,
-    {
-      label,
-      hint,
-      disabled: options.disabled,
-      Icon: Icons.Menu.Captions
-    }
-  ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
-    Root$3,
-    {
-      className: "vds-captions-radio-group vds-radio-group",
-      value: options.selectedValue
-    },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
-      Item,
-      {
-        className: "vds-caption-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "vds-radio-check" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  )));
-}
-DefaultCaptionSubmenu.displayName = "DefaultCaptionSubmenu";
-
-function DefaultAudioMenus() {
-  const { isSmallLayout, noModal } = React.useContext(DefaultLayoutContext), placement = noModal ? "top end" : !isSmallLayout ? "top end" : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultChaptersMenu, { tooltip: "top", placement, portalClass: "vds-audio-layout" }), /* @__PURE__ */ React.createElement(DefaultSettingsMenu, { tooltip: "top end", placement, portalClass: "vds-audio-layout" }));
-}
-DefaultAudioMenus.displayName = "DefaultAudioMenus";
-
-function DefaultAudioLayoutLarge() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: -10, tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: 10, tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultVolumeSlider, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultAudioMenus, null))));
-}
-DefaultAudioLayoutLarge.displayName = "DefaultAudioLayoutLarge";
-
-function DefaultAudioLayoutSmall() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultLivePlayButton, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultLiveButton, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultAudioMenus, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(DefaultTimeControlsGroup, null), /* @__PURE__ */ React.createElement(DefaultBottomControlsGroup, null)));
-}
-DefaultAudioLayoutSmall.displayName = "DefaultAudioLayoutSmall";
-function DefaultLivePlayButton() {
-  const live = useMediaState("live"), canSeek = useMediaState("canSeek");
-  return live && !canSeek ? /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top start" }) : null;
-}
-DefaultLivePlayButton.displayName = "DefaultLivePlayButton";
-function DefaultTimeControlsGroup() {
-  const live = useMediaState("live");
-  return !live ? /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "current" }), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" })) : null;
-}
-DefaultTimeControlsGroup.displayName = "DefaultTimeControlsGroup";
-function DefaultBottomControlsGroup() {
-  const canSeek = useMediaState("canSeek");
-  return canSeek ? /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: -10, tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top center" }), /* @__PURE__ */ React.createElement(DefaultSeekButton, { seconds: 10, tooltip: "top center" }), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" })) : null;
-}
-DefaultBottomControlsGroup.displayName = "DefaultBottomControlsGroup";
-
-const MediaLayout$1 = createDefaultMediaLayout({
-  type: "audio",
-  smLayoutWhen: "(width < 576)",
-  SmallLayout: DefaultAudioLayoutSmall,
-  LargeLayout: DefaultAudioLayoutLarge
-});
-function DefaultAudioLayout(props) {
-  return /* @__PURE__ */ React.createElement(MediaLayout$1, { ...props });
-}
-DefaultAudioLayout.displayName = "DefaultAudioLayout";
-
-const MediaLayout = createDefaultMediaLayout({
-  type: "video",
-  smLayoutWhen: "(width < 576) or (height < 380)",
-  SmallLayout: DefaultVideoLayoutSmall,
-  LargeLayout: DefaultVideoLayoutLarge,
-  UnknownStreamType: DefaultBufferingIndicator
-});
-function DefaultVideoLayout(props) {
-  return /* @__PURE__ */ React.createElement(MediaLayout, { ...props });
-}
-DefaultVideoLayout.displayName = "DefaultVideoLayout";
-function DefaultVideoLayoutLarge() {
-  const { menuGroup } = React.useContext(DefaultLayoutContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null), /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), menuGroup === "top" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, null)), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null)), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top start" }), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultVolumeSlider, null), /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "top" }), menuGroup === "bottom" && /* @__PURE__ */ React.createElement(DefaultVideoMenus, null), /* @__PURE__ */ React.createElement(DefaultPIPButton, { tooltip: "top" }), /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" }))));
-}
-DefaultVideoLayoutLarge.displayName = "DefaultVideoLayoutLarge";
-function DefaultVideoLayoutSmall() {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultVideoGestures, null), /* @__PURE__ */ React.createElement(DefaultBufferingIndicator, null), /* @__PURE__ */ React.createElement(Captions, { className: "vds-captions" }), /* @__PURE__ */ React.createElement(Root$6, { className: "vds-controls" }, /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultCaptionButton, { tooltip: "bottom" }), /* @__PURE__ */ React.createElement(DefaultVideoMenus, null), /* @__PURE__ */ React.createElement(DefaultMuteButton, { tooltip: "bottom end" })), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultPlayButton, { tooltip: "top" })), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeInfo, null), /* @__PURE__ */ React.createElement(DefaultChapterTitle, null), /* @__PURE__ */ React.createElement("div", { className: "vds-controls-spacer" }), /* @__PURE__ */ React.createElement(DefaultFullscreenButton, { tooltip: "top end" })), /* @__PURE__ */ React.createElement(Group, { className: "vds-controls-group" }, /* @__PURE__ */ React.createElement(DefaultTimeSlider, null))), /* @__PURE__ */ React.createElement(DefaultVideoStartDuration, null));
-}
-DefaultVideoLayoutSmall.displayName = "DefaultVideoLayoutSmall";
-function DefaultVideoStartDuration() {
-  const $duration = useMediaState("duration");
-  if ($duration === 0)
-    return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-start-duration" }, /* @__PURE__ */ React.createElement(Time, { className: "vds-time", type: "duration" }));
-}
-DefaultVideoStartDuration.displayName = "DefaultVideoStartDuration";
-function DefaultVideoGestures() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-gestures" }, /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "pointerup", action: "toggle:paused" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "pointerup", action: "toggle:controls" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "toggle:fullscreen" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "seek:-10" }), /* @__PURE__ */ React.createElement(Gesture, { className: "vds-gesture", event: "dblpointerup", action: "seek:10" }));
-}
-DefaultVideoGestures.displayName = "DefaultVideoGestures";
-function DefaultBufferingIndicator() {
-  return /* @__PURE__ */ React.createElement("div", { className: "vds-buffering-indicator" }, /* @__PURE__ */ React.createElement(Root$7, { className: "vds-buffering-spinner" }, /* @__PURE__ */ React.createElement(Track$1, { className: "vds-buffering-track" }), /* @__PURE__ */ React.createElement(TrackFill$1, { className: "vds-buffering-track-fill" })));
-}
-DefaultBufferingIndicator.displayName = "DefaultBufferingIndicator";
-function DefaultVideoMenus() {
-  const { isSmallLayout, noModal, menuGroup } = React.useContext(DefaultLayoutContext), side = menuGroup === "top" || isSmallLayout ? "bottom" : "top", tooltip = `${side} end`, placement = noModal ? `${side} end` : !isSmallLayout ? `${side} end` : null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DefaultChaptersMenu, { tooltip, placement, portalClass: "vds-video-layout" }), /* @__PURE__ */ React.createElement(DefaultSettingsMenu, { tooltip, placement, portalClass: "vds-video-layout" }));
-}
-DefaultVideoMenus.displayName = "DefaultVideoMenus";
-
-export { DefaultLayoutContext as D, DefaultAudioLayout, DefaultBufferingIndicator, DefaultCaptionButton, DefaultChapterTitle, DefaultChaptersMenu, DefaultFullscreenButton, DefaultLiveButton, DefaultMuteButton, DefaultPIPButton, DefaultPlayButton, DefaultSeekButton, DefaultSettingsMenu, DefaultSubmenuButton, DefaultTimeGroup, DefaultTimeInfo, DefaultTimeSlider, DefaultTooltip, DefaultVideoGestures, DefaultVideoLayout, DefaultVideoLayoutLarge, DefaultVideoLayoutSmall, DefaultVolumeSlider, createDefaultMediaLayout, useDefaultLayoutLang as u };
+import '../chunks/vidstack-waoYPeWd.js';
+import '../chunks/vidstack-NbfhSy54.js';

dist/prod/player/vidstack-default-icons.js

 "use client"
 
 import * as React from 'react';
-import { I as Icon } from '../chunks/vidstack-WDwMHJsO.js';
+import Icon$22 from '../chunks/vidstack-Fm3lXEFm.js';
+import { I as Icon } from '../chunks/vidstack-g-zwyrW6.js';
 
+var Icon$4 = `<path d="M5.33334 6.00001C5.33334 5.63182 5.63181 5.33334 6 5.33334H26C26.3682 5.33334 26.6667 5.63182 26.6667 6.00001V20.6667C26.6667 21.0349 26.3682 21.3333 26 21.3333H23.7072C23.4956 21.3333 23.2966 21.233 23.171 21.0628L22.1859 19.7295C21.8607 19.2894 22.1749 18.6667 22.7221 18.6667H23.3333C23.7015 18.6667 24 18.3682 24 18V8.66668C24 8.29849 23.7015 8.00001 23.3333 8.00001H8.66667C8.29848 8.00001 8 8.29849 8 8.66668V18C8 18.3682 8.29848 18.6667 8.66667 18.6667H9.29357C9.84072 18.6667 10.1549 19.2894 9.82976 19.7295L8.84467 21.0628C8.71898 21.233 8.52 21.3333 8.30848 21.3333H6C5.63181 21.3333 5.33334 21.0349 5.33334 20.6667V6.00001Z" fill="currentColor"/> <path d="M8.78528 25.6038C8.46013 26.0439 8.77431 26.6667 9.32147 26.6667L22.6785 26.6667C23.2256 26.6667 23.5398 26.0439 23.2146 25.6038L16.5358 16.5653C16.2693 16.2046 15.73 16.2047 15.4635 16.5653L8.78528 25.6038Z" fill="currentColor"/>`;
+
 var Icon$10 = `<path d="M13.0908 14.3334C12.972 14.3334 12.9125 14.1898 12.9965 14.1058L17.7021 9.40022C17.9625 9.13987 17.9625 8.71776 17.7021 8.45741L16.2879 7.04319C16.0275 6.78284 15.6054 6.78284 15.3451 7.04319L6.8598 15.5285C6.59945 15.7888 6.59945 16.2109 6.8598 16.4713L8.27401 17.8855L8.27536 17.8868L15.3453 24.9568C15.6057 25.2172 16.0278 25.2172 16.2881 24.9568L17.7024 23.5426C17.9627 23.2822 17.9627 22.8601 17.7024 22.5998L12.9969 17.8944C12.9129 17.8104 12.9724 17.6668 13.0912 17.6668L26 17.6668C26.3682 17.6668 26.6667 17.3683 26.6667 17.0001V15.0001C26.6667 14.6319 26.3682 14.3334 26 14.3334L13.0908 14.3334Z" fill="currentColor"/>`;
@@ -56,2 +59,8 @@
 const defaultLayoutIcons = {
+  AirPlayButton: {
+    Default: createIcon(Icon$4)
+  },
+  GoogleCastButton: {
+    Default: createIcon(Icon$22)
+  },
   PlayButton: {
@@ -91,3 +100,19 @@ Play: createIcon(Icon$59),
     Settings: createIcon(Icon$85),
-    Speed: createIcon(Icon$55)
+    Speed: createIcon(Icon$55),
+    Font: createIcon(
+      `<path d="M22.6667 10.6667H26.6667V26.6667H28V28H22.6667V26.6667H24V22.6667H18.6667L16.6667 26.6667H18.6667V28H13.3333V26.6667H14.6667L22.6667 10.6667ZM24 12L19.3333 21.3333H24V12ZM6.66667 4H13.3333C14.8133 4 16 5.18667 16 6.66667V21.3333H12V14.6667H8V21.3333H4V6.66667C4 5.18667 5.18667 4 6.66667 4ZM8 6.66667V12H12V6.66667H8Z" fill="currentColor" />`
+    )
+  },
+  KeyboardAction: {
+    Play: createIcon(Icon$59),
+    Pause: createIcon(Icon$56),
+    Mute: createIcon(Icon$52),
+    VolumeUp: createIcon(Icon$101),
+    VolumeDown: createIcon(Icon$102),
+    EnterFullscreen: createIcon(Icon$38),
+    ExitFullscreen: createIcon(Icon$37),
+    EnterPiP: createIcon(Icon$58),
+    ExitPiP: createIcon(Icon$57),
+    CaptionsOn: createIcon(Icon$24),
+    CaptionsOff: createIcon(Icon$25)
   }
@@ -94,0 +119,0 @@ };

dist/prod/player/vidstack-default-layout.js

 "use client"
 
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultCaptionButton, DefaultChapterTitle, DefaultChaptersMenu, DefaultFullscreenButton, D as DefaultLayoutContext, DefaultLiveButton, DefaultMuteButton, DefaultPIPButton, DefaultPlayButton, DefaultSeekButton, DefaultSettingsMenu, DefaultSubmenuButton, DefaultTimeGroup, DefaultTimeInfo, DefaultTimeSlider, DefaultTooltip, DefaultVideoGestures, DefaultVideoLayout, DefaultVideoLayoutLarge, DefaultVideoLayoutSmall, DefaultVolumeSlider, createDefaultMediaLayout, u as useDefaultLayoutLang } from './vidstack-default-components.js';
+export { j as DefaultAirPlayButton, b as DefaultAudioLayout, g as DefaultBufferingIndicator, n as DefaultCaptionButton, v as DefaultChapterTitle, B as DefaultChaptersMenu, y as DefaultControlsSpacer, p as DefaultFullscreenButton, k as DefaultGoogleCastButton, D as DefaultLayoutContext, w as DefaultLiveButton, m as DefaultMuteButton, o as DefaultPIPButton, l as DefaultPlayButton, q as DefaultSeekButton, C as DefaultSettingsMenu, x as DefaultTimeGroup, z as DefaultTimeInfo, A as DefaultTimeInvert, s as DefaultTimeSlider, t as DefaultTitle, h as DefaultTooltip, f as DefaultVideoGestures, d as DefaultVideoLargeLayout, c as DefaultVideoLayout, e as DefaultVideoSmallLayout, r as DefaultVolumeSlider, i as i18n, u as useDefaultLayoutContext, a as useDefaultLayoutWord } from '../chunks/vidstack-L4BEZGzb.js';
 import 'react';
-import '../chunks/vidstack-WDwMHJsO.js';
-import '../chunks/vidstack-tByH5fGk.js';
-import '../chunks/vidstack-8AXyyPGc.js';
-import '../chunks/vidstack-rVU9ynQ5.js';
+import '../chunks/vidstack-Fm3lXEFm.js';
+import '../chunks/vidstack-g-zwyrW6.js';
+import '../chunks/vidstack-ZNeeDUTQ.js';
+import '../chunks/vidstack-IaZbfosI.js';
+import '../chunks/vidstack-FaKLNJoR.js';
+import '../chunks/vidstack-ODtybqq9.js';
 import 'react-dom';
-import '../chunks/vidstack-ov2wCP54.js';
+import '../chunks/vidstack-waoYPeWd.js';
+import '../chunks/vidstack-NbfhSy54.js';

dist/prod/player/vidstack-remotion.js

 "use client"
 
 import * as React from 'react';
-import { v as createDisposalBin, y as animationFrameThrottle, z as noop } from '../chunks/vidstack-8AXyyPGc.js';
+import { f as createDisposalBin, d as animationFrameThrottle, H as noop } from '../chunks/vidstack-ZNeeDUTQ.js';
 import { Internals, random } from 'remotion';
-import { I as IS_SERVER, u as useMediaState, k as isRemotionSource, P as Primitive } from '../chunks/vidstack-rVU9ynQ5.js';
-export { q as isRemotionProvider } from '../chunks/vidstack-rVU9ynQ5.js';
-import { u as useSliderState } from '../chunks/vidstack-E0Z4F7im.js';
-import { R as RemotionThumbnail$1, a as RemotionSliderThumbnail$1 } from '../chunks/vidstack-ov2wCP54.js';
+import { I as IS_SERVER, u as useMediaState, q as isRemotionSource, P as Primitive } from '../chunks/vidstack-FaKLNJoR.js';
+export { z as isRemotionProvider } from '../chunks/vidstack-FaKLNJoR.js';
+import { u as useSliderState } from '../chunks/vidstack-_VTH4mML.js';
+import { b as RemotionThumbnail$1, a as RemotionSliderThumbnail$1, R as RemotionPoster$1 } from '../chunks/vidstack-NbfhSy54.js';
 
@@ -298,2 +298,7 @@ class RemotionLayoutEngine {
 
+var poster = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: RemotionPoster
+});
+
 const RemotionSliderThumbnail = React.forwardRef(
@@ -324,4 +329,6 @@ (props, ref) => {
   constructor() {
+    this.name = "remotion";
     RemotionThumbnail$1.set(React.lazy(() => Promise.resolve().then(function () { return thumbnail; })));
     RemotionSliderThumbnail$1.set(React.lazy(() => Promise.resolve().then(function () { return sliderThumbnail; })));
+    RemotionPoster$1.set(React.lazy(() => Promise.resolve().then(function () { return poster; })));
   }
@@ -334,4 +341,4 @@ canPlay(src) {
   }
-  async load() {
-    return new (await import('../chunks/vidstack-SxeIbZV9.js')).RemotionProvider(this.target);
+  async load(ctx) {
+    return new (await import('../chunks/vidstack-2hnXTV-_.js')).RemotionProvider(this.target, ctx);
   }
@@ -338,0 +345,0 @@ }

dist/prod/vidstack-icons.js

 import { addNotePaths, addPlaylistPaths, addUserPaths, addPaths, airplayPaths, arrowCollapseInPaths, arrowCollapsePaths, arrowDownPaths, arrowExpandOutPaths, arrowExpandPaths, arrowLeftPaths, arrowRightPaths, arrowUpPaths, bookmarkPaths, cameraPaths, chaptersPaths, chatCollapsePaths, chatPaths, chevronDownPaths, chevronLeftPaths, chevronRightPaths, chevronUpPaths, chromecastPaths, clipPaths, closedCaptionsOnPaths, closedCaptionsPaths, commentPaths, computerPaths, devicePaths, downloadPaths, episodesPaths, eyePaths, fastBackwardPaths, fastForwardPaths, flagPaths, fullscreenArrowExitPaths, fullscreenArrowPaths, fullscreenExitPaths, fullscreenPaths, heartPaths, infoPaths, languagePaths, linkPaths, lockClosedPaths, lockOpenPaths, menuHorizontalPaths, menuVerticalPaths, microphonePaths, mobilePaths, moonPaths, musicOffPaths, musicPaths, mutePaths, nextPaths, notificationPaths, odometerPaths, pausePaths, pictureInPictureExitPaths, pictureInPicturePaths, playPaths, playbackSpeedCirclePaths, playlistPaths, previousPaths, questionMarkPaths, queueListPaths, radioButtonSelectedPaths, radioButtonPaths, repeatOnPaths, repeatSquareOnPaths, repeatSquarePaths, repeatPaths, replayPaths, rotatePaths, searchPaths, seekBackward10Paths, seekBackward15Paths, seekBackward30Paths, seekBackwardPaths, seekForward10Paths, seekForward15Paths, seekForward30Paths, seekForwardPaths, sendPaths, settingsMenuPaths, settingsSwitchPaths, settingsPaths, shareArrowPaths, sharePaths, shuffleOnPaths, shufflePaths, stopPaths, subtitlesPaths, sunPaths, theatreModeExitPaths, theatreModePaths, thumbsDownPaths, thumbsUpPaths, timerPaths, transcriptPaths, tvPaths, userPaths, volumeHighPaths, volumeLowPaths, xMarkPaths } from 'media-icons';
 import { forwardRef, createElement } from 'react';
-import { I as Icon } from './chunks/vidstack-WDwMHJsO.js';
+import { I as Icon } from './chunks/vidstack-g-zwyrW6.js';
 
@@ -22,6 +22,6 @@ const cn = (className) => className ? `${className} vds-icon` : "vds-icon";
 AddIcon.displayName = "VidstackAddIcon";
-const AirplayIcon = /* @__PURE__ */ forwardRef((props, ref) => {
+const AirPlayIcon = /* @__PURE__ */ forwardRef((props, ref) => {
   return createElement(Icon, { ...props, className: cn(props.className), ref, paths: airplayPaths });
 });
-AirplayIcon.displayName = "VidstackAirplayIcon";
+AirPlayIcon.displayName = "VidstackAirPlayIcon";
 const ArrowCollapseInIcon = /* @__PURE__ */ forwardRef((props, ref) => {
@@ -424,2 +424,2 @@ return createElement(Icon, { ...props, className: cn(props.className), ref, paths: arrowCollapseInPaths });
 
-export { AddIcon, AddNoteIcon, AddPlaylistIcon, AddUserIcon, AirplayIcon, ArrowCollapseIcon, ArrowCollapseInIcon, ArrowDownIcon, ArrowExpandIcon, ArrowExpandOutIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookmarkIcon, CameraIcon, ChaptersIcon, ChatCollapseIcon, ChatIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChromecastIcon, ClipIcon, ClosedCaptionsIcon, ClosedCaptionsOnIcon, CommentIcon, ComputerIcon, DeviceIcon, DownloadIcon, EpisodesIcon, EyeIcon, FastBackwardIcon, FastForwardIcon, FlagIcon, FullscreenArrowExitIcon, FullscreenArrowIcon, FullscreenExitIcon, FullscreenIcon, HeartIcon, InfoIcon, LanguageIcon, LinkIcon, LockClosedIcon, LockOpenIcon, MenuHorizontalIcon, MenuVerticalIcon, MicrophoneIcon, MobileIcon, MoonIcon, MusicIcon, MusicOffIcon, MuteIcon, NextIcon, NotificationIcon, OdometerIcon, PauseIcon, PictureInPictureExitIcon, PictureInPictureIcon, PlayIcon, PlaybackSpeedCircleIcon, PlaylistIcon, PreviousIcon, QuestionMarkIcon, QueueListIcon, RadioButtonIcon, RadioButtonSelectedIcon, RepeatIcon, RepeatOnIcon, RepeatSquareIcon, RepeatSquareOnIcon, ReplayIcon, RotateIcon, SearchIcon, SeekBackward10Icon, SeekBackward15Icon, SeekBackward30Icon, SeekBackwardIcon, SeekForward10Icon, SeekForward15Icon, SeekForward30Icon, SeekForwardIcon, SendIcon, SettingsIcon, SettingsMenuIcon, SettingsSwitchIcon, ShareArrowIcon, ShareIcon, ShuffleIcon, ShuffleOnIcon, StopIcon, SubtitlesIcon, SunIcon, TheatreModeExitIcon, TheatreModeIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, TranscriptIcon, TvIcon, UserIcon, VolumeHighIcon, VolumeLowIcon, XMarkIcon };
+export { AddIcon, AddNoteIcon, AddPlaylistIcon, AddUserIcon, AirPlayIcon, ArrowCollapseIcon, ArrowCollapseInIcon, ArrowDownIcon, ArrowExpandIcon, ArrowExpandOutIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookmarkIcon, CameraIcon, ChaptersIcon, ChatCollapseIcon, ChatIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChromecastIcon, ClipIcon, ClosedCaptionsIcon, ClosedCaptionsOnIcon, CommentIcon, ComputerIcon, DeviceIcon, DownloadIcon, EpisodesIcon, EyeIcon, FastBackwardIcon, FastForwardIcon, FlagIcon, FullscreenArrowExitIcon, FullscreenArrowIcon, FullscreenExitIcon, FullscreenIcon, HeartIcon, InfoIcon, LanguageIcon, LinkIcon, LockClosedIcon, LockOpenIcon, MenuHorizontalIcon, MenuVerticalIcon, MicrophoneIcon, MobileIcon, MoonIcon, MusicIcon, MusicOffIcon, MuteIcon, NextIcon, NotificationIcon, OdometerIcon, PauseIcon, PictureInPictureExitIcon, PictureInPictureIcon, PlayIcon, PlaybackSpeedCircleIcon, PlaylistIcon, PreviousIcon, QuestionMarkIcon, QueueListIcon, RadioButtonIcon, RadioButtonSelectedIcon, RepeatIcon, RepeatOnIcon, RepeatSquareIcon, RepeatSquareOnIcon, ReplayIcon, RotateIcon, SearchIcon, SeekBackward10Icon, SeekBackward15Icon, SeekBackward30Icon, SeekBackwardIcon, SeekForward10Icon, SeekForward15Icon, SeekForward30Icon, SeekForwardIcon, SendIcon, SettingsIcon, SettingsMenuIcon, SettingsSwitchIcon, ShareArrowIcon, ShareIcon, ShuffleIcon, ShuffleOnIcon, StopIcon, SubtitlesIcon, SunIcon, TheatreModeExitIcon, TheatreModeIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, TranscriptIcon, TvIcon, UserIcon, VolumeHighIcon, VolumeLowIcon, XMarkIcon };

dist/prod/vidstack.js

 "use client"
 
-import { D as DOMEvent, f as isString, l as listenEvent, A as createReactComponent, u as useStateContext, B as useReactContext, a as useSignal, C as composeRefs, b as useSignalRecord, e as effect, E as useReactScope, s as signal, x as scoped } from './chunks/vidstack-8AXyyPGc.js';
-export { I as appendTriggerEvent, H as findTriggerEvent, F as hasTriggerEvent, K as isKeyboardClick, L as isKeyboardEvent, J as isPointerEvent, G as walkTriggerEventChain } from './chunks/vidstack-8AXyyPGc.js';
-import { G as GroupedLog, d as TextTrackSymbol, P as Primitive, M as MediaPlayerInstance, q as isRemotionProvider, r as MediaProviderInstance, t as mediaState, v as mediaContext, b as TextTrack, w as ToggleButtonInstance, x as PosterInstance, u as useMediaState, y as MediaRemoteControl, z as findActiveCue, A as ThumbnailsLoader, I as IS_SERVER, B as updateSliderPreviewPlacement } from './chunks/vidstack-rVU9ynQ5.js';
-export { V as ARIAKeyShortcuts, a6 as AudioProviderLoader, aH as AudioRadioGroup, a1 as AudioTrackList, aN as CaptionButtonInstance, b9 as CaptionsInstance, aI as CaptionsRadioGroup, aG as ChaptersRadioGroup, ar as ControlsGroup, aM as ControlsGroupInstance, aL as ControlsInstance, am as DefaultAudioLayout, al as DefaultLayout, an as DefaultVideoLayout, aO as FullscreenButtonInstance, K as FullscreenController, ba as GestureInstance, a9 as HLSProviderLoader, J as List, aP as LiveButtonInstance, U as MEDIA_KEY_SHORTCUTS, R as MediaControls, aA as MenuButton, b3 as MenuButtonInstance, b2 as MenuInstance, aB as MenuItem, b5 as MenuItemInstance, aE as MenuItems, b4 as MenuItemsInstance, aC as MenuPortal, b6 as MenuPortalInstance, aQ as MuteButtonInstance, aR as PIPButtonInstance, aS as PlayButtonInstance, a4 as PlayerQueryList, aK as QualityRadioGroup, aF as Radio, b7 as RadioGroupInstance, b8 as RadioInstance, O as ScreenOrientationController, aT as SeekButtonInstance, az as SliderChapters, b1 as SliderChaptersInstance, au as SliderController, S as SliderInstance, ay as SliderPreview, b0 as SliderPreviewInstance, av as SliderThumbnail, aZ as SliderThumbnailInstance, ax as SliderValue, a_ as SliderValueInstance, aw as SliderVideo, a$ as SliderVideoInstance, aJ as SpeedRadioGroup, Z as TextRenderers, a0 as TextTrackList, bb as ThumbnailInstance, bc as TimeInstance, T as TimeRange, aX as TimeSliderInstance, at as TooltipContent, aW as TooltipContentInstance, aU as TooltipInstance, as as TooltipTrigger, aV as TooltipTriggerInstance, a7 as VideoProviderLoader, a5 as VideoQualityList, aa as VimeoProviderLoader, aY as VolumeSliderInstance, a8 as YouTubeProviderLoader, E as canChangeVolume, N as canFullscreen, F as canOrientScreen, o as canPlayHLSNatively, H as canRotateScreen, m as canUsePictureInPicture, n as canUseVideoPresentation, ao as defaultLayoutContext, D as formatSpokenTime, C as formatTime, ap as getDefaultLayoutLang, Y as getTimeRangesEnd, X as getTimeRangesStart, ab as isAudioProvider, a2 as isCueActive, ad as isHLSProvider, ag as isHTMLAudioElement, aj as isHTMLIFrameElement, ai as isHTMLMediaElement, ah as isHTMLVideoElement, _ as isTrackCaptionKind, ac as isVideoProvider, af as isVimeoProvider, ae as isYouTubeProvider, aD as menuPortalContext, a3 as observeActiveTextTrack, $ as parseJSONCaptionsFile, ak as sliderContext, s as sliderState, W as softResetMediaState, aq as useDefaultLayoutContext, bd as useMediaStore } from './chunks/vidstack-rVU9ynQ5.js';
+import { D as DOMEvent, j as isString, l as listenEvent, L as createReactComponent, u as useStateContext, a as useSignal, C as composeRefs, b as useSignalRecord, g as effect, J as useReactScope, s as signal } from './chunks/vidstack-ZNeeDUTQ.js';
+export { Q as appendTriggerEvent, P as findTriggerEvent, N as hasTriggerEvent, F as isKeyboardClick, E as isKeyboardEvent, R as isPointerEvent, O as walkTriggerEventChain } from './chunks/vidstack-ZNeeDUTQ.js';
+import { R as GroupedLog, i as TextTrackSymbol, P as Primitive, a as MediaPlayerInstance, z as isRemotionProvider, U as MediaProviderInstance, V as mediaState, b as TextTrack, W as ToggleButtonInstance, X as PosterInstance, u as useMediaState, Y as ThumbnailsLoader, Z as updateSliderPreviewPlacement } from './chunks/vidstack-FaKLNJoR.js';
+export { a8 as ARIAKeyShortcuts, aU as AUDIO_EXTENSIONS, aV as AUDIO_TYPES, b4 as AirPlayButtonInstance, ak as AudioProviderLoader, aQ as AudioRadioGroup, af as AudioTrackList, a_ as CaptionButtonInstance, K as CaptionsInstance, aR as CaptionsRadioGroup, aP as ChaptersRadioGroup, aA as ControlsGroup, D as ControlsGroupInstance, C as ControlsInstance, a$ as FullscreenButtonInstance, a2 as FullscreenController, bk as GestureInstance, H as GoogleCastButtonInstance, al as HLSProviderLoader, aY as HLS_VIDEO_EXTENSIONS, aZ as HLS_VIDEO_TYPES, a1 as List, b0 as LiveButtonInstance, a6 as LocalMediaStorage, a7 as MEDIA_KEY_SHORTCUTS, a5 as MediaControls, M as MediaRemoteControl, aJ as MenuButton, be as MenuButtonInstance, bd as MenuInstance, aK as MenuItem, bg as MenuItemInstance, aN as MenuItems, bf as MenuItemsInstance, aL as MenuPortal, bh as MenuPortalInstance, b1 as MuteButtonInstance, b2 as PIPButtonInstance, b3 as PlayButtonInstance, aT as QualityRadioGroup, aO as Radio, bi as RadioGroupInstance, bj as RadioInstance, a4 as ScreenOrientationController, b5 as SeekButtonInstance, aI as SliderChapters, bc as SliderChaptersInstance, aD as SliderController, S as SliderInstance, aH as SliderPreview, bb as SliderPreviewInstance, aE as SliderThumbnail, b8 as SliderThumbnailInstance, aG as SliderValue, b9 as SliderValueInstance, aF as SliderVideo, ba as SliderVideoInstance, aS as SpeedRadioGroup, ac as TextRenderers, ae as TextTrackList, bl as ThumbnailInstance, bm as TimeInstance, T as TimeRange, b6 as TimeSliderInstance, aC as TooltipContent, G as TooltipContentInstance, E as TooltipInstance, aB as TooltipTrigger, F as TooltipTriggerInstance, aW as VIDEO_EXTENSIONS, aX as VIDEO_TYPES, am as VideoProviderLoader, aj as VideoQualityList, an as VimeoProviderLoader, b7 as VolumeSliderInstance, ao as YouTubeProviderLoader, _ as canChangeVolume, a3 as canFullscreen, g as canGoogleCastSrc, $ as canOrientScreen, y as canPlayHLSNatively, a0 as canRotateScreen, w as canUsePictureInPicture, x as canUseVideoPresentation, ag as findActiveCue, O as formatSpokenTime, N as formatTime, ab as getTimeRangesEnd, aa as getTimeRangesStart, ap as isAudioProvider, t as isAudioSrc, ah as isCueActive, au as isGoogleCastProvider, ar as isHLSProvider, m as isHLSSrc, av as isHTMLAudioElement, ay as isHTMLIFrameElement, ax as isHTMLMediaElement, aw as isHTMLVideoElement, o as isMediaStream, A as isTrackCaptionKind, aq as isVideoProvider, v as isVideoSrc, at as isVimeoProvider, as as isYouTubeProvider, B as mediaContext, aM as menuPortalContext, ad as parseJSONCaptionsFile, az as sliderContext, s as sliderState, a9 as softResetMediaState, bn as useMediaStore, r as usePlyrLayoutClasses, J as watchActiveTextTrack, ai as watchCueTextChange } from './chunks/vidstack-FaKLNJoR.js';
 import * as React from 'react';
-export { I as Icon } from './chunks/vidstack-WDwMHJsO.js';
-export { C as CaptionButton, e as Captions, d as ChapterTitle, c as Controls, F as FullscreenButton, G as Gesture, L as LiveButton, m as Menu, M as MuteButton, a as PIPButton, P as PlayButton, r as RadioGroup, S as SeekButton, s as Slider, g as Spinner, f as Thumbnail, T as Time, b as TimeSlider, t as Tooltip, v as VolumeSlider, i as useActiveTextCues, j as useActiveTextTrack, k as useAudioOptions, l as useCaptionOptions, n as useChapterOptions, p as usePlaybackRateOptions, u as usePlayerQuery, h as useTextCues, o as useVideoQualityOptions } from './chunks/vidstack-tByH5fGk.js';
-export { u as useSliderState, a as useSliderStore } from './chunks/vidstack-E0Z4F7im.js';
+import { u as useMediaContext } from './chunks/vidstack-ODtybqq9.js';
+export { A as AirPlayButton, C as CaptionButton, F as FullscreenButton, G as Gesture, L as LiveButton, E as Menu, M as MuteButton, b as PIPButton, P as PlayButton, D as RadioGroup, S as SeekButton, x as Slider, H as Thumbnail, e as Time, z as TimeSlider, y as VolumeSlider, h as useAudioOptions, l as useCaptionOptions, a as useMediaPlayer, k as usePlaybackRateOptions, m as useVideoQualityOptions } from './chunks/vidstack-ODtybqq9.js';
+import { I as Icon } from './chunks/vidstack-g-zwyrW6.js';
+import { l as createSignal, m as useScoped } from './chunks/vidstack-IaZbfosI.js';
+export { d as Captions, b as ChapterTitle, n as Controls, G as GoogleCastButton, s as Spinner, a as Title, t as Tooltip, p as useActiveTextCues, q as useActiveTextTrack, u as useChapterOptions, g as useChapterTitle, o as useTextCues } from './chunks/vidstack-IaZbfosI.js';
+export { u as useMediaRemote } from './chunks/vidstack-mkgUGHs2.js';
+export { u as useSliderState, a as useSliderStore } from './chunks/vidstack-_VTH4mML.js';
 import 'react-dom';
@@ -115,5 +119,5 @@
   "onAudioTracksChange",
-  "onAutoplay",
-  "onAutoplayChange",
-  "onAutoplayFail",
+  "onAutoPlay",
+  "onAutoPlayChange",
+  "onAutoPlayFail",
   "onCanLoad",
@@ -145,3 +149,3 @@ "onCanPlay",
   "onPlaying",
-  "onPlaysinlineChange",
+  "onPlaysInlineChange",
   "onPosterChange",
@@ -176,3 +180,4 @@ "onProgress",
   events: playerCallbacks,
-  eventsRegex: /^on(Hls|Media)/
+  eventsRegex: /^onHls/,
+  domEventsRegex: /^onMedia/
 });
@@ -206,10 +211,29 @@ const MediaPlayer = React.forwardRef(
 MediaProvider.displayName = "MediaProvider";
-const YOUTUBE_TYPE = { src: "", type: "video/youtube" }, VIMEO_TYPE = { src: "", type: "video/vimeo" }, REMOTION_TYPE = { src: "", type: "video/remotion" };
 function MediaOutlet({ provider, ...props }) {
-  const { controls, crossorigin, poster } = useStateContext(mediaState), { loader } = provider.$state, {
+  const { controls, crossOrigin, poster, remotePlaybackInfo } = useStateContext(mediaState), { loader } = provider.$state, {
     $iosControls: $$iosControls,
     $provider: $$provider,
     $providerSetup: $$providerSetup
-  } = useReactContext(mediaContext), $controls = useSignal(controls), $iosControls = useSignal($$iosControls), $nativeControls = $controls || $iosControls, $crossorigin = useSignal(crossorigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $mediaType = $loader?.mediaType(), isYouTubeEmbed = $loader?.canPlay(YOUTUBE_TYPE), isVimeoEmbed = $loader?.canPlay(VIMEO_TYPE), isEmbed = isYouTubeEmbed || isVimeoEmbed;
-  if ($loader?.canPlay(REMOTION_TYPE)) {
+  } = useMediaContext(), $controls = useSignal(controls), $iosControls = useSignal($$iosControls), $nativeControls = $controls || $iosControls, $crossOrigin = useSignal(crossOrigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $remoteInfo = useSignal(remotePlaybackInfo), $mediaType = $loader?.mediaType(), isYouTubeEmbed = $loader?.name === "youtube", isVimeoEmbed = $loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isRemotion = $loader?.name === "remotion", isGoogleCast = $loader?.name === "google-cast", [googleCastIconPaths, setGoogleCastIconPaths] = React.useState("");
+  React.useEffect(() => {
+    if (!isGoogleCast || googleCastIconPaths)
+      return;
+    import('./chunks/vidstack-Fm3lXEFm.js').then((mod) => {
+      setGoogleCastIconPaths(mod.default);
+    });
+  }, [isGoogleCast]);
+  if (isGoogleCast) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "vds-google-cast",
+        ref: (el) => {
+          provider.load(el);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { paths: googleCastIconPaths }),
+      $remoteInfo?.deviceName ? /* @__PURE__ */ React.createElement("span", { className: "vds-google-cast-info" }, "Google Cast on", " ", /* @__PURE__ */ React.createElement("span", { className: "vds-google-cast-device-name" }, $remoteInfo.deviceName)) : null
+    );
+  }
+  if (isRemotion) {
     return /* @__PURE__ */ React.createElement("div", { "data-remotion-canvas": true }, /* @__PURE__ */ React.createElement(
@@ -232,2 +256,3 @@ "div",
       suppressHydrationWarning: true,
+      "aria-hidden": "true",
       "data-no-controls": !$nativeControls ? "" : void 0,
@@ -241,4 +266,4 @@ ref(el) {
     ...props,
-    controls: $nativeControls ? "" : null,
-    crossOrigin: typeof $crossorigin === "boolean" ? "" : $crossorigin,
+    controls: $nativeControls ? "true" : null,
+    crossOrigin: typeof $crossOrigin === "boolean" ? "" : $crossOrigin,
     poster: $mediaType === "video" && $nativeControls && $poster ? $poster : null,
@@ -256,3 +281,3 @@ preload: "none",
 function createTextTrack(init) {
-  const media = useReactContext(mediaContext), track = React.useMemo(() => new TextTrack(init), Object.values(init));
+  const media = useMediaContext(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
   React.useEffect(() => {
@@ -288,3 +313,3 @@ media.textTracks.add(track);
   ({ instance, children, ...props }, forwardRef) => {
-    const { crossorigin } = useStateContext(mediaState), { src, alt, img } = instance.$state, $crossorigin = useSignal(crossorigin), $src = useSignal(src), $alt = useSignal(alt);
+    const { src, img, alt, crossOrigin } = instance.$state, $src = useSignal(src), $alt = useSignal(alt), $crossOrigin = useSignal(crossOrigin);
     return /* @__PURE__ */ React.createElement(
@@ -294,5 +319,5 @@ Primitive.img,
         ...props,
-        src: $src || void 0,
+        src: $src || "",
         alt: $alt || void 0,
-        crossOrigin: /ytimg\.com|vimeo/.test($src || "") ? void 0 : $crossorigin,
+        crossOrigin: $crossOrigin || void 0,
         ref: composeRefs(img.set, forwardRef)
@@ -373,9 +398,4 @@ },
 
-function useMediaPlayer() {
-  const context = useReactContext(mediaContext);
-  return context?.player || null;
-}
-
 function useMediaProvider() {
-  const [provider, setProvider] = React.useState(null), context = useReactContext(mediaContext);
+  const [provider, setProvider] = React.useState(null), context = useMediaContext();
   React.useEffect(() => {
@@ -391,61 +411,25 @@ if (!context)
 
-function useMediaRemote(target) {
-  const media = useReactContext(mediaContext), remote = React.useRef();
-  if (!remote.current) {
-    remote.current = new MediaRemoteControl();
-  }
+function useThumbnails(src, crossOrigin = null) {
+  useReactScope(); const $src = createSignal(src), $crossOrigin = createSignal(crossOrigin), loader = useScoped(() => ThumbnailsLoader.create($src, $crossOrigin));
   React.useEffect(() => {
-    const ref = target && "current" in target ? target.current : target, isPlayerRef = ref instanceof MediaPlayerInstance, player = isPlayerRef ? ref : media?.player;
-    remote.current.setPlayer(player ?? null);
-    remote.current.setTarget(ref ?? null);
-  }, [media, target && "current" in target ? target.current : target]);
-  return remote.current;
-}
-
-function useThumbnails(src) {
-  const scope = useReactScope(), $src = React.useMemo(() => signal(src), []), loader = React.useMemo(() => scoped(() => ThumbnailsLoader.create($src), scope), []), $cues = useSignal(loader.$cues), data = React.useMemo(() => {
-    const items = [], baseURL = /^https?:/.test(src) || IS_SERVER ? src : location.href;
-    for (const cue of $cues) {
-      const [url, dataText = ""] = (cue.text || "").split("#"), data2 = resolveThumbnailData(dataText);
-      items.push({
-        url: resolveThumbnailSrc(url, baseURL),
-        cue,
-        x: data2.x ?? -1,
-        y: data2.y ?? -1,
-        width: data2.width ?? -1,
-        height: data2.height ?? -1
-      });
-    }
-    return items;
-  }, [$cues]);
-  React.useEffect(() => {
     $src.set(src);
   }, [src]);
-  return data;
+  React.useEffect(() => {
+    $crossOrigin.set(crossOrigin);
+  }, [crossOrigin]);
+  return useSignal(loader.$images);
 }
 function useActiveThumbnail(thumbnails, time) {
-  const cues = React.useMemo(() => thumbnails.map((t) => t.cue), [thumbnails]);
   return React.useMemo(() => {
-    const cue = findActiveCue(cues, time);
-    return thumbnails.find((t) => t.cue === cue) || null;
-  }, [thumbnails, cues, time]);
+    let activeIndex = -1;
+    for (let i = thumbnails.length - 1; i >= 0; i--) {
+      const image = thumbnails[i];
+      if (time >= image.startTime && (!image.endTime || time < image.endTime)) {
+        activeIndex = i;
+        break;
+      }
+    }
+    return thumbnails[activeIndex] || null;
+  }, [thumbnails, time]);
 }
-function resolveThumbnailSrc(src, baseURL) {
-  return /^https?:/.test(src) ? src : new URL(src, baseURL).href;
-}
-const propNames = {
-  x: "x",
-  y: "y",
-  w: "width",
-  h: "height"
-};
-function resolveThumbnailData(data) {
-  const [props, values] = data.split("="), resolvedData = {}, dataValues = values?.split(",");
-  if (!props || !values)
-    return {};
-  for (let i = 0; i < props.length; i++) {
-    resolvedData[propNames[props[i]]] = +dataValues[i];
-  }
-  return resolvedData;
-}
 
@@ -542,2 +526,2 @@ function useSliderPreview({
 
-export { caption as Caption, LibASSTextRenderer, Logger, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, MediaRemoteControl, Poster, PosterInstance, TextTrack, ThumbnailsLoader, ToggleButton, ToggleButtonInstance, Track, createTextTrack, findActiveCue, mediaContext, mediaState, updateSliderPreviewPlacement, useActiveThumbnail, useMediaPlayer, useMediaProvider, useMediaRemote, useMediaState, useSliderPreview, useState, useStore, useThumbnails };
+export { caption as Caption, Icon, LibASSTextRenderer, Logger, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, TextTrack, ThumbnailsLoader, ToggleButton, ToggleButtonInstance, Track, createTextTrack, mediaState, updateSliderPreviewPlacement, useActiveThumbnail, useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };

dist/types/vidstack-framework.d.ts

@@ -68,2 +68,3 @@ import * as React from 'react';
 type Maybe<T> = T | void | null | undefined | false;
+type MaybeStopEffect = Maybe<StopEffect>;
 type ContextRecord = Record<string | symbol, unknown>;
@@ -1177,2 +1178,2 @@ interface ErrorHandler<T = Error> {
 
-export { type AnyRecord as A, type Context as C, DOMEvent as D, EventsTarget as E, type InferEventDetail as I, type ReadSignal as R, State as S, ViewController as V, type WriteSignal as W, type DeferredPromise as a, type Store as b, type Scope as c, type ReadSignalRecord as d, type Dispose as e, Component as f, type StateContext as g, type ReactElementProps as h, type ReactProps as i, hasTriggerEvent as j, findTriggerEvent as k, appendTriggerEvent as l, isPointerEvent as m, isKeyboardClick as n, isKeyboardEvent as o, type DisposalBin as p, walkTriggerEventChain as w };
+export { type AnyRecord as A, type Context as C, DOMEvent as D, EventsTarget as E, type InferEventDetail as I, type MaybeStopEffect as M, type ReadSignal as R, State as S, ViewController as V, type WriteSignal as W, type DeferredPromise as a, type Store as b, type ReadSignalRecord as c, type Scope as d, type Dispose as e, Component as f, type StateContext as g, type ReactElementProps as h, type ReactProps as i, hasTriggerEvent as j, findTriggerEvent as k, appendTriggerEvent as l, isPointerEvent as m, isKeyboardClick as n, isKeyboardEvent as o, type DisposalBin as p, walkTriggerEventChain as w };

icons.d.ts

@@ -1,7 +0,7 @@
-export { bw as AddIcon, bt as AddNoteIcon, bu as AddPlaylistIcon, bv as AddUserIcon, bx as AirplayIcon, bz as ArrowCollapseIcon, by as ArrowCollapseInIcon, bA as ArrowDownIcon, bC as ArrowExpandIcon, bB as ArrowExpandOutIcon, bD as ArrowLeftIcon, bE as ArrowRightIcon, bF as ArrowUpIcon, bG as BookmarkIcon, bH as CameraIcon, bI as ChaptersIcon, bJ as ChatCollapseIcon, bK as ChatIcon, bL as ChevronDownIcon, bM as ChevronLeftIcon, bN as ChevronRightIcon, bO as ChevronUpIcon, bP as ChromecastIcon, bQ as ClipIcon, bS as ClosedCaptionsIcon, bR as ClosedCaptionsOnIcon, bT as CommentIcon, bU as ComputerIcon, bV as DeviceIcon, bW as DownloadIcon, bX as EpisodesIcon, bY as EyeIcon, bZ as FastBackwardIcon, b_ as FastForwardIcon, b$ as FlagIcon, c0 as FullscreenArrowExitIcon, c1 as FullscreenArrowIcon, c2 as FullscreenExitIcon, c3 as FullscreenIcon, c4 as HeartIcon, c5 as InfoIcon, c6 as LanguageIcon, c7 as LinkIcon, c8 as LockClosedIcon, c9 as LockOpenIcon, ca as MenuHorizontalIcon, cb as MenuVerticalIcon, cc as MicrophoneIcon, cd as MobileIcon, ce as MoonIcon, cg as MusicIcon, cf as MusicOffIcon, ch as MuteIcon, ci as NextIcon, cj as NotificationIcon, ck as OdometerIcon, cl as PauseIcon, cm as PictureInPictureExitIcon, cn as PictureInPictureIcon, co as PlayIcon, cp as PlaybackSpeedCircleIcon, cq as PlaylistIcon, cr as PreviousIcon, cs as QuestionMarkIcon, ct as QueueListIcon, cv as RadioButtonIcon, cu as RadioButtonSelectedIcon, cz as RepeatIcon, cw as RepeatOnIcon, cy as RepeatSquareIcon, cx as RepeatSquareOnIcon, cA as ReplayIcon, cB as RotateIcon, cC as SearchIcon, cD as SeekBackward10Icon, cE as SeekBackward15Icon, cF as SeekBackward30Icon, cG as SeekBackwardIcon, cH as SeekForward10Icon, cI as SeekForward15Icon, cJ as SeekForward30Icon, cK as SeekForwardIcon, cL as SendIcon, cO as SettingsIcon, cM as SettingsMenuIcon, cN as SettingsSwitchIcon, cP as ShareArrowIcon, cQ as ShareIcon, cS as ShuffleIcon, cR as ShuffleOnIcon, cT as StopIcon, cU as SubtitlesIcon, cV as SunIcon, cW as TheatreModeExitIcon, cX as TheatreModeIcon, cY as ThumbsDownIcon, cZ as ThumbsUpIcon, c_ as TimerIcon, c$ as TranscriptIcon, d0 as TvIcon, d1 as UserIcon, d2 as VolumeHighIcon, d3 as VolumeLowIcon, d4 as XMarkIcon } from './dist/types/vidstack-react.js';
-import './dist/types/vidstack.js';
+export { cy as AddIcon, cv as AddNoteIcon, cw as AddPlaylistIcon, cx as AddUserIcon, cz as AirPlayIcon, cB as ArrowCollapseIcon, cA as ArrowCollapseInIcon, cC as ArrowDownIcon, cE as ArrowExpandIcon, cD as ArrowExpandOutIcon, cF as ArrowLeftIcon, cG as ArrowRightIcon, cH as ArrowUpIcon, cI as BookmarkIcon, cJ as CameraIcon, cK as ChaptersIcon, cL as ChatCollapseIcon, cM as ChatIcon, cN as ChevronDownIcon, cO as ChevronLeftIcon, cP as ChevronRightIcon, cQ as ChevronUpIcon, cR as ChromecastIcon, cS as ClipIcon, cU as ClosedCaptionsIcon, cT as ClosedCaptionsOnIcon, cV as CommentIcon, cW as ComputerIcon, cX as DeviceIcon, cY as DownloadIcon, cZ as EpisodesIcon, c_ as EyeIcon, c$ as FastBackwardIcon, d0 as FastForwardIcon, d1 as FlagIcon, d2 as FullscreenArrowExitIcon, d3 as FullscreenArrowIcon, d4 as FullscreenExitIcon, d5 as FullscreenIcon, d6 as HeartIcon, d7 as InfoIcon, d8 as LanguageIcon, d9 as LinkIcon, da as LockClosedIcon, db as LockOpenIcon, dc as MenuHorizontalIcon, dd as MenuVerticalIcon, de as MicrophoneIcon, df as MobileIcon, dg as MoonIcon, di as MusicIcon, dh as MusicOffIcon, dj as MuteIcon, dk as NextIcon, dl as NotificationIcon, dm as OdometerIcon, dn as PauseIcon, dp as PictureInPictureExitIcon, dq as PictureInPictureIcon, dr as PlayIcon, ds as PlaybackSpeedCircleIcon, dt as PlaylistIcon, du as PreviousIcon, dv as QuestionMarkIcon, dw as QueueListIcon, dy as RadioButtonIcon, dx as RadioButtonSelectedIcon, dC as RepeatIcon, dz as RepeatOnIcon, dB as RepeatSquareIcon, dA as RepeatSquareOnIcon, dD as ReplayIcon, dE as RotateIcon, dF as SearchIcon, dG as SeekBackward10Icon, dH as SeekBackward15Icon, dI as SeekBackward30Icon, dJ as SeekBackwardIcon, dK as SeekForward10Icon, dL as SeekForward15Icon, dM as SeekForward30Icon, dN as SeekForwardIcon, dO as SendIcon, dR as SettingsIcon, dP as SettingsMenuIcon, dQ as SettingsSwitchIcon, dS as ShareArrowIcon, dT as ShareIcon, dV as ShuffleIcon, dU as ShuffleOnIcon, dW as StopIcon, dX as SubtitlesIcon, dY as SunIcon, dZ as TheatreModeExitIcon, d_ as TheatreModeIcon, d$ as ThumbsDownIcon, e0 as ThumbsUpIcon, e1 as TimerIcon, e2 as TranscriptIcon, e3 as TvIcon, e4 as UserIcon, e5 as VolumeHighIcon, e6 as VolumeLowIcon, e7 as XMarkIcon } from './dist/types/vidstack-react.js';
 import './dist/types/vidstack-framework.js';
 import 'react';
+import './dist/types/vidstack.js';
 import 'media-captions';
 import 'hls.js';
 import 'remotion';

index.d.ts

@@ -1,4 +0,7 @@
-export { as as ARIAKeyShortcuts, d1 as AnyMediaProvider, d4 as AudioProvider, d9 as AudioProviderLoader, fl as AudioRadioGroup, fp as AudioRadioGroupChangeEvent, fn as AudioRadioGroupEvents, fm as AudioRadioGroupProps, fo as AudioRadioOption, N as AudioTrack, cH as AudioTrackAddEvent, cJ as AudioTrackChangeEvent, cE as AudioTrackList, cG as AudioTrackListEvent, cF as AudioTrackListEvents, cI as AudioTrackRemoveEvent, fq as CaptionsRadioGroup, fu as CaptionsRadioGroupChangeEvent, fs as CaptionsRadioGroupEvents, fr as CaptionsRadioGroupProps, ft as CaptionsRadioOption, cK as ChangeAudioTrackEventDetail, fh as ChapterRadioGroupProps, fg as ChaptersRadioGroup, fj as ChaptersRadioGroupChangeEvent, fi as ChaptersRadioGroupEvents, fk as ChaptersRadioOption, eD as ControlsChangeEvent, eC as ControlsEvents, b as ControlsGroup, et as DefaultAudioLayout, es as DefaultLayout, ex as DefaultLayoutContext, ev as DefaultLayoutProps, ew as DefaultLayoutTranslations, eu as DefaultVideoLayout, c7 as FindMediaPlayerEvent, c6 as FindMediaPlayerEventDetail, a9 as FullscreenAdapter, ab as FullscreenChangeEvent, a7 as FullscreenController, ac as FullscreenErrorEvent, aa as FullscreenEvents, fF as GestureAction, fH as GestureEvent, fE as GestureEventType, fG as GestureEvents, fJ as GestureTriggerEvent, fI as GestureWillTriggerEvent, dO as HLSAudioTrackLoadedEvent, dN as HLSAudioTrackLoadingEvent, dM as HLSAudioTrackSwitchedEvent, dL as HLSAudioTrackSwitchingEvent, dK as HLSAudioTracksUpdatedEvent, ec as HLSBackBufferReachedEvent, dw as HLSBufferAppendedEvent, dv as HLSBufferAppendingEvent, dt as HLSBufferCodecsEvent, du as HLSBufferCreatedEvent, dx as HLSBufferEosEvent, dz as HLSBufferFlushedEvent, dy as HLSBufferFlushingEvent, ds as HLSBufferResetEvent, ed as HLSConstructor, ee as HLSConstructorLoader, dV as HLSCuesParsedEvent, e9 as HLSDestroyingEvent, e8 as HLSErrorEvent, e6 as HLSFpsDropEvent, e7 as HLSFpsDropLevelCappingEvent, e4 as HLSFragBufferedDataEvent, e5 as HLSFragChangedEvent, d$ as HLSFragDecryptedEvent, dZ as HLSFragLoadEmergencyAbortedEvent, d_ as HLSFragLoadedEvent, dY as HLSFragLoadingEvent, e3 as HLSFragParsedEvent, e0 as HLSFragParsingInitSegmentEvent, e2 as HLSFragParsingMetadataEvent, e1 as HLSFragParsingUserdataEvent, dX as HLSInitPtsFoundEvent, eg as HLSInstanceCallback, dl as HLSInstanceEvent, eb as HLSKeyLoadedEvent, ea as HLSKeyLoadingEvent, dG as HLSLevelLoadedEvent, dF as HLSLevelLoadingEvent, dI as HLSLevelPtsUpdatedEvent, dE as HLSLevelSwitchedEvent, dD as HLSLevelSwitchingEvent, dH as HLSLevelUpdatedEvent, dJ as HLSLevelsUpdatedEvent, dk as HLSLibLoadErrorEvent, di as HLSLibLoadStartEvent, dj as HLSLibLoadedEvent, ef as HLSLibrary, dB as HLSManifestLoadedEvent, dA as HLSManifestLoadingEvent, dC as HLSManifestParsedEvent, dp as HLSMediaAttachedEvent, dn as HLSMediaAttachingEvent, dr as HLSMediaDetachedEvent, dq as HLSMediaDetachingEvent, dh as HLSMediaEvent, dW as HLSNonNativeTextTracksFoundEvent, d6 as HLSProvider, dg as HLSProviderEvents, dc as HLSProviderLoader, dU as HLSSubtitleFragProcessedEvent, dT as HLSSubtitleTrackLoadedEvent, dS as HLSSubtitleTrackLoadingEvent, dR as HLSSubtitleTrackSwitchEvent, dQ as HLSSubtitleTracksClearedEvent, dP as HLSSubtitleTracksUpdatedEvent, dm as HLSUnsupportedEvent, cl as LibASSConfig, cg as LibASSConstructor, ck as LibASSErrorEvent, ch as LibASSInstance, ci as LibASSInstanceEvents, cf as LibASSModuleLoader, cj as LibASSReadyEvent, ce as LibASSTextRenderer, a2 as List, a4 as ListAddEvent, a3 as ListEvents, a1 as ListItem, a6 as ListReadonlyChangeEvent, a5 as ListRemoveEvent, af as LogEvent, ae as LogEventDetail, Q as Logger, ad as LoggerEvents, ar as MEDIA_KEY_SHORTCUTS, av as MediaAbortEvent, ax as MediaAudioTrackChangeEvent, bA as MediaAudioTrackChangeRequestEvent, aw as MediaAudioTracksChangeEvent, ay as MediaAutoplayChangeEvent, aC as MediaAutoplayEvent, aB as MediaAutoplayEventDetail, aA as MediaAutoplayFailEvent, az as MediaAutoplayFailEventDetail, aD as MediaCanLoadEvent, aF as MediaCanPlayDetail, aE as MediaCanPlayEvent, aG as MediaCanPlayThroughEvent, am as MediaContext, aq as MediaControls, aH as MediaControlsChangeEvent, aK as MediaDestroyEvent, aL as MediaDurationChangeEvent, aM as MediaEmptiedEvent, aN as MediaEndEvent, aO as MediaEndedEvent, bB as MediaEnterFullscreenRequestEvent, bD as MediaEnterPIPRequestEvent, bY as MediaErrorCode, bZ as MediaErrorDetail, aP as MediaErrorEvent, au as MediaEvent, at as MediaEvents, bC as MediaExitFullscreenRequestEvent, bE as MediaExitPIPRequestEvent, d3 as MediaFullscreenAdapter, aQ as MediaFullscreenChangeEvent, aR as MediaFullscreenErrorEvent, bz as MediaFullscreenRequestTarget, bQ as MediaHidePosterRequestEvent, c$ as MediaKeyShortcut, c_ as MediaKeyShortcuts, cZ as MediaKeyTarget, d0 as MediaKeysCallback, aV as MediaLiveChangeEvent, aW as MediaLiveEdgeChangeEvent, bF as MediaLiveEdgeRequestEvent, aX as MediaLoadStartEvent, aS as MediaLoadedDataEvent, aT as MediaLoadedMetadataEvent, bX as MediaLoadingStrategy, aU as MediaLoopChangeEvent, bR as MediaLoopRequestEvent, bx as MediaMuteRequestEvent, bi as MediaOrientationChangeEvent, bS as MediaOrientationLockRequestEvent, bT as MediaOrientationUnlockRequestEvent, b8 as MediaPIPChangeEvent, b9 as MediaPIPErrorEvent, bO as MediaPauseControlsRequestEvent, aZ as MediaPauseEvent, bJ as MediaPauseRequestEvent, a_ as MediaPlayEvent, a$ as MediaPlayFailEvent, bG as MediaPlayRequestEvent, c5 as MediaPlayerConnectEvent, ap as MediaPlayerEvents, c0 as MediaPlayerState, b0 as MediaPlayingEvent, b1 as MediaPlaysinlineChangeEvent, b2 as MediaPosterChangeEvent, b4 as MediaProgressEvent, b3 as MediaProgressEventDetail, B as MediaProviderAdapter, b6 as MediaProviderChangeEvent, A as MediaProviderLoader, b5 as MediaProviderLoaderChangeEvent, b7 as MediaProviderSetupEvent, eB as MediaProviderState, ba as MediaQualitiesChangeEvent, bb as MediaQualityChangeEvent, bH as MediaQualityChangeRequestEvent, aI as MediaRateChangeEvent, bI as MediaRateChangeRequestEvent, D as MediaRemoteControl, bj as MediaReplayEvent, bu as MediaRequestEvents, b_ as MediaResource, bN as MediaResumeControlsRequestEvent, bK as MediaSeekRequestEvent, bc as MediaSeekedEvent, bd as MediaSeekingEvent, bL as MediaSeekingRequestEvent, d2 as MediaSetupContext, bP as MediaShowPosterRequestEvent, aJ as MediaSourceChangeEvent, be as MediaSourcesChangeEvent, b$ as MediaSrc, bf as MediaStalledEvent, bv as MediaStartLoadingRequestEvent, bg as MediaStartedEvent, E as MediaState, ao as MediaStateAccessors, c3 as MediaStore, bV as MediaStreamType, bn as MediaStreamTypeChangeEvent, bh as MediaSuspendEvent, bp as MediaTextTrackChangeEvent, bw as MediaTextTrackChangeRequestEvent, bo as MediaTextTracksChangeEvent, bl as MediaTimeUpdateEvent, bk as MediaTimeUpdateEventDetail, bm as MediaTitleChangeEvent, bU as MediaType, aY as MediaTypeChangeEvent, by as MediaUnmuteRequestEvent, c8 as MediaUserEvents, bW as MediaViewType, bq as MediaViewTypeChangeEvent, br as MediaVolumeChange, bs as MediaVolumeChangeEvent, bM as MediaVolumeChangeRequestEvent, bt as MediaWaitingEvent, q as MenuButton, f3 as MenuButtonEvents, f4 as MenuButtonSelectEvent, f2 as MenuCloseEvent, f0 as MenuEvents, s as MenuItem, r as MenuItems, f1 as MenuOpenEvent, f7 as MenuPlacement, f9 as MenuPlacementAlign, f8 as MenuPlacementSide, t as MenuPortal, f5 as MenuPortalContext, cO as PlayerQueryList, cQ as PlayerQueryListChangeEvent, cP as PlayerQueryListEvents, c4 as PlayerStore, fK as PosterState, fz as QualityRadioGroup, fD as QualityRadioGroupChangeEvent, fC as QualityRadioGroupEvents, fA as QualityRadioGroupProps, fB as QualityRadioOption, u as Radio, fd as RadioChangeEvent, fc as RadioEvents, fb as RadioGroupChangeEvent, fa as RadioGroupEvents, ff as RadioOption, fe as RadioSelectEvent, aj as ScreenOrientationChangeEvent, ai as ScreenOrientationChangeEventDetail, ag as ScreenOrientationController, ah as ScreenOrientationEvents, al as ScreenOrientationLockType, ak as ScreenOrientationType, eO as SliderCSSVars, o as SliderChapters, e$ as SliderChaptersCSSVars, e_ as SliderChaptersProps, er as SliderContext, eS as SliderController, eT as SliderControllerProps, eR as SliderDelegate, eK as SliderDragEndEvent, eJ as SliderDragStartEvent, eM as SliderDragValueChangeEvent, eI as SliderEvent, eH as SliderEvents, I as SliderOrientation, eN as SliderPointerValueChangeEvent, n as SliderPreview, H as SliderState, eQ as SliderStore, k as SliderThumbnail, l as SliderValue, eL as SliderValueChangeEvent, m as SliderVideo, eW as SliderVideoCanPlayEvent, eX as SliderVideoErrorEvent, eV as SliderVideoEvents, eU as SliderVideoState, fv as SpeedRadioGroup, fy as SpeedRadioGroupChangeEvent, fx as SpeedRadioGroupEvents, fw as SpeedRadioGroupProps, cd as TextRenderer, cc as TextRenderers, J as TextTrack, cs as TextTrackAddCueEvent, cB as TextTrackAddEvent, cu as TextTrackCueChangeEvent, cr as TextTrackErrorEvent, co as TextTrackEvent, cn as TextTrackEvents, K as TextTrackInit, cy as TextTrackList, cA as TextTrackListEvent, cz as TextTrackListEvents, cD as TextTrackListModeChangeEvent, cq as TextTrackLoadEvent, cp as TextTrackLoadStartEvent, cv as TextTrackModeChangeEvent, cm as TextTrackReadyState, ct as TextTrackRemoveCueEvent, cC as TextTrackRemoveEvent, fN as ThumbnailCoords, fM as ThumbnailState, fO as ThumbnailsLoader, c9 as TimeRange, eZ as TimeSliderCSSVars, fL as TimeState, h as TooltipContent, eE as TooltipPlacement, eG as TooltipPlacementAlign, eF as TooltipPlacementSide, g as TooltipTrigger, df as VideoPresentationChangeEvent, de as VideoPresentationEvents, d5 as VideoProvider, da as VideoProviderLoader, O as VideoQuality, cU as VideoQualityAddEvent, cY as VideoQualityAutoChangeEvent, cW as VideoQualityChangeEvent, cX as VideoQualityChangeEventDetail, cR as VideoQualityList, cT as VideoQualityListEvent, cS as VideoQualityListEvents, cV as VideoQualityRemoveEvent, d8 as VimeoProvider, dd as VimeoProviderLoader, d7 as YouTubeProvider, db as YouTubeProviderLoader, X as canChangeVolume, a8 as canFullscreen, Y as canOrientScreen, Z as canPlayHLSNatively, a0 as canRotateScreen, _ as canUsePictureInPicture, $ as canUseVideoPresentation, ey as defaultLayoutContext, cL as findActiveCue, W as formatSpokenTime, U as formatTime, ez as getDefaultLayoutLang, cb as getTimeRangesEnd, ca as getTimeRangesStart, eh as isAudioProvider, cM as isCueActive, ej as isHLSProvider, em as isHTMLAudioElement, ep as isHTMLIFrameElement, eo as isHTMLMediaElement, en as isHTMLVideoElement, cw as isTrackCaptionKind, ei as isVideoProvider, el as isVimeoProvider, ek as isYouTubeProvider, an as mediaContext, c1 as mediaState, f6 as menuPortalContext, cN as observeActiveTextTrack, cx as parseJSONCaptionsFile, eq as sliderContext, eP as sliderState, c2 as softResetMediaState, eY as updateSliderPreviewPlacement, eA as useDefaultLayoutContext } from './dist/types/vidstack.js';
+/// <reference path="./dom.d.ts" />
+/// <reference path="./google-cast.d.ts" />
+
+export { aK as ARIAKeyShortcuts, gv as AUDIO_EXTENSIONS, gw as AUDIO_TYPES, f4 as AirPlayButtonEvents, dt as AnyMediaProvider, dB as AudioProvider, dv as AudioProviderLoader, fY as AudioRadioGroup, g0 as AudioRadioGroupChangeEvent, f_ as AudioRadioGroupEvents, fZ as AudioRadioGroupProps, f$ as AudioRadioOption, Z as AudioTrack, d8 as AudioTrackAddEvent, da as AudioTrackChangeEvent, d5 as AudioTrackList, d7 as AudioTrackListEvent, d6 as AudioTrackListEvents, d9 as AudioTrackRemoveEvent, f7 as CaptionButtonEvents, g1 as CaptionsRadioGroup, g5 as CaptionsRadioGroupChangeEvent, g3 as CaptionsRadioGroupEvents, g2 as CaptionsRadioGroupProps, g4 as CaptionsRadioOption, db as ChangeAudioTrackEventDetail, fU as ChapterRadioGroupProps, fT as ChaptersRadioGroup, fW as ChaptersRadioGroupChangeEvent, fV as ChaptersRadioGroupEvents, fX as ChaptersRadioOption, f1 as ControlsChangeEvent, f0 as ControlsEvents, b as ControlsGroup, a2 as DefaultLayoutTranslations, a3 as DefaultLayoutWord, cy as FindMediaPlayerEvent, cx as FindMediaPlayerEventDetail, aq as FullscreenAdapter, f8 as FullscreenButtonEvents, as as FullscreenChangeEvent, ao as FullscreenController, at as FullscreenErrorEvent, ar as FullscreenEvents, gg as GestureAction, gi as GestureEvent, gf as GestureEventType, gh as GestureEvents, gk as GestureTriggerEvent, gj as GestureWillTriggerEvent, f5 as GoogleCastButtonEvents, dS as GoogleCastEvent, dR as GoogleCastEvents, dT as GoogleCastLoadStartEvent, dU as GoogleCastLoadedEvent, dw as GoogleCastLoader, dV as GoogleCastPromptEvent, dC as GoogleCastProvider, er as HLSAudioTrackLoadedEvent, eq as HLSAudioTrackLoadingEvent, ep as HLSAudioTrackSwitchedEvent, eo as HLSAudioTrackSwitchingEvent, en as HLSAudioTracksUpdatedEvent, eR as HLSBackBufferReachedEvent, e9 as HLSBufferAppendedEvent, e8 as HLSBufferAppendingEvent, e6 as HLSBufferCodecsEvent, e7 as HLSBufferCreatedEvent, ea as HLSBufferEosEvent, ec as HLSBufferFlushedEvent, eb as HLSBufferFlushingEvent, e5 as HLSBufferResetEvent, eS as HLSConstructor, eT as HLSConstructorLoader, ey as HLSCuesParsedEvent, eO as HLSDestroyingEvent, eN as HLSErrorEvent, eL as HLSFpsDropEvent, eM as HLSFpsDropLevelCappingEvent, eJ as HLSFragBufferedDataEvent, eK as HLSFragChangedEvent, eE as HLSFragDecryptedEvent, eC as HLSFragLoadEmergencyAbortedEvent, eD as HLSFragLoadedEvent, eB as HLSFragLoadingEvent, eI as HLSFragParsedEvent, eF as HLSFragParsingInitSegmentEvent, eH as HLSFragParsingMetadataEvent, eG as HLSFragParsingUserdataEvent, eA as HLSInitPtsFoundEvent, eV as HLSInstanceCallback, d$ as HLSInstanceEvent, eQ as HLSKeyLoadedEvent, eP as HLSKeyLoadingEvent, ej as HLSLevelLoadedEvent, ei as HLSLevelLoadingEvent, el as HLSLevelPtsUpdatedEvent, eh as HLSLevelSwitchedEvent, eg as HLSLevelSwitchingEvent, ek as HLSLevelUpdatedEvent, em as HLSLevelsUpdatedEvent, d_ as HLSLibLoadErrorEvent, dY as HLSLibLoadStartEvent, dZ as HLSLibLoadedEvent, eU as HLSLibrary, ee as HLSManifestLoadedEvent, ed as HLSManifestLoadingEvent, ef as HLSManifestParsedEvent, e2 as HLSMediaAttachedEvent, e1 as HLSMediaAttachingEvent, e4 as HLSMediaDetachedEvent, e3 as HLSMediaDetachingEvent, dX as HLSMediaEvent, ez as HLSNonNativeTextTracksFoundEvent, dD as HLSProvider, dW as HLSProviderEvents, dx as HLSProviderLoader, ex as HLSSubtitleFragProcessedEvent, ew as HLSSubtitleTrackLoadedEvent, ev as HLSSubtitleTrackLoadingEvent, eu as HLSSubtitleTrackSwitchEvent, et as HLSSubtitleTracksClearedEvent, es as HLSSubtitleTracksUpdatedEvent, e0 as HLSUnsupportedEvent, gz as HLS_VIDEO_EXTENSIONS, gA as HLS_VIDEO_TYPES, cM as LibASSConfig, cH as LibASSConstructor, cL as LibASSErrorEvent, cI as LibASSInstance, cJ as LibASSInstanceEvents, cG as LibASSModuleLoader, cK as LibASSReadyEvent, cF as LibASSTextRenderer, aj as List, al as ListAddEvent, ak as ListEvents, ai as ListItem, an as ListReadonlyChangeEvent, am as ListRemoveEvent, fc as LiveButtonEvents, aI as LocalMediaStorage, aw as LogEvent, av as LogEventDetail, a9 as Logger, au as LoggerEvents, aJ as MEDIA_KEY_SHORTCUTS, aN as MediaAbortEvent, bQ as MediaAirPlayRequestEvent, aP as MediaAudioTrackChangeEvent, bW as MediaAudioTrackChangeRequestEvent, aO as MediaAudioTracksChangeEvent, aQ as MediaAutoPlayChangeEvent, aU as MediaAutoPlayEvent, aT as MediaAutoPlayEventDetail, aS as MediaAutoPlayFailEvent, aR as MediaAutoPlayFailEventDetail, aV as MediaCanLoadEvent, aW as MediaCanLoadPosterEvent, aY as MediaCanPlayDetail, aX as MediaCanPlayEvent, aZ as MediaCanPlayThroughEvent, H as MediaContext, aG as MediaControls, a_ as MediaControlsChangeEvent, O as MediaCrossOrigin, b3 as MediaDestroyEvent, b4 as MediaDurationChangeEvent, b5 as MediaEmptiedEvent, b6 as MediaEndEvent, b7 as MediaEndedEvent, bX as MediaEnterFullscreenRequestEvent, bZ as MediaEnterPIPRequestEvent, cn as MediaErrorCode, co as MediaErrorDetail, b8 as MediaErrorEvent, aM as MediaEvent, aL as MediaEvents, bY as MediaExitFullscreenRequestEvent, b_ as MediaExitPIPRequestEvent, du as MediaFullscreenAdapter, b9 as MediaFullscreenChangeEvent, ba as MediaFullscreenErrorEvent, bV as MediaFullscreenRequestTarget, b$ as MediaGoogleCastRequestEvent, cc as MediaHidePosterRequestEvent, dr as MediaKeyShortcut, dq as MediaKeyShortcuts, dp as MediaKeyTarget, ds as MediaKeysCallback, be as MediaLiveChangeEvent, bf as MediaLiveEdgeChangeEvent, c0 as MediaLiveEdgeRequestEvent, bg as MediaLoadStartEvent, bb as MediaLoadedDataEvent, bc as MediaLoadedMetadataEvent, cl as MediaLoadingStrategy, bd as MediaLoopChangeEvent, cd as MediaLoopRequestEvent, bT as MediaMuteRequestEvent, bD as MediaOrientationChangeEvent, ce as MediaOrientationLockRequestEvent, cf as MediaOrientationUnlockRequestEvent, bt as MediaPIPChangeEvent, bu as MediaPIPErrorEvent, ca as MediaPauseControlsRequestEvent, bi as MediaPauseEvent, c4 as MediaPauseRequestEvent, bj as MediaPlayEvent, bk as MediaPlayFailEvent, c1 as MediaPlayRequestEvent, cw as MediaPlayerConnectEvent, aF as MediaPlayerEvents, a0 as MediaPlayerQuery, cr as MediaPlayerState, bl as MediaPlayingEvent, bm as MediaPlaysInlineChangeEvent, bn as MediaPosterChangeEvent, cm as MediaPosterLoadingStrategy, bR as MediaPosterStartLoadingRequestEvent, bp as MediaProgressEvent, bo as MediaProgressEventDetail, I as MediaProviderAdapter, br as MediaProviderChangeEvent, D as MediaProviderLoader, bq as MediaProviderLoaderChangeEvent, bs as MediaProviderSetupEvent, e$ as MediaProviderState, bv as MediaQualitiesChangeEvent, bw as MediaQualityChangeEvent, c2 as MediaQualityChangeRequestEvent, a$ as MediaRateChangeEvent, c3 as MediaRateChangeRequestEvent, J as MediaRemoteControl, b1 as MediaRemotePlaybackChangeEvent, b0 as MediaRemotePlaybackChangeEventDetail, bE as MediaReplayEvent, bP as MediaRequestEvents, cp as MediaResource, c9 as MediaResumeControlsRequestEvent, c5 as MediaSeekRequestEvent, bx as MediaSeekedEvent, by as MediaSeekingEvent, c6 as MediaSeekingRequestEvent, cb as MediaShowPosterRequestEvent, b2 as MediaSourceChangeEvent, bz as MediaSourcesChangeEvent, cq as MediaSrc, bA as MediaStalledEvent, c7 as MediaStartLoadingRequestEvent, bB as MediaStartedEvent, K as MediaState, aE as MediaStateAccessors, aH as MediaStorage, cu as MediaStore, ch as MediaStreamType, bI as MediaStreamTypeChangeEvent, bC as MediaSuspendEvent, bK as MediaTextTrackChangeEvent, bS as MediaTextTrackChangeRequestEvent, bJ as MediaTextTracksChangeEvent, bG as MediaTimeUpdateEvent, bF as MediaTimeUpdateEventDetail, bH as MediaTitleChangeEvent, cg as MediaType, bh as MediaTypeChangeEvent, bU as MediaUnmuteRequestEvent, cz as MediaUserEvents, ck as MediaViewType, bL as MediaViewTypeChangeEvent, bM as MediaVolumeChange, bN as MediaVolumeChangeEvent, c8 as MediaVolumeChangeRequestEvent, bO as MediaWaitingEvent, q as MenuButton, fG as MenuButtonEvents, fH as MenuButtonSelectEvent, fF as MenuCloseEvent, fD as MenuEvents, s as MenuItem, r as MenuItems, fE as MenuOpenEvent, fK as MenuPlacement, fM as MenuPlacementAlign, fL as MenuPlacementSide, t as MenuPortal, fI as MenuPortalContext, f9 as MuteButtonEvents, gr as MuxThumbnailStoryboard, gs as MuxThumbnailTile, fa as PIPButtonEvents, f6 as PlayButtonEvents, cv as PlayerStore, a6 as PlyrControl, a7 as PlyrLayoutTranslations, a5 as PlyrLayoutWord, a8 as PlyrMarker, gl as PosterState, ga as QualityRadioGroup, ge as QualityRadioGroupChangeEvent, gd as QualityRadioGroupEvents, gb as QualityRadioGroupProps, gc as QualityRadioOption, u as Radio, fQ as RadioChangeEvent, fP as RadioEvents, fO as RadioGroupChangeEvent, fN as RadioGroupEvents, fS as RadioOption, fR as RadioSelectEvent, cj as RemotePlaybackInfo, ci as RemotePlaybackType, aA as ScreenOrientationChangeEvent, az as ScreenOrientationChangeEventDetail, ax as ScreenOrientationController, ay as ScreenOrientationEvents, aC as ScreenOrientationLockType, aB as ScreenOrientationType, fb as SeekButtonEvents, fk as SliderCSSVars, o as SliderChapters, fC as SliderChaptersCSSVars, fB as SliderChaptersProps, eZ as SliderContext, fo as SliderController, fp as SliderControllerProps, fn as SliderDelegate, fg as SliderDragEndEvent, ff as SliderDragStartEvent, fi as SliderDragValueChangeEvent, fe as SliderEvent, fd as SliderEvents, W as SliderOrientation, fj as SliderPointerValueChangeEvent, n as SliderPreview, U as SliderState, fm as SliderStore, k as SliderThumbnail, l as SliderValue, fh as SliderValueChangeEvent, m as SliderVideo, fs as SliderVideoCanPlayEvent, ft as SliderVideoErrorEvent, fr as SliderVideoEvents, fq as SliderVideoState, g6 as SpeedRadioGroup, g9 as SpeedRadioGroupChangeEvent, g8 as SpeedRadioGroupEvents, g7 as SpeedRadioGroupProps, cE as TextRenderer, cD as TextRenderers, X as TextTrack, cV as TextTrackAddCueEvent, d2 as TextTrackAddEvent, cX as TextTrackCueChangeEvent, cU as TextTrackErrorEvent, cR as TextTrackEvent, cQ as TextTrackEvents, Y as TextTrackInit, c$ as TextTrackList, d1 as TextTrackListEvent, d0 as TextTrackListEvents, d4 as TextTrackListModeChangeEvent, cT as TextTrackLoadEvent, cS as TextTrackLoadStartEvent, cY as TextTrackModeChangeEvent, cN as TextTrackReadyState, cW as TextTrackRemoveCueEvent, d3 as TextTrackRemoveEvent, gu as ThumbnailCoords, Q as ThumbnailImage, gt as ThumbnailImageInit, N as ThumbnailSrc, gn as ThumbnailState, gp as ThumbnailStoryboard, gq as ThumbnailTile, go as ThumbnailsLoader, cA as TimeRange, fA as TimeSliderCSSVars, fz as TimeSliderEvents, fy as TimeSliderState, gm as TimeState, h as TooltipContent, a1 as TooltipPlacement, f3 as TooltipPlacementAlign, f2 as TooltipPlacementSide, g as TooltipTrigger, gx as VIDEO_EXTENSIONS, gy as VIDEO_TYPES, E as VTTContent, cO as VTTCueInit, cP as VTTRegionInit, eX as VideoPresentationChangeEvent, eW as VideoPresentationEvents, dE as VideoProvider, dy as VideoProviderLoader, _ as VideoQuality, dj as VideoQualityAddEvent, dn as VideoQualityAutoChangeEvent, dl as VideoQualityChangeEvent, dm as VideoQualityChangeEventDetail, dg as VideoQualityList, di as VideoQualityListEvent, dh as VideoQualityListEvents, dk as VideoQualityRemoveEvent, dF as VimeoProvider, dz as VimeoProviderLoader, fx as VolumeSliderCSSVars, fw as VolumeSliderEvents, fv as VolumeSliderState, dG as YouTubeProvider, dA as YouTubeProviderLoader, ac as canChangeVolume, ap as canFullscreen, gE as canGoogleCastSrc, ad as canOrientScreen, ae as canPlayHLSNatively, ah as canRotateScreen, af as canUsePictureInPicture, ag as canUseVideoPresentation, dc as findActiveCue, ab as formatSpokenTime, aa as formatTime, cC as getTimeRangesEnd, cB as getTimeRangesStart, dH as isAudioProvider, gB as isAudioSrc, dd as isCueActive, dM as isGoogleCastProvider, dJ as isHLSProvider, gD as isHLSSrc, dN as isHTMLAudioElement, dQ as isHTMLIFrameElement, dP as isHTMLMediaElement, dO as isHTMLVideoElement, gF as isMediaStream, cZ as isTrackCaptionKind, dI as isVideoProvider, gC as isVideoSrc, dL as isVimeoProvider, dK as isYouTubeProvider, aD as mediaContext, cs as mediaState, fJ as menuPortalContext, c_ as parseJSONCaptionsFile, eY as sliderContext, fl as sliderState, ct as softResetMediaState, fu as updateSliderPreviewPlacement, e_ as usePlyrLayoutClasses, de as watchActiveTextTrack, df as watchCueTextChange } from './dist/types/vidstack.js';
 export { l as appendTriggerEvent, k as findTriggerEvent, j as hasTriggerEvent, n as isKeyboardClick, o as isKeyboardEvent, m as isPointerEvent, w as walkTriggerEventChain } from './dist/types/vidstack-framework.js';
-export { bd as AudioOption, bc as AudioOptions, ab as Caption, o as CaptionButton, aq as CaptionButtonInstance, n as CaptionButtonProps, bh as CaptionOption, bg as CaptionOptions, ac as CaptionProps, ad as CaptionTextProps, a5 as Captions, aP as CaptionsInstance, a6 as CaptionsProps, bk as ChapterOption, bj as ChapterOptions, a1 as ChapterTitle, a2 as ChapterTitleProps, g as Controls, ao as ControlsGroupInstance, G as ControlsGroupProps, an as ControlsInstance, R as ControlsProps, p as FullscreenButton, ar as FullscreenButtonInstance, F as FullscreenButtonProps, a4 as Gesture, aQ as GestureInstance, a3 as GestureProps, d as Icon, e as IconComponent, I as IconProps, w as LiveButton, as as LiveButtonInstance, L as LiveButtonProps, a as MediaPlayer, al as MediaPlayerInstance, M as MediaPlayerProps, c as MediaProvider, am as MediaProviderInstance, b as MediaProviderProps, X as Menu, aJ as MenuButtonInstance, Z as MenuButtonProps, $ as MenuContentProps, aI as MenuInstance, aL as MenuItemInstance, a0 as MenuItemProps, aK as MenuItemsInstance, $ as MenuItemsProps, aM as MenuPortalInstance, _ as MenuPortalProps, Y as MenuProps, U as MenuRadioGroupProps, W as MenuRadioProps, r as MuteButton, at as MuteButtonInstance, q as MuteButtonProps, u as PIPButton, au as PIPButtonInstance, s as PIPButtonProps, m as PlayButton, av as PlayButtonInstance, l as PlayButtonProps, bs as PlaybackRateOption, br as PlaybackRateOptions, P as PlayerSrc, a8 as Poster, aR as PosterInstance, a7 as PosterProps, Q as RadioGroup, aN as RadioGroupInstance, U as RadioGroupProps, aO as RadioInstance, W as RadioProps, v as SeekButton, aw as SeekButtonInstance, S as SeekButtonProps, x as Slider, H as SliderChapterProps, J as SliderChapterTitleProps, aH as SliderChaptersInstance, aA as SliderInstance, aG as SliderPreviewInstance, B as SliderPreviewProps, A as SliderProps, N as SliderThumbnailImgProps, aD as SliderThumbnailInstance, K as SliderThumbnailProps, aE as SliderValueInstance, V as SliderValueProps, aF as SliderVideoInstance, O as SliderVideoProps, ah as Spinner, ai as SpinnerProps, ak as SpinnerTrackFillProps, aj as SpinnerTrackProps, ae as Thumbnail, b0 as ThumbnailData, ag as ThumbnailImgProps, aS as ThumbnailInstance, af as ThumbnailProps, aa as Time, aT as TimeInstance, a9 as TimeProps, z as TimeSlider, aB as TimeSliderInstance, E as TimeSliderProps, k as ToggleButton, ap as ToggleButtonInstance, j as ToggleButtonProps, t as Tooltip, az as TooltipContentInstance, C as TooltipContentProps, ax as TooltipInstance, h as TooltipProps, ay as TooltipTriggerInstance, i as TooltipTriggerProps, T as Track, f as TrackProps, bf as UseCaptionOptions, bq as UsePlaybackRateOptions, b6 as UseSliderPreview, bm as UseVideoQualityOptions, bo as VideoQualityOption, bn as VideoQualityOptions, y as VolumeSlider, aC as VolumeSliderInstance, D as VolumeSliderProps, ba as createTextTrack, b8 as useActiveTextCues, b9 as useActiveTextTrack, b2 as useActiveThumbnail, bb as useAudioOptions, be as useCaptionOptions, bi as useChapterOptions, aW as useMediaPlayer, aY as useMediaProvider, aZ as useMediaRemote, a_ as useMediaState, a$ as useMediaStore, bp as usePlaybackRateOptions, aX as usePlayerQuery, b5 as useSliderPreview, b3 as useSliderState, b4 as useSliderStore, aU as useState, aV as useStore, b7 as useTextCues, b1 as useThumbnails, bl as useVideoQualityOptions } from './dist/types/vidstack-react.js';
+export { ao as AirPlayButton, bw as AirPlayButtonInstance, an as AirPlayButtonProps, cf as AudioOption, ce as AudioOptions, bb as Caption, au as CaptionButton, bq as CaptionButtonInstance, at as CaptionButtonProps, cj as CaptionOption, ci as CaptionOptions, bc as CaptionProps, bd as CaptionTextProps, b5 as Captions, bR as CaptionsInstance, b6 as CaptionsProps, cm as ChapterOption, cl as ChapterOptions, b1 as ChapterTitle, b2 as ChapterTitleProps, ae as Controls, bo as ControlsGroupInstance, ag as ControlsGroupProps, bn as ControlsInstance, af as ControlsProps, e as DefaultLayoutProps, aw as FullscreenButton, br as FullscreenButtonInstance, av as FullscreenButtonProps, b4 as Gesture, bS as GestureInstance, b3 as GestureProps, aq as GoogleCastButton, bx as GoogleCastButtonInstance, ap as GoogleCastButtonProps, aa as Icon, ab as IconComponent, a9 as IconProps, aE as LiveButton, bs as LiveButtonInstance, aD as LiveButtonProps, a6 as MediaPlayer, bl as MediaPlayerInstance, a5 as MediaPlayerProps, a8 as MediaProvider, bm as MediaProviderInstance, a7 as MediaProviderProps, aV as Menu, bL as MenuButtonInstance, aX as MenuButtonProps, aZ as MenuContentProps, bK as MenuInstance, bN as MenuItemInstance, a_ as MenuItemProps, bM as MenuItemsInstance, aZ as MenuItemsProps, bO as MenuPortalInstance, aY as MenuPortalProps, aW as MenuProps, aT as MenuRadioGroupProps, aU as MenuRadioProps, ay as MuteButton, bt as MuteButtonInstance, ax as MuteButtonProps, aA as PIPButton, bu as PIPButtonInstance, az as PIPButtonProps, as as PlayButton, bv as PlayButtonInstance, ar as PlayButtonProps, cu as PlaybackRateOption, ct as PlaybackRateOptions, a4 as PlayerSrc, V as PlyrLayoutProps, b8 as Poster, bT as PosterInstance, b7 as PosterProps, aS as RadioGroup, bP as RadioGroupInstance, aT as RadioGroupProps, bQ as RadioInstance, aU as RadioProps, aC as SeekButton, by as SeekButtonInstance, aB as SeekButtonProps, aF as Slider, aN as SliderChapterProps, aO as SliderChapterTitleProps, bJ as SliderChaptersInstance, bC as SliderInstance, bI as SliderPreviewInstance, aK as SliderPreviewProps, aI as SliderProps, aQ as SliderThumbnailImgProps, bF as SliderThumbnailInstance, aP as SliderThumbnailProps, bG as SliderValueInstance, aJ as SliderValueProps, bH as SliderVideoInstance, aR as SliderVideoProps, bh as Spinner, bi as SpinnerProps, bk as SpinnerTrackFillProps, bj as SpinnerTrackProps, be as Thumbnail, bg as ThumbnailImgProps, bU as ThumbnailInstance, bf as ThumbnailProps, ba as Time, bV as TimeInstance, b9 as TimeProps, aH as TimeSlider, bD as TimeSliderInstance, aM as TimeSliderProps, a$ as Title, b0 as TitleProps, am as ToggleButton, bp as ToggleButtonInstance, al as ToggleButtonProps, ah as Tooltip, bB as TooltipContentInstance, ak as TooltipContentProps, bz as TooltipInstance, ai as TooltipProps, bA as TooltipTriggerInstance, aj as TooltipTriggerProps, ac as Track, ad as TrackProps, ch as UseCaptionOptions, cs as UsePlaybackRateOptions, c7 as UseSliderPreview, co as UseVideoQualityOptions, cq as VideoQualityOption, cp as VideoQualityOptions, aG as VolumeSlider, bE as VolumeSliderInstance, aL as VolumeSliderProps, cc as createTextTrack, c9 as useActiveTextCues, ca as useActiveTextTrack, c3 as useActiveThumbnail, cd as useAudioOptions, cg as useCaptionOptions, ck as useChapterOptions, cb as useChapterTitle, bY as useMediaContext, bZ as useMediaPlayer, b_ as useMediaProvider, b$ as useMediaRemote, c0 as useMediaState, c1 as useMediaStore, cr as usePlaybackRateOptions, c6 as useSliderPreview, c4 as useSliderState, c5 as useSliderStore, bW as useState, bX as useStore, c8 as useTextCues, c2 as useThumbnails, cn as useVideoQualityOptions } from './dist/types/vidstack-react.js';
 import 'media-captions';
@@ -5,0 +8,0 @@ import 'hls.js';

package.json

 {
   "name": "@vidstack/react",
-  "version": "1.9.8",
+  "version": "1.10.0",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
@@ -41,3 +41,3 @@ "license": "MIT",
   "devDependencies": {
-    "@maverick-js/cli": "0.41.2",
+    "@maverick-js/cli": "0.41.3",
     "@rollup/plugin-node-resolve": "^15.2.0",
@@ -49,3 +49,3 @@ "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.0.0",
-    "maverick.js": "0.41.2",
+    "maverick.js": "0.41.3",
     "media-icons": "^1.0.0",
@@ -94,4 +94,11 @@ "react": "^18.0.0",
     },
+    "./player/layouts/plyr": {
+      "types": "./player/layouts/plyr.d.ts",
+      "development": "./dist/dev/player/vidstack-plyr-layout.js",
+      "default": "./dist/prod/player/vidstack-plyr-layout.js"
+    },
     "./player/styles/*": "./player/styles/*",
     "./dist/types/*": "./dist/types/*",
+    "./dom.d.ts": "./dom.d.ts",
+    "./google-cast.d.ts": "./google-cast.d.ts",
     "./package.json": "./package.json",
@@ -98,0 +105,0 @@ "./tailwind.cjs": {

player/layouts/default.d.ts

@@ -1,7 +0,7 @@
-export { dJ as CreateDefaultMediaLayout, dj as DefaultAudioLayout, dk as DefaultAudioLayoutProps, dq as DefaultBufferingIndicator, dv as DefaultCaptionButton, dB as DefaultChapterTitle, dF as DefaultChaptersMenu, dx as DefaultFullscreenButton, dR as DefaultLayoutContext, dP as DefaultLayoutIcon, dO as DefaultLayoutIconProps, dQ as DefaultLayoutIcons, dC as DefaultLiveButton, dI as DefaultMediaLayoutProps, du as DefaultMuteButton, dw as DefaultPIPButton, dt as DefaultPlayButton, dy as DefaultSeekButton, dG as DefaultSettingsMenu, dH as DefaultSubmenuButton, dM as DefaultSubmenuButtonProps, dD as DefaultTimeGroup, dE as DefaultTimeInfo, dA as DefaultTimeSlider, ds as DefaultTooltip, dL as DefaultTooltipProps, dp as DefaultVideoGestures, dl as DefaultVideoLayout, dm as DefaultVideoLayoutLarge, dr as DefaultVideoLayoutProps, dn as DefaultVideoLayoutSmall, dz as DefaultVolumeSlider, dK as createDefaultMediaLayout, dN as defaultLayoutIcons, dS as useDefaultLayoutLang } from '../../dist/types/vidstack-react.js';
-import '../../dist/types/vidstack.js';
+export { w as DefaultAirPlayButton, m as DefaultAudioLayout, n as DefaultAudioLayoutProps, a as DefaultAudioLayoutSlots, s as DefaultBufferingIndicator, A as DefaultCaptionButton, I as DefaultChapterTitle, O as DefaultChaptersMenu, L as DefaultControlsSpacer, C as DefaultFullscreenButton, x as DefaultGoogleCastButton, j as DefaultLayoutContext, h as DefaultLayoutIcon, g as DefaultLayoutIconProps, i as DefaultLayoutIcons, d as DefaultLayoutMenuSlotName, e as DefaultLayoutProps, c as DefaultLayoutSlotName, D as DefaultLayoutSlots, J as DefaultLiveButton, z as DefaultMuteButton, B as DefaultPIPButton, y as DefaultPlayButton, E as DefaultSeekButton, P as DefaultSettingsMenu, K as DefaultTimeGroup, M as DefaultTimeInfo, N as DefaultTimeInvert, G as DefaultTimeSlider, H as DefaultTitle, v as DefaultTooltip, Q as DefaultTooltipProps, r as DefaultVideoGestures, p as DefaultVideoLargeLayout, o as DefaultVideoLayout, t as DefaultVideoLayoutProps, b as DefaultVideoLayoutSlots, q as DefaultVideoSmallLayout, F as DefaultVolumeSlider, f as defaultLayoutIcons, l as i18n, u as useDefaultLayoutContext, k as useDefaultLayoutWord } from '../../dist/types/vidstack-react.js';
 import '../../dist/types/vidstack-framework.js';
+export { a2 as DefaultLayoutTranslations, a3 as DefaultLayoutWord } from '../../dist/types/vidstack.js';
 import 'react';
 import 'media-captions';
+import 'remotion';
 import 'hls.js';
-import 'remotion';

player/remotion.d.ts

@@ -1,7 +0,7 @@
-export { di as RemotionErrorRenderer, dg as RemotionInputProps, dh as RemotionLoadingRenderer, df as RemotionMediaResource, d8 as RemotionPoster, d7 as RemotionPosterProps, dc as RemotionProvider, db as RemotionProviderLoader, da as RemotionSliderThumbnail, d9 as RemotionSliderThumbnailProps, d6 as RemotionThumbnail, d5 as RemotionThumbnailProps, dd as isRemotionProvider, de as isRemotionSource } from '../dist/types/vidstack-react.js';
-import '../dist/types/vidstack.js';
+export { el as RemotionErrorRenderer, ej as RemotionInputProps, ek as RemotionLoadingRenderer, ei as RemotionMediaResource, eb as RemotionPoster, ea as RemotionPosterProps, ef as RemotionProvider, ee as RemotionProviderLoader, ed as RemotionSliderThumbnail, ec as RemotionSliderThumbnailProps, e9 as RemotionThumbnail, e8 as RemotionThumbnailProps, eg as isRemotionProvider, eh as isRemotionSource } from '../dist/types/vidstack-react.js';
 import '../dist/types/vidstack-framework.js';
 import 'react';
+import '../dist/types/vidstack.js';
 import 'media-captions';
 import 'hls.js';
 import 'remotion';

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2180125

increased by24.52%

Number of package files

101

increased by38.36%

Lines of code

61159

increased by21.55%

No dependency changes