@hanifhan1f/vidstack-react 1.12.13 → 1.12.15

package/server/chunks/vidstack-uyCXITen.js

@@ -0,0 +1,504 @@
+"use client"
+
+import * as React from 'react';
+import { createDisposalBin, listenEvent, createScope, signal, peek, effect, tick, isFunction, useSignal, deferredPromise } from './vidstack-D_bWd66h.js';
+import { Internals } from 'remotion';
+import { REMOTION_PROVIDER_ID, RemotionLayoutEngine, RemotionContextProvider, ErrorBoundary } from '../player/vidstack-remotion.js';
+import { isRemotionSrc, TimeRange } from './vidstack-Cm0qnRvu.js';
+import { NoReactInternals } from 'remotion/no-react';
+import './vidstack-D-hQD1eE.js';
+import '@floating-ui/dom';
+
+class RemotionPlaybackEngine {
+  #src;
+  #onFrameChange;
+  #onEnd;
+  #disposal = createDisposalBin();
+  #frame = 0;
+  #framesAdvanced = 0;
+  #playbackRate = 1;
+  #playing = false;
+  #rafId = -1;
+  #timerId = -1;
+  #startedAt = 0;
+  #isRunningInBackground = false;
+  get frame() {
+    return this.#frame;
+  }
+  set frame(frame) {
+    this.#frame = frame;
+    this.#onFrameChange(frame);
+  }
+  constructor(src, onFrameChange, onEnd) {
+    this.#src = src;
+    this.#onFrameChange = onFrameChange;
+    this.#onEnd = onEnd;
+    this.#frame = src.initialFrame ?? 0;
+    this.#disposal.add(
+      listenEvent(document, "visibilitychange", this.#onVisibilityChange.bind(this))
+    );
+  }
+  play() {
+    this.#framesAdvanced = 0;
+    this.#playing = true;
+    this.#startedAt = performance.now();
+    this.#tick();
+  }
+  stop() {
+    this.#playing = false;
+    if (this.#rafId >= 0) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = -1;
+    }
+    if (this.#timerId >= 0) {
+      clearTimeout(this.#timerId);
+      this.#timerId = -1;
+    }
+  }
+  setPlaybackRate(rate) {
+    this.#playbackRate = rate;
+  }
+  destroy() {
+    this.#disposal.empty();
+    this.stop();
+  }
+  #update() {
+    const { nextFrame, framesToAdvance, ended } = this.#calculateNextFrame();
+    this.#framesAdvanced += framesToAdvance;
+    if (nextFrame !== this.#frame) {
+      this.#onFrameChange(nextFrame);
+      this.#frame = nextFrame;
+    }
+    if (ended) {
+      this.#frame = this.#src.outFrame;
+      this.stop();
+      this.#onEnd();
+    }
+  }
+  #tick = () => {
+    this.#update();
+    if (this.#playing) {
+      this.#queueNextFrame(this.#tick);
+    }
+  };
+  #queueNextFrame(callback) {
+    if (this.#isRunningInBackground) {
+      this.#timerId = window.setTimeout(callback, 1e3 / this.#src.fps);
+    } else {
+      this.#rafId = requestAnimationFrame(callback);
+    }
+  }
+  #calculateNextFrame() {
+    const round = this.#playbackRate < 0 ? Math.ceil : Math.floor, time = performance.now() - this.#startedAt, framesToAdvance = round(time * this.#playbackRate / (1e3 / this.#src.fps)) - this.#framesAdvanced, nextFrame = framesToAdvance + this.#frame, isCurrentFrameOutOfBounds = this.#frame > this.#src.outFrame || this.#frame < this.#src.inFrame, isNextFrameOutOfBounds = nextFrame > this.#src.outFrame || nextFrame < this.#src.inFrame, ended = isNextFrameOutOfBounds && !isCurrentFrameOutOfBounds;
+    if (this.#playbackRate > 0 && !ended) {
+      if (isNextFrameOutOfBounds) {
+        return {
+          nextFrame: this.#src.inFrame,
+          framesToAdvance,
+          ended
+        };
+      }
+      return { nextFrame, framesToAdvance, ended };
+    }
+    if (isNextFrameOutOfBounds) {
+      return {
+        nextFrame: this.#src.outFrame,
+        framesToAdvance,
+        ended
+      };
+    }
+    return { nextFrame, framesToAdvance, ended };
+  }
+  #onVisibilityChange() {
+    this.#isRunningInBackground = document.visibilityState === "hidden";
+    if (this.#playing) {
+      this.stop();
+      this.play();
+    }
+  }
+}
+
+function validateRemotionResource({
+  src,
+  compositionWidth: width,
+  compositionHeight: height,
+  fps,
+  durationInFrames,
+  initialFrame,
+  inFrame,
+  outFrame,
+  numberOfSharedAudioTags
+}) {
+  return;
+}
+NoReactInternals.validateFps;
+NoReactInternals.validateDimension;
+NoReactInternals.validateDurationInFrames;
+
+class RemotionProvider {
+  $$PROVIDER_TYPE = "REMOTION";
+  scope = createScope();
+  #src = signal(null);
+  #setup = false;
+  #loadStart = false;
+  #audio = null;
+  #waiting = signal(false);
+  #waitingPromise = null;
+  #mediaTags = signal([]);
+  #mediaElements = signal([]);
+  #bufferingElements = /* @__PURE__ */ new Set();
+  #timeline = null;
+  #frame = signal({ [REMOTION_PROVIDER_ID]: 0 });
+  #layoutEngine = new RemotionLayoutEngine();
+  #playbackEngine = null;
+  #container;
+  #ctx;
+  #setTimeline;
+  #setMediaVolume = {
+    setMediaMuted: this.setMuted.bind(this),
+    setMediaVolume: this.setVolume.bind(this)
+  };
+  get type() {
+    return "remotion";
+  }
+  get currentSrc() {
+    return peek(this.#src);
+  }
+  get frame() {
+    return this.#frame();
+  }
+  constructor(container, ctx) {
+    this.#container = container;
+    this.#ctx = ctx;
+    this.#setTimeline = {
+      setFrame: this.#setFrame.bind(this),
+      setPlaying: this.#setPlaying.bind(this)
+    };
+    this.#layoutEngine.setContainer(container);
+  }
+  setup() {
+    effect(this.#watchWaiting.bind(this));
+    effect(this.#watchMediaTags.bind(this));
+    effect(this.#watchMediaElements.bind(this));
+  }
+  #watchMediaTags() {
+    this.#mediaTags();
+    this.#discoverMediaElements();
+  }
+  #discoverMediaElements() {
+    const elements = [...this.#container.querySelectorAll("audio,video")];
+    this.#mediaElements.set(elements);
+  }
+  #watchMediaElements() {
+    const elements = this.#mediaElements();
+    for (const tag of elements) {
+      const onWait = this.#onWaitFor.bind(this, tag), onStopWaiting = this.#onStopWaitingFor.bind(this, tag);
+      if (tag.currentSrc && tag.readyState < 4) {
+        this.#onWaitFor(tag);
+        listenEvent(tag, "canplay", onStopWaiting);
+      }
+      listenEvent(tag, "waiting", onWait);
+      listenEvent(tag, "playing", onStopWaiting);
+    }
+    for (const el of this.#bufferingElements) {
+      if (!elements.includes(el)) this.#onStopWaitingFor(el);
+    }
+  }
+  #onFrameChange(frame) {
+    const { inFrame, fps } = this.#src(), { seeking } = this.#ctx.$state, time = Math.max(0, frame - inFrame) / fps;
+    this.#frame.set((record) => ({
+      ...record,
+      [REMOTION_PROVIDER_ID]: frame
+    }));
+    this.#ctx.notify("time-change", time);
+    if (seeking()) {
+      tick();
+      this.#ctx.notify("seeked", time);
+    }
+  }
+  #onFrameEnd() {
+    this.pause();
+    this.#ctx.notify("end");
+  }
+  async play() {
+    const { ended } = this.#ctx.$state;
+    if (peek(ended)) {
+      this.#setFrame({ [REMOTION_PROVIDER_ID]: 0 });
+    }
+    try {
+      const mediaElements = peek(this.#mediaElements);
+      if (mediaElements.length) {
+        await Promise.all(mediaElements.map((media) => media.play()));
+      }
+      this.#ctx.notify("play");
+      tick();
+      if (this.#waitingPromise) {
+        this.#ctx.notify("waiting");
+        return this.#waitingPromise.promise;
+      } else {
+        this.#playbackEngine?.play();
+        this.#ctx.notify("playing");
+      }
+    } catch (error) {
+      throw error;
+    }
+  }
+  async pause() {
+    const { paused } = this.#ctx.$state;
+    this.#playbackEngine?.stop();
+    this.#ctx.notify("pause");
+  }
+  setMuted(value) {
+    if (!this.#ctx) return;
+    const { muted, volume } = this.#ctx.$state;
+    if (isFunction(value)) {
+      this.setMuted(value(muted()));
+      return;
+    }
+    this.#ctx.notify("volume-change", {
+      volume: peek(volume),
+      muted: value
+    });
+  }
+  setCurrentTime(time) {
+    const { fps } = this.#src(), frame = time * fps;
+    this.#ctx.notify("seeking", time);
+    this.#setFrame({ [REMOTION_PROVIDER_ID]: frame });
+  }
+  setVolume(value) {
+    if (!this.#ctx) return;
+    const { volume, muted } = this.#ctx.$state;
+    if (isFunction(value)) {
+      this.setVolume(value(volume()));
+      return;
+    }
+    this.#ctx.notify("volume-change", {
+      volume: value,
+      muted: peek(muted)
+    });
+  }
+  setPlaybackRate(rate) {
+    if (isFunction(rate)) {
+      const { playbackRate } = this.#ctx.$state;
+      this.setPlaybackRate(rate(peek(playbackRate)));
+      return;
+    }
+    this.#playbackEngine?.setPlaybackRate(rate);
+    this.#ctx.notify("rate-change", rate);
+  }
+  async loadSource(src) {
+    if (!isRemotionSrc(src)) return;
+    const onUserError = src.onError, resolvedSrc = {
+      compositionWidth: 1920,
+      compositionHeight: 1080,
+      fps: 30,
+      initialFrame: 0,
+      inFrame: 0,
+      outFrame: src.durationInFrames,
+      numberOfSharedAudioTags: 5,
+      inputProps: {},
+      ...src,
+      onError: (error) => {
+        this.pause();
+        this.#ctx.notify("error", {
+          message: error.message,
+          code: 1
+        });
+        onUserError?.(error);
+      }
+    };
+    this.#src.set(resolvedSrc);
+    for (const prop of Object.keys(resolvedSrc)) {
+      src[prop] = resolvedSrc[prop];
+    }
+    this.changeSrc(resolvedSrc);
+  }
+  destroy() {
+    this.changeSrc(null);
+  }
+  changeSrc(src) {
+    this.#playbackEngine?.destroy();
+    this.#waiting.set(false);
+    this.#waitingPromise?.reject("src changed");
+    this.#waitingPromise = null;
+    this.#audio = null;
+    this.#timeline = null;
+    this.#playbackEngine = null;
+    this.#mediaTags.set([]);
+    this.#bufferingElements.clear();
+    this.#frame.set({ [REMOTION_PROVIDER_ID]: 0 });
+    this.#layoutEngine.setSrc(src);
+    if (src) {
+      this.#timeline = this.#createTimelineContextValue();
+      this.#playbackEngine = new RemotionPlaybackEngine(
+        src,
+        this.#onFrameChange.bind(this),
+        this.#onFrameEnd.bind(this)
+      );
+    }
+  }
+  render = () => {
+    const $src = useSignal(this.#src);
+    if (!$src) {
+      throw Error(
+        "[vidstack] no src"
+      );
+    }
+    React.useEffect(() => {
+      if (!isRemotionSrc($src)) return;
+      validateRemotionResource($src);
+      const rafId = requestAnimationFrame(() => {
+        if (!this.#setup) {
+          this.#ctx.notify("provider-setup", this);
+          this.#setup = true;
+        }
+        if (!this.#loadStart) {
+          this.#ctx.notify("load-start");
+          this.#loadStart = true;
+        }
+        this.#discoverMediaElements();
+        tick();
+        if (!this.#waiting()) this.#ready($src);
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+        this.#loadStart = false;
+      };
+    }, [$src]);
+    const Component = Internals.useLazyComponent({
+      component: $src.src
+    });
+    const { $state } = this.#ctx, $volume = useSignal($state.volume), $isMuted = useSignal($state.muted);
+    const mediaVolume = React.useMemo(() => {
+      const { muted, volume } = this.#ctx.$state;
+      return { mediaMuted: muted(), mediaVolume: volume() };
+    }, [$isMuted, $volume]);
+    return /* @__PURE__ */ React.createElement(
+      RemotionContextProvider,
+      {
+        src: $src,
+        component: Component,
+        timeline: this.#timeline,
+        mediaVolume,
+        setMediaVolume: this.#setMediaVolume
+      },
+      /* @__PURE__ */ React.createElement(Internals.Timeline.SetTimelineContext.Provider, { value: this.#setTimeline }, React.createElement(this.renderVideo, { src: $src }))
+    );
+  };
+  renderVideo = ({ src }) => {
+    const video = Internals.useVideo(), Video = video ? video.component : null, audioContext = React.useContext(Internals.SharedAudioContext);
+    const { $state } = this.#ctx;
+    useSignal(this.#frame);
+    useSignal($state.playing);
+    useSignal($state.playbackRate);
+    React.useEffect(() => {
+      this.#audio = audioContext;
+      return () => {
+        this.#audio = null;
+      };
+    }, [audioContext]);
+    const LoadingContent = React.useMemo(() => src.renderLoading?.(), [src]);
+    const Content = Video ? /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: src.errorFallback, onError: src.onError }, /* @__PURE__ */ React.createElement(Internals.ClipComposition, null, /* @__PURE__ */ React.createElement(Video, { ...video?.props, ...src.inputProps }))) : null;
+    return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: LoadingContent }, Content);
+  };
+  #ready(src) {
+    if (!src) return;
+    const { outFrame, inFrame, fps } = src, duration = (outFrame - inFrame) / fps;
+    this.#ctx.notify("loaded-metadata");
+    this.#ctx.notify("loaded-data");
+    this.#ctx.delegate.ready({
+      duration,
+      seekable: new TimeRange(0, duration),
+      buffered: new TimeRange(0, duration)
+    });
+    if (src.initialFrame) {
+      this.#setFrame({
+        [REMOTION_PROVIDER_ID]: src.initialFrame
+      });
+    }
+  }
+  #onWaitFor(el) {
+    this.#bufferingElements.add(el);
+    this.#waiting.set(true);
+    if (!this.#waitingPromise) {
+      this.#waitingPromise = deferredPromise();
+    }
+  }
+  #onStopWaitingFor(el) {
+    this.#bufferingElements.delete(el);
+    if (this.#bufferingElements.size) return;
+    this.#waiting.set(false);
+    this.#waitingPromise?.resolve();
+    this.#waitingPromise = null;
+    const { canPlay } = this.#ctx.$state;
+    if (!peek(canPlay)) {
+      this.#ready(peek(this.#src));
+    }
+  }
+  #watchWaiting() {
+    this.#waiting();
+    const { paused } = this.#ctx.$state;
+    if (peek(paused)) return;
+    if (this.#waiting()) {
+      this.#playbackEngine?.stop();
+      this.#ctx.notify("waiting");
+    } else {
+      this.#playbackEngine?.play();
+      this.#ctx.notify("playing");
+    }
+  }
+  #setFrame(value) {
+    if (isFunction(value)) {
+      this.#setFrame(value(this.#frame()));
+      return;
+    }
+    this.#frame.set((record) => ({ ...record, ...value }));
+    const nextFrame = value[REMOTION_PROVIDER_ID];
+    if (this.#playbackEngine && this.#playbackEngine.frame !== nextFrame) {
+      this.#playbackEngine.frame = nextFrame;
+    }
+  }
+  #setPlaying(value) {
+    const { playing } = this.#ctx.$state;
+    if (isFunction(value)) {
+      this.#setPlaying(value(playing()));
+      return;
+    }
+    if (value) {
+      this.play();
+    } else if (!value) {
+      this.pause();
+    }
+  }
+  #createTimelineContextValue() {
+    const { playing, playbackRate } = this.#ctx.$state, frame = this.#frame, mediaTags = this.#mediaTags, setPlaybackRate = this.setPlaybackRate.bind(this);
+    return {
+      rootId: REMOTION_PROVIDER_ID,
+      get frame() {
+        return frame();
+      },
+      get playing() {
+        return playing();
+      },
+      get playbackRate() {
+        return playbackRate();
+      },
+      imperativePlaying: {
+        get current() {
+          return playing();
+        }
+      },
+      setPlaybackRate,
+      audioAndVideoTags: {
+        get current() {
+          return mediaTags();
+        },
+        set current(tags) {
+          mediaTags.set(tags);
+        }
+      }
+    };
+  }
+}
+
+export { RemotionProvider };

package/server/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-CWR0J8Qz.js';
+export { defaultLayoutIcons } from './vidstack-default-icons.js';
+import 'react';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-BtqWstSj.js';
+import '../chunks/vidstack-Cm0qnRvu.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-CoGzBr_V.js';
+import 'react-dom';
+import '../chunks/vidstack-C-HdFsZi.js';
+import '../chunks/vidstack-D-hQD1eE.js';
+import '../chunks/vidstack-CBF7iUqu.js';

package/server/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/server/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-CWR0J8Qz.js';
+export { defaultLayoutIcons } from './vidstack-default-icons.js';
+import 'react';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-BtqWstSj.js';
+import '../chunks/vidstack-Cm0qnRvu.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-CoGzBr_V.js';
+import 'react-dom';
+import '../chunks/vidstack-C-HdFsZi.js';
+import '../chunks/vidstack-D-hQD1eE.js';
+import '../chunks/vidstack-CBF7iUqu.js';

package/server/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 };