@remotion/promo-pages 4.0.540 → 4.0.541

package/dist/Automate.js

@@ -1689,7 +1689,7 @@ var setComponentIdentityResolver = (resolver) => {
 var resolveComponentIdentity = (component) => {
   return componentIdentityResolver?.(component) ?? component;
 };
-var getSingleChildComponent = (children) => {
+var getSingleChildElement = (children) => {
   const mountedChildren = React4.Children.toArray(children);
   if (mountedChildren.length !== 1) {
     return null;
@@ -1699,12 +1699,19 @@ var getSingleChildComponent = (children) => {
     return null;
   }
   if (child.type === IsNotInsideSeriesProvider) {
-    return getSingleChildComponent(child.props.children);
+    return getSingleChildElement(child.props.children);
   }
   if (typeof child.type !== "function" && typeof child.type !== "object") {
     return null;
   }
-  return resolveComponentIdentity(child.type);
+  return child;
+};
+var getSingleChildComponent = (children) => {
+  const child = getSingleChildElement(children);
+  return child === null ? null : resolveComponentIdentity(child.type);
+};
+var getSingleChildProps = (children) => {
+  return getSingleChildElement(children)?.props ?? null;
 };
 var CompositionRegistryFallbackContext = createContext5(null);
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect3 : useLayoutEffect;
@@ -3112,9 +3119,11 @@ var makeOriginalSourceStack = ({
   fileName,
   lineNumber,
   columnNumber
-}) => {
-  return `Error
+}, compiledSourceHash = null) => {
+  const location = `Error
     at remotionOriginalSource (${ORIGINAL_SOURCE_STACK_PREFIX}${encodeURIComponent(fileName)}:${lineNumber}:${columnNumber})`;
+  return compiledSourceHash === null ? location : `${location}
+    at remotionCompiledSource (remotion-source-sha256:${compiledSourceHash})`;
 };
 var parseOriginalSourceStack = (stack) => {
   if (!stack) {
@@ -3144,7 +3153,7 @@ var setStackForControls = (controls, stack) => {
 var getStackForControls = (controls) => {
   return stacksByControls.get(controls) ?? null;
 };
-var VERSION = "4.0.540";
+var VERSION = "4.0.541";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6900,7 +6909,7 @@ function hslToRgb2(h, s, l) {
   return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
 }
 function parse255(str) {
-  const int = Number.parseInt(str, 10);
+  const int = Math.round(Number.parseFloat(str));
   if (int < 0) {
     return 0;
   }
@@ -8652,6 +8661,7 @@ var setSequenceWrapperRef = (ref, wrapperRef, node) => {
     ref.current = node;
   }
 };
+var getSingleChildPropsFromRef = (childrenRef) => getSingleChildProps(childrenRef.current);
 var RegularSequenceContentRefForwardingFunction = ({
   timing,
   from = 0,
@@ -8672,6 +8682,7 @@ var RegularSequenceContentRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalSingleChildComponent: childComponentOverride,
+  _remotionInternalSingleChildren: authoredChildrenOverride,
   _remotionInternalDocumentationLink: documentationLink,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
@@ -8722,6 +8733,7 @@ var RegularSequenceContentRefForwardingFunction = ({
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   } = timing;
   if (typeof contentDurationInFrames !== "number") {
@@ -8846,7 +8858,13 @@ var RegularSequenceContentRefForwardingFunction = ({
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const isInsideSeries = useContext28(IsInsideSeriesContext);
-  const singleChildComponent = useMemo22(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
+  const authoredChildren = authoredChildrenOverride === undefined ? children : authoredChildrenOverride;
+  const singleChildComponent = useMemo22(() => childComponentOverride === undefined ? getSingleChildComponent(authoredChildren) : childComponentOverride, [authoredChildren, childComponentOverride]);
+  const childrenRef = useRef8(authoredChildren);
+  useLayoutEffect9(() => {
+    childrenRef.current = authoredChildren;
+  }, [authoredChildren]);
+  const getRegisteredSingleChildProps = useMemo22(() => childComponentOverride === undefined ? getSingleChildPropsFromRef.bind(null, childrenRef) : null, [childComponentOverride]);
   const registrationStack = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const getStack = useMemo22(() => getSequenceStack.bind(null, registrationStack), [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -8855,7 +8873,8 @@ var RegularSequenceContentRefForwardingFunction = ({
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
-  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (resolvedLoopDisplay ? registeredFrozenFrame % resolvedLoopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
+  const mediaFreezeFrame = registeredFrozenFrame ?? (contentVisible && !parentDormant && !premounting && !postmounting ? inheritedFrozenFrame : null);
+  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null && mediaFreezeFrame !== null ? mediaFrameAtSequenceZero + (resolvedLoopDisplay ? mediaFreezeFrame % resolvedLoopDisplay.durationInFrames : mediaFreezeFrame) * isMedia.data.playbackRate : null;
   const controlsSchema = controls?.schema;
   const controlsRuntimeValues = controls?.runtimeValues;
   const controlsOverrideId = controls?.overrideId;
@@ -8863,8 +8882,7 @@ var RegularSequenceContentRefForwardingFunction = ({
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
   const controlsVideoConfigValues = controls?.videoConfigValues;
-  const isInsideNonPremountFreeze = useIsInsideNonPremountFreeze();
-  const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && !isInsideNonPremountFreeze && !hidden;
+  const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && inheritedFrozenFrame === null && !hidden;
   const autoDuration = canInferDuration && durationInFrames === undefined;
   const isSeriesChild = controlsComponentIdentity === "dev.remotion.remotion.Series.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Transition" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Overlay";
   const effectRuntimeValues = useMemo22(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
@@ -8926,7 +8944,8 @@ var RegularSequenceContentRefForwardingFunction = ({
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          singleChildComponent: singleChildComponent ?? null
+          singleChildComponent: singleChildComponent ?? null,
+          getSingleChildProps: getRegisteredSingleChildProps
         };
       }
       return {
@@ -8959,7 +8978,8 @@ var RegularSequenceContentRefForwardingFunction = ({
         isInsideSeries,
         frozenFrame: registeredFrozenFrame,
         frozenMediaFrame,
-        singleChildComponent: singleChildComponent ?? null
+        singleChildComponent: singleChildComponent ?? null,
+        getSingleChildProps: getRegisteredSingleChildProps
       };
     }
     return {
@@ -8989,7 +9009,8 @@ var RegularSequenceContentRefForwardingFunction = ({
       refForOutline: refForOutline ?? null,
       isInsideSeries,
       frozenFrame: registeredFrozenFrame,
-      singleChildComponent: singleChildComponent ?? null
+      singleChildComponent: singleChildComponent ?? null,
+      getSingleChildProps: getRegisteredSingleChildProps
     };
   }, [
     id,
@@ -9023,7 +9044,8 @@ var RegularSequenceContentRefForwardingFunction = ({
     startMediaFrom,
     mediaFrameAtSequenceZero,
     frozenMediaFrame,
-    singleChildComponent
+    singleChildComponent,
+    getRegisteredSingleChildProps
   ]);
   const getSequenceForRegistration = useMemo22(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
   const registration = useSequenceRegistration({
@@ -9187,6 +9209,7 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
   const loopOffset = loopPeriod === null ? 0 : loopIteration * loopPeriod;
   const currentSequenceStart = cumulatedFrom + (from + loopOffset - trimBefore / playbackRate) / parentPlaybackRate;
   const currentFrame = typeof freeze === "number" ? freeze : (absoluteFrame - currentSequenceStart) * (parentPlaybackRate * playbackRate);
+  const inheritedFrozenFrame = useIsInsideNonPremountFreeze() ? currentFrame : null;
   const currentFrameRef = useRef8(currentFrame);
   const timing = useMemo22(() => ({
     contentDurationInFrames,
@@ -9195,6 +9218,7 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     loopPeriod,
     loopIteration,
     contentVisible,
+    inheritedFrozenFrame,
     currentFrameRef
   }), [
     contentDurationInFrames,
@@ -9202,7 +9226,8 @@ var RegularSequenceRefForwardingFunction = (props, ref) => {
     actualDurationInFrames,
     loopPeriod,
     loopIteration,
-    contentVisible
+    contentVisible,
+    inheritedFrozenFrame
   ]);
   return /* @__PURE__ */ jsxs22(React27.Fragment, {
     children: [
@@ -9482,6 +9507,16 @@ var AbsoluteFill = withInteractivitySchema({
   supportsEffects: false
 });
 addSequenceStackTraces(AbsoluteFill);
+var getCanvasPropsFromSequenceProps = (props) => {
+  const canvasProps = {};
+  const mutableCanvasProps = canvasProps;
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
+      mutableCanvasProps[key] = props[key];
+    }
+  }
+  return canvasProps;
+};
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -10769,16 +10804,6 @@ var animatedImageSchema = {
   ...borderSchema,
   ...borderRadiusSchema
 };
-var getCanvasPropsFromSequenceProps = (props) => {
-  const canvasProps = {};
-  const mutableCanvasProps = canvasProps;
-  for (const key in props) {
-    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
-      mutableCanvasProps[key] = props[key];
-    }
-  }
-  return canvasProps;
-};
 var AnimatedImageContent = forwardRef4(({
   src,
   width,
@@ -11264,6 +11289,16 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   });
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
+var encodeBinaryArtifact = (bytes) => {
+  if ("toBase64" in bytes && typeof bytes.toBase64 === "function") {
+    return bytes.toBase64();
+  }
+  let binary = "";
+  for (let offset = 0;offset < bytes.length; offset += 32768) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + 32768));
+  }
+  return btoa(binary);
+};
 var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const env = useRemotionEnvironment();
@@ -11279,7 +11314,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
       registerRenderAsset({
         type: "artifact",
         id,
-        content: btoa(new TextDecoder("utf8").decode(content)),
+        content: encodeBinaryArtifact(content),
         filename,
         frame,
         contentType: "binary",
@@ -13251,9 +13286,7 @@ var getMediaSyncAction = (input) => {
     ended,
     desiredUnclampedTime,
     mediaTagTime,
-    mediaTagLastUpdate,
     rvcTime,
-    rvcLastUpdate,
     isVariableFpsVideo,
     acceptableTimeShift,
     lastSeekDueToShift,
@@ -13265,13 +13298,11 @@ var getMediaSyncAction = (input) => {
     onlyWarnForMediaSeekingError,
     isPremounting,
     isPostmounting,
-    pauseWhenBuffering
+    pauseWhenBuffering,
+    mediaType
   } = input;
   const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
-  const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-  const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-  const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
-  const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
+  const timeShift = Math.abs(shouldBeTime - mediaTagTime);
   if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
     return {
       type: "seek-due-to-shift",
@@ -13284,18 +13315,23 @@ var getMediaSyncAction = (input) => {
   }
   const seekThreshold = playing ? 0.15 : 0.01;
   const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
+  const audioLead = currentTime - shouldBeTime;
+  const holdAudioUntilTimelineCatchesUp = mediaType === "audio" && playing && playbackRate > 0 && makesSenseToSeek && audioLead > 0 && audioLead <= acceptableTimeShift;
   const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
   if (!playing || isSomethingElseBuffering) {
     return {
       type: "seek-if-not-playing",
       shouldBeTime,
-      why: makesSenseToSeek ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
+      why: makesSenseToSeek && !holdAudioUntilTimelineCatchesUp ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
     };
   }
   if (!playing || playerBuffering) {
     return { type: "none" };
   }
   const pausedCondition = paused && !ended;
+  if (pausedCondition && holdAudioUntilTimelineCatchesUp) {
+    return { type: "none" };
+  }
   const firstFrameCondition = absoluteFrame === 0;
   if (pausedCondition || firstFrameCondition) {
     const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
@@ -13309,19 +13345,15 @@ var getMediaSyncAction = (input) => {
   }
   return { type: "none" };
 };
-var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React35.useRef({
-    time: mediaRef.current?.currentTime ?? 0,
-    lastUpdate: performance.now()
+var useCurrentTimeOfMediaTag = (mediaRef) => {
+  const currentTime = React35.useRef({
+    time: mediaRef.current?.currentTime ?? 0
   });
   const nowCurrentTime = mediaRef.current?.currentTime ?? null;
   if (nowCurrentTime !== null) {
-    if (lastUpdate.current.time !== nowCurrentTime) {
-      lastUpdate.current.time = nowCurrentTime;
-      lastUpdate.current.lastUpdate = performance.now();
-    }
+    currentTime.current.time = nowCurrentTime;
   }
-  return lastUpdate;
+  return currentTime;
 };
 var seek = ({
   mediaRef,
@@ -13488,8 +13520,7 @@ var useRequestVideoCallbackTime = ({
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
-        time: current.currentTime,
-        lastUpdate: performance.now()
+        time: current.currentTime
       };
     } else {
       currentTime.current = null;
@@ -13519,8 +13550,7 @@ var useRequestVideoCallbackTime = ({
           }
         }
         currentTime.current = {
-          time: info.mediaTime,
-          lastUpdate: performance.now()
+          time: info.mediaTime
         };
         request();
       });
@@ -13651,7 +13681,7 @@ var useMediaPlayback = ({
     lastSeek,
     onVariableFpsVideoDetected
   });
-  const mediaTagCurrentTime = useCurrentTimeOfMediaTagWithUpdateTimeStamp(mediaRef);
+  const mediaTagCurrentTime = useCurrentTimeOfMediaTag(mediaRef);
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
@@ -13732,9 +13762,7 @@ var useMediaPlayback = ({
       ended: current.ended,
       desiredUnclampedTime,
       mediaTagTime: mediaTagCurrentTime.current.time,
-      mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
       rvcTime: rvcCurrentTime.current?.time ?? null,
-      rvcLastUpdate: rvcCurrentTime.current?.lastUpdate ?? null,
       isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
       acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
       lastSeekDueToShift: lastSeekDueToShift.current,
@@ -13746,7 +13774,8 @@ var useMediaPlayback = ({
       onlyWarnForMediaSeekingError,
       isPremounting,
       isPostmounting,
-      pauseWhenBuffering
+      pauseWhenBuffering,
+      mediaType
     });
     if (action.type === "none") {
       return;
@@ -14591,7 +14620,8 @@ var SolidInner = ({
   pixelDensity,
   overrideId,
   videoConfigValues,
-  reference
+  reference,
+  canvasProps
 }) => {
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
@@ -14679,6 +14709,7 @@ var SolidInner = ({
     };
   }, [height, style, width]);
   return /* @__PURE__ */ jsx31("canvas", {
+    ...canvasProps,
     ref: canvasRef,
     width: canvasWidth,
     height: canvasHeight,
@@ -14775,6 +14806,7 @@ var SolidOuter = forwardRef8(({
       _remotionInternalIsPostmounting: postmountingActive,
       children: /* @__PURE__ */ jsx31(SequenceContent, {
         children: /* @__PURE__ */ jsx31(SolidInner, {
+          canvasProps: getCanvasPropsFromSequenceProps(props),
           reference: actualRef,
           videoConfigValues: controls?.videoConfigValues ?? null,
           overrideId: controls?.overrideId ?? null,
@@ -17185,7 +17217,7 @@ var createElementSourceProxy = (api, sourceArgumentIndex, getSourceFileName) =>
               fileName: getSourceFileName(source.fileName),
               lineNumber: source.lineNumber,
               columnNumber: source.columnNumber - 1
-            });
+            }, typeof source.__remotionCompiledSourceHash === "string" ? source.__remotionCompiledSourceHash : null);
           } else {
             const { stackTraceLimit } = Error;
             const canLimitStack = typeof stackTraceLimit === "number" && stackTraceLimit > 2 && Object.getOwnPropertyDescriptor(Error, "stackTraceLimit")?.writable;
@@ -19704,14 +19736,29 @@ import React9 from "react";
 import { useEffect as useEffect25, useState as useState30 } from "react";
 import { useContext as useContext55, useLayoutEffect as useLayoutEffect25 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
-import React32 from "react";
-import { useEffect as useEffect26, useState as useState210 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect72, useMemo as useMemo92, useRef as useRef52, useState as useState92 } from "react";
+import { jsx as jsx410 } from "react/jsx-runtime";
+import { useCallback as useCallback27, useMemo as useMemo210, useRef as useRef34, useState as useState43 } from "react";
+import React32, { useCallback as useCallback28, useMemo as useMemo54, useState as useState210 } from "react";
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useState as useState33 } from "react";
+import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useCallback as useCallback32, useEffect as useEffect42, useMemo as useMemo310, useState as useState62 } from "react";
+import { useEffect as useEffect33, useRef as useRef210, useState as useState52 } from "react";
+import { jsx as jsx73, jsxs as jsxs52 } from "react/jsx-runtime";
+import { useCallback as useCallback62, useEffect as useEffect62, useMemo as useMemo62, useRef as useRef43, useState as useState82 } from "react";
+import { useCallback as useCallback42, useContext as useContext210, useMemo as useMemo410, useRef as useRef35 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect53, useMemo as useMemo55, useState as useState72 } from "react";
+import { jsx as jsx82, jsxs as jsxs62 } from "react/jsx-runtime";
+import { useMemo as useMemo72 } from "react";
+import { jsxs as jsxs72 } from "react/jsx-runtime";
+import { useMemo as useMemo82 } from "react";
+import { jsx as jsx92, jsxs as jsxs8, Fragment as Fragment22 } from "react/jsx-runtime";
+import React82 from "react";
 import { useLayoutEffect as useLayoutEffect26 } from "react";
-import { useContext as useContext310, useEffect as useEffect53, useRef as useRef43 } from "react";
-import { useEffect as useEffect33, useRef as useRef210 } from "react";
-import { useCallback as useCallback27, useContext as useContext210, useMemo as useMemo54, useRef as useRef34 } from "react";
-import { useEffect as useEffect42, useRef as useRef35 } from "react";
-import { useCallback as useCallback28, useEffect as useEffect62, useMemo as useMemo210, useState as useState33 } from "react";
+import { useContext as useContext310, useEffect as useEffect102, useRef as useRef82 } from "react";
+import { useEffect as useEffect82, useRef as useRef62 } from "react";
+import { useEffect as useEffect92, useRef as useRef72 } from "react";
 import React132, {
   forwardRef as forwardRef23,
   useCallback as useCallback122,
@@ -21686,7 +21733,7 @@ function hslToRgb3(h, s, l) {
   return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
 }
 function parse2552(str) {
-  const int = Number.parseInt(str, 10);
+  const int = Math.round(Number.parseFloat(str));
   if (int < 0) {
     return 0;
   }
@@ -22301,25 +22348,10 @@ import React112, {
   useRef as useRef102,
   useState as useState102
 } from "react";
-import React42 from "react";
-import { jsx as jsx410 } from "react/jsx-runtime";
-import React53, { useEffect as useEffect72 } from "react";
-import { jsx as jsx53 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState92 } from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
-import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52, useState as useState52 } from "react";
-import React62, { useCallback as useCallback32, useMemo as useMemo310, useState as useState43 } from "react";
-import { jsx as jsx73, jsxs as jsxs33 } from "react/jsx-runtime";
-import { jsx as jsx82, jsxs as jsxs42 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState72 } from "react";
-import { useEffect as useEffect82, useRef as useRef62, useState as useState62 } from "react";
-import { jsx as jsx92, jsxs as jsxs52 } from "react/jsx-runtime";
-import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState82 } from "react";
-import { jsx as jsx102, jsxs as jsxs62 } from "react/jsx-runtime";
-import { useMemo as useMemo72 } from "react";
-import { jsxs as jsxs72 } from "react/jsx-runtime";
-import { useMemo as useMemo82 } from "react";
-import { jsx as jsx112, jsxs as jsxs8, Fragment as Fragment22 } from "react/jsx-runtime";
+import React92 from "react";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import React102, { useEffect as useEffect112 } from "react";
+import { jsx as jsx112 } from "react/jsx-runtime";
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
 import { jsx as jsx122, jsxs as jsxs9, Fragment as Fragment3 } from "react/jsx-runtime";
@@ -22819,9 +22851,122 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
     children
   });
 };
-var TimelineSequenceObserverContext = React32.createContext(null);
+var DefaultPlayPauseButton = ({ playing, buffering }) => {
+  if (playing && buffering) {
+    return /* @__PURE__ */ jsx410(BufferingIndicator, {
+      type: "player"
+    });
+  }
+  if (playing) {
+    return /* @__PURE__ */ jsx410(PauseIcon, {});
+  }
+  return /* @__PURE__ */ jsx410(PlayIcon, {});
+};
+var KNOB_SIZE = 12;
+var BAR_HEIGHT = 5;
+var DefaultVolumeSlider = ({
+  volume,
+  isVertical,
+  onBlur,
+  inputRef,
+  setVolume
+}) => {
+  const sliderContainer = useMemo54(() => {
+    const paddingLeft = 5;
+    const common = {
+      paddingLeft,
+      height: ICON_SIZE2,
+      width: VOLUME_SLIDER_WIDTH,
+      display: "inline-flex",
+      alignItems: "center"
+    };
+    if (isVertical) {
+      return {
+        ...common,
+        position: "absolute",
+        transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE2 / 2}px)`
+      };
+    }
+    return {
+      ...common
+    };
+  }, [isVertical]);
+  const randomId = typeof React32.useId === "undefined" ? "volume-slider" : React32.useId();
+  const [randomClass] = useState210(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
+  const onVolumeChange = useCallback28((e) => {
+    setVolume(parseFloat(e.target.value));
+  }, [setVolume]);
+  const inputStyle = useMemo54(() => {
+    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_SIZE2 + 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__ */ jsxs33("div", {
+    style: sliderContainer,
+    children: [
+      /* @__PURE__ */ jsx53("style", {
+        dangerouslySetInnerHTML: {
+          __html: sliderStyle
+        }
+      }),
+      /* @__PURE__ */ jsx53("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__ */ jsx53(DefaultVolumeSlider, {
+    ...props
+  });
+};
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState210(false);
+  const [hovered, setHovered] = useState33(false);
   useEffect26(() => {
     const { current } = ref;
     if (!current) {
@@ -22860,6 +23005,322 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   }, [hideControlsWhenPointerDoesntMove, ref]);
   return hovered;
 };
+var VOLUME_SLIDER_WIDTH = 100;
+var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
+  const [playerMuted, setPlayerMuted] = Internals.usePlayerMutedState();
+  const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
+  const [focused, setFocused] = useState43(false);
+  const parentDivRef = useRef34(null);
+  const inputRef = useRef34(null);
+  const hover = useHoverState(parentDivRef, false);
+  const onBlur = useCallback27(() => {
+    setTimeout(() => {
+      if (inputRef.current && document.activeElement !== inputRef.current) {
+        setFocused(false);
+      }
+    }, 10);
+  }, []);
+  const isVolume0 = mediaVolume === 0;
+  const onClick = useCallback27(() => {
+    if (isVolume0) {
+      setMediaVolume(1);
+      setPlayerMuted(false);
+      return;
+    }
+    setPlayerMuted((mute) => !mute);
+  }, [isVolume0, setPlayerMuted, setMediaVolume]);
+  const parentDivStyle = useMemo210(() => {
+    return {
+      display: "inline-flex",
+      background: "none",
+      border: "none",
+      justifyContent: "center",
+      alignItems: "center",
+      touchAction: "none",
+      ...displayVerticalVolumeSlider && { position: "relative" }
+    };
+  }, [displayVerticalVolumeSlider]);
+  const volumeContainer = useMemo210(() => {
+    return {
+      display: "inline",
+      width: ICON_SIZE2,
+      height: ICON_SIZE2,
+      cursor: "pointer",
+      appearance: "none",
+      background: "none",
+      border: "none",
+      padding: 0
+    };
+  }, []);
+  const renderDefaultMuteButton = useCallback27(({ muted, volume }) => {
+    const isMutedOrZero = muted || volume === 0;
+    return /* @__PURE__ */ jsx63("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__ */ jsx63(VolumeOffIcon, {}) : /* @__PURE__ */ jsx63(VolumeOnIcon, {})
+    });
+  }, [onBlur, onClick, volumeContainer]);
+  const muteButton = useMemo210(() => {
+    return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
+  }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
+  const volumeSlider = useMemo210(() => {
+    return (focused || hover) && !playerMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
+      isVertical: displayVerticalVolumeSlider,
+      volume: mediaVolume,
+      onBlur: () => setFocused(false),
+      inputRef,
+      setVolume: setMediaVolume
+    }) : null;
+  }, [
+    displayVerticalVolumeSlider,
+    focused,
+    hover,
+    playerMuted,
+    mediaVolume,
+    renderVolumeSlider,
+    setMediaVolume
+  ]);
+  return /* @__PURE__ */ jsxs42("div", {
+    ref: parentDivRef,
+    style: parentDivStyle,
+    children: [
+      muteButton,
+      volumeSlider
+    ]
+  });
+};
+function useComponentVisible(initialIsVisible) {
+  const [isComponentVisible, setIsComponentVisible] = useState52(initialIsVisible);
+  const ref = useRef210(null);
+  useEffect33(() => {
+    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__ */ jsx73("svg", {
+  viewBox: "0 0 512 512",
+  style: checkmarkStyle,
+  children: /* @__PURE__ */ jsx73("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 = useCallback32((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onSelect(rate);
+  }, [onSelect, rate]);
+  const [hovered, setHovered] = useState62(false);
+  const onMouseEnter = useCallback32(() => {
+    setHovered(true);
+  }, []);
+  const onMouseLeave = useCallback32(() => {
+    setHovered(false);
+  }, []);
+  const isFocused = keyboardSelectedRate === rate;
+  const actualStyle = useMemo310(() => {
+    return {
+      ...rateDiv,
+      backgroundColor: hovered || isFocused ? "#eee" : "transparent"
+    };
+  }, [hovered, isFocused]);
+  return /* @__PURE__ */ jsxs52("div", {
+    onPointerEnter: onMouseEnter,
+    onPointerLeave: onMouseLeave,
+    tabIndex: 0,
+    style: actualStyle,
+    onClick,
+    children: [
+      /* @__PURE__ */ jsx73("div", {
+        style: checkmarkContainer,
+        children: rate === selectedRate ? /* @__PURE__ */ jsx73(Checkmark, {}) : null
+      }),
+      formatPlaybackRate(rate),
+      "x"
+    ]
+  }, rate);
+};
+var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
+  const { setPlaybackRate, playbackRate } = Internals.usePlaybackRate();
+  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState62(playbackRate);
+  useEffect42(() => {
+    const listener = (e) => {
+      if (e.ctrlKey || e.metaKey || e.altKey) {
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        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") {
+        e.preventDefault();
+        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") {
+        e.preventDefault();
+        setPlaybackRate(keyboardSelectedRate);
+        setIsComponentVisible(false);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsComponentVisible(false);
+      } else if (e.key === "Tab") {
+        setIsComponentVisible(false);
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [
+    playbackRates,
+    keyboardSelectedRate,
+    setPlaybackRate,
+    setIsComponentVisible
+  ]);
+  const onSelect = useCallback32((rate) => {
+    setPlaybackRate(rate);
+    setIsComponentVisible(false);
+  }, [setIsComponentVisible, setPlaybackRate]);
+  const playbackPopup = useMemo310(() => {
+    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__ */ jsx73("div", {
+    style: playbackPopup,
+    children: playbackRates.map((rate) => {
+      return /* @__PURE__ */ jsx73(PlaybackrateOption, {
+        selectedRate: playbackRate,
+        onSelect,
+        rate,
+        keyboardSelectedRate
+      }, rate);
+    })
+  });
+};
+var label2 = {
+  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 } = Internals.usePlaybackRate();
+  const onClick = useCallback32((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
+  }, [setIsComponentVisible]);
+  return /* @__PURE__ */ jsx73("div", {
+    ref,
+    children: /* @__PURE__ */ jsxs52("button", {
+      type: "button",
+      "aria-label": "Change playback rate",
+      style: button,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs52("div", {
+          style: label2,
+          children: [
+            playbackRate,
+            "x"
+          ]
+        }),
+        isComponentVisible && /* @__PURE__ */ jsx73(PlaybackPopup, {
+          canvasSize,
+          playbackRates,
+          setIsComponentVisible
+        })
+      ]
+    })
+  });
+};
 var usePlayerMethods = () => {
   const seekFrame = Internals.Timeline.useTimelineSeekFrame();
   const {
@@ -22879,20 +23340,20 @@ var usePlayerMethods = () => {
   const videoDurationInFrames = video?.durationInFrames ?? null;
   const config = Internals.useUnsafeVideoConfig();
   const emitter = useContext210(PlayerEventEmitterContext);
-  const playStart = useRef34(0);
-  const fallbackFrame = useRef34(null);
-  const nextPlayIsAutoPlayAttempt = useRef34(false);
+  const playStart = useRef35(0);
+  const fallbackFrame = useRef35(null);
+  const nextPlayIsAutoPlayAttempt = useRef35(false);
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const getCurrentFrame = useCallback27(() => {
+  const getCurrentFrame = useCallback42(() => {
     if (videoId === null || videoDurationInFrames === null) {
       return fallbackFrame.current ?? (typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0);
     }
     const unclamped = frameRef.current[videoId] ?? (environment.isPlayer ? 0 : Internals.Timeline.getFrameForComposition(videoId));
     return Internals.Timeline.clampFrameToCompositionRange(unclamped, videoDurationInFrames);
   }, [environment.isPlayer, frameRef, videoId, videoDurationInFrames]);
-  const seek = useCallback27((newFrame) => {
+  const seek = useCallback42((newFrame) => {
     const frameToSeekTo = config ? Internals.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
     fallbackFrame.current = frameToSeekTo;
     if (video?.id) {
@@ -22906,7 +23367,7 @@ var usePlayerMethods = () => {
     }
     emitter.dispatchSeek(frameToSeekTo);
   }, [config, emitter, frameRef, seekFrame, video?.id]);
-  const play = useCallback27((e) => {
+  const play = useCallback42((e) => {
     const isAutoPlayAttempt = nextPlayIsAutoPlayAttempt.current;
     nextPlayIsAutoPlayAttempt.current = false;
     if (readIsPlaying()) {
@@ -22942,18 +23403,18 @@ var usePlayerMethods = () => {
     seek,
     setPlaying
   ]);
-  const playAsAutoPlay = useCallback27(() => {
+  const playAsAutoPlay = useCallback42(() => {
     nextPlayIsAutoPlayAttempt.current = true;
     play();
   }, [play]);
-  const pause = useCallback27(() => {
+  const pause = useCallback42(() => {
     if (readIsPlaying()) {
       setPlaying(false);
       emitter.dispatchPause();
       audioContext?.suspend();
     }
   }, [audioContext, emitter, readIsPlaying, setPlaying]);
-  const pauseAndReturnToPlayStart = useCallback27(() => {
+  const pauseAndReturnToPlayStart = useCallback42(() => {
     if (readIsPlaying()) {
       setPlaying(false);
       fallbackFrame.current = playStart.current;
@@ -22971,7 +23432,7 @@ var usePlayerMethods = () => {
     }
   }, [config, emitter, frameRef, readIsPlaying, setPlaying, seekFrame]);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
-  const frameBack = useCallback27((frames) => {
+  const frameBack = useCallback42((frames) => {
     if (!videoId) {
       return null;
     }
@@ -22989,7 +23450,7 @@ var usePlayerMethods = () => {
       [videoId]: newFrame
     };
   }, [frameRef, readIsPlaying, seekFrame, videoId]);
-  const frameForward = useCallback27((frames) => {
+  const frameForward = useCallback42((frames) => {
     if (!videoId) {
       return null;
     }
@@ -23007,14 +23468,14 @@ var usePlayerMethods = () => {
       [videoId]: newFrame
     };
   }, [frameRef, lastFrame, readIsPlaying, seekFrame, videoId]);
-  const toggle = useCallback27((e) => {
+  const toggle = useCallback42((e) => {
     if (readIsPlaying()) {
       pause();
     } else {
       play(e);
     }
   }, [pause, play, readIsPlaying]);
-  return useMemo54(() => {
+  return useMemo410(() => {
     return {
       frameBack,
       frameForward,
@@ -23044,491 +23505,6 @@ var usePlayerMethods = () => {
     toggle
   ]);
 };
-var useBrowserMediaSession = ({
-  browserMediaControlsBehavior,
-  videoConfig,
-  playbackRate
-}) => {
-  const playing = Internals.usePlaying();
-  const { pause, play, emitter, getCurrentFrame, seek } = usePlayerMethods();
-  const hasEverPlayed = useRef210(false);
-  useEffect33(() => {
-    if (playing) {
-      hasEverPlayed.current = true;
-    }
-    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]);
-  useEffect33(() => {
-    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
-  ]);
-  useEffect33(() => {
-    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 !== undefined && 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.min(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 / (1000 / 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 = useRef35(getIsBackgrounded());
-  useEffect42(() => {
-    const onVisibilityChange = () => {
-      isBackgrounded.current = getIsBackgrounded();
-    };
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, []);
-  return isBackgrounded;
-};
-var setGlobalTimeAnchor = ({
-  audioContext,
-  audioSyncAnchor,
-  absoluteTimeInSeconds,
-  globalPlaybackRate,
-  logLevel,
-  force
-}) => {
-  const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
-  const shift = newAnchor - audioSyncAnchor.value;
-  const tolerance = Internals.getAudioSyncAnchorTolerance(audioContext);
-  if (Math.abs(shift) < tolerance && !force) {
-    return false;
-  }
-  if (Math.abs(shift) < Number.EPSILON) {
-    return false;
-  }
-  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
-  audioSyncAnchor.value = newAnchor;
-  return true;
-};
-var shouldForceAnchorChange = (newState) => {
-  if (newState === "suspended" || newState === "running-to-suspended") {
-    return true;
-  }
-  if (newState === "closed" || newState === "interrupted" || newState === "running" || newState === "suspended-to-running") {
-    return false;
-  }
-  throw new Error(`Unexpected audio context state: ${newState}`);
-};
-var usePlayback = ({
-  loop,
-  playbackRate,
-  moveToBeginningWhenEnded,
-  inFrame,
-  outFrame,
-  browserMediaControlsBehavior,
-  getCurrentFrame,
-  muted
-}) => {
-  const config = Internals.useUnsafeVideoConfig();
-  const fps = config?.fps ?? null;
-  const durationInFrames = config?.durationInFrames ?? null;
-  const compositionId = config?.id ?? null;
-  const frame = Internals.Timeline.useTimelinePosition();
-  const playing = Internals.usePlaying();
-  const { pause, emitter, isPlaying } = usePlayerMethods();
-  const setFrameFromPlayback = Internals.Timeline.useTimelineSetFrameWithoutSeek();
-  const sharedAudioContext = useContext310(Internals.SharedAudioContext);
-  const { setPlayerMuted } = useContext310(Internals.SetMediaVolumeContext);
-  const { isBuffering, subscribeBuffering, seek } = useContext310(Internals.SetTimelineContext);
-  const logLevel = Internals.useLogLevel();
-  const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef43(0);
-  const playbackClockRef = useRef43(null);
-  const previousMutedRef = useRef43(muted);
-  const anchoredAudioContextRef = useRef43(null);
-  useBrowserMediaSession({
-    browserMediaControlsBehavior,
-    playbackRate,
-    videoConfig: config
-  });
-  useLayoutEffect26(() => {
-    if (!sharedAudioContext) {
-      return;
-    }
-    if (!sharedAudioContext.audioContext) {
-      return;
-    }
-    if (fps === null) {
-      return;
-    }
-    if (muted) {
-      return;
-    }
-    const changed = setGlobalTimeAnchor({
-      audioContext: sharedAudioContext.audioContext,
-      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-      absoluteTimeInSeconds: frame / fps,
-      globalPlaybackRate: playbackRate,
-      logLevel,
-      force: false
-    });
-    if (changed) {
-      sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
-    }
-  }, [fps, frame, logLevel, playbackRate, sharedAudioContext, muted]);
-  useLayoutEffect26(() => {
-    const audioContext = sharedAudioContext?.audioContext;
-    if (!audioContext) {
-      return;
-    }
-    if (fps === null) {
-      return;
-    }
-    if (muted) {
-      return;
-    }
-    const callback = () => {
-      const newState = sharedAudioContext?.getAudioContextState();
-      if (newState && shouldForceAnchorChange(newState)) {
-        const changed = setGlobalTimeAnchor({
-          audioContext,
-          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-          absoluteTimeInSeconds: getCurrentFrame() / fps,
-          globalPlaybackRate: playbackRate,
-          logLevel,
-          force: true
-        });
-        if (changed) {
-          sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
-        }
-      }
-    };
-    audioContext?.addEventListener("statechange", callback);
-    return () => {
-      audioContext?.removeEventListener("statechange", callback);
-    };
-  }, [fps, getCurrentFrame, logLevel, muted, playbackRate, sharedAudioContext]);
-  useEffect53(() => {
-    const wasMuted = previousMutedRef.current;
-    previousMutedRef.current = muted;
-    if (fps === null || durationInFrames === null || compositionId === null) {
-      playbackClockRef.current = null;
-      return;
-    }
-    if (!playing) {
-      playbackClockRef.current = null;
-      sharedAudioContext?.suspend?.();
-      return;
-    }
-    if (muted) {
-      sharedAudioContext?.suspend?.();
-    }
-    const previousClock = playbackClockRef.current;
-    const shouldRestartClock = previousClock === null || previousClock.compositionId !== compositionId || previousClock.fps !== fps || previousClock.playbackRate !== playbackRate;
-    const clock = shouldRestartClock ? {
-      compositionId,
-      startedTime: performance.now(),
-      framesAdvanced: 0,
-      fps,
-      playbackRate
-    } : previousClock;
-    playbackClockRef.current = clock;
-    if (sharedAudioContext?._experimentalKeepAudioContextAlive && sharedAudioContext.audioContext && !muted) {
-      const didUnmute = wasMuted && !muted;
-      const didReplaceAudioContext = anchoredAudioContextRef.current !== sharedAudioContext.audioContext;
-      const shouldRescheduleAudio = shouldRestartClock || didUnmute || didReplaceAudioContext;
-      const changed = setGlobalTimeAnchor({
-        audioContext: sharedAudioContext.audioContext,
-        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-        absoluteTimeInSeconds: getCurrentFrame() / fps,
-        globalPlaybackRate: playbackRate,
-        logLevel,
-        force: shouldRescheduleAudio
-      });
-      anchoredAudioContextRef.current = sharedAudioContext.audioContext;
-      if (changed || shouldRescheduleAudio) {
-        sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
-      }
-    }
-    let hasBeenStopped = false;
-    let audioContextFailed = false;
-    let reqAnimFrameCall = null;
-    let playbackFrame = getCurrentFrame();
-    let lastSeekRevision = seek?.revision.current ?? null;
-    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()) {
-        sharedAudioContext?.suspend?.();
-        return;
-      }
-      if (!muted && !audioContextFailed && !isBuffering()) {
-        sharedAudioContext?.resume?.();
-      }
-      const time = performance.now() - clock.startedTime;
-      const actualLastFrame = outFrame ?? durationInFrames - 1;
-      const actualFirstFrame = inFrame ?? 0;
-      const seekRevision = seek?.revision.current ?? null;
-      if (seekRevision !== lastSeekRevision) {
-        playbackFrame = getCurrentFrame();
-        lastSeekRevision = seekRevision;
-      }
-      const currentFrame = playbackFrame;
-      const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
-        time,
-        currentFrame,
-        playbackSpeed: playbackRate,
-        fps,
-        actualFirstFrame,
-        actualLastFrame,
-        framesAdvanced: clock.framesAdvanced,
-        shouldLoop: loop
-      });
-      clock.framesAdvanced += framesToAdvance;
-      const frameToDisplay = hasEnded && !moveToBeginningWhenEnded ? playbackRate > 0 ? actualLastFrame : actualFirstFrame : nextFrame;
-      if (frameToDisplay !== currentFrame && !isBuffering()) {
-        playbackFrame = frameToDisplay;
-        setFrameFromPlayback((c) => ({ ...c, [compositionId]: frameToDisplay }));
-      }
-      if (hasEnded) {
-        stop();
-        pause();
-        emitter.dispatchEnded();
-        return;
-      }
-      queueNextFrame();
-    };
-    const queueNextFrame = () => {
-      if (hasBeenStopped) {
-        return;
-      }
-      const getIsResumingAudioContext = audioContextFailed ? null : sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
-      if (getIsResumingAudioContext !== null && !muted) {
-        getIsResumingAudioContext.then((result) => {
-          if (hasBeenStopped) {
-            return;
-          }
-          if (result === "failed") {
-            audioContextFailed = true;
-            sharedAudioContext?.suspend();
-            setPlayerMuted(true);
-          }
-          clock.startedTime = performance.now();
-          clock.framesAdvanced = 0;
-          queueNextFrame();
-        });
-        return;
-      }
-      if (isBuffering()) {
-        if (!muted && !audioContextFailed) {
-          sharedAudioContext?.suspend?.();
-        }
-        const unsubscribe = subscribeBuffering((state) => {
-          if (state.buffering) {
-            return;
-          }
-          unsubscribe();
-          if (!muted && !audioContextFailed && sharedAudioContext?._experimentalKeepAudioContextAlive) {
-            sharedAudioContext.resume();
-          }
-          clock.startedTime = performance.now();
-          clock.framesAdvanced = 0;
-          queueNextFrame();
-        });
-        return;
-      }
-      if (isBackgroundedRef.current) {
-        reqAnimFrameCall = {
-          type: "timeout",
-          id: setTimeout(callback, 1000 / 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();
-    };
-  }, [
-    compositionId,
-    durationInFrames,
-    fps,
-    loop,
-    pause,
-    playing,
-    setFrameFromPlayback,
-    emitter,
-    playbackRate,
-    inFrame,
-    outFrame,
-    moveToBeginningWhenEnded,
-    isBackgroundedRef,
-    getCurrentFrame,
-    isBuffering,
-    isPlaying,
-    sharedAudioContext,
-    setPlayerMuted,
-    subscribeBuffering,
-    seek,
-    logLevel,
-    muted
-  ]);
-  useEffect53(() => {
-    const now = performance.now();
-    const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
-    if (timeSinceLastUpdate >= 250) {
-      emitter.dispatchTimeUpdate({ frame });
-      lastTimeUpdateTimestamp.current = now;
-      return;
-    }
-    const timeoutId = setTimeout(() => {
-      emitter.dispatchTimeUpdate({ frame });
-      lastTimeUpdateTimestamp.current = performance.now();
-    }, 250 - timeSinceLastUpdate);
-    return () => clearTimeout(timeoutId);
-  }, [emitter, frame]);
-  useEffect53(() => {
-    emitter.dispatchFrameUpdate({ frame });
-  }, [emitter, frame]);
-};
 var elementSizeHooks = [];
 var getElement = (source) => {
   if (!source) {
@@ -23540,7 +23516,7 @@ var getElement = (source) => {
   return source;
 };
 var useElementSize = (source, options) => {
-  const [size, setSize] = useState33(() => {
+  const [size, setSize] = useState72(() => {
     const element = getElement(source);
     if (!element) {
       return null;
@@ -23560,7 +23536,7 @@ var useElementSize = (source, options) => {
       }
     };
   });
-  const observer = useMemo210(() => {
+  const observer = useMemo55(() => {
     if (typeof ResizeObserver === "undefined") {
       return null;
     }
@@ -23593,7 +23569,7 @@ var useElementSize = (source, options) => {
       });
     });
   }, [options.shouldApplyCssTransforms]);
-  const updateSize = useCallback28(() => {
+  const updateSize = useCallback52(() => {
     const element = getElement(source);
     if (!element) {
       return;
@@ -23620,10 +23596,10 @@ var useElementSize = (source, options) => {
       };
     });
   }, [source]);
-  useEffect62(() => {
+  useEffect53(() => {
     updateSize();
   }, [updateSize]);
-  useEffect62(() => {
+  useEffect53(() => {
     if (!observer) {
       return;
     }
@@ -23637,7 +23613,7 @@ var useElementSize = (source, options) => {
       }
     };
   }, [observer, source]);
-  useEffect62(() => {
+  useEffect53(() => {
     if (!options.triggerOnWindowResize) {
       return;
     }
@@ -23646,573 +23622,26 @@ var useElementSize = (source, options) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options.triggerOnWindowResize, updateSize]);
-  useEffect62(() => {
+  useEffect53(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
     };
   }, [updateSize]);
-  return useMemo210(() => {
+  return useMemo55(() => {
     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%"
-};
-
-class ErrorBoundary extends React42.Component {
-  state = { hasError: null };
-  static getDerivedStateFromError(error) {
-    return { hasError: error };
-  }
-  componentDidCatch(error) {
-    this.props.onError(error);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx410("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] = React53.useState(false);
-  useEffect72(() => {
-    if (ran) {
-      return;
-    }
-    ran = true;
-    getHashOfDomain().then((hash) => {
-      if (hash && DOMAIN_BLACKLIST.includes(hash)) {
-        setUnlicensed(true);
-      }
-    }).catch(() => {});
-  }, []);
-  useEffect72(() => {
-    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 – 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__ */ jsx53("div", {
-    style,
-    className: "warning-banner",
-    children: /* @__PURE__ */ jsx53("a", {
-      style: { color: "white" },
-      href: "https://github.com/remotion-dev/remotion/pull/4589",
-      children: "Remotion Unlicensed – Contact hi@remotion.dev"
-    })
-  });
-};
-var DefaultPlayPauseButton = ({ playing, buffering }) => {
-  if (playing && buffering) {
-    return /* @__PURE__ */ jsx63(BufferingIndicator, {
-      type: "player"
-    });
-  }
-  if (playing) {
-    return /* @__PURE__ */ jsx63(PauseIcon, {});
-  }
-  return /* @__PURE__ */ jsx63(PlayIcon, {});
-};
-var KNOB_SIZE = 12;
-var BAR_HEIGHT = 5;
-var DefaultVolumeSlider = ({
-  volume,
-  isVertical,
-  onBlur,
-  inputRef,
-  setVolume
-}) => {
-  const sliderContainer = useMemo310(() => {
-    const paddingLeft = 5;
-    const common = {
-      paddingLeft,
-      height: ICON_SIZE2,
-      width: VOLUME_SLIDER_WIDTH,
-      display: "inline-flex",
-      alignItems: "center"
-    };
-    if (isVertical) {
-      return {
-        ...common,
-        position: "absolute",
-        transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE2 / 2}px)`
-      };
-    }
-    return {
-      ...common
-    };
-  }, [isVertical]);
-  const randomId = typeof React62.useId === "undefined" ? "volume-slider" : React62.useId();
-  const [randomClass] = useState43(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback32((e) => {
-    setVolume(parseFloat(e.target.value));
-  }, [setVolume]);
-  const inputStyle = useMemo310(() => {
-    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_SIZE2 + 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__ */ jsxs33("div", {
-    style: sliderContainer,
-    children: [
-      /* @__PURE__ */ jsx73("style", {
-        dangerouslySetInnerHTML: {
-          __html: sliderStyle
-        }
-      }),
-      /* @__PURE__ */ jsx73("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__ */ jsx73(DefaultVolumeSlider, {
-    ...props
-  });
-};
-var VOLUME_SLIDER_WIDTH = 100;
-var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
-  const [playerMuted, setPlayerMuted] = Internals.usePlayerMutedState();
-  const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
-  const [focused, setFocused] = useState52(false);
-  const parentDivRef = useRef52(null);
-  const inputRef = useRef52(null);
-  const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback42(() => {
-    setTimeout(() => {
-      if (inputRef.current && document.activeElement !== inputRef.current) {
-        setFocused(false);
-      }
-    }, 10);
-  }, []);
-  const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback42(() => {
-    if (isVolume0) {
-      setMediaVolume(1);
-      setPlayerMuted(false);
-      return;
-    }
-    setPlayerMuted((mute) => !mute);
-  }, [isVolume0, setPlayerMuted, setMediaVolume]);
-  const parentDivStyle = useMemo410(() => {
-    return {
-      display: "inline-flex",
-      background: "none",
-      border: "none",
-      justifyContent: "center",
-      alignItems: "center",
-      touchAction: "none",
-      ...displayVerticalVolumeSlider && { position: "relative" }
-    };
-  }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo410(() => {
-    return {
-      display: "inline",
-      width: ICON_SIZE2,
-      height: ICON_SIZE2,
-      cursor: "pointer",
-      appearance: "none",
-      background: "none",
-      border: "none",
-      padding: 0
-    };
-  }, []);
-  const renderDefaultMuteButton = useCallback42(({ muted, volume }) => {
-    const isMutedOrZero = muted || volume === 0;
-    return /* @__PURE__ */ jsx82("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__ */ jsx82(VolumeOffIcon, {}) : /* @__PURE__ */ jsx82(VolumeOnIcon, {})
-    });
-  }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo410(() => {
-    return renderMuteButton ? renderMuteButton({ muted: playerMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: playerMuted, volume: mediaVolume });
-  }, [playerMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo410(() => {
-    return (focused || hover) && !playerMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
-      isVertical: displayVerticalVolumeSlider,
-      volume: mediaVolume,
-      onBlur: () => setFocused(false),
-      inputRef,
-      setVolume: setMediaVolume
-    }) : null;
-  }, [
-    displayVerticalVolumeSlider,
-    focused,
-    hover,
-    playerMuted,
-    mediaVolume,
-    renderVolumeSlider,
-    setMediaVolume
-  ]);
-  return /* @__PURE__ */ jsxs42("div", {
-    ref: parentDivRef,
-    style: parentDivStyle,
-    children: [
-      muteButton,
-      volumeSlider
-    ]
-  });
-};
-function useComponentVisible(initialIsVisible) {
-  const [isComponentVisible, setIsComponentVisible] = useState62(initialIsVisible);
-  const ref = useRef62(null);
-  useEffect82(() => {
-    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__ */ jsx92("svg", {
-  viewBox: "0 0 512 512",
-  style: checkmarkStyle,
-  children: /* @__PURE__ */ jsx92("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 = useCallback52((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onSelect(rate);
-  }, [onSelect, rate]);
-  const [hovered, setHovered] = useState72(false);
-  const onMouseEnter = useCallback52(() => {
-    setHovered(true);
-  }, []);
-  const onMouseLeave = useCallback52(() => {
-    setHovered(false);
-  }, []);
-  const isFocused = keyboardSelectedRate === rate;
-  const actualStyle = useMemo55(() => {
-    return {
-      ...rateDiv,
-      backgroundColor: hovered || isFocused ? "#eee" : "transparent"
-    };
-  }, [hovered, isFocused]);
-  return /* @__PURE__ */ jsxs52("div", {
-    onPointerEnter: onMouseEnter,
-    onPointerLeave: onMouseLeave,
-    tabIndex: 0,
-    style: actualStyle,
-    onClick,
-    children: [
-      /* @__PURE__ */ jsx92("div", {
-        style: checkmarkContainer,
-        children: rate === selectedRate ? /* @__PURE__ */ jsx92(Checkmark, {}) : null
-      }),
-      formatPlaybackRate(rate),
-      "x"
-    ]
-  }, rate);
-};
-var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
-  const { setPlaybackRate, playbackRate } = Internals.usePlaybackRate();
-  const [keyboardSelectedRate, setKeyboardSelectedRate] = useState72(playbackRate);
-  useEffect92(() => {
-    const listener = (e) => {
-      if (e.ctrlKey || e.metaKey || e.altKey) {
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        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") {
-        e.preventDefault();
-        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") {
-        e.preventDefault();
-        setPlaybackRate(keyboardSelectedRate);
-        setIsComponentVisible(false);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setIsComponentVisible(false);
-      } else if (e.key === "Tab") {
-        setIsComponentVisible(false);
-      }
-    };
-    window.addEventListener("keydown", listener);
-    return () => {
-      window.removeEventListener("keydown", listener);
-    };
-  }, [
-    playbackRates,
-    keyboardSelectedRate,
-    setPlaybackRate,
-    setIsComponentVisible
-  ]);
-  const onSelect = useCallback52((rate) => {
-    setPlaybackRate(rate);
-    setIsComponentVisible(false);
-  }, [setIsComponentVisible, setPlaybackRate]);
-  const playbackPopup = useMemo55(() => {
-    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__ */ jsx92("div", {
-    style: playbackPopup,
-    children: playbackRates.map((rate) => {
-      return /* @__PURE__ */ jsx92(PlaybackrateOption, {
-        selectedRate: playbackRate,
-        onSelect,
-        rate,
-        keyboardSelectedRate
-      }, rate);
-    })
-  });
-};
-var label2 = {
-  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 } = Internals.usePlaybackRate();
-  const onClick = useCallback52((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
-  }, [setIsComponentVisible]);
-  return /* @__PURE__ */ jsx92("div", {
-    ref,
-    children: /* @__PURE__ */ jsxs52("button", {
-      type: "button",
-      "aria-label": "Change playback rate",
-      style: button,
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxs52("div", {
-          style: label2,
-          children: [
-            playbackRate,
-            "x"
-          ]
-        }),
-        isComponentVisible && /* @__PURE__ */ jsx92(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 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;
@@ -24241,7 +23670,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef72(null);
+  const containerRef = useRef43(null);
   const barHovered = useHoverState(containerRef, false);
   const size = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -24293,7 +23722,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect102(() => {
+  useEffect62(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -24345,15 +23774,15 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       /* @__PURE__ */ jsxs62("div", {
         style: barBackground,
         children: [
-          /* @__PURE__ */ jsx102("div", {
+          /* @__PURE__ */ jsx82("div", {
             style: active
           }),
-          /* @__PURE__ */ jsx102("div", {
+          /* @__PURE__ */ jsx82("div", {
             style: fillStyle
           })
         ]
       }),
-      /* @__PURE__ */ jsx102("div", {
+      /* @__PURE__ */ jsx82("div", {
         style: knobStyle
       })
     ]
@@ -24375,333 +23804,936 @@ var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
-  }, [maxTimeLabelWidth]);
-  const isLastFrame = frame === durationInFrames - 1;
-  const frameToDisplay = isLastFrame ? frame + 1 : frame;
-  return /* @__PURE__ */ jsxs72("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 = useMemo82(() => {
-    const playPauseIconSize = ICON_SIZE2;
-    const volumeIconSize = ICON_SIZE2;
-    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
+  }, [maxTimeLabelWidth]);
+  const isLastFrame = frame === durationInFrames - 1;
+  const frameToDisplay = isLastFrame ? frame + 1 : frame;
+  return /* @__PURE__ */ jsxs72("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 = useMemo82(() => {
+    const playPauseIconSize = ICON_SIZE2;
+    const volumeIconSize = ICON_SIZE2;
+    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 = useRef52(null);
+  const [supportsFullscreen, setSupportsFullscreen] = useState92(false);
+  const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
+  const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
+    allowFullscreen,
+    playerWidth: canvasSize?.width ?? 0
+  });
+  const [shouldShowInitially, setInitiallyShowControls] = useState92(() => {
+    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 = useMemo92(() => {
+    const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
+    return {
+      ...containerStyle2,
+      opacity: Number(shouldShow)
+    };
+  }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
+  useEffect72(() => {
+    if (playButtonRef.current && spaceKeyToPlayOrPause) {
+      playButtonRef.current.focus({
+        preventScroll: true
+      });
+    }
+  }, [playing, spaceKeyToPlayOrPause]);
+  useEffect72(() => {
+    setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
+  }, []);
+  useEffect72(() => {
+    if (shouldShowInitially === false) {
+      return;
+    }
+    const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
+    const timeout = setTimeout(() => {
+      setInitiallyShowControls(false);
+    }, time);
+    return () => {
+      clearInterval(timeout);
+    };
+  }, [shouldShowInitially]);
+  const playbackRates = useMemo92(() => {
+    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 = useRef52(null);
+  const flexRef = useRef52(null);
+  const onPointerDownIfContainer = useCallback72((e) => {
+    if (e.target === ref.current || e.target === flexRef.current) {
+      onPointerDown?.(e);
+    }
+  }, [onPointerDown]);
+  const onDoubleClickIfContainer = useCallback72((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__ */ jsx92("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__ */ jsx92(DefaultPlayPauseButton, {
+                  buffering,
+                  playing
+                }) : renderPlayPauseButton({
+                  playing,
+                  isBuffering: buffering
+                }) ?? /* @__PURE__ */ jsx92(DefaultPlayPauseButton, {
+                  buffering,
+                  playing
+                })
+              }),
+              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment22, {
+                children: [
+                  /* @__PURE__ */ jsx92("div", {
+                    style: xSpacer
+                  }),
+                  /* @__PURE__ */ jsx92(MediaVolumeSlider, {
+                    renderMuteButton,
+                    renderVolumeSlider,
+                    displayVerticalVolumeSlider
+                  })
+                ]
+              }) : null,
+              /* @__PURE__ */ jsx92("div", {
+                style: xSpacer
+              }),
+              /* @__PURE__ */ jsx92(PlayerTimeLabel, {
+                durationInFrames,
+                fps,
+                maxTimeLabelWidth
+              }),
+              /* @__PURE__ */ jsx92("div", {
+                style: xSpacer
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx92("div", {
+            style: flex1
+          }),
+          customControlsElement,
+          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx92("div", {
+            style: xSpacer
+          }) : null,
+          playbackRates && canvasSize && /* @__PURE__ */ jsx92(PlaybackrateControl, {
+            canvasSize,
+            playbackRates
+          }),
+          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx92("div", {
+            style: xSpacer
+          }) : null,
+          /* @__PURE__ */ jsx92("div", {
+            style: fullscreen,
+            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx92("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__ */ jsx92(FullscreenIcon, {
+                isFullscreen
+              }) : renderFullscreenButton({ isFullscreen })
+            }) : null
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx92("div", {
+        style: ySpacer
+      }),
+      /* @__PURE__ */ jsx92(PlayerSeekBar, {
+        onSeekEnd,
+        onSeekStart,
+        durationInFrames,
+        inFrame,
+        outFrame
+      })
+    ]
+  });
+};
+var TimelineSequenceObserverContext = React82.createContext(null);
+var useBrowserMediaSession = ({
+  browserMediaControlsBehavior,
+  videoConfig,
+  playbackRate
+}) => {
+  const playing = Internals.usePlaying();
+  const { pause, play, emitter, getCurrentFrame, seek } = usePlayerMethods();
+  const hasEverPlayed = useRef62(false);
+  useEffect82(() => {
+    if (playing) {
+      hasEverPlayed.current = true;
+    }
+    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]);
+  useEffect82(() => {
+    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
+  ]);
+  useEffect82(() => {
+    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 !== undefined && 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.min(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 / (1000 / 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 = useRef72(getIsBackgrounded());
+  useEffect92(() => {
+    const onVisibilityChange = () => {
+      isBackgrounded.current = getIsBackgrounded();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, []);
+  return isBackgrounded;
+};
+var setGlobalTimeAnchor = ({
+  audioContext,
+  audioSyncAnchor,
+  absoluteTimeInSeconds,
+  globalPlaybackRate,
+  logLevel,
+  force
+}) => {
+  const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
+  const shift = newAnchor - audioSyncAnchor.value;
+  const tolerance = Internals.getAudioSyncAnchorTolerance(audioContext);
+  if (Math.abs(shift) < tolerance && !force) {
+    return false;
+  }
+  if (Math.abs(shift) < Number.EPSILON) {
+    return false;
+  }
+  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  audioSyncAnchor.value = newAnchor;
+  return true;
+};
+var shouldForceAnchorChange = (newState) => {
+  if (newState === "suspended" || newState === "running-to-suspended") {
+    return true;
+  }
+  if (newState === "closed" || newState === "interrupted" || newState === "running" || newState === "suspended-to-running") {
+    return false;
+  }
+  throw new Error(`Unexpected audio context state: ${newState}`);
+};
+var usePlayback = ({
+  loop,
+  playbackRate,
+  moveToBeginningWhenEnded,
+  inFrame,
+  outFrame,
+  browserMediaControlsBehavior,
+  getCurrentFrame,
+  muted
+}) => {
+  const config = Internals.useUnsafeVideoConfig();
+  const fps = config?.fps ?? null;
+  const durationInFrames = config?.durationInFrames ?? null;
+  const compositionId = config?.id ?? null;
+  const frame = Internals.Timeline.useTimelinePosition();
+  const playing = Internals.usePlaying();
+  const { pause, emitter, isPlaying } = usePlayerMethods();
+  const setFrameFromPlayback = Internals.Timeline.useTimelineSetFrameWithoutSeek();
+  const sharedAudioContext = useContext310(Internals.SharedAudioContext);
+  const { setPlayerMuted } = useContext310(Internals.SetMediaVolumeContext);
+  const { isBuffering, subscribeBuffering, seek } = useContext310(Internals.SetTimelineContext);
+  const logLevel = Internals.useLogLevel();
+  const isBackgroundedRef = useIsBackgrounded();
+  const lastTimeUpdateTimestamp = useRef82(0);
+  const playbackClockRef = useRef82(null);
+  const previousMutedRef = useRef82(muted);
+  const anchoredAudioContextRef = useRef82(null);
+  useBrowserMediaSession({
+    browserMediaControlsBehavior,
+    playbackRate,
+    videoConfig: config
+  });
+  useLayoutEffect26(() => {
+    if (!sharedAudioContext) {
+      return;
+    }
+    if (!sharedAudioContext.audioContext) {
+      return;
+    }
+    if (fps === null) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const changed = setGlobalTimeAnchor({
+      audioContext: sharedAudioContext.audioContext,
+      audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+      absoluteTimeInSeconds: frame / fps,
+      globalPlaybackRate: playbackRate,
+      logLevel,
+      force: false
+    });
+    if (changed) {
+      sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
+    }
+  }, [fps, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+  useLayoutEffect26(() => {
+    const audioContext = sharedAudioContext?.audioContext;
+    if (!audioContext) {
+      return;
+    }
+    if (fps === null) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const callback = () => {
+      const newState = sharedAudioContext?.getAudioContextState();
+      if (newState && shouldForceAnchorChange(newState)) {
+        const changed = setGlobalTimeAnchor({
+          audioContext,
+          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+          absoluteTimeInSeconds: getCurrentFrame() / fps,
+          globalPlaybackRate: playbackRate,
+          logLevel,
+          force: true
+        });
+        if (changed) {
+          sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
+        }
+      }
+    };
+    audioContext?.addEventListener("statechange", callback);
+    return () => {
+      audioContext?.removeEventListener("statechange", callback);
+    };
+  }, [fps, getCurrentFrame, logLevel, muted, playbackRate, sharedAudioContext]);
+  useEffect102(() => {
+    const wasMuted = previousMutedRef.current;
+    previousMutedRef.current = muted;
+    if (fps === null || durationInFrames === null || compositionId === null) {
+      playbackClockRef.current = null;
+      return;
+    }
+    if (!playing) {
+      playbackClockRef.current = null;
+      sharedAudioContext?.suspend?.();
+      return;
+    }
+    if (muted) {
+      sharedAudioContext?.suspend?.();
+    }
+    const previousClock = playbackClockRef.current;
+    const shouldRestartClock = previousClock === null || previousClock.compositionId !== compositionId || previousClock.fps !== fps || previousClock.playbackRate !== playbackRate;
+    const clock = shouldRestartClock ? {
+      compositionId,
+      startedTime: performance.now(),
+      framesAdvanced: 0,
+      fps,
+      playbackRate
+    } : previousClock;
+    playbackClockRef.current = clock;
+    if (sharedAudioContext?._experimentalKeepAudioContextAlive && sharedAudioContext.audioContext && !muted) {
+      const didUnmute = wasMuted && !muted;
+      const didReplaceAudioContext = anchoredAudioContextRef.current !== sharedAudioContext.audioContext;
+      const shouldRescheduleAudio = shouldRestartClock || didUnmute || didReplaceAudioContext;
+      const changed = setGlobalTimeAnchor({
+        audioContext: sharedAudioContext.audioContext,
+        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+        absoluteTimeInSeconds: getCurrentFrame() / fps,
+        globalPlaybackRate: playbackRate,
+        logLevel,
+        force: shouldRescheduleAudio
+      });
+      anchoredAudioContextRef.current = sharedAudioContext.audioContext;
+      if (changed || shouldRescheduleAudio) {
+        sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
+      }
+    }
+    let hasBeenStopped = false;
+    let audioContextFailed = false;
+    let reqAnimFrameCall = null;
+    let playbackFrame = getCurrentFrame();
+    let lastSeekRevision = seek?.revision.current ?? null;
+    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()) {
+        sharedAudioContext?.suspend?.();
+        return;
+      }
+      if (!muted && !audioContextFailed && !isBuffering()) {
+        sharedAudioContext?.resume?.();
+      }
+      const time = performance.now() - clock.startedTime;
+      const actualLastFrame = outFrame ?? durationInFrames - 1;
+      const actualFirstFrame = inFrame ?? 0;
+      const seekRevision = seek?.revision.current ?? null;
+      if (seekRevision !== lastSeekRevision) {
+        playbackFrame = getCurrentFrame();
+        lastSeekRevision = seekRevision;
+      }
+      const currentFrame = playbackFrame;
+      const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
+        time,
+        currentFrame,
+        playbackSpeed: playbackRate,
+        fps,
+        actualFirstFrame,
+        actualLastFrame,
+        framesAdvanced: clock.framesAdvanced,
+        shouldLoop: loop
+      });
+      clock.framesAdvanced += framesToAdvance;
+      const frameToDisplay = hasEnded && !moveToBeginningWhenEnded ? playbackRate > 0 ? actualLastFrame : actualFirstFrame : nextFrame;
+      if (frameToDisplay !== currentFrame && !isBuffering()) {
+        playbackFrame = frameToDisplay;
+        setFrameFromPlayback((c) => ({ ...c, [compositionId]: frameToDisplay }));
+      }
+      if (hasEnded) {
+        stop();
+        pause();
+        emitter.dispatchEnded();
+        return;
+      }
+      queueNextFrame();
+    };
+    const queueNextFrame = () => {
+      if (hasBeenStopped) {
+        return;
+      }
+      const getIsResumingAudioContext = audioContextFailed ? null : sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
+      if (getIsResumingAudioContext !== null && !muted) {
+        getIsResumingAudioContext.then((result) => {
+          if (hasBeenStopped) {
+            return;
+          }
+          if (result === "failed") {
+            audioContextFailed = true;
+            sharedAudioContext?.suspend();
+            setPlayerMuted(true);
+          }
+          clock.startedTime = performance.now();
+          clock.framesAdvanced = 0;
+          queueNextFrame();
+        });
+        return;
+      }
+      if (isBuffering()) {
+        if (!muted && !audioContextFailed) {
+          sharedAudioContext?.suspend?.();
+        }
+        const unsubscribe = subscribeBuffering((state) => {
+          if (state.buffering) {
+            return;
+          }
+          unsubscribe();
+          if (!muted && !audioContextFailed && sharedAudioContext?._experimentalKeepAudioContextAlive) {
+            sharedAudioContext.resume();
+          }
+          clock.startedTime = performance.now();
+          clock.framesAdvanced = 0;
+          queueNextFrame();
+        });
+        return;
+      }
+      if (isBackgroundedRef.current) {
+        reqAnimFrameCall = {
+          type: "timeout",
+          id: setTimeout(callback, 1000 / fps)
+        };
+        return;
+      }
+      reqAnimFrameCall = { type: "raf", id: requestAnimationFrame(callback) };
+    };
+    queueNextFrame();
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        return;
+      }
+      cancelQueuedFrame();
+      callback();
     };
-  }, [allowFullScreen, playerWidth]);
-  return resizeInfo;
+    window.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      window.removeEventListener("visibilitychange", onVisibilityChange);
+      stop();
+    };
+  }, [
+    compositionId,
+    durationInFrames,
+    fps,
+    loop,
+    pause,
+    playing,
+    setFrameFromPlayback,
+    emitter,
+    playbackRate,
+    inFrame,
+    outFrame,
+    moveToBeginningWhenEnded,
+    isBackgroundedRef,
+    getCurrentFrame,
+    isBuffering,
+    isPlaying,
+    sharedAudioContext,
+    setPlayerMuted,
+    subscribeBuffering,
+    seek,
+    logLevel,
+    muted
+  ]);
+  useEffect102(() => {
+    const now = performance.now();
+    const timeSinceLastUpdate = now - lastTimeUpdateTimestamp.current;
+    if (timeSinceLastUpdate >= 250) {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = now;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      emitter.dispatchTimeUpdate({ frame });
+      lastTimeUpdateTimestamp.current = performance.now();
+    }, 250 - timeSinceLastUpdate);
+    return () => clearTimeout(timeoutId);
+  }, [emitter, frame]);
+  useEffect102(() => {
+    emitter.dispatchFrameUpdate({ frame });
+  }, [emitter, frame]);
 };
-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 playerCssClassname = (override) => {
+  return override ?? "__remotion-player";
 };
-var controlsRow = {
+var errorStyle = {
   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
+  alignItems: "center",
+  flex: 1,
+  height: "100%",
+  width: "100%"
 };
-var ySpacer = {
-  height: 8
+
+class ErrorBoundary extends React92.Component {
+  state = { hasError: null };
+  static getDerivedStateFromError(error) {
+    return { hasError: error };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx102("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 flex1 = {
-  flex: 1
+var style = {
+  backgroundColor: "red",
+  position: "absolute",
+  padding: 12,
+  fontFamily: "Arial"
 };
-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 = useRef82(null);
-  const [supportsFullscreen, setSupportsFullscreen] = useState92(false);
-  const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
-  const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
-    allowFullscreen,
-    playerWidth: canvasSize?.width ?? 0
-  });
-  const [shouldShowInitially, setInitiallyShowControls] = useState92(() => {
-    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 = useMemo92(() => {
-    const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
-    return {
-      ...containerStyle2,
-      opacity: Number(shouldShow)
-    };
-  }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
+var DOMAIN_BLACKLIST = [
+  "28d262b44cc61fa750f1686b16ad0604dabfe193fbc263eec05c89b7ad4c2cd6",
+  "4db1b0a94be33165dfefcb3ba03d04c7a2666dd27c496d3dc9fa41858e94925e",
+  "fbc48530bbf245da790f63675e84e06bab38c3b114fab07eb350025119922bdc",
+  "7baf10a8932757b1b3a22b3fce10a048747ac2f8eaf638603487e3705b07eb83",
+  "8a6c21a598d8c667272b5207c051b85997bf5b45d5fb712378be3f27cd72c6a6",
+  "a2f7aaac9c50a9255e7fc376110c4e0bfe153722dc66ed3c5d3bf2a135f65518"
+];
+var ran = false;
+var RenderWarningIfBlacklist = () => {
+  const [unlicensed, setUnlicensed] = React102.useState(false);
   useEffect112(() => {
-    if (playButtonRef.current && spaceKeyToPlayOrPause) {
-      playButtonRef.current.focus({
-        preventScroll: true
-      });
+    if (ran) {
+      return;
     }
-  }, [playing, spaceKeyToPlayOrPause]);
-  useEffect112(() => {
-    setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
+    ran = true;
+    getHashOfDomain().then((hash) => {
+      if (hash && DOMAIN_BLACKLIST.includes(hash)) {
+        setUnlicensed(true);
+      }
+    }).catch(() => {});
   }, []);
   useEffect112(() => {
-    if (shouldShowInitially === false) {
+    if (!unlicensed) {
       return;
     }
-    const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
-    const timeout = setTimeout(() => {
-      setInitiallyShowControls(false);
-    }, time);
+    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 – Contact hi@remotion.dev
+	        </a>
+	      `;
+        document.body.appendChild(div);
+      }
+    };
+    const observer = new MutationObserver(() => ensureBanner());
+    observer.observe(document.body, { childList: true, subtree: true });
     return () => {
-      clearInterval(timeout);
+      observer.disconnect();
     };
-  }, [shouldShowInitially]);
-  const playbackRates = useMemo92(() => {
-    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;
-    }
+  }, [unlicensed]);
+  if (!unlicensed) {
     return null;
-  }, [showPlaybackRateControl]);
-  const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef82(null);
-  const flexRef = useRef82(null);
-  const onPointerDownIfContainer = useCallback72((e) => {
-    if (e.target === ref.current || e.target === flexRef.current) {
-      onPointerDown?.(e);
-    }
-  }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback72((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__ */ jsx112("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__ */ jsx112(DefaultPlayPauseButton, {
-                  buffering,
-                  playing
-                }) : renderPlayPauseButton({
-                  playing,
-                  isBuffering: buffering
-                }) ?? /* @__PURE__ */ jsx112(DefaultPlayPauseButton, {
-                  buffering,
-                  playing
-                })
-              }),
-              showVolumeControls ? /* @__PURE__ */ jsxs8(Fragment22, {
-                children: [
-                  /* @__PURE__ */ jsx112("div", {
-                    style: xSpacer
-                  }),
-                  /* @__PURE__ */ jsx112(MediaVolumeSlider, {
-                    renderMuteButton,
-                    renderVolumeSlider,
-                    displayVerticalVolumeSlider
-                  })
-                ]
-              }) : null,
-              /* @__PURE__ */ jsx112("div", {
-                style: xSpacer
-              }),
-              /* @__PURE__ */ jsx112(PlayerTimeLabel, {
-                durationInFrames,
-                fps,
-                maxTimeLabelWidth
-              }),
-              /* @__PURE__ */ jsx112("div", {
-                style: xSpacer
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx112("div", {
-            style: flex1
-          }),
-          customControlsElement,
-          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx112("div", {
-            style: xSpacer
-          }) : null,
-          playbackRates && canvasSize && /* @__PURE__ */ jsx112(PlaybackrateControl, {
-            canvasSize,
-            playbackRates
-          }),
-          playbackRates && supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx112("div", {
-            style: xSpacer
-          }) : null,
-          /* @__PURE__ */ jsx112("div", {
-            style: fullscreen,
-            children: supportsFullscreen && allowFullscreen ? /* @__PURE__ */ jsx112("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__ */ jsx112(FullscreenIcon, {
-                isFullscreen
-              }) : renderFullscreenButton({ isFullscreen })
-            }) : null
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx112("div", {
-        style: ySpacer
-      }),
-      /* @__PURE__ */ jsx112(PlayerSeekBar, {
-        onSeekEnd,
-        onSeekStart,
-        durationInFrames,
-        inFrame,
-        outFrame
-      })
-    ]
+  }
+  return /* @__PURE__ */ jsx112("div", {
+    style,
+    className: "warning-banner",
+    children: /* @__PURE__ */ jsx112("a", {
+      style: { color: "white" },
+      href: "https://github.com/remotion-dev/remotion/pull/4589",
+      children: "Remotion Unlicensed – Contact hi@remotion.dev"
+    })
   });
 };
 var IS_NODE = typeof document === "undefined";
@@ -28441,16 +28473,27 @@ var videoIteratorManager = async ({
   let framesRendered = 0;
   let currentDelayHandle = null;
   let lastDrawnFrame = null;
+  let lastDrawnMediaTime = null;
+  let lastPlainFrameTime;
   let currentSeek = null;
+  let lastPaintedEffects = [];
+  let lastPaintedEffectChainState = null;
+  let lastCompletedEffectPaint = null;
   let destroyed = false;
   let pendingEffectRun = null;
   const clearLastDrawnFrame = () => {
     lastDrawnFrame = null;
+    lastDrawnMediaTime = null;
+    if (lastPlainFrameTime !== undefined) {
+      lastPlainFrameTime = null;
+    }
+    lastCompletedEffectPaint = null;
   };
   const displayWidth = await videoTrack.getDisplayWidth();
   const displayHeight = await videoTrack.getDisplayHeight();
   if (canvas && !getIsDisposed()) {
     if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+      lastPlainFrameTime = null;
       canvas.width = displayWidth;
       canvas.height = displayHeight;
     }
@@ -28460,14 +28503,21 @@ var videoIteratorManager = async ({
   const frameSize = maxWidth / displayWidth < Math.min(1, maxHeight / displayHeight) ? { width: maxWidth, fit: "fill" } : maxHeight < displayHeight ? { height: maxHeight, fit: "fill" } : {};
   const videoSink = new VideoSampleSink(videoTrack);
   const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(videoSink, await videoTrack.getTimeResolution(), Object.keys(frameSize).length === 0 ? null : frameSize);
-  const paintFrame = async (frame) => {
+  const paintFrame = async (frame, mediaTime) => {
     if (destroyed) {
       return;
     }
     if (context && canvas) {
+      lastPlainFrameTime = null;
       const effects = getEffects();
+      lastPaintedEffects = effects;
       const chainState = getEffectChainState(canvas.width, canvas.height);
+      lastPaintedEffectChainState = chainState;
       if (effects.length > 0 && chainState && canvas instanceof HTMLCanvasElement) {
+        if (lastCompletedEffectPaint?.frame === frame && lastCompletedEffectPaint.effects === effects && lastCompletedEffectPaint.chainState === chainState) {
+          return;
+        }
+        lastCompletedEffectPaint = null;
         const firstEnabledEffect = effects.find((effect) => !effect.params.disabled);
         const source = getStableEffectSource(frame, {
           width: canvas.width,
@@ -28477,7 +28527,7 @@ var videoIteratorManager = async ({
         const run = { state: chainState, runId: chainState.currentRunId + 1 };
         pendingEffectRun = run;
         try {
-          await runEffectChain2({
+          const completed = await runEffectChain2({
             state: chainState,
             source,
             effects,
@@ -28485,23 +28535,31 @@ var videoIteratorManager = async ({
             width: canvas.width,
             height: canvas.height
           });
+          if (completed && pendingEffectRun === run) {
+            lastCompletedEffectPaint = { frame, effects, chainState };
+          }
         } finally {
           if (pendingEffectRun === run) {
             pendingEffectRun = null;
           }
         }
       } else {
+        lastCompletedEffectPaint = null;
         context.clearRect(0, 0, canvas.width, canvas.height);
         drawStableFrame(context, frame, canvas.width, canvas.height);
+        if (effects.length === 0) {
+          lastPlainFrameTime = mediaTime;
+        }
       }
     }
   };
-  const drawFrame = async (frame) => {
-    await paintFrame(frame);
+  const drawFrame = async (frame, mediaTime) => {
+    await paintFrame(frame, mediaTime);
     if (destroyed) {
       return;
     }
     lastDrawnFrame = frame;
+    lastDrawnMediaTime = mediaTime;
     framesRendered++;
     drawDebugOverlay();
     const callback = getOnVideoFrameCallback();
@@ -28514,7 +28572,7 @@ var videoIteratorManager = async ({
     if (!lastDrawnFrame) {
       return;
     }
-    await paintFrame(lastDrawnFrame);
+    await paintFrame(lastDrawnFrame, lastDrawnMediaTime);
     if (destroyed) {
       return;
     }
@@ -28560,7 +28618,7 @@ var videoIteratorManager = async ({
       }
       if (nonce.isStale()) {
         if (!videoFrameIterator.isDestroyed() && iterator.initialFrame) {
-          await drawFrame(iterator.initialFrame);
+          await drawFrame(iterator.initialFrame, timeToSeek);
         }
         return;
       }
@@ -28570,7 +28628,7 @@ var videoIteratorManager = async ({
       if (!iterator.initialFrame) {
         return;
       }
-      await drawFrame(iterator.initialFrame);
+      await drawFrame(iterator.initialFrame, timeToSeek);
     } catch (_catch) {
       var _err = _catch, _hasErr = 1;
     } finally {
@@ -28592,6 +28650,11 @@ var videoIteratorManager = async ({
       return;
     }
     if (currentSeek !== null && roundTo4Digits(currentSeek) === roundTo4Digits(newTime)) {
+      const effects = getEffects();
+      const chainState = canvas ? getEffectChainState(canvas.width, canvas.height) : null;
+      if ((effects !== lastPaintedEffects || chainState !== lastPaintedEffectChainState) && (effects.length > 0 || lastPaintedEffects.length > 0)) {
+        await redrawCurrentFrame();
+      }
       return;
     }
     const previousTime = currentSeek;
@@ -28647,7 +28710,7 @@ var videoIteratorManager = async ({
         return;
       }
       if (result.type === "satisfied") {
-        await drawFrame(result.frame);
+        await drawFrame(result.frame, newTime);
         currentSeek = newTime;
         return;
       }
@@ -28688,6 +28751,12 @@ var videoIteratorManager = async ({
       videoFrameIterator = null;
     },
     getVideoFrameIterator: () => videoFrameIterator,
+    getPlainFrameTime: (copiedFrameTime) => {
+      if (destroyed || pendingEffectRun || lastCompletedEffectPaint) {
+        return null;
+      }
+      return lastPlainFrameTime === undefined ? copiedFrameTime : lastPlainFrameTime;
+    },
     drawFrame,
     redrawCurrentFrame,
     getFramesRendered: () => framesRendered
@@ -29323,7 +29392,7 @@ var callOnErrorAndResolve = ({
   if (isClientSideRendering) {
     return ["fail", clientSideError];
   }
-  if (result) {
+  if (result === "fail" || result === "fallback") {
     return [result, error];
   }
   if (disallowFallback) {
@@ -30697,6 +30766,9 @@ var makeKeyframeBank = async ({
     frames[frame.timestamp] = frame;
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
+    while (frameTimestamps.length > 2) {
+      deleteFrameAtTimestamp(frameTimestamps[0]);
+    }
     lastUsed = Date.now();
     Internals.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
@@ -32671,8 +32743,10 @@ var {
   useBuffering: useBuffering22,
   useMediaAudioState: useMediaAudioState22
 } = Internals;
+var studioVideoCanvases = new Map;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
+  mediaTime,
   style,
   playbackRate,
   toneFrequency,
@@ -32706,6 +32780,7 @@ var VideoForPreviewAssertedShowing = ({
 }) => {
   const src = usePreload22(unpreloadedSrc);
   const canvasRef = useRef37(null);
+  const { isStudio } = useRemotionEnvironment();
   const videoConfig = useUnsafeVideoConfig22();
   const frame = useCurrentFrame();
   const mediaPlayerRef = useRef37(null);
@@ -32790,6 +32865,56 @@ var VideoForPreviewAssertedShowing = ({
   const hasDrawnRealFrameRef = useRef37(false);
   const isPremountingRef = useRef37(isPremounting);
   isPremountingRef.current = isPremounting;
+  const maxWidth = maxCanvasSinkFrameSize?.width;
+  const maxHeight = maxCanvasSinkFrameSize?.height;
+  const studioSourceKey = useMemo411(() => isStudio ? JSON.stringify([
+    getSharedInputCacheKey({
+      src: preloadedSrc,
+      credentials,
+      requestInit: initialRequestInit
+    }),
+    maxWidth,
+    maxHeight
+  ]) : null, [
+    credentials,
+    initialRequestInit,
+    isStudio,
+    maxHeight,
+    maxWidth,
+    preloadedSrc
+  ]);
+  const copiedFrameRef = useRef37(null);
+  const canSharePausedFrame = !shouldFallbackToNativeVideo && terminalError === null && !playing && !loop && !debugOverlay && !onVideoFrame && effects.length === 0 && !_experimentalInitiallyDrawCachedFrame;
+  const canSharePausedFrameRef = useRef37(canSharePausedFrame);
+  canSharePausedFrameRef.current = canSharePausedFrame;
+  const mediaTimeRef = useRef37(mediaTime);
+  mediaTimeRef.current = mediaTime;
+  const canReceivePausedFrame = canSharePausedFrame && !isPremounting && !isPostmounting && !headless;
+  useLayoutEffect33(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !studioSourceKey || !canReceivePausedFrame || mediaPlayerRef.current) {
+      return;
+    }
+    for (const [source, previous] of studioVideoCanvases) {
+      if (source !== canvas && previous.sourceKey === studioSourceKey && previous.getPlainFrameTime() === mediaTimeRef.current) {
+        const context = canvas.getContext("2d");
+        if (!context) {
+          return;
+        }
+        canvas.width = source.width;
+        canvas.height = source.height;
+        context.drawImage(source, 0, 0);
+        copiedFrameRef.current = {
+          canvas,
+          sourceKey: studioSourceKey,
+          mediaTime: mediaTimeRef.current,
+          width: canvas.width,
+          height: canvas.height
+        };
+        break;
+      }
+    }
+  }, [canReceivePausedFrame, studioSourceKey]);
   useLayoutEffect33(() => {
     if (!_experimentalInitiallyDrawCachedFrame) {
       return;
@@ -32836,9 +32961,10 @@ var VideoForPreviewAssertedShowing = ({
       scheduleAudioNode: sharedAudioContext.scheduleAudioNode,
       unscheduleAudioNode: sharedAudioContext.unscheduleAudioNode
     } : null;
+    const canvas = canvasRef.current;
     try {
       const player = new MediaPlayer({
-        canvas: canvasRef.current,
+        canvas,
         src: preloadedSrc,
         logLevel,
         sharedAudioContext: sharedAudioContextForMediaPlayer,
@@ -32879,6 +33005,20 @@ var VideoForPreviewAssertedShowing = ({
           }
         }
       });
+      if (canvas && studioSourceKey) {
+        const copied = copiedFrameRef.current;
+        copiedFrameRef.current = null;
+        studioVideoCanvases.set(canvas, {
+          sourceKey: studioSourceKey,
+          getPlainFrameTime: () => {
+            if (!canSharePausedFrameRef.current) {
+              return null;
+            }
+            const copiedTime = copied?.canvas === canvas && copied.sourceKey === studioSourceKey && copied.mediaTime === mediaTimeRef.current && copied.width === canvas.width && copied.height === canvas.height ? copied.mediaTime : null;
+            return player.videoIteratorManager ? player.videoIteratorManager.getPlainFrameTime(copiedTime) : copiedTime;
+          }
+        });
+      }
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current, initialMuted.current, initialVolume.current).then((result) => {
         if (result.type === "disposed") {
@@ -32951,6 +33091,9 @@ var VideoForPreviewAssertedShowing = ({
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
+      if (canvas && studioSourceKey) {
+        studioVideoCanvases.delete(canvas);
+      }
       if (mediaPlayerRef.current) {
         Internals.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
@@ -32973,6 +33116,7 @@ var VideoForPreviewAssertedShowing = ({
     credentials,
     initialRequestInit,
     setMediaDurationInSeconds,
+    studioSourceKey,
     maxCanvasSinkFrameSize?.width,
     maxCanvasSinkFrameSize?.height
   ]);
@@ -33018,13 +33162,17 @@ var VideoForPreviewAssertedShowing = ({
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
+  const lastEffectsTime = useRef37(currentTime);
   useLayoutEffect33(() => {
+    const timeChanged = lastEffectsTime.current !== currentTime;
+    lastEffectsTime.current = currentTime;
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
+    if (!mediaPlayer || !mediaPlayerReady || timeChanged) {
       return;
     }
     mediaPlayer.redrawVideoEffects().catch(() => {});
   }, [
+    currentTime,
     effects,
     effectsOutputSize?.width,
     effectsOutputSize?.height,
@@ -33075,19 +33223,17 @@ var VideoForPreview2 = (props) => {
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
-  const showShow = useMemo411(() => {
-    return getTimeInSeconds({
-      unloopedTimeInSeconds: currentTime,
-      playbackRate: props.playbackRate,
-      loop: props.loop,
-      trimBefore: props.trimBefore,
-      trimAfter: props.trimAfter,
-      mediaDurationInSeconds: Infinity,
-      fps: videoConfig.fps,
-      ifNoMediaDuration: "infinity",
-      src: props.src
-    }) !== null;
-  }, [
+  const mediaTime = useMemo411(() => getTimeInSeconds({
+    unloopedTimeInSeconds: currentTime,
+    playbackRate: props.playbackRate,
+    loop: props.loop,
+    trimBefore: props.trimBefore,
+    trimAfter: props.trimAfter,
+    mediaDurationInSeconds: Infinity,
+    fps: videoConfig.fps,
+    ifNoMediaDuration: "infinity",
+    src: props.src
+  }), [
     currentTime,
     props.loop,
     props.playbackRate,
@@ -33096,11 +33242,12 @@ var VideoForPreview2 = (props) => {
     props.trimBefore,
     props.trimAfter
   ]);
-  if (!showShow) {
+  if (mediaTime === null) {
     return null;
   }
   return /* @__PURE__ */ jsx411(VideoForPreviewAssertedShowing, {
-    ...props
+    ...props,
+    mediaTime
   });
 };
 var VideoForRendering2 = ({
@@ -33215,16 +33362,12 @@ var VideoForRendering2 = ({
         return;
       }
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
-        if (environment.isClientSideRendering) {
-          cancelRender(clientSideError);
-          return;
-        }
         const [action, errorToUse] = callOnErrorAndResolve({
           onError,
           error: err,
           disallowFallback: disallowFallbackToOffthreadVideo,
           isClientSideRendering: environment.isClientSideRendering,
-          clientSideError: err
+          clientSideError
         });
         if (action === "fail") {
           cancelRender(errorToUse);
@@ -35207,7 +35350,7 @@ import {
 } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.540";
+var VERSION2 = "4.0.541";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -35602,6 +35745,17 @@ var addAudioSample = async (audio, audioSampleSource) => {
     sample.close();
   }
 };
+var decodeBinaryArtifact = (encoded) => {
+  if ("fromBase64" in Uint8Array && typeof Uint8Array.fromBase64 === "function") {
+    return Uint8Array.fromBase64(encoded);
+  }
+  const binary = atob(encoded);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0;index < binary.length; index++) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+};
 var onlyArtifact = async ({
   assets,
   frameBuffer
@@ -35613,7 +35767,7 @@ var onlyArtifact = async ({
     if (artifact.contentType === "binary" || artifact.contentType === "text") {
       result.push({
         frame: artifact.frame,
-        content: artifact.content,
+        content: artifact.contentType === "binary" ? decodeBinaryArtifact(artifact.content) : artifact.content,
         filename: artifact.filename,
         downloadBehavior: artifact.downloadBehavior
       });
@@ -41743,7 +41897,7 @@ var renderMediaOnWeb = (options) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React51, { useCallback as useCallback35 } from "react";
+import React49, { useCallback as useCallback35 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -43664,8 +43818,9 @@ var cutPath = (d, length) => {
       if (summedUpLength + instructionAndInfo.length > length) {
         const remainingLength = length - summedUpLength;
         const progress = remainingLength / instructionAndInfo.length;
+        const { instruction } = instructionAndInfo;
         const cut = cutInstruction({
-          instruction: instructionAndInfo.instruction,
+          instruction: instruction.type === "Z" ? { type: "L", x: segment.startPoint.x, y: segment.startPoint.y } : instruction,
           lastPoint: instructionAndInfo.startPoint,
           progress
         });
@@ -43963,7 +44118,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React46, { useMemo as useMemo64 } from "react";
+import React42, { useMemo as useMemo64 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx77, jsxs as jsxs21 } from "react/jsx-runtime";
 import { jsx as jsx213 } from "react/jsx-runtime";
@@ -44185,7 +44340,7 @@ var RenderSvgWithTiming = ({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: React46.cloneElement(content, { style: premountingStyle ?? undefined })
+      children: React42.cloneElement(content, { style: premountingStyle ?? undefined })
     })
   });
 };
@@ -44259,7 +44414,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs21(React46.Fragment, {
+          return /* @__PURE__ */ jsxs21(React42.Fragment, {
             children: [
               /* @__PURE__ */ jsx77("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -46010,7 +46165,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError, playerRef }) => {
-  const [state, setState] = React51.useState({
+  const [state, setState] = React49.useState({
     type: "idle"
   });
   const triggerRender = useCallback35(async () => {
@@ -46530,7 +46685,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React60, { useCallback as useCallback39, useEffect as useEffect38 } from "react";
+import React58, { useCallback as useCallback39, useEffect as useEffect38 } from "react";
 import { jsx as jsx88 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -46547,7 +46702,7 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React60.useState(true);
+  const [playing, setPlaying] = React58.useState(true);
   useEffect38(() => {
     const { current } = playerRef;
     if (!current) {
@@ -46585,7 +46740,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React61, { useEffect as useEffect39 } from "react";
+import React59, { useEffect as useEffect39 } from "react";
 import { jsx as jsx89 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -46593,7 +46748,7 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React61.useState(0);
+  const [time, setTime] = React59.useState(0);
   useEffect39(() => {
     const { current } = playerRef;
     if (!current) {
@@ -46672,7 +46827,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React63 from "react";
+import React60 from "react";
 import { jsx as jsx91, jsxs as jsxs30 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
@@ -46695,7 +46850,7 @@ var Icon3 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React63.useCallback((e) => {
+  const toggleTheme = React60.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -46885,7 +47040,7 @@ var Demo = ({ title, description }) => {
 };
 
 // src/components/homepage/MakeVideosLinks.tsx
-import React65 from "react";
+import React62 from "react";
 import { jsx as jsx95, jsxs as jsxs34, Fragment as Fragment7 } from "react/jsx-runtime";
 var icon2 = {
   height: 16,
@@ -46926,7 +47081,7 @@ var MakeVideosLinks = ({ links }) => {
       /* @__PURE__ */ jsx95("div", {
         className: "leading-6",
         children: links.map((link) => {
-          return /* @__PURE__ */ jsxs34(React65.Fragment, {
+          return /* @__PURE__ */ jsxs34(React62.Fragment, {
             children: [
               /* @__PURE__ */ jsx95(MakeVideosLinkItem, {
                 ...link
@@ -47318,7 +47473,7 @@ import { useMemo as useMemo80 } from "react";
 
 // ../design/dist/esm/index.mjs
 import * as React210 from "react";
-import * as React67 from "react";
+import * as React64 from "react";
 import { Fragment as Fragment23, jsx as jsx100 } from "react/jsx-runtime";
 import React510, { useCallback as useCallback210, useRef as useRef212, useState as useState212 } from "react";
 
@@ -48667,7 +48822,7 @@ import { jsx as jsx313, jsxs as jsxs39 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useMemo as useMemo212, useRef as useRef49 } from "react";
 import { jsx as jsx413 } from "react/jsx-runtime";
 import { jsx as jsx511, jsxs as jsxs210 } from "react/jsx-runtime";
-import React68 from "react";
+import React65 from "react";
 import { jsx as jsx611 } from "react/jsx-runtime";
 import { jsx as jsx710 } from "react/jsx-runtime";
 import { jsx as jsx810, jsxs as jsxs310 } from "react/jsx-runtime";
@@ -48679,10 +48834,10 @@ import { jsx as jsx124 } from "react/jsx-runtime";
 import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
 import React113 from "react";
-import * as React82 from "react";
+import * as React83 from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
-import * as React92 from "react";
-import * as React102 from "react";
+import * as React93 from "react";
+import * as React103 from "react";
 import { Fragment as Fragment42, jsx as jsx143 } from "react/jsx-runtime";
 import { jsx as jsx153 } from "react/jsx-runtime";
 import * as React122 from "react";
@@ -48791,7 +48946,7 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React67.useCallback(composeRefs(...refs), refs);
+  return React64.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
 var use = React210[" use ".trim().toString()];
@@ -48799,7 +48954,7 @@ var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Card2 = React68.forwardRef(({ children, className, ...rest }, ref) => {
+var Card2 = React65.forwardRef(({ children, className, ...rest }, ref) => {
   return /* @__PURE__ */ jsx611("div", {
     ref,
     className: cn("rounded-lg border-2 border-black bg-card-bg text-text border-b-4", className),
@@ -48830,18 +48985,18 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext3(rootComponentName, defaultContext) {
-    const BaseContext = React82.createContext(defaultContext);
+    const BaseContext = React83.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     function Provider(props) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
-      const value = React82.useMemo(() => context, Object.values(context));
+      const value = React83.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx133(Context.Provider, { value, children });
     }
     function useContext2(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
-      const context = React82.useContext(Context);
+      const context = React83.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -48853,11 +49008,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React82.createContext(defaultContext);
+      return React83.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React82.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React83.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -48878,7 +49033,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React82.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React83.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -48895,45 +49050,45 @@ function composeRefs2(...refs) {
   return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
-  return React92.useCallback(composeRefs2(...refs), refs);
+  return React93.useCallback(composeRefs2(...refs), refs);
 }
-var Slot2 = React102.forwardRef((props, forwardedRef) => {
+var Slot2 = React103.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React102.Children.toArray(children);
+  const childrenArray = React103.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable2);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React102.Children.count(newElement) > 1)
-          return React102.Children.only(null);
-        return React102.isValidElement(newElement) ? newElement.props.children : null;
+        if (React103.Children.count(newElement) > 1)
+          return React103.Children.only(null);
+        return React103.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx143(SlotClone, { ...slotProps, ref: forwardedRef, children: React102.isValidElement(newElement) ? React102.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx143(SlotClone, { ...slotProps, ref: forwardedRef, children: React103.isValidElement(newElement) ? React103.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx143(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot2.displayName = "Slot";
-var SlotClone = React102.forwardRef((props, forwardedRef) => {
+var SlotClone = React103.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React102.isValidElement(children)) {
+  if (React103.isValidElement(children)) {
     const childrenRef = getElementRef2(children);
-    return React102.cloneElement(children, {
+    return React103.cloneElement(children, {
       ...mergeProps2(slotProps, children.props),
       ref: forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React102.Children.count(children) > 1 ? React102.Children.only(null) : null;
+  return React103.Children.count(children) > 1 ? React103.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable2 = ({ children }) => {
   return /* @__PURE__ */ jsx143(Fragment42, { children });
 };
 function isSlottable2(child) {
-  return React102.isValidElement(child) && child.type === Slottable2;
+  return React103.isValidElement(child) && child.type === Slottable2;
 }
 function mergeProps2(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -54437,7 +54592,7 @@ var Textarea = React522.forwardRef(({ className, style, ...props }, ref) => {
 Textarea.displayName = "Textarea";
 
 // src/components/homepage/FreePricing.tsx
-import React69, { useCallback as useCallback53, useMemo as useMemo79 } from "react";
+import React66, { useCallback as useCallback53, useMemo as useMemo79 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -55905,6 +56060,8 @@ var FreePricing = ({ termsHref, faqHref }) => {
                 children: [
                   /* @__PURE__ */ jsx105("a", {
                     href: termsHref,
+                    target: termsHref.startsWith("http") ? "_blank" : undefined,
+                    rel: "noopener noreferrer",
                     className: "underline underline-offset-4 text-inherit font-brand",
                     children: "Terms"
                   }),
@@ -56075,10 +56232,10 @@ var CompanyPricing = ({
   purchaseHref
 }) => {
   const mobileLayout = useMobileLayout();
-  const [creatorsSelected, setCreatorsSelected] = React69.useState(false);
-  const [automatorsSelected, setAutomatorsSelected] = React69.useState(true);
-  const [devSeatCount, setDevSeatCount] = React69.useState(3);
-  const [cloudRenders, setCloudRenders] = React69.useState(1e4);
+  const [creatorsSelected, setCreatorsSelected] = React66.useState(false);
+  const [automatorsSelected, setAutomatorsSelected] = React66.useState(true);
+  const [devSeatCount, setDevSeatCount] = React66.useState(3);
+  const [cloudRenders, setCloudRenders] = React66.useState(1e4);
   const formatPrice = useCallback53((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -56358,7 +56515,7 @@ var Pricing = ({
   faqHref = "/docs/license/faq",
   faqLabel = "License FAQ",
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
-  termsHref = "/docs/terms",
+  termsHref = "https://www.remotion.dev/docs/terms",
   purchaseHref = "https://remotion.pro/dashboard"
 }) => {
   const faqLinkTarget = useMemo80(() => {