remotion 4.0.536 → 4.0.537

package/dist/esm/index.mjs

@@ -27,6 +27,7 @@ __export(exports_timeline_position_state, {
   usePlaying: () => usePlaying,
   useTimelineContext: () => useTimelineContext,
   useTimelinePosition: () => useTimelinePosition,
+  useTimelinePositionWithOptionalSubscription: () => useTimelinePositionWithOptionalSubscription,
   useTimelineSeekFrame: () => useTimelineSeekFrame,
   useTimelineSetFrameWithoutSeek: () => useTimelineSetFrameWithoutSeek
 });
@@ -284,13 +285,15 @@ class CompositionErrorBoundary extends React5.Component {
 // src/CompositionManagerContext.tsx
 import { createContext as createContext7 } from "react";
 var getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
-var CompositionManager = createContext7({
+var defaultCompositionManagerContext = {
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   currentAssetMetadata: null,
   canvasContent: null
-});
+};
+var CompositionManager = createContext7(defaultCompositionManagerContext);
+var CompositionManagerRefContext = createContext7({ current: defaultCompositionManagerContext });
 var CompositionSetters = createContext7({
   setCanvasContent: () => {
     return;
@@ -761,12 +764,12 @@ function validateDurationInFrames(durationInFrames, options) {
   if (durationInFrames <= 0) {
     throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
   }
-  if (!allowFloats && durationInFrames % 1 !== 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
-  }
   if (!Number.isFinite(durationInFrames)) {
     throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
   }
+  if (!allowFloats && durationInFrames % 1 !== 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
+  }
 }
 
 // src/validation/validate-fps.ts
@@ -1741,7 +1744,7 @@ var getStackForControls = (controls) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.536";
+var VERSION = "4.0.537";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1779,12 +1782,12 @@ var Null = () => {
 
 // src/Sequence.tsx
 import React26, {
-  createContext as createContext27,
+  createContext as createContext28,
   forwardRef as forwardRef3,
   useCallback as useCallback7,
   useContext as useContext28,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo19,
+  useMemo as useMemo20,
   useRef as useRef8,
   useState as useState9
 } from "react";
@@ -1805,7 +1808,7 @@ var DEFAULT_PREMOUNT_IN_SECONDS = ENABLE_V5_BREAKING_CHANGES ? 2 : 0;
 var DefaultPremountContext = createContext17(DEFAULT_PREMOUNT_IN_SECONDS);
 
 // src/freeze.tsx
-import { createContext as createContext20, useContext as useContext17, useMemo as useMemo11 } from "react";
+import { createContext as createContext21, useContext as useContext17, useMemo as useMemo11 } from "react";
 
 // src/sequence-activity-context.ts
 import { createContext as createContext18, useContext as useContext11 } from "react";
@@ -1825,7 +1828,7 @@ var SequenceContent = ({ children }) => {
 };
 
 // src/timeline-position-state.ts
-import { useContext as useContext14 } from "react";
+import { createContext as createContext20, useContext as useContext14 } from "react";
 
 // src/TimelineContext.tsx
 import {
@@ -2020,6 +2023,7 @@ var useBuffering = () => {
 };
 
 // src/timeline-position-state.ts
+var UnsubscribedTimelineContext = createContext20(null);
 var makeKey = () => {
   return `remotion.time-all`;
 };
@@ -2049,6 +2053,9 @@ var useTimelinePositionFromContext = (state) => {
   const videoConfig = useVideo();
   const env = useRemotionEnvironment();
   const dormant = useContext14(SequenceActivityDormantContext);
+  if (state === null) {
+    return 0;
+  }
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
   }
@@ -2074,6 +2081,15 @@ var useTimelinePosition = () => {
   const state = useTimelineContext();
   return useTimelinePositionFromContext(state);
 };
+var useTimelinePositionWithOptionalSubscription = (subscribe) => {
+  const dormant = useContext14(SequenceActivityDormantContext);
+  const state = useContext14(subscribe ? dormant ? SequenceActivityTimelineContext : TimelineContext : UnsubscribedTimelineContext);
+  const frame = useTimelinePositionFromContext(state);
+  if (subscribe && state === null) {
+    throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return frame;
+};
 var useIsInsideFreeze = () => {
   return useTimelineContext().isInsideFreeze;
 };
@@ -2096,7 +2112,7 @@ var useTimelineSeekFrame = () => {
 
 // src/use-current-frame.ts
 import { useContext as useContext15 } from "react";
-var useCurrentFrame = () => {
+var useCurrentFrameWithOptionalSubscription = (subscribe) => {
   const canUseRemotionHooks = useContext15(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
@@ -2105,11 +2121,17 @@ var useCurrentFrame = () => {
     }
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
-  const frame = useTimelinePosition();
+  const frame = useTimelinePositionWithOptionalSubscription(subscribe);
   const context = useContext15(SequenceContext);
+  if (!subscribe) {
+    return 0;
+  }
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return (frame - contextOffset) * (context?.playbackRate ?? 1);
 };
+var useCurrentFrame = () => {
+  return useCurrentFrameWithOptionalSubscription(true);
+};
 
 // src/use-video-config.ts
 import { useContext as useContext16 } from "react";
@@ -2135,7 +2157,7 @@ var useVideoConfig = () => {
 
 // src/freeze.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-var NonPremountFreezeContext = createContext20(false);
+var NonPremountFreezeContext = createContext21(false);
 var useIsInsideNonPremountFreeze = () => useContext17(NonPremountFreezeContext);
 var Freeze = ({
   frame: frameToFreeze,
@@ -2670,8 +2692,8 @@ var sequenceSchemaDefaultLayoutNone = {
 };
 
 // src/loop/loop-context.ts
-import { createContext as createContext21 } from "react";
-var LoopContext = createContext21(null);
+import { createContext as createContext22 } from "react";
+var LoopContext = createContext22(null);
 
 // src/resolve-sequence-duration.ts
 var resolveSequenceContentDuration = ({
@@ -2840,7 +2862,7 @@ var SequenceActivityBoundary = ({ children, dormant, frame }) => {
 };
 
 // src/SequenceActivityBudget.tsx
-import React19, { createContext as createContext22, useContext as useContext19, useMemo as useMemo13, useState as useState4 } from "react";
+import React19, { createContext as createContext23, useContext as useContext19, useMemo as useMemo13, useState as useState4 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var useCommitEffect = React19.useInsertionEffect ?? React19.useLayoutEffect;
 var createActivityBudget = () => {
@@ -2919,10 +2941,10 @@ var createActivityBudget = () => {
     }
   };
 };
-var ActivityBudgetContext = createContext22(null);
-var InactiveTimelineContext = createContext22(null);
+var ActivityBudgetContext = createContext23(null);
+var InactiveTimelineContext = createContext23(null);
 var emptySelection = new Set;
-var ActivitySelectionContext = createContext22(emptySelection);
+var ActivitySelectionContext = createContext23(emptySelection);
 var SequenceActivityBudgetProvider = ({ children }) => {
   const enabled = useContext19(SequenceActivityContext);
   const settings = useContext19(SequenceActivitySettingsContext);
@@ -3699,15 +3721,15 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/timeline-track-context.ts
-import { createContext as createContext23 } from "react";
-var TimelineTrackContext = createContext23(null);
+import { createContext as createContext24 } from "react";
+var TimelineTrackContext = createContext24(null);
 
 // src/use-premounting.ts
 import { useContext as useContext24, useMemo as useMemo16 } from "react";
 
 // src/PremountContext.tsx
-import { createContext as createContext24 } from "react";
-var PremountContext = createContext24({
+import { createContext as createContext25 } from "react";
+var PremountContext = createContext25({
   premountFramesRemaining: 0
 });
 
@@ -3822,11 +3844,11 @@ var useSequenceRegistration = ({
 
 // src/with-interactivity-schema.ts
 import React25, {
-  createContext as createContext26,
+  createContext as createContext27,
   forwardRef as forwardRef2,
   useContext as useContext27,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo18,
+  useMemo as useMemo19,
   useState as useState8
 } from "react";
 
@@ -3864,7 +3886,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import React24, { useContext as useContext26, useLayoutEffect as useLayoutEffect6, useRef as useRef7 } from "react";
+import React24, { useContext as useContext26, useLayoutEffect as useLayoutEffect6, useMemo as useMemo18, useRef as useRef7 } from "react";
 
 // src/evaluate-source-expressions.ts
 var evaluateSourceNumericValue = (expression, config) => {
@@ -5970,11 +5992,11 @@ var getEffectiveVisualModeValue = ({
 };
 
 // src/sequence-node-path.tsx
-import { createContext as createContext25 } from "react";
-var OverrideIdsToNodePathsGettersContext = createContext25({
+import { createContext as createContext26 } from "react";
+var OverrideIdsToNodePathsGettersContext = createContext26({
   overrideIdToNodePathMappings: {}
 });
-var OverrideIdsToNodePathsSettersContext = createContext25({
+var OverrideIdsToNodePathsSettersContext = createContext26({
   setOverrideIdToNodePath: () => {
     throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
   }
@@ -5983,6 +6005,15 @@ var OverrideIdsToNodePathsSettersContext = createContext25({
 // src/effects/use-memoized-effects.ts
 var emptyDragOverrides2 = {};
 var useCacheCommitEffect = React24.useInsertionEffect ?? useLayoutEffect6;
+var areEffectParamsEqual = (previous, next) => {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous === null || next === null || typeof previous !== "object" || typeof next !== "object" || Object.getPrototypeOf(previous) !== Object.prototype || Object.getPrototypeOf(next) !== Object.prototype) {
+    return false;
+  }
+  return areRegistryEntriesEqual(previous, next);
+};
 var mergeOverrides = ({
   descriptor,
   propStatusOverrides,
@@ -6047,11 +6078,10 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
 var useMemoizedEffectDefinitions = (effects) => {
   const activityDormant = useContext26(SequenceActivityDormantContext);
   const previousRef = useRef7(null);
-  const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
-  const isSame = previous !== null && previous.definitions.length === definitions.length && previous.definitions.every((definition, i) => definition === definitions[i]);
+  const isSame = previous !== null && previous.definitions.length === effects.length && previous.definitions.every((definition, i) => definition === effects[i].definition);
   const controllers = isSame ? previous.controllers : effects.map((effect) => createRuntimeValueStore(effect.params));
-  const stableDefinitions = isSame ? previous.definitions : Object.assign(definitions, {
+  const stableDefinitions = isSame ? previous.definitions : Object.assign(effects.map((descriptor) => descriptor.definition), {
     runtimeValues: controllers.map((controller) => controller.store)
   });
   useCacheCommitEffect(() => {
@@ -6059,6 +6089,9 @@ var useMemoizedEffectDefinitions = (effects) => {
     if (!activityDormant || controllers.length === 0) {
       return;
     }
+    if (controllers.every((controller, index) => areEffectParamsEqual(controller.store.getSnapshot(), effects[index]?.params))) {
+      return;
+    }
     let cancelled = false;
     queueMicrotask(() => {
       if (cancelled) {
@@ -6067,15 +6100,9 @@ var useMemoizedEffectDefinitions = (effects) => {
       controllers.forEach((controller, index) => {
         const snapshot = effects[index]?.params;
         const currentSnapshot = controller.store.getSnapshot();
-        if (Object.is(snapshot, currentSnapshot)) {
+        if (areEffectParamsEqual(snapshot, currentSnapshot)) {
           return;
         }
-        if (snapshot !== null && currentSnapshot !== null && typeof snapshot === "object" && typeof currentSnapshot === "object") {
-          const keys = Object.keys(snapshot);
-          if (keys.length === Object.keys(currentSnapshot).length && keys.every((key) => Object.prototype.hasOwnProperty.call(currentSnapshot, key) && Object.is(snapshot[key], currentSnapshot[key]))) {
-            return;
-          }
-        }
         controller.setSnapshot(snapshot);
       });
     });
@@ -6086,7 +6113,9 @@ var useMemoizedEffectDefinitions = (effects) => {
   useLayoutEffect6(() => {
     stableDefinitions.forEach((_definition, index) => {
       const snapshot = effects[index]?.params;
-      controllers[index].setSnapshot(snapshot);
+      if (!areEffectParamsEqual(controllers[index].store.getSnapshot(), snapshot)) {
+        controllers[index].setSnapshot(snapshot);
+      }
     });
   }, [controllers, effects, stableDefinitions]);
   return stableDefinitions;
@@ -6132,45 +6161,59 @@ var useMemoizedEffects = ({
 }) => {
   const previousRef = useRef7(null);
   const { propStatuses } = useContext26(VisualModePropStatusesContext);
-  const frame = useCurrentFrame();
   const { overrideIdToNodePathMappings } = useContext26(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const effectDragOverrides = useEffectDragOverridesForNodePath(nodePath);
-  const resolved = effects.map((descriptor, index) => {
+  const effectPropStatuses = useMemo18(() => Array.from({ length: effects.length }, (_, effectIndex) => {
     if (nodePath === null) {
-      return {
-        descriptor,
-        params: descriptor.params,
-        effectKey: descriptor.effectKey
-      };
+      return null;
     }
-    const effectStatus = getEffectPropStatusesCtx({
+    const status = getEffectPropStatusesCtx({
       propStatuses,
       nodePath: { ...nodePath, videoConfigValues },
-      effectIndex: index
+      effectIndex
     });
-    const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
+    return status.type === "can-update-effect" ? status.props : null;
+  }), [effects.length, nodePath, propStatuses, videoConfigValues]);
+  const animatedEffects = useMemo18(() => effectPropStatuses.map((status, index) => Object.values(status ?? {}).some((prop) => prop.status === "keyframed") || Object.values(effectDragOverrides[index] ?? emptyDragOverrides2).some((override) => override.type === "keyframed")), [effectDragOverrides, effectPropStatuses]);
+  const frame = useCurrentFrameWithOptionalSubscription(animatedEffects.some(Boolean));
+  const prepared = effects.map((descriptor, index) => {
+    const propStatus = effectPropStatuses[index];
     const dragOverridesMap = effectDragOverrides[index] ?? emptyDragOverrides2;
     const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const effectFrame = animatedEffects[index] ? frame : null;
+    const cached = previous?.prepared[index];
+    if (cached && cached.definition === descriptor.definition && cached.sourceKey === descriptor.effectKey && areEffectParamsEqual(cached.params, descriptor.params) && cached.propStatus === propStatus && cached.dragOverrides === dragOverrides && cached.frame === effectFrame) {
+      return cached;
+    }
+    const propStatusOverrides = resolvePropStatusOverrides(propStatus ?? undefined, frame);
     const { params, effectKey } = mergeOverrides({
       descriptor,
       propStatusOverrides,
       dragOverrides,
       frame
     });
-    return { descriptor, params, effectKey };
+    return {
+      definition: descriptor.definition,
+      sourceKey: descriptor.effectKey,
+      params: descriptor.params !== null && typeof descriptor.params === "object" && Object.getPrototypeOf(descriptor.params) === Object.prototype ? { ...descriptor.params } : descriptor.params,
+      propStatus,
+      dragOverrides,
+      frame: effectFrame,
+      value: cached?.value.definition === descriptor.definition && cached.value.effectKey === effectKey ? cached.value : {
+        definition: descriptor.definition,
+        effectKey,
+        params,
+        memoized: true
+      }
+    };
   });
-  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
-  const next = isSame ? previous : resolved.map(({ descriptor, params, effectKey }) => ({
-    definition: descriptor.definition,
-    effectKey,
-    params,
-    memoized: true
-  }));
+  const isSame = previous !== null && previous.effects.length === prepared.length && previous.effects.every((effect, i) => effect === prepared[i].value);
+  const next = isSame ? previous.effects : prepared.map((effect) => effect.value);
   useCacheCommitEffect(() => {
-    previousRef.current = next;
-  }, [next]);
+    previousRef.current = { prepared, effects: next };
+  }, [next, prepared]);
   return next;
 };
 
@@ -6571,11 +6614,11 @@ var mergeValues = ({
   deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
-var DisableInteractivityContext = createContext26(false);
+var DisableInteractivityContext = createContext27(false);
 var DisableInteractivityProvider = ({ children }) => {
   return React25.createElement(DisableInteractivityContext.Provider, { value: true }, children);
 };
-var EnableInteractivityContext = createContext26(false);
+var EnableInteractivityContext = createContext27(false);
 var EnableInteractivityProvider = ({ children }) => {
   return React25.createElement(EnableInteractivityContext.Provider, { value: true }, children);
 };
@@ -6610,20 +6653,19 @@ var withInteractivitySchema = ({
     }
     const { propStatuses } = useContext27(VisualModePropStatusesContext);
     const nodePathMapping = useContext27(OverrideIdsToNodePathsGettersContext);
-    const frame = useCurrentFrame();
     const videoConfig = useUnsafeVideoConfig();
     const durationInFrames = videoConfig?.durationInFrames;
     const fps = videoConfig?.fps;
     const height = videoConfig?.height;
     const width = videoConfig?.width;
-    const videoConfigValues = useMemo18(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+    const videoConfigValues = useMemo19(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
       durationInFrames,
       fps,
       height,
       width
     }, [durationInFrames, fps, height, width]);
     const passedControls = cleanProps.controls;
-    const resolvedPassedControls = useMemo18(() => {
+    const resolvedPassedControls = useMemo19(() => {
       if (!passedControls || getStackForControls(passedControls) !== null || internalStack === undefined) {
         return passedControls;
       }
@@ -6652,17 +6694,23 @@ var withInteractivitySchema = ({
     });
     const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const dragOverrides = useDragOverridesForNodePath(nodePath);
+    const propStatus = useMemo19(() => nodePath === null ? undefined : getPropStatusesCtx(propStatuses, {
+      ...nodePath,
+      videoConfigValues
+    }), [nodePath, propStatuses, videoConfigValues]);
+    const needsFrame = flatKeys.some((key) => propStatus?.[key]?.status === "keyframed" || dragOverrides[key]?.type === "keyframed");
+    const frame = useCurrentFrameWithOptionalSubscription(needsFrame);
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo18(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const currentRuntimeValueDotNotation = useMemo19(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
     const [runtimeValueStore] = useState8(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
     useLayoutEffect7(() => {
       runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
     }, [currentRuntimeValueDotNotation, runtimeValueStore]);
-    const controls = useMemo18(() => {
+    const controls = useMemo19(() => {
       const controlsForRender = {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -6685,25 +6733,15 @@ var withInteractivitySchema = ({
     useLayoutEffect7(() => {
       OptimisticSequenceDeletion.register(internalStack ?? null, nodePath);
     }, [internalStack, nodePath]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo18(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo19(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: dragOverrides,
-        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, {
-          ...nodePath,
-          videoConfigValues
-        }),
+        propStatus,
         frame
       });
-    }, [
-      currentRuntimeValueDotNotation,
-      dragOverrides,
-      nodePath,
-      propStatuses,
-      videoConfigValues,
-      frame
-    ]);
+    }, [currentRuntimeValueDotNotation, dragOverrides, propStatus, frame]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       flatSchema,
@@ -6727,7 +6765,7 @@ var withInteractivitySchema = ({
 
 // src/Sequence.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var SeriesContentVisibilityContext = createContext27(true);
+var SeriesContentVisibilityContext = createContext28(true);
 var SequenceContextProvider = withCommittedMetadata(SequenceContext.Provider);
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
@@ -6875,13 +6913,13 @@ var RegularSequenceRefForwardingFunction = ({
   const sequenceRegistrationEnabled = useContext28(SequenceRegistrationContext);
   const canvasOutlinesEnabled = useContext28(SequenceOutlineContext);
   const shouldDiscoverOutline = env.isStudio || canvasOutlinesEnabled;
-  const automaticOutlineRef = useMemo19(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
+  const automaticOutlineRef = useMemo20(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
   const wrapperRefForOutline = useRef8(null);
   const refForOutline = layout === "none" ? automaticOutlineRef : wrapperRefForOutline;
-  const premounting = useMemo19(() => {
+  const premounting = useMemo20(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo19(() => {
+  const postmounting = useMemo20(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + relativeFrom;
@@ -6889,7 +6927,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom / parentPlaybackRate : 0;
   const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + clockFrom / parentPlaybackRate);
   const cumulatedNegativeFrom = (currentSequenceStart - firstFrame) * cumulativePlaybackRate;
-  const contextValue = useMemo19(() => {
+  const contextValue = useMemo20(() => {
     return {
       playbackRate: cumulativePlaybackRate,
       absoluteFrom,
@@ -6922,7 +6960,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const loopContextValue = useMemo19(() => {
+  const loopContextValue = useMemo20(() => {
     if (loopPeriod === null) {
       return null;
     }
@@ -6931,7 +6969,7 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: contentDurationInFrames
     };
   }, [contentDurationInFrames, loopIteration, loopPeriod]);
-  const resolvedLoopDisplay = useMemo19(() => {
+  const resolvedLoopDisplay = useMemo20(() => {
     if (loopDisplay || loopPeriod === null) {
       return loopDisplay;
     }
@@ -6941,12 +6979,12 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: loopPeriod
     };
   }, [actualDurationInFrames, loopDisplay, loopPeriod]);
-  const timelineClipName = useMemo19(() => {
+  const timelineClipName = useMemo20(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const isInsideSeries = useContext28(IsInsideSeriesContext);
-  const singleChildComponent = useMemo19(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
+  const singleChildComponent = useMemo20(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
   const registrationStack = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const getStack = useCallback7(() => registrationStack, [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -6973,8 +7011,8 @@ var RegularSequenceRefForwardingFunction = ({
   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 seriesContentVisible = useContext28(SeriesContentVisibilityContext);
-  const effectRuntimeValues = useMemo19(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
-  const registrationControls = useMemo19(() => {
+  const effectRuntimeValues = useMemo20(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
+  const registrationControls = useMemo20(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
@@ -7181,7 +7219,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo19(() => {
+  const defaultStyle = useMemo20(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -7195,7 +7233,7 @@ var RegularSequenceRefForwardingFunction = ({
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
-  const metadata = useMemo19(() => shouldDiscoverOutline || registration !== null ? {
+  const metadata = useMemo20(() => shouldDiscoverOutline || registration !== null ? {
     type: "sequence",
     id,
     value: registration,
@@ -7483,7 +7521,6 @@ addSequenceStackTraces(AbsoluteFill);
 // src/animated-image/AnimatedImage.tsx
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect8,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef11,
@@ -7491,7 +7528,7 @@ import {
 } from "react";
 
 // src/use-crop-style.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -7501,7 +7538,7 @@ var useCropStyle = ({
   componentName
 }) => {
   validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
-  return useMemo20(() => {
+  return useMemo21(() => {
     const cropClipPath = getSequenceCropClipPath({
       ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
       style
@@ -7514,7 +7551,7 @@ var useCropStyle = ({
 };
 
 // src/animated-image/canvas.tsx
-import React28, { useCallback as useCallback9, useImperativeHandle, useMemo as useMemo22, useRef as useRef10 } from "react";
+import React28, { useCallback as useCallback9, useImperativeHandle, useMemo as useMemo23, useRef as useRef10 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -7884,7 +7921,7 @@ var runEffectChain = async (options) => {
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect7, useMemo as useMemo21, useRef as useRef9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo22, useRef as useRef9 } from "react";
 var useEffectChainState = (effectsOutputSize = null) => {
   const effectWidth = effectsOutputSize?.width;
   const effectHeight = effectsOutputSize?.height;
@@ -7906,7 +7943,7 @@ var useEffectChainState = (effectsOutputSize = null) => {
       }
     };
   }, []);
-  return useMemo21(() => ({
+  return useMemo22(() => ({
     get: (width, height) => {
       width = effectWidth ?? width;
       height = effectHeight ?? height;
@@ -7930,7 +7967,7 @@ import { jsx as jsx19 } from "react/jsx-runtime";
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, effectsOutputSize, ...props }, ref) => {
   const canvasRef = useRef10(null);
   const chainState = useEffectChainState(effectsOutputSize);
-  const sourceCanvas = useMemo22(() => {
+  const sourceCanvas = useMemo23(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -8273,6 +8310,7 @@ var AnimatedImageContent = forwardRef4(({
   const resolvedSrc = resolveAnimatedImageSource(src);
   const [decodedImage, setDecodedImage] = useState10(null);
   const imageDecoder = decodedImage?.decoder ?? null;
+  const activeDecoderRef = useRef11(null);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -8301,6 +8339,7 @@ var AnimatedImageContent = forwardRef4(({
     const controller = new AbortController;
     let cancelled = false;
     let continued = false;
+    let decoder = null;
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -8319,6 +8358,8 @@ var AnimatedImageContent = forwardRef4(({
         d.close();
         return;
       }
+      decoder = d;
+      activeDecoderRef.current = d;
       setDecodedImage({ decoder: d, handle: decodeHandle });
     }).catch((err) => {
       if (cancelled) {
@@ -8337,6 +8378,8 @@ var AnimatedImageContent = forwardRef4(({
     });
     return () => {
       cancelled = true;
+      activeDecoderRef.current = null;
+      decoder?.close();
       controller.abort();
       continueRenderOnce();
     };
@@ -8349,13 +8392,8 @@ var AnimatedImageContent = forwardRef4(({
     delayRender,
     cancelRender
   ]);
-  useEffect8(() => {
-    return () => {
-      imageDecoder?.close();
-    };
-  }, [imageDecoder]);
   useLayoutEffect9(() => {
-    if (!imageDecoder || !decodedImage) {
+    if (!imageDecoder || !decodedImage || activeDecoderRef.current !== imageDecoder) {
       return;
     }
     const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
@@ -8641,11 +8679,11 @@ import { useContext as useContext29, useLayoutEffect as useLayoutEffect11, useSt
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext28,
+  createContext as createContext29,
   useCallback as useCallback10,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef12,
   useState as useState11
 } from "react";
@@ -8683,7 +8721,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var RenderAssetManager = createContext28({
+var RenderAssetManager = createContext29({
   registerRenderAsset: () => {
     return;
   },
@@ -8726,7 +8764,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo23(() => {
+  const contextValue = useMemo24(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -8841,9 +8879,9 @@ var getMediaTrimAfter = ({
 };
 
 // src/loop/index.tsx
-import React29, { createContext as createContext29, useContext as useContext30, useMemo as useMemo24 } from "react";
+import React29, { createContext as createContext30, useContext as useContext30, useMemo as useMemo25 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var LoopTimelineContext = createContext29(null);
+var LoopTimelineContext = createContext30(null);
 var useLoop = () => {
   return React29.useContext(LoopContext);
 };
@@ -8887,20 +8925,20 @@ var Loop = ({
   const iteration = Math.max(0, Math.min(actualTimes - 1, isAtBoundary ? nearestIteration : Math.floor(loopsElapsed)));
   const start = isAtBoundary ? currentFrame : iteration * iterationDurationInFrames;
   const from = Math.max(0, Math.min(start, maxFrame));
-  const loopDisplay = useMemo24(() => {
+  const loopDisplay = useMemo25(() => {
     return {
       numberOfTimes: Math.min(compDuration / iterationDurationInFrames, times),
       startOffset: -from,
       durationInFrames: iterationDurationInFrames
     };
   }, [compDuration, from, iterationDurationInFrames, times]);
-  const loopContext = useMemo24(() => {
+  const loopContext = useMemo25(() => {
     return {
       iteration,
       durationInFrames
     };
   }, [iteration, durationInFrames]);
-  const timelineContext = useMemo24(() => ({
+  const timelineContext = useMemo25(() => ({
     startFrame: loopStartFrame,
     firstVisibleFrame,
     endFrame,
@@ -8944,9 +8982,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext30, useEffect as useEffect9, useState as useState13 } from "react";
+import { createContext as createContext31, useEffect as useEffect8, useState as useState13 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var PreloadContext = createContext30({});
+var PreloadContext = createContext31({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -8955,7 +8993,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState13(() => preloads);
-  useEffect9(() => {
+  useEffect8(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -9271,7 +9309,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext31, useMemo as useMemo25, useReducer } from "react";
+import { createContext as createContext32, useMemo as useMemo26, useReducer } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -9289,7 +9327,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext31({
+var DurationsContext = createContext32({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -9297,7 +9335,7 @@ var DurationsContext = createContext31({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo25(() => {
+  const value = useMemo26(() => {
     return {
       durations,
       setDurations
@@ -9314,9 +9352,9 @@ import { useCallback as useCallback16 } from "react";
 import React35, {
   forwardRef as forwardRef5,
   useContext as useContext41,
-  useEffect as useEffect16,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef21,
   useState as useState17
 } from "react";
@@ -9378,12 +9416,12 @@ import { useContext as useContext33, useLayoutEffect as useLayoutEffect12, useRe
 
 // src/audio/shared-audio-tags.tsx
 import React32, {
-  createContext as createContext32,
+  createContext as createContext33,
   createRef as createRef2,
   useCallback as useCallback11,
   useContext as useContext32,
-  useEffect as useEffect10,
-  useMemo as useMemo27,
+  useEffect as useEffect9,
+  useMemo as useMemo28,
   useRef as useRef14,
   useState as useState14
 } from "react";
@@ -9488,7 +9526,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo26, useRef as useRef13 } from "react";
+import { useMemo as useMemo27, useRef as useRef13 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -9510,7 +9548,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo26(() => {
+  const context = useMemo27(() => {
     if (env.isRendering) {
       return null;
     }
@@ -9674,8 +9712,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext32(null);
-var SharedAudioTagsContext = createContext32(null);
+var SharedAudioContext = createContext33(null);
+var SharedAudioTagsContext = createContext33(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -9708,9 +9746,9 @@ var SharedAudioContextProvider = ({
   const isResuming = useRef14(null);
   const nextResumeAttemptId = useRef14(0);
   const nextResumeIsAutoPlayAttempt = useRef14(false);
-  const audioSyncAnchor = useMemo27(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo28(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef14([]);
-  const audioSyncAnchorEmitter = useMemo27(() => {
+  const audioSyncAnchorEmitter = useMemo28(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -9730,7 +9768,7 @@ var SharedAudioContextProvider = ({
   const unscheduleAudioNode = useCallback11((node) => {
     return nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo27(() => {
+  const scheduleAudioNode = useMemo28(() => {
     return ({
       node,
       mediaTimestamp,
@@ -9847,7 +9885,7 @@ var SharedAudioContextProvider = ({
     }
     return ctxAndGain.suspend();
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!_experimentalKeepAudioContextAlive) {
       return;
     }
@@ -9875,7 +9913,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo27(() => {
+  const audioContextValue = useMemo28(() => {
     return {
       sampleRate,
       audioContext: ctxAndGain?.audioContext ?? null,
@@ -10063,7 +10101,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo27(() => {
+  const audioTagsValue = useMemo28(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10078,7 +10116,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo27(() => {
+  const sharedAudioTagElements = useMemo28(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx25("audio", {
         ref,
@@ -10357,11 +10395,11 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback12, useContext as useContext35, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback12, useContext as useContext35, useMemo as useMemo29 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { createContext as createContext33, useContext as useContext34 } from "react";
-var Html5MediaTrimContext = createContext33(0);
+import { createContext as createContext34, useContext as useContext34 } from "react";
+var Html5MediaTrimContext = createContext34(0);
 var useMediaStartsAt = () => {
   const parentSequence = useContext34(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
@@ -10447,7 +10485,7 @@ var useBasicMediaInTimeline = ({
     loop
   });
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo28(() => {
+  const memoizedResult = useMemo29(() => {
     return {
       duration,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
@@ -10483,7 +10521,7 @@ var useMediaInTimelineRegistration = ({
   const { isStudio } = useRemotionEnvironment();
   const stack = getStack();
   const getStackForRegistration = useCallback12(() => stack, [stack]);
-  const automaticOutlineRef = useMemo28(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
+  const automaticOutlineRef = useMemo29(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
   const { duration, finalDisplayName } = useBasicMediaInTimeline({
     src,
     displayName,
@@ -10565,24 +10603,24 @@ var useMediaInTimelineRegistration = ({
 import {
   useCallback as useCallback15,
   useContext as useContext38,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect14,
   useRef as useRef19
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback14, useMemo as useMemo31, useRef as useRef17 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo32, useRef as useRef17 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext37, useMemo as useMemo30 } from "react";
+import { useContext as useContext37, useMemo as useMemo31 } from "react";
 
 // src/buffering.tsx
 import React33, {
   useCallback as useCallback13,
   useContext as useContext36,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useState as useState15
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -10610,7 +10648,7 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
       }
     };
   }, [rendering]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (rendering) {
       return;
     }
@@ -10640,7 +10678,7 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
       }
     }, [blockCount]);
   }
-  return useMemo29(() => ({ addBlock }), [addBlock]);
+  return useMemo30(() => ({ addBlock }), [addBlock]);
 };
 var BufferingContextReact = React33.createContext(null);
 var BufferingProvider = ({ children }) => {
@@ -10658,7 +10696,7 @@ var useBufferState = () => {
   const buffer = useContext37(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo30(() => ({
+  return useMemo31(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -10766,7 +10804,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo31(() => {
+  return useMemo32(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -10879,7 +10917,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect12, useState as useState16 } from "react";
+import { useEffect as useEffect11, useState as useState16 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -10891,7 +10929,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState16(false);
-  useEffect12(() => {
+  useEffect11(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -11019,7 +11057,7 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect13, useRef as useRef18 } from "react";
+import { useEffect as useEffect12, useRef as useRef18 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
@@ -11027,7 +11065,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef18(null);
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -11245,7 +11283,7 @@ var useMediaPlayback = ({
       mediaRef.current.preservesPitch = preservePitch;
     }
   }, [mediaRef, playbackRate, preservePitch]);
-  useEffect14(() => {
+  useEffect13(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -11388,7 +11426,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext39, useEffect as useEffect15, useRef as useRef20 } from "react";
+import { useContext as useContext39, useEffect as useEffect14, useRef as useRef20 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -11404,7 +11442,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect15(() => {
+  useEffect14(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -11462,12 +11500,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext34, useContext as useContext40, useMemo as useMemo32 } from "react";
-var MediaVolumeContext = createContext34({
+import { createContext as createContext35, useContext as useContext40, useMemo as useMemo33 } from "react";
+var MediaVolumeContext = createContext35({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext34({
+var SetMediaVolumeContext = createContext35({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -11478,14 +11516,14 @@ var SetMediaVolumeContext = createContext34({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext40(MediaVolumeContext);
   const { setMediaVolume } = useContext40(SetMediaVolumeContext);
-  return useMemo32(() => {
+  return useMemo33(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
   const { playerMuted } = useContext40(MediaVolumeContext);
   const { setPlayerMuted } = useContext40(SetMediaVolumeContext);
-  return useMemo32(() => {
+  return useMemo33(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -11607,7 +11645,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo33(() => {
+  const propsToPass = useMemo34(() => {
     return {
       muted: isMutedForPlayback,
       src: preloadedSrc,
@@ -11622,7 +11660,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     preloadedSrc,
     crossOriginValue
   ]);
-  const id = useMemo33(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo34(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11681,7 +11719,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef21(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect16(() => {
+  useEffect15(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -11753,7 +11791,7 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: "https://www.remotion.dev/docs/html5-audio",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo33(() => isStudio || registration !== null ? {
+  const metadata = useMemo34(() => isStudio || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
@@ -11779,17 +11817,17 @@ var AudioForPreview = forwardRef5(AudioForPreviewRefForwardingFunction);
 import {
   forwardRef as forwardRef6,
   useContext as useContext43,
-  useEffect as useEffect17,
+  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useRef as useRef22
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext35, useContext as useContext42, useMemo as useMemo34 } from "react";
+import { createContext as createContext36, useContext as useContext42, useMemo as useMemo35 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext35(null);
+var MediaEnabledContext = createContext36(null);
 var useVideoEnabled = () => {
   const context = useContext42(MediaEnabledContext);
   if (!context) {
@@ -11815,7 +11853,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -11853,7 +11891,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioStartFrame = useContext43(Html5MediaTrimContext);
   const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
   const { delayRender, continueRender } = useDelayRender();
-  const id = useMemo35(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo36(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11874,7 +11912,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -12107,9 +12145,9 @@ var Audio = Html5Audio;
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback18,
-  useEffect as useEffect18,
+  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef23,
   useState as useState18
 } from "react";
@@ -12185,7 +12223,7 @@ var SolidInner = ({
     overrideId: overrideId ?? null,
     videoConfigValues
   });
-  const sourceCanvas = useMemo36(() => {
+  const sourceCanvas = useMemo37(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -12203,7 +12241,7 @@ var SolidInner = ({
       reference.current = canvas;
     }
   }, [reference]);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
     }
@@ -12253,7 +12291,7 @@ var SolidInner = ({
     cancelRender,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo36(() => {
+  const canvasStyle = useMemo37(() => {
     return {
       width,
       height,
@@ -12384,12 +12422,12 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext36,
+  createContext as createContext37,
   forwardRef as forwardRef9,
   useCallback as useCallback19,
   useContext as useContext45,
   useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef24
 } from "react";
 import { jsx as jsx32, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -12499,7 +12537,7 @@ var defaultOnPaint = ({
   ctx.reset();
   ctx.drawElementImage(elementImage, 0, 0);
 };
-var HtmlInCanvasAncestorContext = createContext36(null);
+var HtmlInCanvasAncestorContext = createContext37(null);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -12526,7 +12564,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
-  const paintTargetMode = usesDirectLayoutCanvas ? "direct" : isRendering ? "copied" : "transferred";
+  const paintTargetMode = ancestorPaintState ? "copied" : usesDirectLayoutCanvas ? "direct" : isRendering ? "copied" : "transferred";
   if (!isHtmlInCanvasSupported()) {
     cancelRender(new Error(getHtmlInCanvasUnsupportedMessage()));
   }
@@ -12535,7 +12573,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const paintTargetRef = useRef24(null);
   const divRef = useRef24(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${paintTargetMode}`;
-  const paintState = useMemo37(() => {
+  const paintState = useMemo38(() => {
     const state = {
       pendingChildren: 0,
       generation: 0,
@@ -12593,6 +12631,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef24(false);
   const onInitCleanupRef = useRef24(null);
   const unmountedRef = useRef24(false);
+  const effectScratchCanvasesRef = useRef24(null);
   const paintingTargets = useRef24(new WeakMap);
   const onPaintCb = useCallback19(async () => {
     if (isRendering && paintState.pendingChildren > 0) {
@@ -12688,6 +12727,7 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error;
       }
+      let effectSourceCanvas = null;
       try {
         const currentOnPaint = onPaintRef.current;
         if (currentOnPaint) {
@@ -12703,6 +12743,41 @@ var HtmlInCanvasContent = forwardRef9(({
           if (paintResult) {
             await paintResult;
           }
+        } else if (paintTarget instanceof HTMLCanvasElement && effectsRef.current.some((effect) => !effect.params.disabled)) {
+          effectScratchCanvasesRef.current ??= {
+            source: document.createElement("canvas"),
+            previousOutput: document.createElement("canvas")
+          };
+          const { source: effectSource, previousOutput } = effectScratchCanvasesRef.current;
+          resizePaintTarget({
+            target: effectSource,
+            width: canvasWidth,
+            height: canvasHeight
+          });
+          resizePaintTarget({
+            target: previousOutput,
+            width: canvasWidth,
+            height: canvasHeight
+          });
+          const effectSourceCtx = effectSource.getContext("2d");
+          const previousOutputCtx = previousOutput.getContext("2d");
+          const paintTargetCtx = paintTarget.getContext("2d");
+          if (!effectSourceCtx || !previousOutputCtx || !paintTargetCtx) {
+            throw new Error("Failed to acquire 2D context for <HtmlInCanvas> canvas");
+          }
+          previousOutputCtx.reset();
+          previousOutputCtx.drawImage(paintTarget, 0, 0);
+          defaultOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+          effectSourceCtx.reset();
+          effectSourceCtx.drawImage(paintTarget, 0, 0);
+          paintTargetCtx.reset();
+          paintTargetCtx.drawImage(previousOutput, 0, 0);
+          effectSourceCanvas = effectSource;
         } else {
           defaultOnPaint({
             canvas: paintTarget,
@@ -12715,7 +12790,7 @@ var HtmlInCanvasContent = forwardRef9(({
         if (state) {
           await runEffectChain({
             state,
-            source: paintTarget,
+            source: effectSourceCanvas ?? paintTarget,
             effects: effectsRef.current,
             output: paintTarget,
             width: canvasWidth,
@@ -12835,13 +12910,13 @@ var HtmlInCanvasContent = forwardRef9(({
     isRendering,
     ancestorPaintState
   ]);
-  const innerStyle = useMemo37(() => {
+  const innerStyle = useMemo38(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo37(() => {
+  const canvasStyle = useMemo38(() => {
     return {
       width,
       height,
@@ -12851,7 +12926,7 @@ var HtmlInCanvasContent = forwardRef9(({
   return /* @__PURE__ */ jsxs3(HtmlInCanvasAncestorContext.Provider, {
     value: paintState,
     children: [
-      /* @__PURE__ */ jsxs3("canvas", {
+      /* @__PURE__ */ jsx32("canvas", {
         ref: paintTargetMode === "copied" ? canvas2dRef : setVisibleCanvasRef,
         width: canvasWidth,
         height: canvasHeight,
@@ -12861,14 +12936,17 @@ var HtmlInCanvasContent = forwardRef9(({
           visibility: "hidden",
           pointerEvents: "none"
         } : canvasStyle,
-        children: [
-          /* @__PURE__ */ jsx32("div", {
-            ref: divRef,
-            style: paintTargetMode === "copied" ? { ...innerStyle, visibility: "visible" } : innerStyle,
-            children
-          }),
-          canvasSiblings
-        ]
+        children: /* @__PURE__ */ jsxs3(DefaultPremountContext.Provider, {
+          value: 0,
+          children: [
+            /* @__PURE__ */ jsx32("div", {
+              ref: divRef,
+              style: paintTargetMode === "copied" ? { ...innerStyle, visibility: "visible" } : innerStyle,
+              children
+            }),
+            canvasSiblings
+          ]
+        })
       }, canvasSizeKey),
       paintTargetMode === "copied" ? /* @__PURE__ */ jsx32("canvas", {
         ref: setVisibleCanvasRef,
@@ -13028,7 +13106,7 @@ import {
   useContext as useContext46,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef25,
   useState as useState19
 } from "react";
@@ -13190,7 +13268,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender]);
-  const sourceCanvas = useMemo38(() => {
+  const sourceCanvas = useMemo39(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -13417,7 +13495,7 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
-  const isMedia = useMemo38(() => ({
+  const isMedia = useMemo39(() => ({
     type: "image",
     src
   }), [src]);
@@ -13613,7 +13691,7 @@ import {
   useCallback as useCallback22,
   useContext as useContext47,
   useLayoutEffect as useLayoutEffect19,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useRef as useRef27,
   useState as useState20
 } from "react";
@@ -13804,7 +13882,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const isMedia = useMemo39(() => ({
+  const isMedia = useMemo40(() => ({
     type: "image",
     src
   }), [src]);
@@ -14439,7 +14517,7 @@ var compositionsRef = React43.createRef();
 import {
   useCallback as useCallback25,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo41,
+  useMemo as useMemo42,
   useRef as useRef29,
   useState as useState22
 } from "react";
@@ -14448,15 +14526,15 @@ import {
 import {
   forwardRef as forwardRef13,
   useCallback as useCallback24,
-  useEffect as useEffect19,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect20,
-  useMemo as useMemo40,
+  useMemo as useMemo41,
   useRef as useRef28,
   useState as useState21
 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect19 : useLayoutEffect20;
+var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect18 : useLayoutEffect20;
 var CompositionRegistryFallbackProvider = withCommittedMetadata(CompositionRegistryFallbackContext.Provider);
 var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushSnapshotRef) => {
   const { isStudio } = useRemotionEnvironment();
@@ -14498,7 +14576,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
     observedCommitRef.current = true;
     queueSnapshot(snapshot);
   }, [queueSnapshot]);
-  const fallbackRegistry = useMemo40(() => {
+  const fallbackRegistry = useMemo41(() => {
     const entries = new Map;
     const getSnapshot = () => {
       const compositions = [];
@@ -14569,7 +14647,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
       }
     };
   }, [isStudio, useCommitObserver]);
-  const metadata = useMemo40(() => isStudio ? {
+  const metadata = useMemo41(() => isStudio ? {
     type: "composition-manager",
     id: managerId,
     onCommit: useCommitObserver ? onObservedSnapshot : null
@@ -14656,12 +14734,12 @@ var CompositionManagerProvider = ({
       }
     };
   }, [registry]);
-  const compositionManagerSetters = useMemo41(() => ({
+  const compositionManagerSetters = useMemo42(() => ({
     setCanvasContent,
     setCurrentAssetMetadata,
     onlyRenderComposition
   }), [onlyRenderComposition]);
-  const compositionManagerContextValue = useMemo41(() => {
+  const compositionManagerContextValue = useMemo42(() => {
     return {
       compositions,
       folders,
@@ -14676,6 +14754,8 @@ var CompositionManagerProvider = ({
     currentAssetMetadata,
     canvasContent
   ]);
+  const compositionManagerRef = useRef29(compositionManagerContextValue);
+  compositionManagerRef.current = compositionManagerContextValue;
   if (registrationError !== null) {
     throw registrationError;
   }
@@ -14684,9 +14764,12 @@ var CompositionManagerProvider = ({
     onSnapshot: onCommitRegistrations,
     children: /* @__PURE__ */ jsx38(CompositionManager.Provider, {
       value: compositionManagerContextValue,
-      children: /* @__PURE__ */ jsx38(CompositionSetters.Provider, {
-        value: compositionManagerSetters,
-        children
+      children: /* @__PURE__ */ jsx38(CompositionManagerRefContext.Provider, {
+        value: compositionManagerRef,
+        children: /* @__PURE__ */ jsx38(CompositionSetters.Provider, {
+          value: compositionManagerSetters,
+          children
+        })
       })
     })
   });
@@ -14935,7 +15018,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo42 } from "react";
+import { useMemo as useMemo43 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
@@ -14948,7 +15031,7 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo42(() => {
+  const logging = useMemo43(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx39(LogLevelContext.Provider, {
@@ -15249,7 +15332,7 @@ var setupEnvVariables = () => {
 };
 
 // src/Track.tsx
-import { useMemo as useMemo43, useState as useState23 } from "react";
+import { useMemo as useMemo44, useState as useState23 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var {
   freeze: _freeze,
@@ -15267,7 +15350,7 @@ var TrackWithoutSchema = ({
   ...props
 }) => {
   const [id] = useState23(() => String(Math.random()));
-  const value = useMemo43(() => ({ id, name }), [id, name]);
+  const value = useMemo44(() => ({ id, name }), [id, name]);
   return /* @__PURE__ */ jsx40(TimelineTrackContext.Provider, {
     value,
     children: /* @__PURE__ */ jsx40(SequenceWithoutSchema, {
@@ -15326,9 +15409,9 @@ import { useCallback as useCallback28 } from "react";
 import {
   useCallback as useCallback26,
   useContext as useContext50,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect21,
-  useMemo as useMemo44,
+  useMemo as useMemo45,
   useState as useState24
 } from "react";
 
@@ -15375,7 +15458,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo44(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo45(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15396,7 +15479,7 @@ var OffthreadVideoForRendering = ({
   if (!videoConfig) {
     throw new Error("No video config found");
   }
-  useEffect20(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -15431,14 +15514,14 @@ var OffthreadVideoForRendering = ({
     sequencePlaybackRate,
     audioStreamIndex
   ]);
-  const currentTime = useMemo44(() => {
+  const currentTime = useMemo45(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: audioStartFrame
     }) / videoConfig.fps;
   }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo44(() => {
+  const actualSrc = useMemo45(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -15526,7 +15609,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo44(() => {
+  const className = useMemo45(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props.className].filter(truthy).join(" ");
   }, [props.className]);
   const onImageFrame = useCallback26((img) => {
@@ -15554,20 +15637,20 @@ import React51, {
   forwardRef as forwardRef14,
   useCallback as useCallback27,
   useContext as useContext51,
-  useEffect as useEffect22,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
-  useMemo as useMemo45,
+  useMemo as useMemo46,
   useRef as useRef30,
   useState as useState25
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect20 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -15614,7 +15697,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef30(null);
-  const sharedSource = useMemo45(() => {
+  const sharedSource = useMemo46(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -15721,7 +15804,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect22(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15764,7 +15847,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   const currentOnDurationCallback = useRef30(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect22(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15781,7 +15864,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect22(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15792,7 +15875,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo45(() => {
+  const actualStyle = useMemo46(() => {
     return {
       ...style
     };
@@ -15861,7 +15944,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo45(() => isStudio || automaticOutlineRef || registration !== null ? {
+  const metadata = useMemo46(() => isStudio || automaticOutlineRef || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
@@ -16100,7 +16183,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React53, { useCallback as useCallback29, useMemo as useMemo46, useRef as useRef31, useState as useState26 } from "react";
+import React53, { useCallback as useCallback29, useMemo as useMemo47, useRef as useRef31, useState as useState26 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React53.useContext(CompositionManager);
@@ -16124,7 +16207,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React53.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React53.useContext(BufferingContextReact);
   const logLevelContext = React53.useContext(LogLevelContext);
-  return useMemo46(() => ({
+  return useMemo47(() => ({
     compositionManagerCtx,
     videoContext,
     timelineContext,
@@ -16231,7 +16314,7 @@ var ForwardedSequenceRegistry = ({
       });
     };
   }, [scope, scopeId, registry, commitRegistrationEnabled]);
-  const metadata = useMemo46(() => ({
+  const metadata = useMemo47(() => ({
     type: "sequence-manager",
     id: scopeId,
     onCommit: commitRegistrationEnabled ? onCommitSequences : null
@@ -16350,6 +16433,7 @@ var Internals = {
   resolveTrimProps,
   VideoForPreview,
   CompositionManager,
+  CompositionManagerRefContext,
   CompositionSetters,
   VisualModePropStatusesContext,
   VisualModePropStatusesRefContext,
@@ -16532,7 +16616,7 @@ var fontDataByUrl = new Map;
 // src/series/index.tsx
 import React55, {
   forwardRef as forwardRef15,
-  useMemo as useMemo47
+  useMemo as useMemo48
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -16604,7 +16688,7 @@ var validateSeriesSequenceProps = ({
 };
 var SeriesInner = (props) => {
   const pendingDeletions = usePendingSequenceDeletions();
-  const childrenValue = useMemo47(() => {
+  const childrenValue = useMemo48(() => {
     const flattenedChildren = flattenChildren(props.children).filter((child) => !OptimisticSequenceDeletion.isElementDeleted(child, pendingDeletions));
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -16814,10 +16898,10 @@ import { forwardRef as forwardRef17, useCallback as useCallback30, useContext as
 import {
   forwardRef as forwardRef16,
   useContext as useContext52,
-  useEffect as useEffect23,
+  useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect22,
-  useMemo as useMemo48,
+  useMemo as useMemo49,
   useRef as useRef32
 } from "react";
 
@@ -16977,7 +17061,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender, continueRender } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext52(RenderAssetManager);
-  const id = useMemo48(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo49(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -16998,7 +17082,7 @@ var VideoForRenderingForwardFunction = ({
   if (!videoConfig) {
     throw new Error("No video config found");
   }
-  useEffect23(() => {
+  useEffect22(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -17037,7 +17121,7 @@ var VideoForRenderingForwardFunction = ({
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect23(() => {
+  useEffect22(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }