@remotion/promo-pages 4.0.476 → 4.0.478

package/dist/experts.js

@@ -943,6 +943,7 @@ import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
+  useCallback as useCallback6,
   useContext as useContext17,
   useEffect as useEffect3,
   useMemo as useMemo14,
@@ -981,14 +982,14 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-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";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import {
   createContext as createContext17,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
@@ -996,7 +997,7 @@ import {
   useState as useState7
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
 import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
@@ -1004,7 +1005,7 @@ import { createContext as createContext19, useEffect as useEffect6, useState as
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { useCallback as useCallback12 } from "react";
+import { useCallback as useCallback13 } from "react";
 import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
@@ -1018,7 +1019,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,
@@ -1031,16 +1032,16 @@ import { useRef as useRef13 } from "react";
 import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
 import { useContext as useContext22 } from "react";
 import {
-  useCallback as useCallback11,
+  useCallback as useCallback12,
   useContext as useContext26,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
-import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
 import React20, {
-  useCallback as useCallback9,
+  useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
@@ -1068,7 +1069,7 @@ import { jsx as jsx222 } from "react/jsx-runtime";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo29,
@@ -1079,7 +1080,7 @@ import { jsx as jsx24 } from "react/jsx-runtime";
 import {
   createContext as createContext23,
   forwardRef as forwardRef9,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext31,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
@@ -1088,7 +1089,7 @@ import {
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useContext as useContext32,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle7,
@@ -1097,16 +1098,16 @@ import {
   useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-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";
-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";
-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";
 import { createRef as createRef3 } from "react";
 import React30 from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
@@ -1121,9 +1122,9 @@ import { jsx as jsx32 } from "react/jsx-runtime";
 import React33 from "react";
 import React34, { createContext as createContext25 } from "react";
 import React35, { useContext as useContext35 } from "react";
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback24 } from "react";
 import {
-  useCallback as useCallback21,
+  useCallback as useCallback22,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
@@ -1133,7 +1134,7 @@ import {
 import { jsx as jsx33 } from "react/jsx-runtime";
 import React37, {
   forwardRef as forwardRef13,
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
@@ -1154,7 +1155,7 @@ import {
 import React40 from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import React42 from "react";
-import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
   useContext as useContext38,
@@ -2334,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.476";
+var VERSION = "4.0.478";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2793,10 +2794,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",
@@ -2811,6 +2819,7 @@ var sequenceSchema = extendSchemaWithSequenceName({
 var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
   showInTimeline: showInTimelineField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
 });
@@ -5002,6 +5011,7 @@ var mergeValues = ({
 var stackToOverrideMap = {};
 var wrapInSchema = ({
   Component,
+  componentIdentity,
   schema,
   supportsEffects
 }) => {
@@ -5048,7 +5058,8 @@ var wrapInSchema = ({
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
-        supportsEffects
+        supportsEffects,
+        componentIdentity
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -5085,6 +5096,7 @@ var wrapInSchema = ({
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
+  freeze,
   durationInFrames = Infinity,
   children,
   name,
@@ -5100,7 +5112,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: refForOutline,
+  _remotionInternalRefForOutline: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -5128,11 +5140,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]);
@@ -5184,6 +5209,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;
@@ -5209,7 +5239,8 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.src,
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame
         });
       } else {
         registerSequence({
@@ -5232,10 +5263,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 () => {
@@ -5260,7 +5293,8 @@ var RegularSequenceRefForwardingFunction = ({
       controls: controls ?? null,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
-      isInsideSeries
+      isInsideSeries,
+      frozenFrame: registeredFrozenFrame
     });
     return () => {
       unregisterSequence(id);
@@ -5287,11 +5321,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,
@@ -5308,11 +5357,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
     })
   });
 };
@@ -5392,11 +5441,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
 });
@@ -5714,7 +5765,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;
@@ -5935,6 +5986,7 @@ var resolveAnimatedImageSource = (src) => {
 var animatedImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   playbackRate: {
     type: "number",
     min: 0,
@@ -6134,6 +6186,7 @@ var AnimatedImageInner = ({
 };
 var AnimatedImage = wrapInSchema({
   Component: AnimatedImageInner,
+  componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
 });
@@ -6180,7 +6233,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);
@@ -6197,7 +6250,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);
   }, []);
@@ -7002,7 +7055,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(() => {
@@ -7056,7 +7109,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback8(() => {
+  const resume = useCallback9(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -7083,10 +7136,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();
     }
@@ -7160,7 +7213,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;
@@ -7181,7 +7234,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) {
@@ -7210,7 +7263,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) {
@@ -7221,7 +7274,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,
@@ -7255,7 +7308,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) {
@@ -7766,7 +7819,9 @@ var useMediaInTimeline = ({
       controls: null,
       effects: [],
       refForOutline,
-      isInsideSeries: false
+      isInsideSeries: false,
+      frozenFrame: null,
+      frozenMediaFrame: null
     });
     return () => {
       unregisterSequence(id);
@@ -7803,7 +7858,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: () => {
@@ -7829,7 +7884,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback9((callback) => {
+  const listenForBuffering = useCallback10((callback) => {
     setOnBufferingCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -7837,7 +7892,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback9((callback) => {
+  const listenForResume = useCallback10((callback) => {
     setOnResumeCallbacks((c2) => [...c2, callback]);
     return {
       remove: () => {
@@ -7951,7 +8006,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef16(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -8341,7 +8396,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;
     }
@@ -8732,7 +8787,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premounting: Boolean(sequenceContext?.premounting),
     postmounting: Boolean(sequenceContext?.postmounting)
   });
-  const getStack = useCallback12(() => {
+  const getStack = useCallback13(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -8978,7 +9033,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) {
@@ -8992,7 +9047,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)];
@@ -9084,6 +9139,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
 var solidSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   color: {
     type: "color",
     default: "transparent",
@@ -9138,7 +9194,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState();
-  const canvasRef = useCallback14((canvas) => {
+  const canvasRef = useCallback15((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -9222,6 +9278,7 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  freeze,
   hidden,
   showInTimeline,
   pixelDensity,
@@ -9235,6 +9292,7 @@ var SolidOuter = forwardRef8(({
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
+    freeze,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
@@ -9259,6 +9317,7 @@ var SolidOuter = forwardRef8(({
 });
 var Solid = wrapInSchema({
   Component: SolidOuter,
+  componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
 });
@@ -9348,7 +9407,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);
@@ -9370,7 +9429,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");
@@ -9543,7 +9602,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);
@@ -9578,11 +9637,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
 });
@@ -9600,6 +9661,7 @@ function truncateSrcForLabel(src) {
 var canvasImageSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   fit: {
     type: "enum",
     default: "fill",
@@ -9705,7 +9767,7 @@ var CanvasImageContent = forwardRef10(({
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback16((canvas) => {
+  const canvasRef = useCallback17((canvas) => {
     setOutputCanvas(canvas);
     if (refForOutline) {
       refForOutline.current = canvas;
@@ -9852,6 +9914,7 @@ var CanvasImageInner = forwardRef10(({
   delayRenderTimeoutInMilliseconds,
   durationInFrames,
   from,
+  freeze,
   hidden,
   name,
   showInTimeline,
@@ -9873,6 +9936,7 @@ var CanvasImageInner = forwardRef10(({
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
+    freeze,
     hidden,
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
@@ -9905,6 +9969,7 @@ var CanvasImageInner = forwardRef10(({
 });
 var CanvasImage = wrapInSchema({
   Component: CanvasImageInner,
+  componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
 });
@@ -9922,11 +9987,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);
@@ -9968,7 +10033,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") {
@@ -9978,7 +10043,7 @@ var ImgContent = ({
     }
   }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback18((timeout) => {
+  const retryIn = useCallback19((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -9996,7 +10061,7 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback18((e) => {
+  const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
     }
@@ -10106,6 +10171,7 @@ var NativeImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   _remotionInternalRefForOutline: refForOutline,
   ...props2
@@ -10117,6 +10183,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 },
@@ -10136,6 +10203,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -10191,6 +10259,7 @@ var ImgInner = ({
   src,
   from,
   durationInFrames,
+  freeze,
   _experimentalControls: controls,
   width,
   height,
@@ -10215,6 +10284,7 @@ var ImgInner = ({
       src,
       from,
       durationInFrames,
+      freeze,
       _experimentalControls: controls,
       width,
       height,
@@ -10256,6 +10326,7 @@ var ImgInner = ({
     delayRenderTimeoutInMilliseconds,
     from,
     durationInFrames,
+    freeze,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -10268,6 +10339,7 @@ var ImgInner = ({
 };
 var Img = wrapInSchema({
   Component: ImgInner,
+  componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
 });
@@ -10275,6 +10347,7 @@ addSequenceStackTraces(Img);
 var interactiveElementSchema = {
   durationInFrames: durationInFramesField,
   from: fromField,
+  freeze: freezeField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -10290,6 +10363,7 @@ var makeInteractiveElement = (tag, displayName) => {
     const {
       durationInFrames,
       from,
+      freeze,
       hidden,
       name,
       showInTimeline,
@@ -10298,7 +10372,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]);
@@ -10306,6 +10380,7 @@ var makeInteractiveElement = (tag, displayName) => {
       layout: "none",
       from: from ?? 0,
       durationInFrames: durationInFrames ?? Infinity,
+      freeze,
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
@@ -10322,6 +10397,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
   });
@@ -10378,14 +10454,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.`);
@@ -10393,12 +10469,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,
@@ -10411,7 +10487,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));
     });
@@ -11050,7 +11126,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback21(() => {
+  const onErr = useCallback22(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -11060,7 +11136,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);
     }
@@ -11193,7 +11269,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback22(() => {
+  const getStack = useCallback23(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -11369,7 +11445,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") {
@@ -11748,6 +11824,7 @@ var Internals = {
   getEffectPropStatusesCtx,
   hiddenField,
   durationInFramesField,
+  freezeField,
   fromField
 };
 var flattenChildren = (children) => {
@@ -11833,6 +11910,7 @@ var SeriesInner = (props2) => {
 };
 var Series = Object.assign(wrapInSchema({
   Component: SeriesInner,
+  componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
   supportsEffects: false
 }), {
@@ -12297,7 +12375,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)];