@cueframe/kernel 0.0.1 → 0.1.0

package/dist/chunk-FUWJOVVK.js

@@ -1,3633 +0,0 @@
-import {
-  TransitionSeries,
-  linearTiming
-} from "./chunk-EAUSEGB7.js";
-
-// ../execution/primitives/src/lib/preview.tsx
-import * as React2 from "react";
-import { AbsoluteFill } from "remotion";
-
-// ../../node_modules/.pnpm/@remotion+player@4.0.429_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/@remotion/player/dist/esm/index.mjs
-import { jsx, jsxs } from "react/jsx-runtime";
-import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
-import { Internals } from "remotion";
-import React from "react";
-import { useContext as useContext2, useEffect, useState } from "react";
-import { Internals as Internals3 } from "remotion";
-import { useContext, useLayoutEffect } from "react";
-import { Internals as Internals2 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
-import { Internals as Internals4 } from "remotion";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef5 } from "react";
-import { Internals as Internals6 } from "remotion";
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { useCallback as useCallback2, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
-import { Internals as Internals5 } from "remotion";
-import { useEffect as useEffect4, useRef as useRef4 } from "react";
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
-import {
-  forwardRef as forwardRef2,
-  useEffect as useEffect13,
-  useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo14,
-  useRef as useRef12,
-  useState as useState13
-} from "react";
-import { Composition, Internals as Internals15 } from "remotion";
-import React10, {
-  Suspense,
-  forwardRef,
-  useCallback as useCallback11,
-  useContext as useContext6,
-  useEffect as useEffect12,
-  useImperativeHandle,
-  useMemo as useMemo12,
-  useRef as useRef11,
-  useState as useState11
-} from "react";
-import { Internals as Internals11 } from "remotion";
-import React3 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-import React4, { useEffect as useEffect7 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef9, useState as useState10 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-import { useCallback as useCallback5, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
-import { Internals as Internals7 } from "remotion";
-import React5, { useCallback as useCallback4, useMemo as useMemo3, useState as useState5 } from "react";
-import { random } from "remotion";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-import {
-  useCallback as useCallback6,
-  useContext as useContext5,
-  useEffect as useEffect9,
-  useMemo as useMemo5,
-  useState as useState8
-} from "react";
-import { Internals as Internals8 } from "remotion";
-import { useEffect as useEffect8, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
-import { Internals as Internals9, interpolate } from "remotion";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useMemo as useMemo7 } from "react";
-import { Internals as Internals10 } from "remotion";
-import { jsxs as jsxs7 } from "react/jsx-runtime";
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment2 } from "react/jsx-runtime";
-import { useCallback as useCallback10, useMemo as useMemo11 } from "react";
-import { useCallback as useCallback9, useMemo as useMemo10, useRef as useRef10 } from "react";
-import { jsx as jsx12, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
-import { useCallback as useCallback12, useMemo as useMemo13, useState as useState12 } from "react";
-import { Internals as Internals13 } from "remotion";
-import { Internals as Internals12 } from "remotion";
-import { jsx as jsx13 } from "react/jsx-runtime";
-import { Internals as Internals14 } from "remotion";
-import { NoReactInternals } from "remotion/no-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-import {
-  forwardRef as forwardRef4,
-  useImperativeHandle as useImperativeHandle4,
-  useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo17,
-  useRef as useRef14,
-  useState as useState14
-} from "react";
-import { Internals as Internals17, random as random2 } from "remotion";
-import React13, {
-  forwardRef as forwardRef3,
-  Suspense as Suspense2,
-  useCallback as useCallback13,
-  useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo16,
-  useRef as useRef13
-} from "react";
-import { Internals as Internals16 } from "remotion";
-import { useContext as useContext7, useMemo as useMemo15 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ICON_SIZE = 25;
-var fullscreenIconSize = 16;
-var PlayIcon = () => {
-  return /* @__PURE__ */ jsx("svg", {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    viewBox: "0 0 25 25",
-    fill: "none",
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M8 6.375C7.40904 8.17576 7.06921 10.2486 7.01438 12.3871C6.95955 14.5255 7.19163 16.6547 7.6875 18.5625C9.95364 18.2995 12.116 17.6164 14.009 16.5655C15.902 15.5147 17.4755 14.124 18.6088 12.5C17.5158 10.8949 15.9949 9.51103 14.1585 8.45082C12.3222 7.3906 10.2174 6.68116 8 6.375Z",
-      fill: "white",
-      stroke: "white",
-      strokeWidth: "6.25",
-      strokeLinejoin: "round"
-    })
-  });
-};
-var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs("svg", {
-    viewBox: "0 0 100 100",
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    children: [
-      /* @__PURE__ */ jsx("rect", {
-        x: "25",
-        y: "20",
-        width: "20",
-        height: "60",
-        fill: "#fff",
-        ry: "5",
-        rx: "5"
-      }),
-      /* @__PURE__ */ jsx("rect", {
-        x: "55",
-        y: "20",
-        width: "20",
-        height: "60",
-        fill: "#fff",
-        ry: "5",
-        rx: "5"
-      })
-    ]
-  });
-};
-var FullscreenIcon = ({
-  isFullscreen
-}) => {
-  const strokeWidth = 6;
-  const viewSize = 32;
-  const out = isFullscreen ? 0 : strokeWidth / 2;
-  const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
-  const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
-  return /* @__PURE__ */ jsxs("svg", {
-    viewBox: `0 0 ${viewSize} ${viewSize}`,
-    height: fullscreenIconSize,
-    width: fullscreenIconSize,
-    children: [
-      /* @__PURE__ */ jsx("path", {
-        d: `
-				M ${out} ${inset}
-				L ${middleInset} ${middleInset}
-				L ${inset} ${out}
-				`,
-        stroke: "#fff",
-        strokeWidth,
-        fill: "none"
-      }),
-      /* @__PURE__ */ jsx("path", {
-        d: `
-				M ${viewSize - out} ${inset}
-				L ${viewSize - middleInset} ${middleInset}
-				L ${viewSize - inset} ${out}
-				`,
-        stroke: "#fff",
-        strokeWidth,
-        fill: "none"
-      }),
-      /* @__PURE__ */ jsx("path", {
-        d: `
-				M ${out} ${viewSize - inset}
-				L ${middleInset} ${viewSize - middleInset}
-				L ${inset} ${viewSize - out}
-				`,
-        stroke: "#fff",
-        strokeWidth,
-        fill: "none"
-      }),
-      /* @__PURE__ */ jsx("path", {
-        d: `
-				M ${viewSize - out} ${viewSize - inset}
-				L ${viewSize - middleInset} ${viewSize - middleInset}
-				L ${viewSize - inset} ${viewSize - out}
-				`,
-        stroke: "#fff",
-        strokeWidth,
-        fill: "none"
-      })
-    ]
-  });
-};
-var VolumeOffIcon = () => {
-  return /* @__PURE__ */ jsx("svg", {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z",
-      fill: "#fff"
-    })
-  });
-};
-var VolumeOnIcon = () => {
-  return /* @__PURE__ */ jsx("svg", {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z",
-      fill: "#fff"
-    })
-  });
-};
-var className = "__remotion_buffering_indicator";
-var remotionBufferingAnimation = "__remotion_buffering_animation";
-var playerStyle = {
-  width: ICON_SIZE,
-  height: ICON_SIZE,
-  overflow: "hidden",
-  lineHeight: "normal",
-  fontSize: "inherit"
-};
-var studioStyle = {
-  width: 14,
-  height: 14,
-  overflow: "hidden",
-  lineHeight: "normal",
-  fontSize: "inherit"
-};
-var BufferingIndicator = ({ type }) => {
-  const style2 = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs2(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx2("style", {
-        type: "text/css",
-        children: `
-				@keyframes ${remotionBufferingAnimation} {
-          0% {
-            rotate: 0deg;
-          }
-          100% {
-            rotate: 360deg;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionBufferingAnimation} 1s linear infinite;
-        }        
-			`
-      }),
-      /* @__PURE__ */ jsx2("div", {
-        style: style2,
-        children: /* @__PURE__ */ jsx2("svg", {
-          viewBox: type === "player" ? "0 0 22 22" : "0 0 18 18",
-          style: style2,
-          className,
-          children: /* @__PURE__ */ jsx2("path", {
-            d: type === "player" ? "M 11 4 A 7 7 0 0 1 15.1145 16.66312" : "M 9 2 A 7 7 0 0 1 13.1145 14.66312",
-            stroke: "white",
-            strokeLinecap: "round",
-            fill: "none",
-            strokeWidth: 3
-          })
-        })
-      })
-    ]
-  });
-};
-var calculatePlayerSize = ({
-  currentSize,
-  width,
-  height,
-  compositionWidth,
-  compositionHeight
-}) => {
-  if (width !== void 0 && height === void 0) {
-    return {
-      aspectRatio: [compositionWidth, compositionHeight].join("/")
-    };
-  }
-  if (height !== void 0 && width === void 0) {
-    return {
-      aspectRatio: [compositionWidth, compositionHeight].join("/")
-    };
-  }
-  if (!currentSize) {
-    return {
-      width: compositionWidth,
-      height: compositionHeight
-    };
-  }
-  return {
-    width: compositionWidth,
-    height: compositionHeight
-  };
-};
-var calculateCanvasTransformation = ({
-  previewSize,
-  compositionWidth,
-  compositionHeight,
-  canvasSize
-}) => {
-  const scale = Internals.calculateScale({
-    canvasSize,
-    compositionHeight,
-    compositionWidth,
-    previewSize
-  });
-  const correction = 0 - (1 - scale) / 2;
-  const xCorrection = correction * compositionWidth;
-  const yCorrection = correction * compositionHeight;
-  const width = compositionWidth * scale;
-  const height = compositionHeight * scale;
-  const centerX = canvasSize.width / 2 - width / 2;
-  const centerY = canvasSize.height / 2 - height / 2;
-  return {
-    centerX,
-    centerY,
-    xCorrection,
-    yCorrection,
-    scale
-  };
-};
-var calculateOuterStyle = ({
-  config,
-  style: style2,
-  canvasSize,
-  overflowVisible,
-  layout
-}) => {
-  if (!config) {
-    return {};
-  }
-  return {
-    position: "relative",
-    overflow: overflowVisible ? "visible" : "hidden",
-    ...calculatePlayerSize({
-      compositionHeight: config.height,
-      compositionWidth: config.width,
-      currentSize: canvasSize,
-      height: style2?.height,
-      width: style2?.width
-    }),
-    opacity: layout ? 1 : 0,
-    ...style2
-  };
-};
-var calculateContainerStyle = ({
-  config,
-  layout,
-  scale,
-  overflowVisible
-}) => {
-  if (!config) {
-    return {};
-  }
-  if (!layout) {
-    return {
-      position: "absolute",
-      width: config.width,
-      height: config.height,
-      display: "flex",
-      transform: `scale(${scale})`,
-      overflow: overflowVisible ? "visible" : "hidden"
-    };
-  }
-  return {
-    position: "absolute",
-    width: config.width,
-    height: config.height,
-    display: "flex",
-    transform: `scale(${scale})`,
-    marginLeft: layout.xCorrection,
-    marginTop: layout.yCorrection,
-    overflow: overflowVisible ? "visible" : "hidden"
-  };
-};
-var calculateOuter = ({
-  layout,
-  scale,
-  config,
-  overflowVisible
-}) => {
-  if (!config) {
-    return {};
-  }
-  if (!layout) {
-    return {
-      width: config.width * scale,
-      height: config.height * scale,
-      display: "flex",
-      flexDirection: "column",
-      position: "absolute",
-      overflow: overflowVisible ? "visible" : "hidden"
-    };
-  }
-  const { centerX, centerY } = layout;
-  return {
-    width: config.width * scale,
-    height: config.height * scale,
-    display: "flex",
-    flexDirection: "column",
-    position: "absolute",
-    left: centerX,
-    top: centerY,
-    overflow: overflowVisible ? "visible" : "hidden"
-  };
-};
-var PlayerEventEmitterContext = React.createContext(void 0);
-var ThumbnailEmitterContext = React.createContext(void 0);
-var PlayerEmitter = class {
-  listeners = {
-    ended: [],
-    error: [],
-    pause: [],
-    play: [],
-    ratechange: [],
-    scalechange: [],
-    seeked: [],
-    timeupdate: [],
-    frameupdate: [],
-    fullscreenchange: [],
-    volumechange: [],
-    mutechange: [],
-    waiting: [],
-    resume: []
-  };
-  addEventListener(name, callback) {
-    this.listeners[name].push(callback);
-  }
-  removeEventListener(name, callback) {
-    this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
-  }
-  dispatchEvent(dispatchName, context) {
-    this.listeners[dispatchName].forEach((callback) => {
-      callback({ detail: context });
-    });
-  }
-  dispatchSeek = (frame) => {
-    this.dispatchEvent("seeked", {
-      frame
-    });
-  };
-  dispatchVolumeChange = (volume) => {
-    this.dispatchEvent("volumechange", {
-      volume
-    });
-  };
-  dispatchPause = () => {
-    this.dispatchEvent("pause", void 0);
-  };
-  dispatchPlay = () => {
-    this.dispatchEvent("play", void 0);
-  };
-  dispatchEnded = () => {
-    this.dispatchEvent("ended", void 0);
-  };
-  dispatchRateChange = (playbackRate) => {
-    this.dispatchEvent("ratechange", {
-      playbackRate
-    });
-  };
-  dispatchScaleChange = (scale) => {
-    this.dispatchEvent("scalechange", {
-      scale
-    });
-  };
-  dispatchError = (error) => {
-    this.dispatchEvent("error", {
-      error
-    });
-  };
-  dispatchTimeUpdate = (event) => {
-    this.dispatchEvent("timeupdate", event);
-  };
-  dispatchFrameUpdate = (event) => {
-    this.dispatchEvent("frameupdate", event);
-  };
-  dispatchFullscreenChange = (event) => {
-    this.dispatchEvent("fullscreenchange", event);
-  };
-  dispatchMuteChange = (event) => {
-    this.dispatchEvent("mutechange", event);
-  };
-  dispatchWaiting = (event) => {
-    this.dispatchEvent("waiting", event);
-  };
-  dispatchResume = (event) => {
-    this.dispatchEvent("resume", event);
-  };
-};
-var ThumbnailEmitter = class {
-  listeners = {
-    error: [],
-    waiting: [],
-    resume: []
-  };
-  addEventListener(name, callback) {
-    this.listeners[name].push(callback);
-  }
-  removeEventListener(name, callback) {
-    this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
-  }
-  dispatchEvent(dispatchName, context) {
-    this.listeners[dispatchName].forEach((callback) => {
-      callback({ detail: context });
-    });
-  }
-  dispatchError = (error) => {
-    this.dispatchEvent("error", {
-      error
-    });
-  };
-  dispatchWaiting = (event) => {
-    this.dispatchEvent("waiting", event);
-  };
-  dispatchResume = (event) => {
-    this.dispatchEvent("resume", event);
-  };
-};
-var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext(Internals2.BufferingContextReact);
-  if (!bufferManager) {
-    throw new Error("BufferingContextReact not found");
-  }
-  useLayoutEffect(() => {
-    const clear1 = bufferManager.listenForBuffering(() => {
-      bufferManager.buffering.current = true;
-      emitter.dispatchWaiting({});
-    });
-    const clear2 = bufferManager.listenForResume(() => {
-      bufferManager.buffering.current = false;
-      emitter.dispatchResume({});
-    });
-    return () => {
-      clear1.remove();
-      clear2.remove();
-    };
-  }, [bufferManager, emitter]);
-};
-var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState(() => new PlayerEmitter());
-  const bufferManager = useContext2(Internals3.BufferingContextReact);
-  if (!bufferManager) {
-    throw new Error("BufferingContextReact not found");
-  }
-  useEffect(() => {
-    if (currentPlaybackRate) {
-      emitter.dispatchRateChange(currentPlaybackRate);
-    }
-  }, [emitter, currentPlaybackRate]);
-  useBufferStateEmitter(emitter);
-  return /* @__PURE__ */ jsx3(PlayerEventEmitterContext.Provider, {
-    value: emitter,
-    children
-  });
-};
-var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState2(false);
-  useEffect2(() => {
-    const { current } = ref;
-    if (!current) {
-      return;
-    }
-    let hoverTimeout;
-    const addHoverTimeout = () => {
-      if (hideControlsWhenPointerDoesntMove) {
-        clearTimeout(hoverTimeout);
-        hoverTimeout = setTimeout(() => {
-          setHovered(false);
-        }, hideControlsWhenPointerDoesntMove === true ? 3e3 : hideControlsWhenPointerDoesntMove);
-      }
-    };
-    const onHover = () => {
-      setHovered(true);
-      addHoverTimeout();
-    };
-    const onLeave = () => {
-      setHovered(false);
-      clearTimeout(hoverTimeout);
-    };
-    const onMove = () => {
-      setHovered(true);
-      addHoverTimeout();
-    };
-    current.addEventListener("mouseenter", onHover);
-    current.addEventListener("mouseleave", onLeave);
-    current.addEventListener("mousemove", onMove);
-    return () => {
-      current.removeEventListener("mouseenter", onHover);
-      current.removeEventListener("mouseleave", onLeave);
-      current.removeEventListener("mousemove", onMove);
-      clearTimeout(hoverTimeout);
-    };
-  }, [hideControlsWhenPointerDoesntMove, ref]);
-  return hovered;
-};
-var usePlayer = () => {
-  const [playing, setPlaying, imperativePlaying] = Internals5.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState3(false);
-  const frame = Internals5.Timeline.useTimelinePosition();
-  const playStart = useRef2(frame);
-  const setFrame = Internals5.Timeline.useTimelineSetFrame();
-  const setTimelinePosition = Internals5.Timeline.useTimelineSetFrame();
-  const audioContext = useContext3(Internals5.SharedAudioContext);
-  const { audioAndVideoTags } = useContext3(Internals5.TimelineContext);
-  const frameRef = useRef2(frame);
-  frameRef.current = frame;
-  const video = Internals5.useVideo();
-  const config = Internals5.useUnsafeVideoConfig();
-  const emitter = useContext3(PlayerEventEmitterContext);
-  const lastFrame = (config?.durationInFrames ?? 1) - 1;
-  const isLastFrame = frame === lastFrame;
-  const isFirstFrame = frame === 0;
-  if (!emitter) {
-    throw new TypeError("Expected Player event emitter context");
-  }
-  const bufferingContext = useContext3(Internals5.BufferingContextReact);
-  if (!bufferingContext) {
-    throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
-  }
-  const { buffering } = bufferingContext;
-  const seek = useCallback2((newFrame) => {
-    if (video?.id) {
-      setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
-    }
-    frameRef.current = newFrame;
-    emitter.dispatchSeek(newFrame);
-  }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback2((e) => {
-    if (imperativePlaying.current) {
-      return;
-    }
-    setHasPlayed(true);
-    if (isLastFrame) {
-      seek(0);
-    }
-    audioContext?.audioContext?.resume();
-    if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
-      audioContext.playAllAudios();
-    }
-    audioAndVideoTags.current.forEach((a) => a.play("player play() was called and playing audio from a click"));
-    imperativePlaying.current = true;
-    setPlaying(true);
-    playStart.current = frameRef.current;
-    emitter.dispatchPlay();
-  }, [
-    imperativePlaying,
-    isLastFrame,
-    audioContext,
-    setPlaying,
-    emitter,
-    seek,
-    audioAndVideoTags
-  ]);
-  const pause = useCallback2(() => {
-    if (imperativePlaying.current) {
-      imperativePlaying.current = false;
-      setPlaying(false);
-      emitter.dispatchPause();
-      audioContext?.audioContext?.suspend();
-    }
-  }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback2(() => {
-    if (imperativePlaying.current) {
-      imperativePlaying.current = false;
-      frameRef.current = playStart.current;
-      if (config) {
-        setTimelinePosition((c) => ({
-          ...c,
-          [config.id]: playStart.current
-        }));
-        setPlaying(false);
-        emitter.dispatchPause();
-      }
-    }
-  }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
-  const videoId = video?.id;
-  const frameBack = useCallback2((frames) => {
-    if (!videoId) {
-      return null;
-    }
-    if (imperativePlaying.current) {
-      return;
-    }
-    setFrame((c) => {
-      const prevFrame = c[videoId] ?? window.remotion_initialFrame ?? 0;
-      const newFrame = Math.max(0, prevFrame - frames);
-      if (prevFrame === newFrame) {
-        return c;
-      }
-      return {
-        ...c,
-        [videoId]: newFrame
-      };
-    });
-  }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback2((frames) => {
-    if (!videoId) {
-      return null;
-    }
-    if (imperativePlaying.current) {
-      return;
-    }
-    setFrame((c) => {
-      const prevFrame = c[videoId] ?? window.remotion_initialFrame ?? 0;
-      const newFrame = Math.min(lastFrame, prevFrame + frames);
-      if (prevFrame === newFrame) {
-        return c;
-      }
-      return {
-        ...c,
-        [videoId]: newFrame
-      };
-    });
-  }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback2((e) => {
-    if (imperativePlaying.current) {
-      pause();
-    } else {
-      play(e);
-    }
-  }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback2(() => {
-    return imperativePlaying.current;
-  }, [imperativePlaying]);
-  const getCurrentFrame = useCallback2(() => {
-    return frameRef.current;
-  }, [frameRef]);
-  const isBuffering = useCallback2(() => {
-    return buffering.current;
-  }, [buffering]);
-  const returnValue = useMemo(() => {
-    return {
-      frameBack,
-      frameForward,
-      isLastFrame,
-      emitter,
-      playing,
-      play,
-      pause,
-      seek,
-      isFirstFrame,
-      getCurrentFrame,
-      isPlaying,
-      isBuffering,
-      pauseAndReturnToPlayStart,
-      hasPlayed,
-      toggle
-    };
-  }, [
-    emitter,
-    frameBack,
-    frameForward,
-    hasPlayed,
-    isFirstFrame,
-    isLastFrame,
-    getCurrentFrame,
-    pause,
-    pauseAndReturnToPlayStart,
-    play,
-    playing,
-    seek,
-    toggle,
-    isPlaying,
-    isBuffering
-  ]);
-  return returnValue;
-};
-var useBrowserMediaSession = ({
-  browserMediaControlsBehavior,
-  videoConfig,
-  playbackRate
-}) => {
-  const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
-  const hasEverPlayed = useRef3(false);
-  useEffect3(() => {
-    if (playing) {
-      hasEverPlayed.current = true;
-    }
-  }, [playing]);
-  useEffect3(() => {
-    if (!navigator.mediaSession) {
-      return;
-    }
-    if (browserMediaControlsBehavior.mode === "do-nothing") {
-      return;
-    }
-    if (playing) {
-      navigator.mediaSession.playbackState = "playing";
-    } else if (hasEverPlayed.current) {
-      navigator.mediaSession.playbackState = "paused";
-    }
-  }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect3(() => {
-    if (!navigator.mediaSession) {
-      return;
-    }
-    if (browserMediaControlsBehavior.mode === "do-nothing") {
-      return;
-    }
-    const onTimeUpdate = () => {
-      if (!videoConfig) {
-        return;
-      }
-      if (navigator.mediaSession) {
-        navigator.mediaSession.setPositionState({
-          duration: videoConfig.durationInFrames / videoConfig.fps,
-          playbackRate,
-          position: getCurrentFrame() / videoConfig.fps
-        });
-      }
-    };
-    emitter.addEventListener("timeupdate", onTimeUpdate);
-    return () => {
-      emitter.removeEventListener("timeupdate", onTimeUpdate);
-    };
-  }, [
-    browserMediaControlsBehavior.mode,
-    emitter,
-    getCurrentFrame,
-    playbackRate,
-    videoConfig
-  ]);
-  useEffect3(() => {
-    if (!navigator.mediaSession) {
-      return;
-    }
-    if (browserMediaControlsBehavior.mode === "do-nothing") {
-      return;
-    }
-    navigator.mediaSession.setActionHandler("play", () => {
-      if (browserMediaControlsBehavior.mode === "register-media-session") {
-        play();
-      }
-    });
-    navigator.mediaSession.setActionHandler("pause", () => {
-      if (browserMediaControlsBehavior.mode === "register-media-session") {
-        pause();
-      }
-    });
-    navigator.mediaSession.setActionHandler("seekto", (event) => {
-      if (browserMediaControlsBehavior.mode === "register-media-session" && event.seekTime !== void 0 && videoConfig) {
-        seek(Math.round(event.seekTime * videoConfig.fps));
-      }
-    });
-    navigator.mediaSession.setActionHandler("seekbackward", () => {
-      if (browserMediaControlsBehavior.mode === "register-media-session" && videoConfig) {
-        seek(Math.max(0, Math.round((getCurrentFrame() - 10) * videoConfig.fps)));
-      }
-    });
-    navigator.mediaSession.setActionHandler("seekforward", () => {
-      if (browserMediaControlsBehavior.mode === "register-media-session" && videoConfig) {
-        seek(Math.max(videoConfig.durationInFrames - 1, Math.round((getCurrentFrame() + 10) * videoConfig.fps)));
-      }
-    });
-    navigator.mediaSession.setActionHandler("previoustrack", () => {
-      if (browserMediaControlsBehavior.mode === "register-media-session") {
-        seek(0);
-      }
-    });
-    return () => {
-      navigator.mediaSession.metadata = null;
-      navigator.mediaSession.setActionHandler("play", null);
-      navigator.mediaSession.setActionHandler("pause", null);
-      navigator.mediaSession.setActionHandler("seekto", null);
-      navigator.mediaSession.setActionHandler("seekbackward", null);
-      navigator.mediaSession.setActionHandler("seekforward", null);
-      navigator.mediaSession.setActionHandler("previoustrack", null);
-    };
-  }, [
-    browserMediaControlsBehavior.mode,
-    getCurrentFrame,
-    pause,
-    play,
-    seek,
-    videoConfig
-  ]);
-};
-var calculateNextFrame = ({
-  time,
-  currentFrame: startFrame,
-  playbackSpeed,
-  fps,
-  actualLastFrame,
-  actualFirstFrame,
-  framesAdvanced,
-  shouldLoop
-}) => {
-  const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
-  const framesToAdvance = op(time * playbackSpeed / (1e3 / fps)) - framesAdvanced;
-  const nextFrame = framesToAdvance + startFrame;
-  const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
-  const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
-  const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
-  if (playbackSpeed > 0) {
-    if (isNextFrameOutside) {
-      return {
-        nextFrame: actualFirstFrame,
-        framesToAdvance,
-        hasEnded
-      };
-    }
-    return { nextFrame, framesToAdvance, hasEnded };
-  }
-  if (isNextFrameOutside) {
-    return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
-  }
-  return { nextFrame, framesToAdvance, hasEnded };
-};
-var getIsBackgrounded = () => {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  return document.visibilityState === "hidden";
-};
-var useIsBackgrounded = () => {
-  const isBackgrounded = useRef4(getIsBackgrounded());
-  useEffect4(() => {
-    const onVisibilityChange = () => {
-      isBackgrounded.current = getIsBackgrounded();
-    };
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, []);
-  return isBackgrounded;
-};
-var usePlayback = ({
-  loop,
-  playbackRate,
-  moveToBeginningWhenEnded,
-  inFrame,
-  outFrame,
-  browserMediaControlsBehavior,
-  getCurrentFrame
-}) => {
-  const config = Internals6.useUnsafeVideoConfig();
-  const frame = Internals6.Timeline.useTimelinePosition();
-  const { playing, pause, emitter, isPlaying } = usePlayer();
-  const setFrame = Internals6.Timeline.useTimelineSetFrame();
-  const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateEvent = useRef5(null);
-  const context = useContext4(Internals6.BufferingContextReact);
-  if (!context) {
-    throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
-  }
-  useBrowserMediaSession({
-    browserMediaControlsBehavior,
-    playbackRate,
-    videoConfig: config
-  });
-  useEffect5(() => {
-    if (!config) {
-      return;
-    }
-    if (!playing) {
-      return;
-    }
-    let hasBeenStopped = false;
-    let reqAnimFrameCall = null;
-    let startedTime = performance.now();
-    let framesAdvanced = 0;
-    const cancelQueuedFrame = () => {
-      if (reqAnimFrameCall !== null) {
-        if (reqAnimFrameCall.type === "raf") {
-          cancelAnimationFrame(reqAnimFrameCall.id);
-        } else {
-          clearTimeout(reqAnimFrameCall.id);
-        }
-      }
-    };
-    const stop = () => {
-      hasBeenStopped = true;
-      cancelQueuedFrame();
-    };
-    const callback = () => {
-      if (hasBeenStopped) {
-        return;
-      }
-      if (!isPlaying()) {
-        return;
-      }
-      const time = performance.now() - startedTime;
-      const actualLastFrame = outFrame ?? config.durationInFrames - 1;
-      const actualFirstFrame = inFrame ?? 0;
-      const currentFrame = getCurrentFrame();
-      const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
-        time,
-        currentFrame,
-        playbackSpeed: playbackRate,
-        fps: config.fps,
-        actualFirstFrame,
-        actualLastFrame,
-        framesAdvanced,
-        shouldLoop: loop
-      });
-      framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
-        setFrame((c) => ({ ...c, [config.id]: nextFrame }));
-      }
-      if (hasEnded) {
-        stop();
-        pause();
-        emitter.dispatchEnded();
-        return;
-      }
-      queueNextFrame();
-    };
-    const queueNextFrame = () => {
-      if (context.buffering.current) {
-        const stopListening = context.listenForResume(() => {
-          stopListening.remove();
-          startedTime = performance.now();
-          framesAdvanced = 0;
-          queueNextFrame();
-        });
-        return;
-      }
-      if (isBackgroundedRef.current) {
-        reqAnimFrameCall = {
-          type: "timeout",
-          id: setTimeout(callback, 1e3 / config.fps)
-        };
-        return;
-      }
-      reqAnimFrameCall = { type: "raf", id: requestAnimationFrame(callback) };
-    };
-    queueNextFrame();
-    const onVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        return;
-      }
-      cancelQueuedFrame();
-      callback();
-    };
-    window.addEventListener("visibilitychange", onVisibilityChange);
-    return () => {
-      window.removeEventListener("visibilitychange", onVisibilityChange);
-      stop();
-    };
-  }, [
-    config,
-    loop,
-    pause,
-    playing,
-    setFrame,
-    emitter,
-    playbackRate,
-    inFrame,
-    outFrame,
-    moveToBeginningWhenEnded,
-    isBackgroundedRef,
-    getCurrentFrame,
-    context,
-    isPlaying
-  ]);
-  useEffect5(() => {
-    const interval = setInterval(() => {
-      if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-        return;
-      }
-      emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-      lastTimeUpdateEvent.current = getCurrentFrame();
-    }, 250);
-    return () => clearInterval(interval);
-  }, [emitter, getCurrentFrame]);
-  useEffect5(() => {
-    emitter.dispatchFrameUpdate({ frame });
-  }, [emitter, frame]);
-};
-var elementSizeHooks = [];
-var useElementSize = (ref, options) => {
-  const [size, setSize] = useState4(() => {
-    if (!ref.current) {
-      return null;
-    }
-    const rect = ref.current.getClientRects();
-    if (!rect[0]) {
-      return null;
-    }
-    return {
-      width: rect[0].width,
-      height: rect[0].height,
-      left: rect[0].x,
-      top: rect[0].y,
-      windowSize: {
-        height: window.innerHeight,
-        width: window.innerWidth
-      }
-    };
-  });
-  const observer = useMemo2(() => {
-    if (typeof ResizeObserver === "undefined") {
-      return null;
-    }
-    return new ResizeObserver((entries) => {
-      const { contentRect, target } = entries[0];
-      const newSize = target.getClientRects();
-      if (!newSize?.[0]) {
-        setSize(null);
-        return;
-      }
-      const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
-      const width = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].width : newSize[0].width * (1 / probableCssParentScale);
-      const height = options.shouldApplyCssTransforms || probableCssParentScale === 0 ? newSize[0].height : newSize[0].height * (1 / probableCssParentScale);
-      setSize((prevState) => {
-        const isSame = prevState && prevState.width === width && prevState.height === height && prevState.left === newSize[0].x && prevState.top === newSize[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
-        if (isSame) {
-          return prevState;
-        }
-        return {
-          width,
-          height,
-          left: newSize[0].x,
-          top: newSize[0].y,
-          windowSize: {
-            height: window.innerHeight,
-            width: window.innerWidth
-          }
-        };
-      });
-    });
-  }, [options.shouldApplyCssTransforms]);
-  const updateSize = useCallback3(() => {
-    if (!ref.current) {
-      return;
-    }
-    const rect = ref.current.getClientRects();
-    if (!rect[0]) {
-      setSize(null);
-      return;
-    }
-    setSize((prevState) => {
-      const isSame = prevState && prevState.width === rect[0].width && prevState.height === rect[0].height && prevState.left === rect[0].x && prevState.top === rect[0].y && prevState.windowSize.height === window.innerHeight && prevState.windowSize.width === window.innerWidth;
-      if (isSame) {
-        return prevState;
-      }
-      return {
-        width: rect[0].width,
-        height: rect[0].height,
-        left: rect[0].x,
-        top: rect[0].y,
-        windowSize: {
-          height: window.innerHeight,
-          width: window.innerWidth
-        }
-      };
-    });
-  }, [ref]);
-  useEffect6(() => {
-    if (!observer) {
-      return;
-    }
-    const { current } = ref;
-    if (current) {
-      observer.observe(current);
-    }
-    return () => {
-      if (current) {
-        observer.unobserve(current);
-      }
-    };
-  }, [observer, ref, updateSize]);
-  useEffect6(() => {
-    if (!options.triggerOnWindowResize) {
-      return;
-    }
-    window.addEventListener("resize", updateSize);
-    return () => {
-      window.removeEventListener("resize", updateSize);
-    };
-  }, [options.triggerOnWindowResize, updateSize]);
-  useEffect6(() => {
-    elementSizeHooks.push(updateSize);
-    return () => {
-      elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
-    };
-  }, [updateSize]);
-  return useMemo2(() => {
-    if (!size) {
-      return null;
-    }
-    return { ...size, refresh: updateSize };
-  }, [size, updateSize]);
-};
-var playerCssClassname = (override) => {
-  return override ?? "__remotion-player";
-};
-var errorStyle = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  flex: 1,
-  height: "100%",
-  width: "100%"
-};
-var ErrorBoundary = class extends React3.Component {
-  state = { hasError: null };
-  static getDerivedStateFromError(error) {
-    return { hasError: error };
-  }
-  componentDidCatch(error) {
-    this.props.onError(error);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx4("div", {
-        style: errorStyle,
-        children: this.props.errorFallback({
-          error: this.state.hasError
-        })
-      });
-    }
-    return this.props.children;
-  }
-};
-var getHashOfDomain = async () => {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  if (typeof window.crypto === "undefined") {
-    return null;
-  }
-  if (typeof window.crypto.subtle === "undefined") {
-    return null;
-  }
-  try {
-    const hashBuffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(window.location.hostname));
-    return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
-  } catch {
-    return null;
-  }
-};
-var style = {
-  backgroundColor: "red",
-  position: "absolute",
-  padding: 12,
-  fontFamily: "Arial"
-};
-var DOMAIN_BLACKLIST = [
-  "28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6",
-  "4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e",
-  "fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc",
-  "7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83",
-  "8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6",
-  "a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"
-];
-var ran = false;
-var RenderWarningIfBlacklist = () => {
-  const [unlicensed, setUnlicensed] = React4.useState(false);
-  useEffect7(() => {
-    if (ran) {
-      return;
-    }
-    ran = true;
-    getHashOfDomain().then((hash) => {
-      if (hash && DOMAIN_BLACKLIST.includes(hash)) {
-        setUnlicensed(true);
-      }
-    }).catch(() => {
-    });
-  }, []);
-  useEffect7(() => {
-    if (!unlicensed) {
-      return;
-    }
-    const ensureBanner = () => {
-      const banner = document.querySelector(".warning-banner");
-      if (!banner) {
-        const div = document.createElement("div");
-        div.className = "warning-banner";
-        Object.assign(div.style, style, {
-          zIndex: "9999",
-          cssText: `${style.cssText} !important;`
-        });
-        div.innerHTML = `
-	        <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
-	          Remotion Unlicensed \u2013 Contact hi@remotion.dev
-	        </a>
-	      `;
-        document.body.appendChild(div);
-      }
-    };
-    const observer = new MutationObserver(() => ensureBanner());
-    observer.observe(document.body, { childList: true, subtree: true });
-    return () => {
-      observer.disconnect();
-    };
-  }, [unlicensed]);
-  if (!unlicensed) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx5("div", {
-    style,
-    className: "warning-banner",
-    children: /* @__PURE__ */ jsx5("a", {
-      style: { color: "white" },
-      href: "https://github.com/remotion-dev/remotion/pull/4589",
-      children: "Remotion Unlicensed \u2013 Contact hi@remotion.dev"
-    })
-  });
-};
-var DefaultPlayPauseButton = ({ playing, buffering }) => {
-  if (playing && buffering) {
-    return /* @__PURE__ */ jsx6(BufferingIndicator, {
-      type: "player"
-    });
-  }
-  if (playing) {
-    return /* @__PURE__ */ jsx6(PauseIcon, {});
-  }
-  return /* @__PURE__ */ jsx6(PlayIcon, {});
-};
-var KNOB_SIZE = 12;
-var BAR_HEIGHT = 5;
-var DefaultVolumeSlider = ({
-  volume,
-  isVertical,
-  onBlur,
-  inputRef,
-  setVolume
-}) => {
-  const sliderContainer = useMemo3(() => {
-    const paddingLeft = 5;
-    const common = {
-      paddingLeft,
-      height: ICON_SIZE,
-      width: VOLUME_SLIDER_WIDTH,
-      display: "inline-flex",
-      alignItems: "center"
-    };
-    if (isVertical) {
-      return {
-        ...common,
-        position: "absolute",
-        transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`
-      };
-    }
-    return {
-      ...common
-    };
-  }, [isVertical]);
-  const randomId = typeof React5.useId === "undefined" ? "volume-slider" : React5.useId();
-  const [randomClass] = useState5(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback4((e) => {
-    setVolume(parseFloat(e.target.value));
-  }, [setVolume]);
-  const inputStyle = useMemo3(() => {
-    const commonStyle = {
-      WebkitAppearance: "none",
-      backgroundColor: "rgba(255, 255, 255, 0.5)",
-      borderRadius: BAR_HEIGHT / 2,
-      cursor: "pointer",
-      height: BAR_HEIGHT,
-      width: VOLUME_SLIDER_WIDTH,
-      backgroundImage: `linear-gradient(
-				to right,
-				white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
-			)`
-    };
-    if (isVertical) {
-      return {
-        ...commonStyle,
-        bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2
-      };
-    }
-    return commonStyle;
-  }, [isVertical, volume]);
-  const sliderStyle = `
-	.${randomClass}::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-
-	.${randomClass}::-moz-range-thumb {
-		-webkit-appearance: none;
-		background-color: white;
-		border-radius: ${KNOB_SIZE / 2}px;
-		box-shadow: 0 0 2px black;
-		height: ${KNOB_SIZE}px;
-		width: ${KNOB_SIZE}px;
-	}
-`;
-  return /* @__PURE__ */ jsxs3("div", {
-    style: sliderContainer,
-    children: [
-      /* @__PURE__ */ jsx7("style", {
-        dangerouslySetInnerHTML: {
-          __html: sliderStyle
-        }
-      }),
-      /* @__PURE__ */ jsx7("input", {
-        ref: inputRef,
-        "aria-label": "Change volume",
-        className: randomClass,
-        max: 1,
-        min: 0,
-        onBlur,
-        onChange: onVolumeChange,
-        step: 0.01,
-        type: "range",
-        value: volume,
-        style: inputStyle
-      })
-    ]
-  });
-};
-var renderDefaultVolumeSlider = (props) => {
-  return /* @__PURE__ */ jsx7(DefaultVolumeSlider, {
-    ...props
-  });
-};
-var VOLUME_SLIDER_WIDTH = 100;
-var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [mediaMuted, setMediaMuted] = Internals7.useMediaMutedState();
-  const [mediaVolume, setMediaVolume] = Internals7.useMediaVolumeState();
-  const [focused, setFocused] = useState6(false);
-  const parentDivRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback5(() => {
-    setTimeout(() => {
-      if (inputRef.current && document.activeElement !== inputRef.current) {
-        setFocused(false);
-      }
-    }, 10);
-  }, []);
-  const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback5(() => {
-    if (isVolume0) {
-      setMediaVolume(1);
-      setMediaMuted(false);
-      return;
-    }
-    setMediaMuted((mute) => !mute);
-  }, [isVolume0, setMediaMuted, setMediaVolume]);
-  const parentDivStyle = useMemo4(() => {
-    return {
-      display: "inline-flex",
-      background: "none",
-      border: "none",
-      justifyContent: "center",
-      alignItems: "center",
-      touchAction: "none",
-      ...displayVerticalVolumeSlider && { position: "relative" }
-    };
-  }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo4(() => {
-    return {
-      display: "inline",
-      width: ICON_SIZE,
-      height: ICON_SIZE,
-      cursor: "pointer",
-      appearance: "none",
-      background: "none",
-      border: "none",
-      padding: 0
-    };
-  }, []);
-  const renderDefaultMuteButton = useCallback5(({ muted, volume }) => {
-    const isMutedOrZero = muted || volume === 0;
-    return /* @__PURE__ */ jsx8("button", {
-      "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
-      title: isMutedOrZero ? "Unmute sound" : "Mute sound",
-      onClick,
-      onBlur,
-      onFocus: () => setFocused(true),
-      style: volumeContainer,
-      type: "button",
-      children: isMutedOrZero ? /* @__PURE__ */ jsx8(VolumeOffIcon, {}) : /* @__PURE__ */ jsx8(VolumeOnIcon, {})
-    });
-  }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo4(() => {
-    return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
-  }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo4(() => {
-    return (focused || hover) && !mediaMuted && !Internals7.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
-      isVertical: displayVerticalVolumeSlider,
-      volume: mediaVolume,
-      onBlur: () => setFocused(false),
-      inputRef,
-      setVolume: setMediaVolume
-    }) : null;
-  }, [
-    displayVerticalVolumeSlider,
-    focused,
-    hover,
-    mediaMuted,
-    mediaVolume,
-    renderVolumeSlider,
-    setMediaVolume
-  ]);
-  return /* @__PURE__ */ jsxs4("div", {
-    ref: parentDivRef,
-    style: parentDivStyle,
-    children: [
-      muteButton,
-      volumeSlider
-    ]
-  });
-};
-function useComponentVisible(initialIsVisible) {
-  const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
-  const ref = useRef7(null);
-  useEffect8(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setIsComponentVisible(false);
-      }
-    };
-    document.addEventListener("pointerup", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("pointerup", handleClickOutside, true);
-    };
-  }, []);
-  return { ref, isComponentVisible, setIsComponentVisible };
-}
-var BOTTOM = 35;
-var THRESHOLD = 70;
-var rateDiv = {
-  height: 30,
-  paddingRight: 15,
-  paddingLeft: 12,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center"
-};
-var checkmarkContainer = {
-  width: 22,
-  display: "flex",
-  alignItems: "center"
-};
-var checkmarkStyle = {
-  width: 14,
-  height: 14,
-  color: "black"
-};
-var Checkmark = () => /* @__PURE__ */ jsx9("svg", {
-  viewBox: "0 0 512 512",
-  style: checkmarkStyle,
-  children: /* @__PURE__ */ jsx9("path", {
-    fill: "currentColor",
-    d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"
-  })
-});
-var formatPlaybackRate = (rate) => {
-  const str = rate.toString();
-  return str.includes(".") ? str : str + ".0";
-};
-var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback6((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onSelect(rate);
-  }, [onSelect, rate]);
-  const [hovered, setHovered] = useState8(false);
-  const onMouseEnter = useCallback6(() => {
-    setHovered(true);
-  }, []);
-  const onMouseLeave = useCallback6(() => {
-    setHovered(false);
-  }, []);
-  const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo5(() => {
-    return {
-      ...rateDiv,
-      backgroundColor: hovered || isFocused ? "#eee" : "transparent"
-    };
-  }, [hovered, isFocused]);
-  return /* @__PURE__ */ jsxs5("div", {
-    onPointerEnter: onMouseEnter,
-    onPointerLeave: onMouseLeave,
-    tabIndex: 0,
-    style: actualStyle,
-    onClick,
-    children: [
-      /* @__PURE__ */ jsx9("div", {
-        style: checkmarkContainer,
-        children: rate === selectedRate ? /* @__PURE__ */ jsx9(Checkmark, {}) : null
-      }),
-      formatPlaybackRate(rate),
-      "x"
-    ]
-  }, rate);
-};
-var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = useContext5(Internals8.TimelineContext);
-  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
-  useEffect9(() => {
-    const listener = (e) => {
-      e.preventDefault();
-      if (e.key === "ArrowUp") {
-        const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
-        if (currentIndex === 0) {
-          return;
-        }
-        if (currentIndex === -1) {
-          setKeyboardSelectedRate(playbackRates[0]);
-        } else {
-          setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
-        }
-      } else if (e.key === "ArrowDown") {
-        const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
-        if (currentIndex === playbackRates.length - 1) {
-          return;
-        }
-        if (currentIndex === -1) {
-          setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
-        } else {
-          setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
-        }
-      } else if (e.key === "Enter") {
-        setPlaybackRate(keyboardSelectedRate);
-        setIsComponentVisible(false);
-      }
-    };
-    window.addEventListener("keydown", listener);
-    return () => {
-      window.removeEventListener("keydown", listener);
-    };
-  }, [
-    playbackRates,
-    keyboardSelectedRate,
-    setPlaybackRate,
-    setIsComponentVisible
-  ]);
-  const onSelect = useCallback6((rate) => {
-    setPlaybackRate(rate);
-    setIsComponentVisible(false);
-  }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo5(() => {
-    return {
-      position: "absolute",
-      right: 0,
-      width: 125,
-      maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
-      bottom: 35,
-      background: "#fff",
-      borderRadius: 4,
-      overflow: "auto",
-      color: "black",
-      textAlign: "left"
-    };
-  }, [canvasSize.height]);
-  return /* @__PURE__ */ jsx9("div", {
-    style: playbackPopup,
-    children: playbackRates.map((rate) => {
-      return /* @__PURE__ */ jsx9(PlaybackrateOption, {
-        selectedRate: playbackRate,
-        onSelect,
-        rate,
-        keyboardSelectedRate
-      }, rate);
-    })
-  });
-};
-var label = {
-  fontSize: 13,
-  fontWeight: "bold",
-  color: "white",
-  border: "2px solid white",
-  borderRadius: 20,
-  paddingLeft: 8,
-  paddingRight: 8,
-  paddingTop: 2,
-  paddingBottom: 2
-};
-var playerButtonStyle = {
-  appearance: "none",
-  backgroundColor: "transparent",
-  border: "none",
-  cursor: "pointer",
-  paddingLeft: 0,
-  paddingRight: 0,
-  paddingTop: 6,
-  paddingBottom: 6,
-  height: 37,
-  display: "inline-flex",
-  marginBottom: 0,
-  marginTop: 0,
-  alignItems: "center"
-};
-var button = {
-  ...playerButtonStyle,
-  position: "relative"
-};
-var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
-  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
-  const { playbackRate } = useContext5(Internals8.TimelineContext);
-  const onClick = useCallback6((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
-  }, [setIsComponentVisible]);
-  return /* @__PURE__ */ jsx9("div", {
-    ref,
-    children: /* @__PURE__ */ jsxs5("button", {
-      type: "button",
-      "aria-label": "Change playback rate",
-      style: button,
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxs5("div", {
-          style: label,
-          children: [
-            playbackRate,
-            "x"
-          ]
-        }),
-        isComponentVisible && /* @__PURE__ */ jsx9(PlaybackPopup, {
-          canvasSize,
-          playbackRates,
-          setIsComponentVisible
-        })
-      ]
-    })
-  });
-};
-var getFrameFromX = (clientX, durationInFrames, width) => {
-  const pos = clientX;
-  const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  }));
-  return frame;
-};
-var BAR_HEIGHT2 = 5;
-var KNOB_SIZE2 = 12;
-var VERTICAL_PADDING = 4;
-var containerStyle = {
-  userSelect: "none",
-  WebkitUserSelect: "none",
-  paddingTop: VERTICAL_PADDING,
-  paddingBottom: VERTICAL_PADDING,
-  boxSizing: "border-box",
-  cursor: "pointer",
-  position: "relative",
-  touchAction: "none"
-};
-var barBackground = {
-  height: BAR_HEIGHT2,
-  backgroundColor: "rgba(255, 255, 255, 0.25)",
-  width: "100%",
-  borderRadius: BAR_HEIGHT2 / 2
-};
-var findBodyInWhichDivIsLocated = (div) => {
-  let current = div;
-  while (current.parentElement) {
-    current = current.parentElement;
-  }
-  return current;
-};
-var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef8(null);
-  const barHovered = useHoverState(containerRef, false);
-  const size = useElementSize(containerRef, {
-    triggerOnWindowResize: true,
-    shouldApplyCssTransforms: true
-  });
-  const { seek, play, pause, playing } = usePlayer();
-  const frame = Internals9.Timeline.useTimelinePosition();
-  const [dragging, setDragging] = useState9({
-    dragging: false
-  });
-  const width = size?.width ?? 0;
-  const onPointerDown = useCallback7((e) => {
-    if (e.button !== 0) {
-      return;
-    }
-    const posLeft = containerRef.current?.getBoundingClientRect().left;
-    const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
-    pause();
-    seek(_frame);
-    setDragging({
-      dragging: true,
-      wasPlaying: playing
-    });
-    onSeekStart();
-  }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-  const onPointerMove = useCallback7((e) => {
-    if (!size) {
-      throw new Error("Player has no size");
-    }
-    if (!dragging.dragging) {
-      return;
-    }
-    const posLeft = containerRef.current?.getBoundingClientRect().left;
-    const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
-    seek(_frame);
-  }, [dragging.dragging, durationInFrames, seek, size]);
-  const onPointerUp = useCallback7(() => {
-    setDragging({
-      dragging: false
-    });
-    if (!dragging.dragging) {
-      return;
-    }
-    if (dragging.wasPlaying) {
-      play();
-    } else {
-      pause();
-    }
-    onSeekEnd();
-  }, [dragging, onSeekEnd, pause, play]);
-  useEffect10(() => {
-    if (!dragging.dragging) {
-      return;
-    }
-    const body = findBodyInWhichDivIsLocated(containerRef.current);
-    body.addEventListener("pointermove", onPointerMove);
-    body.addEventListener("pointerup", onPointerUp);
-    return () => {
-      body.removeEventListener("pointermove", onPointerMove);
-      body.removeEventListener("pointerup", onPointerUp);
-    };
-  }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo6(() => {
-    return {
-      height: KNOB_SIZE2,
-      width: KNOB_SIZE2,
-      borderRadius: KNOB_SIZE2 / 2,
-      position: "absolute",
-      top: VERTICAL_PADDING - KNOB_SIZE2 / 2 + 5 / 2,
-      backgroundColor: "white",
-      left: Math.max(0, frame / Math.max(1, durationInFrames - 1) * width - KNOB_SIZE2 / 2),
-      boxShadow: "0 0 2px black",
-      opacity: Number(barHovered || dragging.dragging)
-    };
-  }, [barHovered, dragging.dragging, durationInFrames, frame, width]);
-  const fillStyle = useMemo6(() => {
-    return {
-      height: BAR_HEIGHT2,
-      backgroundColor: "rgba(255, 255, 255, 1)",
-      width: (frame - (inFrame ?? 0)) / (durationInFrames - 1) * width,
-      marginLeft: (inFrame ?? 0) / (durationInFrames - 1) * width,
-      borderRadius: BAR_HEIGHT2 / 2
-    };
-  }, [durationInFrames, frame, inFrame, width]);
-  const active = useMemo6(() => {
-    return {
-      height: BAR_HEIGHT2,
-      backgroundColor: "rgba(255, 255, 255, 0.25)",
-      width: ((outFrame ?? durationInFrames - 1) - (inFrame ?? 0)) / (durationInFrames - 1) * 100 + "%",
-      marginLeft: (inFrame ?? 0) / (durationInFrames - 1) * 100 + "%",
-      borderRadius: BAR_HEIGHT2 / 2,
-      position: "absolute"
-    };
-  }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs6("div", {
-    ref: containerRef,
-    onPointerDown,
-    style: containerStyle,
-    children: [
-      /* @__PURE__ */ jsxs6("div", {
-        style: barBackground,
-        children: [
-          /* @__PURE__ */ jsx10("div", {
-            style: active
-          }),
-          /* @__PURE__ */ jsx10("div", {
-            style: fillStyle
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx10("div", {
-        style: knobStyle
-      })
-    ]
-  });
-};
-var formatTime = (timeInSeconds) => {
-  const minutes = Math.floor(timeInSeconds / 60);
-  const seconds = Math.floor(timeInSeconds - minutes * 60);
-  return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
-};
-var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
-  const frame = Internals10.Timeline.useTimelinePosition();
-  const timeLabel = useMemo7(() => {
-    return {
-      color: "white",
-      fontFamily: "sans-serif",
-      fontSize: 14,
-      maxWidth: maxTimeLabelWidth === null ? void 0 : maxTimeLabelWidth,
-      overflow: "hidden",
-      textOverflow: "ellipsis"
-    };
-  }, [maxTimeLabelWidth]);
-  const isLastFrame = frame === durationInFrames - 1;
-  const frameToDisplay = isLastFrame ? frame + 1 : frame;
-  return /* @__PURE__ */ jsxs7("div", {
-    style: timeLabel,
-    children: [
-      formatTime(frameToDisplay / fps),
-      " / ",
-      formatTime(durationInFrames / fps)
-    ]
-  });
-};
-var X_SPACER = 10;
-var X_PADDING = 12;
-var useVideoControlsResize = ({
-  allowFullscreen: allowFullScreen,
-  playerWidth
-}) => {
-  const resizeInfo = useMemo8(() => {
-    const playPauseIconSize = ICON_SIZE;
-    const volumeIconSize = ICON_SIZE;
-    const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
-    const elementsSize = volumeIconSize + playPauseIconSize + _fullscreenIconSize + X_PADDING * 2 + X_SPACER * 2;
-    const maxTimeLabelWidth = playerWidth - elementsSize;
-    const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
-    const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - VOLUME_SLIDER_WIDTH;
-    const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < VOLUME_SLIDER_WIDTH ? maxTimeLabelWidthWithoutNegativeValue : availableTimeLabelWidthIfVolumeOpen;
-    const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + VOLUME_SLIDER_WIDTH;
-    const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
-    return {
-      maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue === 0 ? null : maxTimeLabelWidthWithoutNegativeValue,
-      displayVerticalVolumeSlider
-    };
-  }, [allowFullScreen, playerWidth]);
-  return resizeInfo;
-};
-var gradientSteps = [
-  0,
-  0.013,
-  0.049,
-  0.104,
-  0.175,
-  0.259,
-  0.352,
-  0.45,
-  0.55,
-  0.648,
-  0.741,
-  0.825,
-  0.896,
-  0.951,
-  0.987
-];
-var gradientOpacities = [
-  0,
-  8.1,
-  15.5,
-  22.5,
-  29,
-  35.3,
-  41.2,
-  47.1,
-  52.9,
-  58.8,
-  64.7,
-  71,
-  77.5,
-  84.5,
-  91.9
-];
-var globalGradientOpacity = 1 / 0.7;
-var containerStyle2 = {
-  boxSizing: "border-box",
-  position: "absolute",
-  bottom: 0,
-  width: "100%",
-  paddingTop: 40,
-  paddingBottom: 10,
-  backgroundImage: `linear-gradient(to bottom,${gradientSteps.map((g, i) => {
-    return `hsla(0, 0%, 0%, ${g}) ${gradientOpacities[i] * globalGradientOpacity}%`;
-  }).join(", ")}, hsl(0, 0%, 0%) 100%)`,
-  backgroundSize: "auto 145px",
-  display: "flex",
-  paddingRight: X_PADDING,
-  paddingLeft: X_PADDING,
-  flexDirection: "column",
-  transition: "opacity 0.3s"
-};
-var controlsRow = {
-  display: "flex",
-  flexDirection: "row",
-  width: "100%",
-  alignItems: "center",
-  justifyContent: "center",
-  userSelect: "none",
-  WebkitUserSelect: "none"
-};
-var leftPartStyle = {
-  display: "flex",
-  flexDirection: "row",
-  userSelect: "none",
-  WebkitUserSelect: "none",
-  alignItems: "center"
-};
-var xSpacer = {
-  width: 12
-};
-var ySpacer = {
-  height: 8
-};
-var flex1 = {
-  flex: 1
-};
-var fullscreen = {};
-var Controls = ({
-  durationInFrames,
-  isFullscreen,
-  fps,
-  showVolumeControls,
-  onFullscreenButtonClick,
-  allowFullscreen,
-  onExitFullscreenButtonClick,
-  spaceKeyToPlayOrPause,
-  onSeekEnd,
-  onSeekStart,
-  inFrame,
-  outFrame,
-  initiallyShowControls,
-  canvasSize,
-  renderPlayPauseButton,
-  renderFullscreenButton,
-  alwaysShowControls,
-  showPlaybackRateControl,
-  containerRef,
-  buffering,
-  hideControlsWhenPointerDoesntMove,
-  onPointerDown,
-  onDoubleClick,
-  renderMuteButton,
-  renderVolumeSlider,
-  playing,
-  toggle,
-  renderCustomControls
-}) => {
-  const playButtonRef = useRef9(null);
-  const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
-  const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
-  const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
-    allowFullscreen,
-    playerWidth: canvasSize?.width ?? 0
-  });
-  const [shouldShowInitially, setInitiallyShowControls] = useState10(() => {
-    if (typeof initiallyShowControls === "boolean") {
-      return initiallyShowControls;
-    }
-    if (typeof initiallyShowControls === "number") {
-      if (initiallyShowControls % 1 !== 0) {
-        throw new Error("initiallyShowControls must be an integer or a boolean");
-      }
-      if (Number.isNaN(initiallyShowControls)) {
-        throw new Error("initiallyShowControls must not be NaN");
-      }
-      if (!Number.isFinite(initiallyShowControls)) {
-        throw new Error("initiallyShowControls must be finite");
-      }
-      if (initiallyShowControls <= 0) {
-        throw new Error("initiallyShowControls must be a positive integer");
-      }
-      return initiallyShowControls;
-    }
-    throw new TypeError("initiallyShowControls must be a number or a boolean");
-  });
-  const containerCss = useMemo9(() => {
-    const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
-    return {
-      ...containerStyle2,
-      opacity: Number(shouldShow)
-    };
-  }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
-  useEffect11(() => {
-    if (playButtonRef.current && spaceKeyToPlayOrPause) {
-      playButtonRef.current.focus({
-        preventScroll: true
-      });
-    }
-  }, [playing, spaceKeyToPlayOrPause]);
-  useEffect11(() => {
-    setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
-  }, []);
-  useEffect11(() => {
-    if (shouldShowInitially === false) {
-      return;
-    }
-    const time = shouldShowInitially === true ? 2e3 : shouldShowInitially;
-    const timeout = setTimeout(() => {
-      setInitiallyShowControls(false);
-    }, time);
-    return () => {
-      clearInterval(timeout);
-    };
-  }, [shouldShowInitially]);
-  const playbackRates = useMemo9(() => {
-    if (showPlaybackRateControl === true) {
-      return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
-    }
-    if (Array.isArray(showPlaybackRateControl)) {
-      for (const rate of showPlaybackRateControl) {
-        if (typeof rate !== "number") {
-          throw new Error("Every item in showPlaybackRateControl must be a number");
-        }
-        if (rate <= 0) {
-          throw new Error("Every item in showPlaybackRateControl must be positive");
-        }
-      }
-      return showPlaybackRateControl;
-    }
-    return null;
-  }, [showPlaybackRateControl]);
-  const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef9(null);
-  const flexRef = useRef9(null);
-  const onPointerDownIfContainer = useCallback8((e) => {
-    if (e.target === ref.current || e.target === flexRef.current) {
-      onPointerDown?.(e);
-    }
-  }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback8((e) => {
-    if (e.target === ref.current || e.target === flexRef.current) {
-      onDoubleClick?.(e);
-    }
-  }, [onDoubleClick]);
-  return /* @__PURE__ */ jsxs8("div", {
-    ref,
-    style: containerCss,
-    onPointerDown: onPointerDownIfContainer,
-    onDoubleClick: onDoubleClickIfContainer,
-    children: [
-      /* @__PURE__ */ jsxs8("div", {
-        ref: flexRef,
-        style: controlsRow,
-        children: [
-          /* @__PURE__ */ jsxs8("div", {
-            style: leftPartStyle,
-            children: [
-              /* @__PURE__ */ jsx11("button", {
-                ref: playButtonRef,
-                type: "button",
-                style: playerButtonStyle,
-                onClick: toggle,
-                "aria-label": playing ? "Pause video" : "Play video",
-                title: playing ? "Pause video" : "Play video",
-                children: renderPlayPauseButton === null ? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
-                  buffering,
-                  playing
-                }) : renderPlayPauseButton({
-                  playing,
-                  isBuffering: buffering
-                }) ?? /* @__PURE__ */ jsx11(DefaultPlayPauseButton, {
-                  buffering,
-                  playing
-                })
-              }),
-              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment2, {
-                children: [
-                  /* @__PURE__ */ jsx11("div", {
-                    style: xSpacer
-                  }),
-                  /* @__PURE__ */ jsx11(MediaVolumeSlider, {
-                    renderMuteButton,
-                    renderVolumeSlider,
-                    displayVerticalVolumeSlider
-                  })
-                ]
-              }) : null,
-              /* @__PURE__ */ jsx11("div", {
-                style: xSpacer
-              }),
-              /* @__PURE__ */ jsx11(PlayerTimeLabel, {
-                durationInFrames,
-                fps,
-                maxTimeLabelWidth
-              }),
-              /* @__PURE__ */ jsx11("div", {
-                style: xSpacer
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx11("div", {
-            style: flex1
-          }),
-          customControlsElement,
-          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx11("div", {
-            style: xSpacer
-          }) : null,
-          playbackRates && canvasSize && /* @__PURE__ */ jsx11(PlaybackrateControl, {
-            canvasSize,
-            playbackRates
-          }),
-          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("div", {
-            style: xSpacer
-          }) : null,
-          /* @__PURE__ */ jsx11("div", {
-            style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx11("button", {
-              type: "button",
-              "aria-label": isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
-              title: isFullscreen ? "Exit fullscreen" : "Enter Fullscreen",
-              style: playerButtonStyle,
-              onClick: isFullscreen ? onExitFullscreenButtonClick : onFullscreenButtonClick,
-              children: renderFullscreenButton === null ? /* @__PURE__ */ jsx11(FullscreenIcon, {
-                isFullscreen
-              }) : renderFullscreenButton({ isFullscreen })
-            }) : null
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx11("div", {
-        style: ySpacer
-      }),
-      /* @__PURE__ */ jsx11(PlayerSeekBar, {
-        onSeekEnd,
-        onSeekStart,
-        durationInFrames,
-        inFrame,
-        outFrame
-      })
-    ]
-  });
-};
-var IS_NODE = typeof document === "undefined";
-var cancellablePromise = (promise) => {
-  let isCanceled = false;
-  const wrappedPromise = new Promise((resolve, reject) => {
-    promise.then((value) => {
-      if (isCanceled) {
-        reject({ isCanceled, value });
-        return;
-      }
-      resolve(value);
-    }).catch((error) => {
-      reject({ isCanceled, error });
-    });
-  });
-  return {
-    promise: wrappedPromise,
-    cancel: () => {
-      isCanceled = true;
-    }
-  };
-};
-var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
-var useCancellablePromises = () => {
-  const pendingPromises = useRef10([]);
-  const appendPendingPromise = useCallback9((promise) => {
-    pendingPromises.current = [...pendingPromises.current, promise];
-  }, []);
-  const removePendingPromise = useCallback9((promise) => {
-    pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
-  }, []);
-  const clearPendingPromises = useCallback9(() => pendingPromises.current.map((p) => p.cancel()), []);
-  const api = useMemo10(() => ({
-    appendPendingPromise,
-    removePendingPromise,
-    clearPendingPromises
-  }), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
-  return api;
-};
-var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
-  const api = useCancellablePromises();
-  const handleClick = useCallback10(async (e) => {
-    if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
-      onClick(e);
-      return;
-    }
-    api.clearPendingPromises();
-    const waitForClick = cancellablePromise(delay(200));
-    api.appendPendingPromise(waitForClick);
-    try {
-      await waitForClick.promise;
-      api.removePendingPromise(waitForClick);
-      onClick(e);
-    } catch (errorInfo) {
-      const info = errorInfo;
-      api.removePendingPromise(waitForClick);
-      if (!info.isCanceled) {
-        throw info.error;
-      }
-    }
-  }, [api, onClick]);
-  const handlePointerDown = useCallback10(() => {
-    document.addEventListener("pointerup", (newEvt) => {
-      handleClick(newEvt);
-    }, {
-      once: true
-    });
-  }, [handleClick]);
-  const handleDoubleClick = useCallback10(() => {
-    api.clearPendingPromises();
-    onDoubleClick();
-  }, [api, onDoubleClick]);
-  const returnValue = useMemo11(() => {
-    if (!doubleClickToFullscreen) {
-      return { handlePointerDown: onClick, handleDoubleClick: () => {
-        return;
-      } };
-    }
-    return { handlePointerDown, handleDoubleClick };
-  }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
-  return returnValue;
-};
-var reactVersion = React10.version.split(".")[0];
-if (reactVersion === "0") {
-  throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
-}
-var doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-var PlayerUI = ({
-  controls,
-  style: style2,
-  loop,
-  autoPlay,
-  allowFullscreen,
-  inputProps,
-  clickToPlay,
-  showVolumeControls,
-  doubleClickToFullscreen,
-  spaceKeyToPlayOrPause,
-  errorFallback,
-  playbackRate,
-  renderLoading,
-  renderPoster,
-  className: className2,
-  moveToBeginningWhenEnded,
-  showPosterWhenUnplayed,
-  showPosterWhenEnded,
-  showPosterWhenPaused,
-  showPosterWhenBuffering,
-  showPosterWhenBufferingAndPaused,
-  inFrame,
-  outFrame,
-  initiallyShowControls,
-  renderFullscreen: renderFullscreenButton,
-  renderPlayPauseButton,
-  renderMuteButton,
-  renderVolumeSlider,
-  renderCustomControls,
-  alwaysShowControls,
-  showPlaybackRateControl,
-  posterFillMode,
-  bufferStateDelayInMilliseconds,
-  hideControlsWhenPointerDoesntMove,
-  overflowVisible,
-  browserMediaControlsBehavior,
-  overrideInternalClassName,
-  noSuspense
-}, ref) => {
-  const config = Internals11.useUnsafeVideoConfig();
-  const video = Internals11.useVideo();
-  const container = useRef11(null);
-  const canvasSize = useElementSize(container, {
-    triggerOnWindowResize: false,
-    shouldApplyCssTransforms: false
-  });
-  const [hasPausedToResume, setHasPausedToResume] = useState11(false);
-  const [shouldAutoplay, setShouldAutoPlay] = useState11(autoPlay);
-  const [isFullscreen, setIsFullscreen] = useState11(() => false);
-  const [seeking, setSeeking] = useState11(false);
-  const supportsFullScreen = useMemo12(() => {
-    if (typeof document === "undefined") {
-      return false;
-    }
-    return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
-  }, []);
-  const player = usePlayer();
-  const playerToggle = player.toggle;
-  usePlayback({
-    loop,
-    playbackRate,
-    moveToBeginningWhenEnded,
-    inFrame,
-    outFrame,
-    getCurrentFrame: player.getCurrentFrame,
-    browserMediaControlsBehavior
-  });
-  useEffect12(() => {
-    if (hasPausedToResume && !player.playing) {
-      setHasPausedToResume(false);
-      player.play();
-    }
-  }, [hasPausedToResume, player]);
-  useEffect12(() => {
-    const { current } = container;
-    if (!current) {
-      return;
-    }
-    const onFullscreenChange = () => {
-      const newValue = document.fullscreenElement === current || document.webkitFullscreenElement === current;
-      setIsFullscreen(newValue);
-    };
-    document.addEventListener("fullscreenchange", onFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", onFullscreenChange);
-    return () => {
-      document.removeEventListener("fullscreenchange", onFullscreenChange);
-      document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
-    };
-  }, []);
-  const toggle = useCallback11((e) => {
-    playerToggle(e);
-  }, [playerToggle]);
-  const requestFullscreen = useCallback11(() => {
-    if (!allowFullscreen) {
-      throw new Error("allowFullscreen is false");
-    }
-    if (!supportsFullScreen) {
-      throw new Error("Browser doesnt support fullscreen");
-    }
-    if (!container.current) {
-      throw new Error("No player ref found");
-    }
-    if (container.current.webkitRequestFullScreen) {
-      container.current.webkitRequestFullScreen();
-    } else {
-      container.current.requestFullscreen();
-    }
-  }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback11(() => {
-    if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else {
-      document.exitFullscreen();
-    }
-  }, []);
-  useEffect12(() => {
-    const { current } = container;
-    if (!current) {
-      return;
-    }
-    const fullscreenChange = () => {
-      const element = document.webkitFullscreenElement ?? document.fullscreenElement;
-      if (element && element === container.current) {
-        player.emitter.dispatchFullscreenChange({
-          isFullscreen: true
-        });
-      } else {
-        player.emitter.dispatchFullscreenChange({
-          isFullscreen: false
-        });
-      }
-    };
-    current.addEventListener("webkitfullscreenchange", fullscreenChange);
-    current.addEventListener("fullscreenchange", fullscreenChange);
-    return () => {
-      current.removeEventListener("webkitfullscreenchange", fullscreenChange);
-      current.removeEventListener("fullscreenchange", fullscreenChange);
-    };
-  }, [player.emitter]);
-  const durationInFrames = config?.durationInFrames ?? 1;
-  const layout = useMemo12(() => {
-    if (!config || !canvasSize) {
-      return null;
-    }
-    return calculateCanvasTransformation({
-      canvasSize,
-      compositionHeight: config.height,
-      compositionWidth: config.width,
-      previewSize: "auto"
-    });
-  }, [canvasSize, config]);
-  const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef11(false);
-  useEffect12(() => {
-    if (!initialScaleIgnored.current) {
-      initialScaleIgnored.current = true;
-      return;
-    }
-    player.emitter.dispatchScaleChange(scale);
-  }, [player.emitter, scale]);
-  const { setMediaVolume, setMediaMuted } = useContext6(Internals11.SetMediaVolumeContext);
-  const { mediaMuted, mediaVolume } = useContext6(Internals11.MediaVolumeContext);
-  useEffect12(() => {
-    player.emitter.dispatchVolumeChange(mediaVolume);
-  }, [player.emitter, mediaVolume]);
-  const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect12(() => {
-    player.emitter.dispatchMuteChange({
-      isMuted
-    });
-  }, [player.emitter, isMuted]);
-  const [showBufferIndicator, setShowBufferState] = useState11(false);
-  useEffect12(() => {
-    let timeout = null;
-    let stopped = false;
-    const onBuffer = () => {
-      stopped = false;
-      requestAnimationFrame(() => {
-        if (bufferStateDelayInMilliseconds === 0) {
-          setShowBufferState(true);
-        } else {
-          timeout = setTimeout(() => {
-            if (!stopped) {
-              setShowBufferState(true);
-            }
-          }, bufferStateDelayInMilliseconds);
-        }
-      });
-    };
-    const onResume = () => {
-      requestAnimationFrame(() => {
-        stopped = true;
-        setShowBufferState(false);
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-      });
-    };
-    player.emitter.addEventListener("waiting", onBuffer);
-    player.emitter.addEventListener("resume", onResume);
-    return () => {
-      player.emitter.removeEventListener("waiting", onBuffer);
-      player.emitter.removeEventListener("resume", onResume);
-      setShowBufferState(false);
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      stopped = true;
-    };
-  }, [bufferStateDelayInMilliseconds, player.emitter]);
-  useImperativeHandle(ref, () => {
-    const methods = {
-      play: player.play,
-      pause: () => {
-        setHasPausedToResume(false);
-        player.pause();
-      },
-      toggle,
-      getContainerNode: () => container.current,
-      getCurrentFrame: player.getCurrentFrame,
-      isPlaying: player.isPlaying,
-      seekTo: (f) => {
-        const lastFrame = durationInFrames - 1;
-        const frameToSeekTo = Math.max(0, Math.min(lastFrame, f));
-        if (player.isPlaying()) {
-          const pauseToResume = frameToSeekTo !== lastFrame || loop;
-          setHasPausedToResume(pauseToResume);
-          player.pause();
-        }
-        if (frameToSeekTo === lastFrame && !loop) {
-          player.emitter.dispatchEnded();
-        }
-        player.seek(frameToSeekTo);
-      },
-      isFullscreen: () => {
-        const { current } = container;
-        if (!current) {
-          return false;
-        }
-        return document.fullscreenElement === current || document.webkitFullscreenElement === current;
-      },
-      requestFullscreen,
-      exitFullscreen,
-      getVolume: () => {
-        if (mediaMuted) {
-          return 0;
-        }
-        return mediaVolume;
-      },
-      setVolume: (vol) => {
-        if (typeof vol !== "number") {
-          throw new TypeError(`setVolume() takes a number, got value of type ${typeof vol}`);
-        }
-        if (isNaN(vol)) {
-          throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
-        }
-        if (vol < 0 || vol > 1) {
-          throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
-        }
-        setMediaVolume(vol);
-      },
-      isMuted: () => isMuted,
-      mute: () => {
-        setMediaMuted(true);
-      },
-      unmute: () => {
-        setMediaMuted(false);
-      },
-      getScale: () => scale,
-      pauseAndReturnToPlayStart: () => {
-        player.pauseAndReturnToPlayStart();
-      }
-    };
-    return Object.assign(player.emitter, methods);
-  }, [
-    durationInFrames,
-    exitFullscreen,
-    loop,
-    mediaMuted,
-    isMuted,
-    mediaVolume,
-    player,
-    requestFullscreen,
-    setMediaMuted,
-    setMediaVolume,
-    toggle,
-    scale
-  ]);
-  const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo12(() => {
-    return calculateOuterStyle({
-      canvasSize,
-      config,
-      style: style2,
-      overflowVisible,
-      layout
-    });
-  }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo12(() => {
-    return calculateOuter({ config, layout, scale, overflowVisible });
-  }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo12(() => {
-    return calculateContainerStyle({
-      config,
-      layout,
-      scale,
-      overflowVisible
-    });
-  }, [config, layout, overflowVisible, scale]);
-  const playerPause = player.pause;
-  const playerDispatchError = player.emitter.dispatchError;
-  const onError = useCallback11((error) => {
-    playerPause();
-    playerDispatchError(error);
-  }, [playerDispatchError, playerPause]);
-  const onFullscreenButtonClick = useCallback11((e) => {
-    e.stopPropagation();
-    requestFullscreen();
-  }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback11((e) => {
-    e.stopPropagation();
-    exitFullscreen();
-  }, [exitFullscreen]);
-  const onSingleClick = useCallback11((e) => {
-    const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
-    if (rightClick) {
-      return;
-    }
-    toggle(e);
-  }, [toggle]);
-  const onSeekStart = useCallback11(() => {
-    setSeeking(true);
-  }, []);
-  const onSeekEnd = useCallback11(() => {
-    setSeeking(false);
-  }, []);
-  const onDoubleClick = useCallback11(() => {
-    if (isFullscreen) {
-      exitFullscreen();
-    } else {
-      requestFullscreen();
-    }
-  }, [exitFullscreen, isFullscreen, requestFullscreen]);
-  const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect12(() => {
-    if (shouldAutoplay) {
-      player.play();
-      setShouldAutoPlay(false);
-    }
-  }, [shouldAutoplay, player]);
-  const loadingMarkup = useMemo12(() => {
-    return renderLoading ? renderLoading({
-      height: outerStyle.height,
-      width: outerStyle.width,
-      isBuffering: showBufferIndicator
-    }) : null;
-  }, [outerStyle.height, outerStyle.width, renderLoading, showBufferIndicator]);
-  const currentScale = useMemo12(() => {
-    return {
-      type: "scale",
-      scale
-    };
-  }, [scale]);
-  if (!config) {
-    return null;
-  }
-  const poster = renderPoster ? renderPoster({
-    height: posterFillMode === "player-size" ? outerStyle.height : config.height,
-    width: posterFillMode === "player-size" ? outerStyle.width : config.width,
-    isBuffering: showBufferIndicator
-  }) : null;
-  if (poster === void 0) {
-    throw new TypeError("renderPoster() must return a React element, but undefined was returned");
-  }
-  const shouldShowPoster = poster && [
-    showPosterWhenPaused && !player.isPlaying() && !seeking,
-    showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
-    showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
-    showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
-    showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
-  ].some(Boolean);
-  const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs9(Fragment3, {
-    children: [
-      /* @__PURE__ */ jsxs9("div", {
-        style: outer,
-        onPointerDown: clickToPlay ? handlePointerDown : void 0,
-        onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : void 0,
-        children: [
-          /* @__PURE__ */ jsxs9("div", {
-            style: containerStyle3,
-            className: playerCssClassname(overrideInternalClassName),
-            children: [
-              VideoComponent ? /* @__PURE__ */ jsx12(ErrorBoundary, {
-                onError,
-                errorFallback,
-                children: /* @__PURE__ */ jsx12(Internals11.CurrentScaleContext.Provider, {
-                  value: currentScale,
-                  children: /* @__PURE__ */ jsx12(VideoComponent, {
-                    ...video?.props ?? {},
-                    ...inputProps ?? {}
-                  })
-                })
-              }) : null,
-              shouldShowPoster && posterFillMode === "composition-size" ? /* @__PURE__ */ jsx12("div", {
-                style: {
-                  ...outerWithoutScale,
-                  width: config.width,
-                  height: config.height
-                },
-                onPointerDown: clickToPlay ? handlePointerDown : void 0,
-                onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : void 0,
-                children: poster
-              }) : null
-            ]
-          }),
-          /* @__PURE__ */ jsx12(RenderWarningIfBlacklist, {})
-        ]
-      }),
-      shouldShowPoster && posterFillMode === "player-size" ? /* @__PURE__ */ jsx12("div", {
-        style: outer,
-        onPointerDown: clickToPlay ? handlePointerDown : void 0,
-        onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : void 0,
-        children: poster
-      }) : null,
-      controls ? /* @__PURE__ */ jsx12(Controls, {
-        fps: config.fps,
-        playing: player.playing,
-        toggle: player.toggle,
-        durationInFrames: config.durationInFrames,
-        containerRef: container,
-        onFullscreenButtonClick,
-        isFullscreen,
-        allowFullscreen,
-        showVolumeControls,
-        onExitFullscreenButtonClick,
-        spaceKeyToPlayOrPause,
-        onSeekEnd,
-        onSeekStart,
-        inFrame,
-        outFrame,
-        initiallyShowControls,
-        canvasSize,
-        renderFullscreenButton,
-        renderPlayPauseButton,
-        alwaysShowControls,
-        showPlaybackRateControl,
-        buffering: showBufferIndicator,
-        hideControlsWhenPointerDoesntMove,
-        onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : void 0,
-        onPointerDown: clickToPlay ? handlePointerDown : void 0,
-        renderMuteButton,
-        renderVolumeSlider,
-        renderCustomControls
-      }) : null
-    ]
-  });
-  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense) {
-    return /* @__PURE__ */ jsx12("div", {
-      ref: container,
-      style: outerStyle,
-      className: className2,
-      children: content
-    });
-  }
-  return /* @__PURE__ */ jsx12("div", {
-    ref: container,
-    style: outerStyle,
-    className: className2,
-    children: /* @__PURE__ */ jsx12(Suspense, {
-      fallback: loadingMarkup,
-      children: content
-    })
-  });
-};
-var PlayerUI_default = forwardRef(PlayerUI);
-var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
-var persistVolume = (volume, logLevel, volumePersistenceKey) => {
-  if (typeof window === "undefined") {
-    return;
-  }
-  try {
-    window.localStorage.setItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY, String(volume));
-  } catch (e) {
-    Internals12.Log.error({ logLevel, tag: null }, "Could not persist volume", e);
-  }
-};
-var getPreferredVolume = (volumePersistenceKey) => {
-  if (typeof window === "undefined") {
-    return 1;
-  }
-  try {
-    const val = window.localStorage.getItem(volumePersistenceKey ?? DEFAULT_VOLUME_PERSISTANCE_KEY);
-    return val ? Number(val) : 1;
-  } catch {
-    return 1;
-  }
-};
-var PLAYER_COMP_ID = "player-comp";
-var SharedPlayerContexts = ({
-  children,
-  timelineContext,
-  fps,
-  compositionHeight,
-  compositionWidth,
-  durationInFrames,
-  component,
-  numberOfSharedAudioTags,
-  initiallyMuted,
-  logLevel,
-  audioLatencyHint,
-  volumePersistenceKey,
-  inputProps,
-  audioEnabled
-}) => {
-  const compositionManagerContext = useMemo13(() => {
-    const context = {
-      compositions: [
-        {
-          component,
-          durationInFrames,
-          height: compositionHeight,
-          width: compositionWidth,
-          fps,
-          id: PLAYER_COMP_ID,
-          nonce: 777,
-          folderName: null,
-          parentFolderName: null,
-          schema: null,
-          calculateMetadata: null
-        }
-      ],
-      folders: [],
-      currentCompositionMetadata: {
-        defaultCodec: null,
-        defaultOutName: null,
-        defaultPixelFormat: null,
-        defaultProResProfile: null,
-        defaultVideoImageFormat: null,
-        durationInFrames,
-        fps,
-        height: compositionHeight,
-        width: compositionWidth,
-        props: inputProps
-      },
-      canvasContent: { type: "composition", compositionId: "player-comp" }
-    };
-    return context;
-  }, [
-    component,
-    durationInFrames,
-    compositionHeight,
-    compositionWidth,
-    fps,
-    inputProps
-  ]);
-  const [mediaMuted, setMediaMuted] = useState12(() => initiallyMuted);
-  const [mediaVolume, setMediaVolume] = useState12(() => getPreferredVolume(volumePersistenceKey ?? null));
-  const mediaVolumeContextValue = useMemo13(() => {
-    return {
-      mediaMuted,
-      mediaVolume
-    };
-  }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback12((vol) => {
-    setMediaVolume(vol);
-    persistVolume(vol, logLevel, volumePersistenceKey ?? null);
-  }, [logLevel, volumePersistenceKey]);
-  const setMediaVolumeContextValue = useMemo13(() => {
-    return {
-      setMediaMuted,
-      setMediaVolume: setMediaVolumeAndPersist
-    };
-  }, [setMediaVolumeAndPersist]);
-  const logLevelContext = useMemo13(() => {
-    return {
-      logLevel,
-      mountTime: Date.now()
-    };
-  }, [logLevel]);
-  const env = useMemo13(() => {
-    return {
-      isPlayer: true,
-      isRendering: false,
-      isStudio: false,
-      isClientSideRendering: false,
-      isReadOnlyStudio: false
-    };
-  }, []);
-  return /* @__PURE__ */ jsx13(Internals13.RemotionEnvironmentContext.Provider, {
-    value: env,
-    children: /* @__PURE__ */ jsx13(Internals13.LogLevelContext.Provider, {
-      value: logLevelContext,
-      children: /* @__PURE__ */ jsx13(Internals13.CanUseRemotionHooksProvider, {
-        children: /* @__PURE__ */ jsx13(Internals13.TimelineContext.Provider, {
-          value: timelineContext,
-          children: /* @__PURE__ */ jsx13(Internals13.CompositionManager.Provider, {
-            value: compositionManagerContext,
-            children: /* @__PURE__ */ jsx13(Internals13.PrefetchProvider, {
-              children: /* @__PURE__ */ jsx13(Internals13.DurationsContextProvider, {
-                children: /* @__PURE__ */ jsx13(Internals13.MediaVolumeContext.Provider, {
-                  value: mediaVolumeContextValue,
-                  children: /* @__PURE__ */ jsx13(Internals13.SetMediaVolumeContext.Provider, {
-                    value: setMediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx13(Internals13.SharedAudioContextProvider, {
-                      numberOfAudioTags: numberOfSharedAudioTags,
-                      audioLatencyHint,
-                      audioEnabled,
-                      children: /* @__PURE__ */ jsx13(Internals13.BufferingProvider, {
-                        children
-                      })
-                    })
-                  })
-                })
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-};
-var warningShown = false;
-var acknowledgeRemotionLicenseMessage = (acknowledge, logLevel) => {
-  if (acknowledge) {
-    return;
-  }
-  if (warningShown) {
-    return;
-  }
-  warningShown = true;
-  Internals14.Log.warn({ logLevel, tag: null }, "Note: Some companies are required to obtain a license to use Remotion. See: https://remotion.dev/license\nPass the `acknowledgeRemotionLicense` prop to `<Player />` function to make this message disappear.");
-};
-var validateSingleFrame = (frame, variableName) => {
-  if (typeof frame === "undefined" || frame === null) {
-    return frame ?? null;
-  }
-  if (typeof frame !== "number") {
-    throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
-  }
-  if (Number.isNaN(frame)) {
-    throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
-  }
-  if (!Number.isFinite(frame)) {
-    throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
-  }
-  if (frame % 1 !== 0) {
-    throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
-  }
-  return frame;
-};
-var validateInOutFrames = ({
-  inFrame,
-  durationInFrames,
-  outFrame
-}) => {
-  const validatedInFrame = validateSingleFrame(inFrame, "inFrame");
-  const validatedOutFrame = validateSingleFrame(outFrame, "outFrame");
-  if (validatedInFrame === null && validatedOutFrame === null) {
-    return;
-  }
-  if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
-    throw new Error("inFrame must be less than (durationInFrames - 1), but is " + validatedInFrame);
-  }
-  if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
-    throw new Error("outFrame must be less than (durationInFrames - 1), but is " + validatedOutFrame);
-  }
-  if (validatedInFrame !== null && validatedInFrame < 0) {
-    throw new Error("inFrame must be greater than 0, but is " + validatedInFrame);
-  }
-  if (validatedOutFrame !== null && validatedOutFrame <= 0) {
-    throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
-  }
-  if (validatedOutFrame !== null && validatedInFrame !== null && validatedOutFrame <= validatedInFrame) {
-    throw new Error("outFrame must be greater than inFrame, but is " + validatedOutFrame + " <= " + validatedInFrame);
-  }
-};
-var validateInitialFrame = ({
-  initialFrame,
-  durationInFrames
-}) => {
-  if (typeof durationInFrames !== "number") {
-    throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
-  }
-  if (typeof initialFrame === "undefined") {
-    return;
-  }
-  if (typeof initialFrame !== "number") {
-    throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
-  }
-  if (Number.isNaN(initialFrame)) {
-    throw new Error(`\`initialFrame\` must be a number, but is NaN`);
-  }
-  if (!Number.isFinite(initialFrame)) {
-    throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
-  }
-  if (initialFrame % 1 !== 0) {
-    throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
-  }
-  if (initialFrame > durationInFrames - 1) {
-    throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
-  }
-};
-var validatePlaybackRate = (playbackRate) => {
-  if (playbackRate === void 0) {
-    return;
-  }
-  if (playbackRate > 4) {
-    throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
-  }
-  if (playbackRate < -4) {
-    throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
-  }
-  if (playbackRate === 0) {
-    throw new Error(`A playback rate of 0 is not supported.`);
-  }
-};
-var validateFps = NoReactInternals.validateFps;
-var validateDimension = NoReactInternals.validateDimension;
-var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
-var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
-var componentOrNullIfLazy = (props) => {
-  if ("component" in props) {
-    return props.component;
-  }
-  return null;
-};
-var PlayerFn = ({
-  durationInFrames,
-  compositionHeight,
-  compositionWidth,
-  fps,
-  inputProps,
-  style: style2,
-  controls = false,
-  loop = false,
-  autoPlay = false,
-  showVolumeControls = true,
-  allowFullscreen = true,
-  clickToPlay,
-  doubleClickToFullscreen = false,
-  spaceKeyToPlayOrPause = true,
-  moveToBeginningWhenEnded = true,
-  numberOfSharedAudioTags = 5,
-  errorFallback = () => "\u26A0\uFE0F",
-  playbackRate = 1,
-  renderLoading,
-  className: className2,
-  showPosterWhenUnplayed,
-  showPosterWhenEnded,
-  showPosterWhenPaused,
-  showPosterWhenBuffering,
-  showPosterWhenBufferingAndPaused,
-  initialFrame,
-  renderPoster,
-  inFrame,
-  outFrame,
-  initiallyShowControls,
-  renderFullscreenButton,
-  renderPlayPauseButton,
-  renderVolumeSlider,
-  renderCustomControls,
-  alwaysShowControls = false,
-  initiallyMuted = false,
-  showPlaybackRateControl = false,
-  posterFillMode = "player-size",
-  bufferStateDelayInMilliseconds,
-  hideControlsWhenPointerDoesntMove = true,
-  overflowVisible = false,
-  renderMuteButton,
-  browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
-  overrideInternalClassName,
-  logLevel = "info",
-  noSuspense,
-  acknowledgeRemotionLicense,
-  audioLatencyHint = "interactive",
-  volumePersistenceKey,
-  ...componentProps
-}, ref) => {
-  if (typeof window !== "undefined") {
-    window.remotion_isPlayer = true;
-  }
-  if (componentProps.defaultProps !== void 0) {
-    throw new Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");
-  }
-  const componentForValidation = componentOrNullIfLazy(componentProps);
-  if (componentForValidation?.type === Composition) {
-    throw new TypeError(`'component' should not be an instance of <Composition/>. Pass the React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
-  }
-  if (componentForValidation === Composition) {
-    throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
-  }
-  useState13(() => acknowledgeRemotionLicenseMessage(Boolean(acknowledgeRemotionLicense), logLevel));
-  const component = Internals15.useLazyComponent({
-    compProps: componentProps,
-    componentName: "Player",
-    noSuspense: Boolean(noSuspense)
-  });
-  validateInitialFrame({ initialFrame, durationInFrames });
-  const [frame, setFrame] = useState13(() => ({
-    [PLAYER_COMP_ID]: initialFrame ?? 0
-  }));
-  const [playing, setPlaying] = useState13(false);
-  const [rootId] = useState13("player-comp");
-  const rootRef = useRef12(null);
-  const audioAndVideoTags = useRef12([]);
-  const imperativePlaying = useRef12(false);
-  const [currentPlaybackRate, setCurrentPlaybackRate] = useState13(playbackRate);
-  if (typeof compositionHeight !== "number") {
-    throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
-  }
-  if (typeof compositionWidth !== "number") {
-    throw new TypeError(`'compositionWidth' must be a number but got '${typeof compositionWidth}' instead`);
-  }
-  validateDimension(compositionHeight, "compositionHeight", "of the <Player /> component");
-  validateDimension(compositionWidth, "compositionWidth", "of the <Player /> component");
-  validateDurationInFrames(durationInFrames, {
-    component: "of the <Player/> component",
-    allowFloats: false
-  });
-  validateFps(fps, "as a prop of the <Player/> component", false);
-  validateDefaultAndInputProps(inputProps, "inputProps", null);
-  validateInOutFrames({
-    durationInFrames,
-    inFrame,
-    outFrame
-  });
-  if (typeof controls !== "boolean" && typeof controls !== "undefined") {
-    throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
-  }
-  if (typeof autoPlay !== "boolean" && typeof autoPlay !== "undefined") {
-    throw new TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof autoPlay}' instead`);
-  }
-  if (typeof loop !== "boolean" && typeof loop !== "undefined") {
-    throw new TypeError(`'loop' must be a boolean or undefined but got '${typeof loop}' instead`);
-  }
-  if (typeof doubleClickToFullscreen !== "boolean" && typeof doubleClickToFullscreen !== "undefined") {
-    throw new TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof doubleClickToFullscreen}' instead`);
-  }
-  if (typeof showVolumeControls !== "boolean" && typeof showVolumeControls !== "undefined") {
-    throw new TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof showVolumeControls}' instead`);
-  }
-  if (typeof allowFullscreen !== "boolean" && typeof allowFullscreen !== "undefined") {
-    throw new TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof allowFullscreen}' instead`);
-  }
-  if (typeof clickToPlay !== "boolean" && typeof clickToPlay !== "undefined") {
-    throw new TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof clickToPlay}' instead`);
-  }
-  if (typeof spaceKeyToPlayOrPause !== "boolean" && typeof spaceKeyToPlayOrPause !== "undefined") {
-    throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
-  }
-  if (typeof numberOfSharedAudioTags !== "number" || numberOfSharedAudioTags % 1 !== 0 || !Number.isFinite(numberOfSharedAudioTags) || Number.isNaN(numberOfSharedAudioTags) || numberOfSharedAudioTags < 0) {
-    throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
-  }
-  validatePlaybackRate(currentPlaybackRate);
-  useEffect13(() => {
-    setCurrentPlaybackRate(playbackRate);
-  }, [playbackRate]);
-  useImperativeHandle2(ref, () => rootRef.current, []);
-  useState13(() => {
-    Internals15.playbackLogging({
-      logLevel,
-      message: `[player] Mounting <Player>. User agent = ${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
-      tag: "player",
-      mountTime: Date.now()
-    });
-  });
-  const timelineContextValue = useMemo14(() => {
-    return {
-      frame,
-      playing,
-      rootId,
-      playbackRate: currentPlaybackRate,
-      imperativePlaying,
-      setPlaybackRate: (rate) => {
-        setCurrentPlaybackRate(rate);
-      },
-      audioAndVideoTags
-    };
-  }, [frame, currentPlaybackRate, playing, rootId]);
-  const setTimelineContextValue = useMemo14(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, [setFrame]);
-  if (typeof window !== "undefined") {
-    useLayoutEffect2(() => {
-      Internals15.CSSUtils.injectCSS(Internals15.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
-    }, [overrideInternalClassName]);
-  }
-  const actualInputProps = useMemo14(() => inputProps ?? {}, [inputProps]);
-  const browserMediaControlsBehavior = useMemo14(() => {
-    return passedBrowserMediaControlsBehavior ?? {
-      mode: "prevent-media-session"
-    };
-  }, [passedBrowserMediaControlsBehavior]);
-  return /* @__PURE__ */ jsx14(Internals15.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx14(SharedPlayerContexts, {
-      timelineContext: timelineContextValue,
-      component,
-      compositionHeight,
-      compositionWidth,
-      durationInFrames,
-      fps,
-      numberOfSharedAudioTags,
-      initiallyMuted,
-      logLevel,
-      audioLatencyHint,
-      volumePersistenceKey,
-      inputProps: actualInputProps,
-      audioEnabled: true,
-      children: /* @__PURE__ */ jsx14(Internals15.SetTimelineContext.Provider, {
-        value: setTimelineContextValue,
-        children: /* @__PURE__ */ jsx14(PlayerEmitterProvider, {
-          currentPlaybackRate,
-          children: /* @__PURE__ */ jsx14(PlayerUI_default, {
-            ref: rootRef,
-            posterFillMode,
-            renderLoading,
-            autoPlay: Boolean(autoPlay),
-            loop: Boolean(loop),
-            controls: Boolean(controls),
-            errorFallback,
-            style: style2,
-            inputProps: actualInputProps,
-            allowFullscreen: Boolean(allowFullscreen),
-            moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded),
-            clickToPlay: typeof clickToPlay === "boolean" ? clickToPlay : Boolean(controls),
-            showVolumeControls: Boolean(showVolumeControls),
-            doubleClickToFullscreen: Boolean(doubleClickToFullscreen),
-            spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause),
-            playbackRate: currentPlaybackRate,
-            className: className2 ?? void 0,
-            showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed),
-            showPosterWhenEnded: Boolean(showPosterWhenEnded),
-            showPosterWhenPaused: Boolean(showPosterWhenPaused),
-            showPosterWhenBuffering: Boolean(showPosterWhenBuffering),
-            showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused),
-            renderPoster,
-            inFrame: inFrame ?? null,
-            outFrame: outFrame ?? null,
-            initiallyShowControls: initiallyShowControls ?? true,
-            renderFullscreen: renderFullscreenButton ?? null,
-            renderPlayPauseButton: renderPlayPauseButton ?? null,
-            renderMuteButton: renderMuteButton ?? null,
-            renderVolumeSlider: renderVolumeSlider ?? null,
-            renderCustomControls: renderCustomControls ?? null,
-            alwaysShowControls,
-            showPlaybackRateControl,
-            bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
-            hideControlsWhenPointerDoesntMove,
-            overflowVisible,
-            browserMediaControlsBehavior,
-            overrideInternalClassName: overrideInternalClassName ?? void 0,
-            noSuspense: Boolean(noSuspense)
-          })
-        })
-      })
-    })
-  });
-};
-var forward = forwardRef2;
-var Player = forward(PlayerFn);
-var useThumbnail = () => {
-  const emitter = useContext7(ThumbnailEmitterContext);
-  if (!emitter) {
-    throw new TypeError("Expected Player event emitter context");
-  }
-  const returnValue = useMemo15(() => {
-    return {
-      emitter
-    };
-  }, [emitter]);
-  return returnValue;
-};
-var reactVersion2 = React13.version.split(".")[0];
-if (reactVersion2 === "0") {
-  throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
-}
-var doesReactVersionSupportSuspense2 = parseInt(reactVersion2, 10) >= 18;
-var ThumbnailUI = ({
-  style: style2,
-  inputProps,
-  errorFallback,
-  renderLoading,
-  className: className2,
-  overflowVisible,
-  noSuspense,
-  overrideInternalClassName
-}, ref) => {
-  const config = Internals16.useUnsafeVideoConfig();
-  const video = Internals16.useVideo();
-  const container = useRef13(null);
-  const canvasSize = useElementSize(container, {
-    triggerOnWindowResize: false,
-    shouldApplyCssTransforms: false
-  });
-  const layout = useMemo16(() => {
-    if (!config || !canvasSize) {
-      return null;
-    }
-    return calculateCanvasTransformation({
-      canvasSize,
-      compositionHeight: config.height,
-      compositionWidth: config.width,
-      previewSize: "auto"
-    });
-  }, [canvasSize, config]);
-  const scale = layout?.scale ?? 1;
-  const thumbnail = useThumbnail();
-  useBufferStateEmitter(thumbnail.emitter);
-  useImperativeHandle3(ref, () => {
-    const methods = {
-      getContainerNode: () => container.current,
-      getScale: () => scale
-    };
-    return Object.assign(thumbnail.emitter, methods);
-  }, [scale, thumbnail.emitter]);
-  const VideoComponent = video ? video.component : null;
-  const outerStyle = useMemo16(() => {
-    return calculateOuterStyle({
-      config,
-      style: style2,
-      canvasSize,
-      overflowVisible,
-      layout
-    });
-  }, [canvasSize, config, layout, overflowVisible, style2]);
-  const outer = useMemo16(() => {
-    return calculateOuter({ config, layout, scale, overflowVisible });
-  }, [config, layout, overflowVisible, scale]);
-  const containerStyle3 = useMemo16(() => {
-    return calculateContainerStyle({
-      config,
-      layout,
-      scale,
-      overflowVisible
-    });
-  }, [config, layout, overflowVisible, scale]);
-  const onError = useCallback13((error) => {
-    thumbnail.emitter.dispatchError(error);
-  }, [thumbnail.emitter]);
-  const loadingMarkup = useMemo16(() => {
-    return renderLoading ? renderLoading({
-      height: outerStyle.height,
-      width: outerStyle.width,
-      isBuffering: false
-    }) : null;
-  }, [outerStyle.height, outerStyle.width, renderLoading]);
-  const currentScaleContext = useMemo16(() => {
-    return {
-      type: "scale",
-      scale
-    };
-  }, [scale]);
-  if (!config) {
-    return null;
-  }
-  const content = /* @__PURE__ */ jsx15("div", {
-    style: outer,
-    children: /* @__PURE__ */ jsx15("div", {
-      style: containerStyle3,
-      className: playerCssClassname(overrideInternalClassName),
-      children: VideoComponent ? /* @__PURE__ */ jsx15(ErrorBoundary, {
-        onError,
-        errorFallback,
-        children: /* @__PURE__ */ jsx15(Internals16.CurrentScaleContext.Provider, {
-          value: currentScaleContext,
-          children: /* @__PURE__ */ jsx15(VideoComponent, {
-            ...video?.props ?? {},
-            ...inputProps ?? {}
-          })
-        })
-      }) : null
-    })
-  });
-  if (noSuspense || IS_NODE && !doesReactVersionSupportSuspense2) {
-    return /* @__PURE__ */ jsx15("div", {
-      ref: container,
-      style: outerStyle,
-      className: className2,
-      children: content
-    });
-  }
-  return /* @__PURE__ */ jsx15("div", {
-    ref: container,
-    style: outerStyle,
-    className: className2,
-    children: /* @__PURE__ */ jsx15(Suspense2, {
-      fallback: loadingMarkup,
-      children: content
-    })
-  });
-};
-var ThumbnailUI_default = forwardRef3(ThumbnailUI);
-var ThumbnailFn = ({
-  frameToDisplay,
-  style: style2,
-  inputProps,
-  compositionHeight,
-  compositionWidth,
-  durationInFrames,
-  fps,
-  className: className2,
-  errorFallback = () => "\u26A0\uFE0F",
-  renderLoading,
-  overflowVisible = false,
-  overrideInternalClassName,
-  logLevel = "info",
-  noSuspense,
-  ...componentProps
-}, ref) => {
-  if (typeof window !== "undefined") {
-    useLayoutEffect3(() => {
-      window.remotion_isPlayer = true;
-    }, []);
-  }
-  const [thumbnailId] = useState14(() => String(random2(null)));
-  const rootRef = useRef14(null);
-  const timelineState = useMemo17(() => {
-    const value = {
-      playing: false,
-      frame: {
-        [PLAYER_COMP_ID]: frameToDisplay
-      },
-      rootId: thumbnailId,
-      imperativePlaying: {
-        current: false
-      },
-      playbackRate: 1,
-      setPlaybackRate: () => {
-        throw new Error("thumbnail");
-      },
-      audioAndVideoTags: { current: [] }
-    };
-    return value;
-  }, [frameToDisplay, thumbnailId]);
-  useImperativeHandle4(ref, () => rootRef.current, []);
-  const Component = Internals17.useLazyComponent({
-    compProps: componentProps,
-    componentName: "Thumbnail",
-    noSuspense: Boolean(noSuspense)
-  });
-  const [emitter] = useState14(() => new ThumbnailEmitter());
-  const passedInputProps = useMemo17(() => {
-    return inputProps ?? {};
-  }, [inputProps]);
-  return /* @__PURE__ */ jsx16(Internals17.IsPlayerContextProvider, {
-    children: /* @__PURE__ */ jsx16(SharedPlayerContexts, {
-      timelineContext: timelineState,
-      component: Component,
-      compositionHeight,
-      compositionWidth,
-      durationInFrames,
-      fps,
-      numberOfSharedAudioTags: 0,
-      initiallyMuted: true,
-      logLevel,
-      audioLatencyHint: "playback",
-      inputProps: passedInputProps,
-      audioEnabled: false,
-      children: /* @__PURE__ */ jsx16(ThumbnailEmitterContext.Provider, {
-        value: emitter,
-        children: /* @__PURE__ */ jsx16(ThumbnailUI_default, {
-          ref: rootRef,
-          className: className2,
-          errorFallback,
-          inputProps: passedInputProps,
-          renderLoading,
-          style: style2,
-          overflowVisible,
-          overrideInternalClassName,
-          noSuspense: Boolean(noSuspense)
-        })
-      })
-    })
-  });
-};
-var forward2 = forwardRef4;
-var Thumbnail = forward2(ThumbnailFn);
-
-// ../execution/primitives/src/lib/preview.tsx
-var TransitionPanel = ({
-  label: label2,
-  color
-}) => /* @__PURE__ */ React2.createElement(
-  AbsoluteFill,
-  {
-    style: {
-      background: color,
-      color: "#fff",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontFamily: "inherit",
-      fontSize: 96,
-      fontWeight: 600
-    }
-  },
-  label2
-);
-var TransitionPreviewComposition = ({ presentation, durationInFrames }) => {
-  const half = Math.max(1, Math.floor(durationInFrames / 2));
-  return /* @__PURE__ */ React2.createElement(TransitionSeries, null, /* @__PURE__ */ React2.createElement(TransitionSeries.Sequence, { durationInFrames: half }, /* @__PURE__ */ React2.createElement(TransitionPanel, { label: "A", color: "#0ea5e9" })), /* @__PURE__ */ React2.createElement(
-    TransitionSeries.Transition,
-    {
-      timing: linearTiming({ durationInFrames: half }),
-      presentation
-    }
-  ), /* @__PURE__ */ React2.createElement(TransitionSeries.Sequence, { durationInFrames: half }, /* @__PURE__ */ React2.createElement(TransitionPanel, { label: "B", color: "#9333ea" })));
-};
-var PrimitivePreview = ({
-  primitive,
-  exampleName,
-  paramsOverride,
-  width,
-  height,
-  autoPlay,
-  controls = false,
-  className: className2,
-  style: style2
-}) => {
-  const example = React2.useMemo(() => {
-    const targetName = exampleName ?? primitive.preview.defaultExample;
-    if (targetName) {
-      const found = primitive.examples.find((e) => e.name === targetName);
-      if (found) return found;
-    }
-    return primitive.examples[0];
-  }, [primitive, exampleName]);
-  const inputProps = React2.useMemo(
-    () => ({ ...example?.params, ...paramsOverride }),
-    [example, paramsOverride]
-  );
-  const compWidth = width ?? primitive.preview.width ?? primitive.width;
-  const compHeight = height ?? primitive.preview.height ?? primitive.height;
-  const loop = primitive.preview.mode === "loop";
-  const shouldAutoPlay = autoPlay ?? loop;
-  if (!example) {
-    return /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        className: className2,
-        style: {
-          width: compWidth,
-          height: compHeight,
-          background: "#1a1a1a",
-          color: "#999",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontFamily: "monospace",
-          fontSize: 12,
-          ...style2
-        }
-      },
-      "no example for ",
-      primitive.id
-    );
-  }
-  if (primitive.kind === "transition" && primitive.createPresentation) {
-    const presentation = primitive.createPresentation(inputProps);
-    return /* @__PURE__ */ React2.createElement(
-      Player,
-      {
-        component: TransitionPreviewComposition,
-        inputProps: {
-          presentation,
-          durationInFrames: primitive.durationInFrames
-        },
-        durationInFrames: primitive.durationInFrames,
-        fps: primitive.fps,
-        compositionWidth: primitive.width,
-        compositionHeight: primitive.height,
-        style: { width: compWidth, height: compHeight, ...style2 },
-        className: className2,
-        autoPlay: shouldAutoPlay,
-        loop,
-        controls
-      }
-    );
-  }
-  return /* @__PURE__ */ React2.createElement(
-    Player,
-    {
-      component: primitive.component,
-      inputProps,
-      durationInFrames: primitive.durationInFrames,
-      fps: primitive.fps,
-      compositionWidth: primitive.width,
-      compositionHeight: primitive.height,
-      style: { width: compWidth, height: compHeight, ...style2 },
-      className: className2,
-      autoPlay: shouldAutoPlay,
-      loop,
-      controls
-    }
-  );
-};
-
-export {
-  PrimitivePreview
-};