@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/dev/chunks/vidstack-lYFZKRUc.js

@@ -0,0 +1,401 @@
+"use client"
+
+import { peek, listenEvent, effect, DOMEvent, isString, camelToKebabCase, isUndefined, isFunction } from './vidstack-D_bWd66h.js';
+import { QualitySymbol, RAFLoop, TextTrack, TextTrackSymbol, ListSymbol, IS_CHROME, coerceToError, loadScript, VideoProvider, isHLSSupported, preconnect } from './vidstack-BDiAEW1N.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) {
+    {
+      this.#ctx.logger?.errorGroup(`[vidstack] HLS error \`${eventType}\``).labelledLog("Media Element", this.#instance?.media).labelledLog("HLS Instance", this.#instance).labelledLog("Event Type", eventType).labelledLog("Data", data).labelledLog("Src", peek(this.#ctx.$state.source)).labelledLog("Media Store", { ...this.#ctx.$state }).dispatch();
+    }
+    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;
+    this.#ctx?.logger?.info("\u{1F3D7}\uFE0F Destroyed HLS instance");
+  }
+}
+
+class HLSLibLoader {
+  #lib;
+  #ctx;
+  #callback;
+  constructor(lib, ctx, callback) {
+    this.#lib = lib;
+    this.#ctx = ctx;
+    this.#callback = callback;
+    this.#startLoading();
+  }
+  async #startLoading() {
+    this.#ctx.logger?.info("\u{1F3D7}\uFE0F Loading HLS Library");
+    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.logger?.error(message);
+      this.#ctx.player.dispatch(new DOMEvent("hls-unsupported"));
+      this.#ctx.notify("error", { message, code: 4 });
+      return null;
+    }
+    return ctor;
+  }
+  #onLoadStart() {
+    {
+      this.#ctx.logger?.infoGroup("Starting to load `hls.js`").labelledLog("URL", this.#lib).dispatch();
+    }
+    this.#ctx.player.dispatch(new DOMEvent("hls-lib-load-start"));
+  }
+  #onLoaded(ctor) {
+    {
+      this.#ctx.logger?.infoGroup("Loaded `hls.js`").labelledLog("Library", this.#lib).labelledLog("Constructor", ctor).dispatch();
+    }
+    this.#ctx.player.dispatch(
+      new DOMEvent("hls-lib-loaded", {
+        detail: ctor
+      })
+    );
+    this.#callback(ctor);
+  }
+  #onLoadError(e) {
+    const error = coerceToError(e);
+    {
+      this.#ctx.logger?.errorGroup("[vidstack] Failed to load `hls.js`").labelledLog("Library", this.#lib).labelledLog("Error", e).dispatch();
+    }
+    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(
+        true ? "[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(
+        true ? "[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${".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/dev/player/vidstack-default-components.js

@@ -0,0 +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-BZIhWvGa.js';
+export { defaultLayoutIcons } from './vidstack-default-icons.js';
+import 'react';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-f6WXkmfP.js';
+import '../chunks/vidstack-BDiAEW1N.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-B-FM4-oZ.js';
+import 'react-dom';
+import '../chunks/vidstack-CvWDiSTs.js';
+import '../chunks/vidstack-D-hQD1eE.js';
+import '../chunks/vidstack-CBF7iUqu.js';

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

@@ -0,0 +1,88 @@
+"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-D_bWd66h.js';
+import { Icon } from '../chunks/vidstack-CBF7iUqu.js';
+
+function createIcon(paths) {
+  function DefaultLayoutIcon(props) {
+    return /* @__PURE__ */ React.createElement(Icon, { paths, ...props });
+  }
+  DefaultLayoutIcon.displayName = "DefaultLayoutIcon";
+  return DefaultLayoutIcon;
+}
+const defaultLayoutIcons = {
+  AirPlayButton: {
+    Default: createIcon(Icon$5)
+  },
+  GoogleCastButton: {
+    Default: createIcon(Icon$24)
+  },
+  PlayButton: {
+    Play: createIcon(Icon$62),
+    Pause: createIcon(Icon$59),
+    Replay: createIcon(Icon$74)
+  },
+  MuteButton: {
+    Mute: createIcon(Icon$54),
+    VolumeLow: createIcon(Icon$105),
+    VolumeHigh: createIcon(Icon$104)
+  },
+  CaptionButton: {
+    On: createIcon(Icon$26),
+    Off: createIcon(Icon$27)
+  },
+  PIPButton: {
+    Enter: createIcon(Icon$61),
+    Exit: createIcon(Icon$60)
+  },
+  FullscreenButton: {
+    Enter: createIcon(Icon$40),
+    Exit: createIcon(Icon$39)
+  },
+  SeekButton: {
+    Backward: createIcon(Icon$77),
+    Forward: createIcon(Icon$81)
+  },
+  DownloadButton: {
+    Default: createIcon(Icon$31)
+  },
+  Menu: {
+    Accessibility: createIcon(Icon$0),
+    ArrowLeft: createIcon(Icon$11),
+    ArrowRight: createIcon(Icon$22),
+    Audio: createIcon(Icon$53),
+    Chapters: createIcon(Icon$16),
+    Captions: createIcon(Icon$27),
+    Playback: createIcon(Icon$63),
+    Settings: createIcon(Icon$88),
+    AudioBoostUp: createIcon(Icon$104),
+    AudioBoostDown: createIcon(Icon$105),
+    SpeedUp: createIcon(Icon$35),
+    SpeedDown: createIcon(Icon$34),
+    QualityUp: createIcon(Icon$13),
+    QualityDown: createIcon(Icon$8),
+    FontSizeUp: createIcon(Icon$13),
+    FontSizeDown: createIcon(Icon$8),
+    OpacityUp: createIcon(Icon$33),
+    OpacityDown: createIcon(Icon$56),
+    RadioCheck: createIcon(Icon$19)
+  },
+  KeyboardDisplay: {
+    Play: createIcon(Icon$62),
+    Pause: createIcon(Icon$59),
+    Mute: createIcon(Icon$54),
+    VolumeUp: createIcon(Icon$104),
+    VolumeDown: createIcon(Icon$105),
+    EnterFullscreen: createIcon(Icon$40),
+    ExitFullscreen: createIcon(Icon$39),
+    EnterPiP: createIcon(Icon$61),
+    ExitPiP: createIcon(Icon$60),
+    CaptionsOn: createIcon(Icon$26),
+    CaptionsOff: createIcon(Icon$27),
+    SeekForward: createIcon(Icon$35),
+    SeekBackward: createIcon(Icon$34)
+  }
+};
+
+export { defaultLayoutIcons };

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

@@ -0,0 +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-BZIhWvGa.js';
+export { defaultLayoutIcons } from './vidstack-default-icons.js';
+import 'react';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-f6WXkmfP.js';
+import '../chunks/vidstack-BDiAEW1N.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-B-FM4-oZ.js';
+import 'react-dom';
+import '../chunks/vidstack-CvWDiSTs.js';
+import '../chunks/vidstack-D-hQD1eE.js';
+import '../chunks/vidstack-CBF7iUqu.js';

package/dev/player/vidstack-plyr-icons.js

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from 'react';
+import { Icon } from '../chunks/vidstack-CBF7iUqu.js';
+
+var airplay = `<g><path d="M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z"></path><polygon points="4 17 14 17 9 11"></polygon></g>`;
+
+var captionsOff = `<g fill-rule="evenodd" fill-opacity="0.5"><path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path></g>`;
+
+var captionsOn = `<g fill-rule="evenodd"><path d="M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z"></path></g>`;
+
+var download = `<g transform="translate(2 1)"><path d="M7,12 C7.3,12 7.5,11.9 7.7,11.7 L13.4,6 L12,4.6 L8,8.6 L8,0 L6,0 L6,8.6 L2,4.6 L0.6,6 L6.3,11.7 C6.5,11.9 6.7,12 7,12 Z" /><rect width="14" height="2" y="14" /></g>`;
+
+var exitFullscreen = `<polygon points="10 3 13.6 3 9.6 7 11 8.4 15 4.4 15 8 17 8 17 1 10 1"></polygon><polygon points="7 9.6 3 13.6 3 10 1 10 1 17 8 17 8 15 4.4 15 8.4 11"></polygon>`;
+
+var enterFullscreen = `<polygon points="1 12 4.6 12 0.6 16 2 17.4 6 13.4 6 17 8 17 8 10 1 10"></polygon><polygon points="16 0.6 12 4.6 12 1 10 1 10 8 17 8 17 6 13.4 6 17.4 2"></polygon>`;
+
+var fastForward = `<polygon points="7.875 7.17142857 0 1 0 17 7.875 10.8285714 7.875 17 18 9 7.875 1"></polygon>`;
+
+var muted = `<polygon points="12.4 12.5 14.5 10.4 16.6 12.5 18 11.1 15.9 9 18 6.9 16.6 5.5 14.5 7.6 12.4 5.5 11 6.9 13.1 9 11 11.1"></polygon><path d="M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"></path>`;
+
+var pause = `<path d="M6,1 L3,1 C2.4,1 2,1.4 2,2 L2,16 C2,16.6 2.4,17 3,17 L6,17 C6.6,17 7,16.6 7,16 L7,2 C7,1.4 6.6,1 6,1 L6,1 Z"></path><path d="M12,1 C11.4,1 11,1.4 11,2 L11,16 C11,16.6 11.4,17 12,17 L15,17 C15.6,17 16,16.6 16,16 L16,2 C16,1.4 15.6,1 15,1 L12,1 Z"></path>`;
+
+var pip = `<polygon points="13.293 3.293 7.022 9.564 8.436 10.978 14.707 4.707 17 7 17 1 11 1"></polygon><path d="M13,15 L3,15 L3,5 L8,5 L8,3 L2,3 C1.448,3 1,3.448 1,4 L1,16 C1,16.552 1.448,17 2,17 L14,17 C14.552,17 15,16.552 15,16 L15,10 L13,10 L13,15 L13,15 Z"></path>`;
+
+var play = `<path d="M15.5615866,8.10002147 L3.87056367,0.225209313 C3.05219207,-0.33727727 2,0.225209313 2,1.12518784 L2,16.8748122 C2,17.7747907 3.05219207,18.3372773 3.87056367,17.7747907 L15.5615866,9.89997853 C16.1461378,9.44998927 16.1461378,8.55001073 15.5615866,8.10002147 L15.5615866,8.10002147 Z"></path>`;
+
+var restart = `<path d="M9.7,1.2 L10.4,7.6 L12.5,5.5 C14.4,7.4 14.4,10.6 12.5,12.5 C11.6,13.5 10.3,14 9,14 C7.7,14 6.4,13.5 5.5,12.5 C3.6,10.6 3.6,7.4 5.5,5.5 C6.1,4.9 6.9,4.4 7.8,4.2 L7.2,2.3 C6,2.6 4.9,3.2 4,4.1 C1.3,6.8 1.3,11.2 4,14 C5.3,15.3 7.1,16 8.9,16 C10.8,16 12.5,15.3 13.8,14 C16.5,11.3 16.5,6.9 13.8,4.1 L16,1.9 L9.7,1.2 L9.7,1.2 Z"></path>`;
+
+var rewind = `<polygon points="10.125 1 0 9 10.125 17 10.125 10.8285714 18 17 18 1 10.125 7.17142857"></polygon>`;
+
+var settings = `<path d="M16.135,7.784 C14.832,7.458 14.214,5.966 14.905,4.815 C15.227,4.279 15.13,3.817 14.811,3.499 L14.501,3.189 C14.183,2.871 13.721,2.774 13.185,3.095 C12.033,3.786 10.541,3.168 10.216,1.865 C10.065,1.258 9.669,1 9.219,1 L8.781,1 C8.331,1 7.936,1.258 7.784,1.865 C7.458,3.168 5.966,3.786 4.815,3.095 C4.279,2.773 3.816,2.87 3.498,3.188 L3.188,3.498 C2.87,3.816 2.773,4.279 3.095,4.815 C3.786,5.967 3.168,7.459 1.865,7.784 C1.26,7.935 1,8.33 1,8.781 L1,9.219 C1,9.669 1.258,10.064 1.865,10.216 C3.168,10.542 3.786,12.034 3.095,13.185 C2.773,13.721 2.87,14.183 3.189,14.501 L3.499,14.811 C3.818,15.13 4.281,15.226 4.815,14.905 C5.967,14.214 7.459,14.832 7.784,16.135 C7.935,16.742 8.331,17 8.781,17 L9.219,17 C9.669,17 10.064,16.742 10.216,16.135 C10.542,14.832 12.034,14.214 13.185,14.905 C13.72,15.226 14.182,15.13 14.501,14.811 L14.811,14.501 C15.129,14.183 15.226,13.72 14.905,13.185 C14.214,12.033 14.832,10.541 16.135,10.216 C16.742,10.065 17,9.669 17,9.219 L17,8.781 C17,8.33 16.74,7.935 16.135,7.784 L16.135,7.784 Z M9,12 C7.343,12 6,10.657 6,9 C6,7.343 7.343,6 9,6 C10.657,6 12,7.343 12,9 C12,10.657 10.657,12 9,12 L9,12 Z"></path>`;
+
+var volume = `<path d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"></path><path d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9.00000021 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312523,9.00000021 C14.1312723,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z"></path><path d="M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"></path>`;
+
+function createIcon(paths) {
+  function PlyrLayoutIcon(props) {
+    return /* @__PURE__ */ React.createElement(Icon, { viewBox: "0 0 18 18", paths, ...props });
+  }
+  PlyrLayoutIcon.displayName = "PlyrLayoutIcon";
+  return PlyrLayoutIcon;
+}
+const plyrLayoutIcons = {
+  AirPlay: createIcon(airplay),
+  CaptionsOff: createIcon(captionsOff),
+  CaptionsOn: createIcon(captionsOn),
+  Download: createIcon(download),
+  EnterFullscreen: createIcon(enterFullscreen),
+  EnterPiP: createIcon(pip),
+  ExitFullscreen: createIcon(exitFullscreen),
+  ExitPiP: createIcon(pip),
+  FastForward: createIcon(fastForward),
+  Muted: createIcon(muted),
+  Pause: createIcon(pause),
+  Play: createIcon(play),
+  Restart: createIcon(restart),
+  Rewind: createIcon(rewind),
+  Settings: createIcon(settings),
+  Volume: createIcon(volume)
+};
+
+export { plyrLayoutIcons };