@hanifhan1f/vidstack-react 1.12.30 → 1.12.31

package/prod/chunks/vidstack-xwdT591E.js

@@ -0,0 +1,386 @@
+"use client"
+
+import { peek, listenEvent, effect, DOMEvent, isString, camelToKebabCase, isUndefined, isFunction } from './vidstack-CZgUA94N.js';
+import { QualitySymbol, RAFLoop, TextTrack, TextTrackSymbol, ListSymbol, IS_CHROME, coerceToError, loadScript, VideoProvider, isHLSSupported, preconnect } from './vidstack-C48MQkXV.js';
+import 'react';
+import '@floating-ui/dom';
+
+const toDOMEventType = (type) => camelToKebabCase(type);
+class HLSController {
+  #video;
+  #ctx;
+  #instance = null;
+  #stopLiveSync = null;
+  config = {};
+  #callbacks = /* @__PURE__ */ new Set();
+  get instance() {
+    return this.#instance;
+  }
+  constructor(video, ctx) {
+    this.#video = video;
+    this.#ctx = ctx;
+  }
+  setup(ctor) {
+    const { streamType } = this.#ctx.$state;
+    const isLive = peek(streamType).includes("live"), isLiveLowLatency = peek(streamType).includes("ll-");
+    this.#instance = new ctor({
+      lowLatencyMode: isLiveLowLatency,
+      backBufferLength: isLiveLowLatency ? 4 : isLive ? 8 : void 0,
+      renderTextTracksNatively: false,
+      ...this.config
+    });
+    const dispatcher = this.#dispatchHLSEvent.bind(this);
+    for (const event of Object.values(ctor.Events)) this.#instance.on(event, dispatcher);
+    this.#instance.on(ctor.Events.ERROR, this.#onError.bind(this));
+    for (const callback of this.#callbacks) callback(this.#instance);
+    this.#ctx.player.dispatch("hls-instance", {
+      detail: this.#instance
+    });
+    this.#instance.attachMedia(this.#video);
+    this.#instance.on(ctor.Events.AUDIO_TRACK_SWITCHED, this.#onAudioSwitch.bind(this));
+    this.#instance.on(ctor.Events.LEVEL_SWITCHED, this.#onLevelSwitched.bind(this));
+    this.#instance.on(ctor.Events.LEVEL_LOADED, this.#onLevelLoaded.bind(this));
+    this.#instance.on(ctor.Events.LEVEL_UPDATED, this.#onLevelUpdated.bind(this));
+    this.#instance.on(ctor.Events.NON_NATIVE_TEXT_TRACKS_FOUND, this.#onTracksFound.bind(this));
+    this.#instance.on(ctor.Events.CUES_PARSED, this.#onCuesParsed.bind(this));
+    this.#ctx.qualities[QualitySymbol.enableAuto] = this.#enableAutoQuality.bind(this);
+    listenEvent(this.#ctx.qualities, "change", this.#onUserQualityChange.bind(this));
+    listenEvent(this.#ctx.audioTracks, "change", this.#onUserAudioChange.bind(this));
+    this.#stopLiveSync = effect(this.#liveSync.bind(this));
+  }
+  #createDOMEvent(type, data) {
+    return new DOMEvent(toDOMEventType(type), { detail: data });
+  }
+  #liveSync() {
+    if (!this.#ctx.$state.live()) return;
+    const raf = new RAFLoop(this.#liveSyncPosition.bind(this));
+    raf.start();
+    return raf.stop.bind(raf);
+  }
+  #liveSyncPosition() {
+    this.#ctx.$state.liveSyncPosition.set(this.#instance?.liveSyncPosition ?? Infinity);
+  }
+  #dispatchHLSEvent(type, data) {
+    this.#ctx.player?.dispatch(this.#createDOMEvent(type, data));
+  }
+  #onTracksFound(eventType, data) {
+    const event = this.#createDOMEvent(eventType, data);
+    let currentTrack = -1;
+    for (let i = 0; i < data.tracks.length; i++) {
+      const nonNativeTrack = data.tracks[i], init = nonNativeTrack.subtitleTrack ?? nonNativeTrack.closedCaptions, track = new TextTrack({
+        id: `hls-${nonNativeTrack.kind}-${i}`,
+        src: init?.url,
+        label: nonNativeTrack.label,
+        language: init?.lang,
+        kind: nonNativeTrack.kind,
+        default: nonNativeTrack.default
+      });
+      track[TextTrackSymbol.readyState] = 2;
+      track[TextTrackSymbol.onModeChange] = () => {
+        if (track.mode === "showing") {
+          this.#instance.subtitleTrack = i;
+          currentTrack = i;
+        } else if (currentTrack === i) {
+          this.#instance.subtitleTrack = -1;
+          currentTrack = -1;
+        }
+      };
+      this.#ctx.textTracks.add(track, event);
+    }
+  }
+  #onCuesParsed(eventType, data) {
+    const index = this.#instance?.subtitleTrack, track = this.#ctx.textTracks.getById(`hls-${data.type}-${index}`);
+    if (!track) return;
+    const event = this.#createDOMEvent(eventType, data);
+    for (const cue of data.cues) {
+      cue.positionAlign = "auto";
+      track.addCue(cue, event);
+    }
+  }
+  #onAudioSwitch(eventType, data) {
+    const track = this.#ctx.audioTracks[data.id];
+    if (track) {
+      const trigger = this.#createDOMEvent(eventType, data);
+      this.#ctx.audioTracks[ListSymbol.select](track, true, trigger);
+    }
+  }
+  #onLevelSwitched(eventType, data) {
+    const quality = this.#ctx.qualities[data.level];
+    if (quality) {
+      const trigger = this.#createDOMEvent(eventType, data);
+      this.#ctx.qualities[ListSymbol.select](quality, true, trigger);
+    }
+  }
+  #onLevelUpdated(eventType, data) {
+    if (data.details.totalduration > 0) {
+      this.#ctx.$state.inferredLiveDVRWindow.set(data.details.totalduration);
+    }
+  }
+  #onLevelLoaded(eventType, data) {
+    if (this.#ctx.$state.canPlay()) return;
+    const { type, live, totalduration: duration, targetduration } = data.details, trigger = this.#createDOMEvent(eventType, data);
+    this.#ctx.notify(
+      "stream-type-change",
+      live ? type === "EVENT" && Number.isFinite(duration) && targetduration >= 10 ? "live:dvr" : "live" : "on-demand",
+      trigger
+    );
+    this.#ctx.notify("duration-change", duration, trigger);
+    const media = this.#instance.media;
+    if (this.#instance.currentLevel === -1) {
+      this.#ctx.qualities[QualitySymbol.setAuto](true, trigger);
+    }
+    for (const remoteTrack of this.#instance.audioTracks) {
+      const localTrack = {
+        id: remoteTrack.id.toString(),
+        label: remoteTrack.name,
+        language: remoteTrack.lang || "",
+        kind: "main"
+      };
+      this.#ctx.audioTracks[ListSymbol.add](localTrack, trigger);
+    }
+    for (const level of this.#instance.levels) {
+      const videoQuality = {
+        id: level.id?.toString() ?? level.height + "p",
+        width: level.width,
+        height: level.height,
+        codec: level.codecSet,
+        bitrate: level.bitrate
+      };
+      this.#ctx.qualities[ListSymbol.add](videoQuality, trigger);
+    }
+    media.dispatchEvent(new DOMEvent("canplay", { trigger }));
+  }
+  #onError(eventType, data) {
+    if (data.fatal) {
+      switch (data.type) {
+        case "mediaError":
+          this.#instance?.recoverMediaError();
+          break;
+        default:
+          this.#onFatalError(data.error);
+          break;
+      }
+    }
+  }
+  #onFatalError(error) {
+    this.#ctx.notify("error", {
+      message: error.message,
+      code: 1,
+      error
+    });
+  }
+  #enableAutoQuality() {
+    if (this.#instance) this.#instance.currentLevel = -1;
+  }
+  #onUserQualityChange() {
+    const { qualities } = this.#ctx;
+    if (!this.#instance || qualities.auto) return;
+    this.#instance[qualities.switch + "Level"] = qualities.selectedIndex;
+    if (IS_CHROME) {
+      this.#video.currentTime = this.#video.currentTime;
+    }
+  }
+  #onUserAudioChange() {
+    const { audioTracks } = this.#ctx;
+    if (this.#instance && this.#instance.audioTrack !== audioTracks.selectedIndex) {
+      this.#instance.audioTrack = audioTracks.selectedIndex;
+    }
+  }
+  onInstance(callback) {
+    this.#callbacks.add(callback);
+    return () => this.#callbacks.delete(callback);
+  }
+  loadSource(src) {
+    if (!isString(src.src)) return;
+    this.#instance?.loadSource(src.src);
+  }
+  destroy() {
+    this.#instance?.destroy();
+    this.#instance = null;
+    this.#stopLiveSync?.();
+    this.#stopLiveSync = null;
+  }
+}
+
+class HLSLibLoader {
+  #lib;
+  #ctx;
+  #callback;
+  constructor(lib, ctx, callback) {
+    this.#lib = lib;
+    this.#ctx = ctx;
+    this.#callback = callback;
+    this.#startLoading();
+  }
+  async #startLoading() {
+    const callbacks = {
+      onLoadStart: this.#onLoadStart.bind(this),
+      onLoaded: this.#onLoaded.bind(this),
+      onLoadError: this.#onLoadError.bind(this)
+    };
+    let ctor = await loadHLSScript(this.#lib, callbacks);
+    if (isUndefined(ctor) && !isString(this.#lib)) ctor = await importHLS(this.#lib, callbacks);
+    if (!ctor) return null;
+    if (!ctor.isSupported()) {
+      const message = "[vidstack] `hls.js` is not supported in this environment";
+      this.#ctx.player.dispatch(new DOMEvent("hls-unsupported"));
+      this.#ctx.notify("error", { message, code: 4 });
+      return null;
+    }
+    return ctor;
+  }
+  #onLoadStart() {
+    this.#ctx.player.dispatch(new DOMEvent("hls-lib-load-start"));
+  }
+  #onLoaded(ctor) {
+    this.#ctx.player.dispatch(
+      new DOMEvent("hls-lib-loaded", {
+        detail: ctor
+      })
+    );
+    this.#callback(ctor);
+  }
+  #onLoadError(e) {
+    const error = coerceToError(e);
+    this.#ctx.player.dispatch(
+      new DOMEvent("hls-lib-load-error", {
+        detail: error
+      })
+    );
+    this.#ctx.notify("error", {
+      message: error.message,
+      code: 4,
+      error
+    });
+  }
+}
+async function importHLS(loader, callbacks = {}) {
+  if (isUndefined(loader)) return void 0;
+  callbacks.onLoadStart?.();
+  if (loader.prototype && loader.prototype !== Function) {
+    callbacks.onLoaded?.(loader);
+    return loader;
+  }
+  try {
+    const ctor = (await loader())?.default;
+    if (ctor && !!ctor.isSupported) {
+      callbacks.onLoaded?.(ctor);
+    } else {
+      throw Error(
+        false ? "[vidstack] failed importing `hls.js`. Dynamic import returned invalid constructor." : ""
+      );
+    }
+    return ctor;
+  } catch (err) {
+    callbacks.onLoadError?.(err);
+  }
+  return void 0;
+}
+async function loadHLSScript(src, callbacks = {}) {
+  if (!isString(src)) return void 0;
+  callbacks.onLoadStart?.();
+  try {
+    await loadScript(src);
+    if (!isFunction(window.Hls)) {
+      throw Error(
+        false ? "[vidstack] failed loading `hls.js`. Could not find a valid `Hls` constructor on window" : ""
+      );
+    }
+    const ctor = window.Hls;
+    callbacks.onLoaded?.(ctor);
+    return ctor;
+  } catch (err) {
+    callbacks.onLoadError?.(err);
+  }
+  return void 0;
+}
+
+const JS_DELIVR_CDN = "https://cdn.jsdelivr.net";
+class HLSProvider extends VideoProvider {
+  $$PROVIDER_TYPE = "HLS";
+  #ctor = null;
+  #controller = new HLSController(this.video, this.ctx);
+  /**
+   * The `hls.js` constructor.
+   */
+  get ctor() {
+    return this.#ctor;
+  }
+  /**
+   * The current `hls.js` instance.
+   */
+  get instance() {
+    return this.#controller.instance;
+  }
+  /**
+   * Whether `hls.js` is supported in this environment.
+   */
+  static supported = isHLSSupported();
+  get type() {
+    return "hls";
+  }
+  get canLiveSync() {
+    return true;
+  }
+  #library = `${JS_DELIVR_CDN}/npm/hls.js@^1.5.0/dist/hls${".min.js"}`;
+  /**
+   * The `hls.js` configuration object.
+   *
+   * @see {@link https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning}
+   */
+  get config() {
+    return this.#controller.config;
+  }
+  set config(config) {
+    this.#controller.config = config;
+  }
+  /**
+   * The `hls.js` constructor (supports dynamic imports) or a URL of where it can be found.
+   *
+   * @defaultValue `https://cdn.jsdelivr.net/npm/hls.js@^1.0.0/dist/hls.min.js`
+   */
+  get library() {
+    return this.#library;
+  }
+  set library(library) {
+    this.#library = library;
+  }
+  preconnect() {
+    if (!isString(this.#library)) return;
+    preconnect(this.#library);
+  }
+  setup() {
+    super.setup();
+    new HLSLibLoader(this.#library, this.ctx, (ctor) => {
+      this.#ctor = ctor;
+      this.#controller.setup(ctor);
+      this.ctx.notify("provider-setup", this);
+      const src = peek(this.ctx.$state.source);
+      if (src) this.loadSource(src);
+    });
+  }
+  async loadSource(src, preload) {
+    if (!isString(src.src)) {
+      this.removeSource();
+      return;
+    }
+    this.media.preload = preload || "";
+    this.appendSource(src, "application/x-mpegurl");
+    this.#controller.loadSource(src);
+    this.currentSrc = src;
+  }
+  /**
+   * The given callback is invoked when a new `hls.js` instance is created and right before it's
+   * attached to media.
+   */
+  onInstance(callback) {
+    const instance = this.#controller.instance;
+    if (instance) callback(instance);
+    return this.#controller.onInstance(callback);
+  }
+  destroy() {
+    this.#controller.destroy();
+  }
+}
+
+export { HLSProvider };

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

@@ -1,15 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-DXSNXDnS.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-B0SSIHIv.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
-import '../chunks/vidstack-CYK75vJF.js';
-import '../chunks/vidstack-CKapDFwB.js';
-import '../chunks/vidstack-D91K36KQ.js';
-import 'vidstack';
-import '../chunks/vidstack-BCBskRpc.js';
+import '../chunks/vidstack-CZgUA94N.js';
+import '../chunks/vidstack-DhSvljmQ.js';
+import '../chunks/vidstack-C48MQkXV.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-D_Sd7838.js';
 import 'react-dom';
-import '../chunks/vidstack-CtxjO6HG.js';
-import '../chunks/vidstack-BZVrgeRF.js';
-import 'vidstack/exports/font.ts';
+import '../chunks/vidstack-DgsBXr1J.js';
+import '../chunks/vidstack-vqp2QaHR.js';
 import '../chunks/vidstack-CBF7iUqu.js';

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

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react';
-import { Icon$34, Icon$35, Icon$27, Icon$26, Icon$60, Icon$61, Icon$39, Icon$40, Icon$105, Icon$104, Icon$54, Icon$59, Icon$62, Icon$19, Icon$56, Icon$33, Icon$8, Icon$13, Icon$88, Icon$63, Icon$16, Icon$53, Icon$22, Icon$11, Icon$0, Icon$31, Icon$81, Icon$77, Icon$74, Icon$24, Icon$5 } from '../chunks/vidstack-CYK75vJF.js';
+import { Icon$34, Icon$35, Icon$27, Icon$26, Icon$60, Icon$61, Icon$39, Icon$40, Icon$105, Icon$104, Icon$54, Icon$59, Icon$62, Icon$19, Icon$56, Icon$33, Icon$8, Icon$13, Icon$88, Icon$63, Icon$16, Icon$53, Icon$22, Icon$11, Icon$0, Icon$31, Icon$81, Icon$77, Icon$74, Icon$24, Icon$5 } from '../chunks/vidstack-CZgUA94N.js';
 import { Icon } from '../chunks/vidstack-CBF7iUqu.js';
 
 function createIcon(paths) {

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

@@ -1,15 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-DXSNXDnS.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-B0SSIHIv.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
-import '../chunks/vidstack-CYK75vJF.js';
-import '../chunks/vidstack-CKapDFwB.js';
-import '../chunks/vidstack-D91K36KQ.js';
-import 'vidstack';
-import '../chunks/vidstack-BCBskRpc.js';
+import '../chunks/vidstack-CZgUA94N.js';
+import '../chunks/vidstack-DhSvljmQ.js';
+import '../chunks/vidstack-C48MQkXV.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-D_Sd7838.js';
 import 'react-dom';
-import '../chunks/vidstack-CtxjO6HG.js';
-import '../chunks/vidstack-BZVrgeRF.js';
-import 'vidstack/exports/font.ts';
+import '../chunks/vidstack-DgsBXr1J.js';
+import '../chunks/vidstack-vqp2QaHR.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/prod/player/vidstack-plyr-layout.js

@@ -1,89 +1,75 @@
 "use client"
 
-import { IS_SERVER, useMediaState, Primitive, isRemotionSrc } from '../chunks/vidstack-D91K36KQ.js';
+import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-C48MQkXV.js';
 import * as React from 'react';
-import { isString, isBoolean, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent } from '../chunks/vidstack-CYK75vJF.js';
-import { usePlyrLayoutClasses, isKeyboardEvent, isKeyboardClick } from 'vidstack';
-import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-BCBskRpc.js';
-import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DJThTSEm.js';
-import { useLayoutName, useClassName } from '../chunks/vidstack-CtxjO6HG.js';
-import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-BZVrgeRF.js';
+import { effect, createDisposalBin, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent, isString, isKeyboardEvent, isKeyboardClick } from '../chunks/vidstack-CZgUA94N.js';
+import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-D_Sd7838.js';
+import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DVMwXUgY.js';
+import { useLayoutName, useClassName } from '../chunks/vidstack-DgsBXr1J.js';
+import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-vqp2QaHR.js';
 export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
+import '@floating-ui/dom';
 import 'react-dom';
 import '../chunks/vidstack-CBF7iUqu.js';
 
-IS_SERVER ? "" : navigator?.userAgent.toLowerCase() || "";
-function canPlayHLSNatively(video) {
-  if (IS_SERVER) return false;
-  if (!video) video = document.createElement("video");
-  return video.canPlayType("application/vnd.apple.mpegurl").length > 0;
-}
-
-const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx|flac)($|\?)/i;
-const AUDIO_TYPES = /* @__PURE__ */ new Set([
-  "audio/mpeg",
-  "audio/ogg",
-  "audio/3gp",
-  "audio/mp3",
-  "audio/webm",
-  "audio/flac",
-  "audio/m4a",
-  "audio/m4b",
-  "audio/mp4a",
-  "audio/mp4"
-]);
-const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
-const VIDEO_TYPES = /* @__PURE__ */ new Set([
-  "video/mp4",
-  "video/webm",
-  "video/3gp",
-  "video/ogg",
-  "video/avi",
-  "video/mpeg"
-]);
-const HLS_VIDEO_EXTENSIONS = /\.(m3u8)($|\?)/i;
-const HLS_VIDEO_TYPES = /* @__PURE__ */ new Set([
-  // Apple sanctioned
-  "application/vnd.apple.mpegurl",
-  // Apple sanctioned for backwards compatibility
-  "audio/mpegurl",
-  // Very common
-  "audio/x-mpegurl",
-  // Very common
-  "application/x-mpegurl",
-  // Included for completeness
-  "video/x-mpegurl",
-  "video/mpegurl",
-  "application/mpegurl"
-]);
-function isAudioSrc({ src, type }) {
-  return isString(src) ? AUDIO_EXTENSIONS.test(src) || AUDIO_TYPES.has(type) || src.startsWith("blob:") && type === "audio/object" : type === "audio/object";
-}
-function isVideoSrc(src) {
-  return isString(src.src) ? VIDEO_EXTENSIONS.test(src.src) || VIDEO_TYPES.has(src.type) || src.src.startsWith("blob:") && src.type === "video/object" || isHLSSrc(src) && (IS_SERVER || canPlayHLSNatively()) : src.type === "video/object";
-}
-function isHLSSrc({ src, type }) {
-  return isString(src) && HLS_VIDEO_EXTENSIONS.test(src) || HLS_VIDEO_TYPES.has(type);
-}
-
-function getDownloadFile({
-  title,
-  src,
-  download
-}) {
-  const url = isBoolean(download) || download === "" ? src.src : isString(download) ? download : download?.url;
-  if (!isValidFileDownload({ url, src, download })) return null;
-  return {
-    url,
-    name: !isBoolean(download) && !isString(download) && download?.filename || title.toLowerCase() || "media"
+function usePlyrLayoutClasses(el, media) {
+  const {
+    canAirPlay,
+    canFullscreen,
+    canPictureInPicture,
+    controlsHidden,
+    currentTime,
+    fullscreen,
+    hasCaptions,
+    isAirPlayConnected,
+    paused,
+    pictureInPicture,
+    playing,
+    pointer,
+    poster,
+    textTrack,
+    viewType,
+    waiting
+  } = media.$state;
+  el.classList.add("plyr");
+  el.classList.add("plyr--full-ui");
+  const classes = {
+    "plyr--airplay-active": isAirPlayConnected,
+    "plyr--airplay-supported": canAirPlay,
+    "plyr--fullscreen-active": fullscreen,
+    "plyr--fullscreen-enabled": canFullscreen,
+    "plyr--hide-controls": controlsHidden,
+    "plyr--is-touch": () => pointer() === "coarse",
+    "plyr--loading": waiting,
+    "plyr--paused": paused,
+    "plyr--pip-active": pictureInPicture,
+    "plyr--pip-enabled": canPictureInPicture,
+    "plyr--playing": playing,
+    "plyr__poster-enabled": poster,
+    "plyr--stopped": () => paused() && currentTime() === 0,
+    "plyr--captions-active": textTrack,
+    "plyr--captions-enabled": hasCaptions
   };
+  const disposal = createDisposalBin();
+  for (const token of Object.keys(classes)) {
+    disposal.add(effect(() => void el.classList.toggle(token, !!classes[token]())));
+  }
+  disposal.add(
+    effect(() => {
+      const token = `plyr--${viewType()}`;
+      el.classList.add(token);
+      return () => el.classList.remove(token);
+    }),
+    effect(() => {
+      const { $provider } = media, type = $provider()?.type, token = `plyr--${isHTMLProvider(type) ? "html5" : type}`;
+      el.classList.toggle(token, !!type);
+      return () => el.classList.remove(token);
+    })
+  );
+  return () => disposal.empty();
 }
-function isValidFileDownload({
-  url,
-  src,
-  download
-}) {
-  return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
+function isHTMLProvider(type) {
+  return type === "audio" || type === "video";
 }
 
 const PlyrLayoutContext = React.createContext({});

package/prod/player/vidstack-remotion.js

@@ -1,12 +1,12 @@
 "use client"
 
 import * as React from 'react';
-import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-CYK75vJF.js';
+import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-CZgUA94N.js';
 import { Internals, random } from 'remotion';
-import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-D91K36KQ.js';
-export { isRemotionProvider } from '../chunks/vidstack-D91K36KQ.js';
-import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-BZVrgeRF.js';
-import 'vidstack';
+import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-C48MQkXV.js';
+export { isRemotionProvider } from '../chunks/vidstack-C48MQkXV.js';
+import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-vqp2QaHR.js';
+import '@floating-ui/dom';
 
 class RemotionLayoutEngine {
   #src = null;
@@ -328,7 +328,7 @@ class RemotionProviderLoader {
     return "video";
   }
   async load(ctx) {
-    return new (await import('../chunks/vidstack-DdiGCJVp.js')).RemotionProvider(this.target, ctx);
+    return new (await import('../chunks/vidstack-CwlfLr4v.js')).RemotionProvider(this.target, ctx);
   }
 }