remotion 4.0.476 → 4.0.478

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.476";
+var VERSION = "4.0.478";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1330,6 +1330,7 @@ var Null = () => {
 // src/Sequence.tsx
 import {
   forwardRef as forwardRef3,
+  useCallback as useCallback6,
   useContext as useContext17,
   useEffect as useEffect3,
   useMemo as useMemo14,
@@ -1811,10 +1812,17 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
+var freezeField = {
+  type: "number",
+  default: null,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
   showInTimeline: showInTimelineField,
   from: fromField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: {
     type: "enum",
@@ -1829,6 +1837,7 @@ var sequenceSchema = extendSchemaWithSequenceName({
 var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
   showInTimeline: showInTimelineField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
 });
@@ -4075,6 +4084,7 @@ var mergeValues = ({
 var stackToOverrideMap = {};
 var wrapInSchema = ({
   Component,
+  componentIdentity,
   schema,
   supportsEffects
 }) => {
@@ -4121,7 +4131,8 @@ var wrapInSchema = ({
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
-        supportsEffects
+        supportsEffects,
+        componentIdentity
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -4161,6 +4172,7 @@ import { jsx as jsx12 } from "react/jsx-runtime";
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  freeze,
   durationInFrames = Infinity,
   children,
   name,
@@ -4176,7 +4188,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: refForOutline,
+  _remotionInternalRefForOutline: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -4204,11 +4216,24 @@ var RegularSequenceRefForwardingFunction = ({
   if (!Number.isFinite(from)) {
     throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
   }
+  if (typeof freeze !== "undefined" && freeze !== null) {
+    if (typeof freeze !== "number") {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
+    }
+    if (Number.isNaN(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be a real number, but it is NaN.`);
+    }
+    if (!Number.isFinite(freeze)) {
+      throw new TypeError(`The "freeze" prop of <Sequence /> must be finite, but it is ${freeze}.`);
+    }
+  }
   const absoluteFrame = useTimelinePosition();
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const wrapperRefForOutline = useRef6(null);
+  const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
   const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -4260,6 +4285,11 @@ var RegularSequenceRefForwardingFunction = ({
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
+  const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  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 + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -4285,7 +4315,8 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.src,
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame
         });
       } else {
         registerSequence({
@@ -4308,10 +4339,12 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
-          startMediaFrom: isMedia.data.startMediaFrom,
+          startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame,
+          frozenMediaFrame
         });
       }
       return () => {
@@ -4336,7 +4369,8 @@ var RegularSequenceRefForwardingFunction = ({
       controls: controls ?? null,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
-      isInsideSeries
+      isInsideSeries,
+      frozenFrame: registeredFrozenFrame
     });
     return () => {
       unregisterSequence(id);
@@ -4363,11 +4397,26 @@ var RegularSequenceRefForwardingFunction = ({
     isMedia,
     resolvedDocumentationLink,
     refForOutline,
-    isInsideSeries
+    isInsideSeries,
+    registeredFrozenFrame,
+    startMediaFrom,
+    frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
+  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx12(Freeze, {
+    frame: freeze,
+    children: content
+  });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const sequenceRef = useCallback6((node) => {
+    wrapperRefForOutline.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
   const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
@@ -4384,11 +4433,11 @@ var RegularSequenceRefForwardingFunction = ({
   }
   return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
-      ref,
+    children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx12(AbsoluteFill, {
+      ref: sequenceRef,
       style: defaultStyle,
       className: other.className,
-      children: content
+      children: frozenContent
     })
   });
 };
@@ -4468,11 +4517,13 @@ var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
 var Sequence = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
 var SequenceWithoutFrom = wrapInSchema({
   Component: SequenceInner,
+  componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
 });
@@ -4487,7 +4538,7 @@ import {
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React15, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -4819,7 +4870,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     }
     return document.createElement("canvas");
   }, []);
-  const draw = useCallback6((imageData) => {
+  const draw = useCallback7((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -5049,6 +5100,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 var animatedImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   playbackRate: {
     type: "number",
     min: 0,
@@ -5248,6 +5300,7 @@ var AnimatedImageInner = ({
 };
 var AnimatedImage = wrapInSchema({
   Component: AnimatedImageInner,
+  componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
 });
@@ -5259,7 +5312,7 @@ import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useSta
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext17,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
@@ -5312,7 +5365,7 @@ var RenderAssetManager = createContext17({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState7([]);
   const renderAssetsRef = useRef10([]);
-  const registerRenderAsset = useCallback7((renderAsset) => {
+  const registerRenderAsset = useCallback8((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -5329,7 +5382,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback7((id) => {
+  const unregisterRenderAsset = useCallback8((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -5416,7 +5469,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -5886,7 +5939,7 @@ var DurationsContextProvider = ({ children }) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
@@ -5922,7 +5975,7 @@ import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef
 import React19, {
   createContext as createContext21,
   createRef as createRef2,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext20,
   useEffect as useEffect7,
   useMemo as useMemo21,
@@ -6206,7 +6259,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   }, []);
   const prevEndTimes = useRef12({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef12(new Map);
-  const unscheduleAudioNode = useCallback8((node) => {
+  const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
   const scheduleAudioNode = useMemo21(() => {
@@ -6260,7 +6313,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback8(() => {
+  const resume = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -6287,10 +6340,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     });
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
-  const getIsResumingAudioContext = useCallback8(() => {
+  const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current;
   }, []);
-  const suspend = useCallback8(() => {
+  const suspend = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -6364,7 +6417,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     };
   }, [refs]);
   const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback8(() => {
+  const rerenderAudios = useCallback9(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a2) => a2.id === id);
       const { current } = ref;
@@ -6385,7 +6438,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback8((options) => {
+  const registerAudio = useCallback9((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a2) => a2.audioId === audioId);
     if (found) {
@@ -6414,7 +6467,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback8((id) => {
+  const unregisterAudio = useCallback9((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -6425,7 +6478,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a2) => a2.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback8(({
+  const updateAudio = useCallback9(({
     aud,
     audioId,
     id,
@@ -6459,7 +6512,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback8(() => {
+  const playAllAudios = useCallback9(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a2) => a2.el === ref.ref);
       if (audio?.premounting) {
@@ -6991,7 +7044,9 @@ var useMediaInTimeline = ({
       controls: null,
       effects: [],
       refForOutline,
-      isInsideSeries: false
+      isInsideSeries: false,
+      frozenFrame: null,
+      frozenMediaFrame: null
     });
     return () => {
       unregisterSequence(id);
@@ -7024,7 +7079,7 @@ var useMediaInTimeline = ({
 
 // src/use-media-playback.ts
 import {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useContext as useContext26,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
@@ -7032,14 +7087,14 @@ import {
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 
 // src/use-buffer-state.ts
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
 
 // src/buffering.tsx
 import React20, {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
@@ -7055,7 +7110,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef15(false);
-  const addBlock = useCallback9((block) => {
+  const addBlock = useCallback10((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -7081,7 +7136,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback9((callback) => {
+  const listenForBuffering = useCallback10((callback) => {
     setOnBufferingCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -7089,7 +7144,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback9((callback) => {
+  const listenForResume = useCallback10((callback) => {
     setOnResumeCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -7207,7 +7262,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -7614,7 +7669,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef18({});
-  const onVariableFpsVideoDetected = useCallback11(() => {
+  const onVariableFpsVideoDetected = useCallback12(() => {
     if (!src) {
       return;
     }
@@ -8016,7 +8071,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
-  const getStack = useCallback12(() => {
+  const getStack = useCallback13(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -8277,7 +8332,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback13((e) => {
+  const onError = useCallback14((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -8291,7 +8346,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback13((src, durationInSeconds) => {
+  const onDuration = useCallback14((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -8374,7 +8429,7 @@ var Audio = Html5Audio;
 // src/effects/Solid.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo29,
@@ -8394,6 +8449,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
 var solidSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   color: {
     type: "color",
     default: "transparent",
@@ -8448,7 +8504,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState();
-  const canvasRef = useCallback14((canvas) => {
+  const canvasRef = useCallback15((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -8532,6 +8588,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  freeze,
   hidden,
   showInTimeline,
   pixelDensity,
@@ -8545,6 +8602,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -8569,6 +8627,7 @@ var SolidOuter = forwardRef8(({
 });
 var Solid = wrapInSchema({
   Component: SolidOuter,
+  componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
 });
@@ -8578,7 +8637,7 @@ addSequenceStackTraces(Solid);
 import {
   createContext as createContext23,
   forwardRef as forwardRef9,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext31,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
@@ -8669,7 +8728,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const offscreenRef = useRef22(null);
   const divRef = useRef22(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
-  const setLayoutCanvasRef = useCallback15((node) => {
+  const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -8691,7 +8750,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
-  const onPaintCb = useCallback15(async () => {
+  const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
@@ -8864,7 +8923,7 @@ var HtmlInCanvasInner = forwardRef9(({
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
-  const setCanvasRef = useCallback15((node) => {
+  const setCanvasRef = useCallback16((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -8899,11 +8958,13 @@ HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
 var HtmlInCanvasWrapped = wrapInSchema({
   Component: HtmlInCanvasInner,
+  componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
   supportsEffects: true
 });
@@ -8915,7 +8976,7 @@ addSequenceStackTraces(HtmlInCanvas);
 // src/canvas-image/CanvasImage.tsx
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext32,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
@@ -8937,6 +8998,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 var canvasImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   fit: {
     type: "enum",
     default: "fill",
@@ -9042,7 +9104,7 @@ var CanvasImageContent = forwardRef10(({
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback16((canvas) => {
+  const canvasRef = useCallback17((canvas) => {
     setOutputCanvas(canvas);
     if (refForOutline) {
       refForOutline.current = canvas;
@@ -9189,6 +9251,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -9210,6 +9273,7 @@ var CanvasImageInner = forwardRef10(({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     hidden,
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
@@ -9242,6 +9306,7 @@ var CanvasImageInner = forwardRef10(({
 });
 var CanvasImage = wrapInSchema({
   Component: CanvasImageInner,
+  componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
 });
@@ -9279,7 +9344,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -9293,11 +9358,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback17((e) => {
+  const didLoad = useCallback18((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback17((e) => {
+  const didGetError = useCallback18((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -9315,7 +9380,7 @@ var IFrameRefForwarding = ({
 };
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
-import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
@@ -9342,7 +9407,7 @@ var ImgContent = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useCallback18((img) => {
+  const imageCallbackRef = useCallback19((img) => {
     imageRef.current = img;
     refForOutline.current = img;
     if (typeof ref === "function") {
@@ -9352,7 +9417,7 @@ var ImgContent = ({
     }
   }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback18((timeout) => {
+  const retryIn = useCallback19((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -9370,7 +9435,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback18((e) => {
+  const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
     }
@@ -9480,6 +9545,7 @@ var NativeImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   _remotionInternalRefForOutline: refForOutline,
   ...props2
@@ -9491,6 +9557,7 @@ var NativeImgInner = ({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     _remotionInternalStack: stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
@@ -9510,6 +9577,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -9565,6 +9633,7 @@ var ImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   width,
   height,
@@ -9589,6 +9658,7 @@ var ImgInner = ({
       src,
       from,
       durationInFrames,
+      freeze,
       _experimentalControls: controls,
       width,
       height,
@@ -9630,6 +9700,7 @@ var ImgInner = ({
     delayRenderTimeoutInMilliseconds,
     from,
     durationInFrames,
+    freeze,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -9642,16 +9713,18 @@ var ImgInner = ({
 };
 var Img = wrapInSchema({
   Component: ImgInner,
+  componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var interactiveElementSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -9667,6 +9740,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      freeze,
       hidden,
       name,
       showInTimeline,
@@ -9675,7 +9749,7 @@ var makeInteractiveElement = (tag, displayName) => {
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
-    const callbackRef = useCallback19((element) => {
+    const callbackRef = useCallback20((element) => {
       refForOutline.current = element;
       setRef(ref, element);
     }, [ref]);
@@ -9683,6 +9757,7 @@ var makeInteractiveElement = (tag, displayName) => {
       layout: "none",
       from: from ?? 0,
       durationInFrames: durationInFrames ?? Infinity,
+      freeze,
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
@@ -9699,6 +9774,7 @@ var makeInteractiveElement = (tag, displayName) => {
   Inner.displayName = displayName;
   const Wrapped = wrapInSchema({
     Component: Inner,
+    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
     supportsEffects: false
   });
@@ -9752,7 +9828,7 @@ var compositionsRef = React30.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
@@ -9770,14 +9846,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
   const currentcompositionsRef = useRef26(compositions);
-  const updateCompositions = useCallback20((updateComps) => {
+  const updateCompositions = useCallback21((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback20((comp) => {
+  const registerComposition = useCallback21((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -9785,12 +9861,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback20((id) => {
+  const unregisterComposition = useCallback21((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback20((name, parent, nonce, stack) => {
+  const registerFolder = useCallback21((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -9803,7 +9879,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback20((name, parent) => {
+  const unregisterFolder = useCallback21((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -10366,11 +10442,11 @@ var usePixelDensity = (options) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
@@ -10563,7 +10639,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback21(() => {
+  const onErr = useCallback22(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -10573,7 +10649,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback21((img) => {
+  const onImageFrame = useCallback22((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -10596,7 +10672,7 @@ var OffthreadVideoForRendering = ({
 // src/video/VideoForPreview.tsx
 import React37, {
   forwardRef as forwardRef13,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
@@ -10725,7 +10801,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback22(() => {
+  const getStack = useCallback23(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -10904,7 +10980,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback23(() => {
+  const onDuration = useCallback24(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -11325,6 +11401,7 @@ var Internals = {
   getEffectPropStatusesCtx,
   hiddenField,
   durationInFramesField,
+  freezeField,
   fromField
 };
 // src/series/index.tsx
@@ -11422,6 +11499,7 @@ var SeriesInner = (props2) => {
 };
 var Series = Object.assign(wrapInSchema({
   Component: SeriesInner,
+  componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
   supportsEffects: false
 }), {
@@ -11528,7 +11606,7 @@ var Still = (props2) => {
   return React42.createElement(Composition, newProps);
 };
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
@@ -11918,7 +11996,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback24((src, durationInSeconds) => {
+  const onDuration = useCallback25((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];