remotion 4.0.536 → 4.0.538

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
 });
@@ -63,13 +64,7 @@ var Clipper = () => {
 };
 
 // src/Composition.tsx
-import {
-  Suspense,
-  useCallback as useCallback3,
-  useContext as useContext10,
-  useEffect as useEffect4,
-  useMemo as useMemo8
-} from "react";
+import { Suspense, useContext as useContext10, useEffect as useEffect4, useMemo as useMemo8 } from "react";
 import { createPortal } from "react-dom";
 
 // src/CanUseRemotionHooks.tsx
@@ -174,6 +169,15 @@ import {
 } from "react";
 var CompositionRegistryFallbackContext = createContext5(null);
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+var createEntryCleanup = (registry, identity) => {
+  if (registry === null) {
+    return;
+  }
+  return () => {
+    registry.entries.delete(identity);
+    registry.notifyCommit();
+  };
+};
 var useCommittedCompositionEntry = (entry) => {
   const registry = useContext(CompositionRegistryFallbackContext);
   const key = useRef({});
@@ -188,16 +192,7 @@ var useCommittedCompositionEntry = (entry) => {
     }
     registry.notifyCommit();
   }, [entry, registry]);
-  useIsomorphicLayoutEffect(() => {
-    if (registry === null) {
-      return;
-    }
-    const identity = key.current;
-    return () => {
-      registry.entries.delete(identity);
-      registry.notifyCommit();
-    };
-  }, [registry]);
+  useIsomorphicLayoutEffect(createEntryCleanup.bind(null, registry, key.current), [registry]);
 };
 
 // src/composition-render-error-context.ts
@@ -284,13 +279,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;
@@ -472,7 +469,7 @@ var useIsPlayer = () => {
 };
 
 // src/AbsoluteFillElement.tsx
-import { forwardRef, useMemo as useMemo2 } from "react";
+import React6, { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var hasTailwindClassName = ({
   className,
@@ -565,7 +562,7 @@ var AbsoluteFillElementRefForwarding = (props, ref) => {
     ...other
   });
 };
-var AbsoluteFillElement = forwardRef(AbsoluteFillElementRefForwarding);
+var AbsoluteFillElement = React6.memo(forwardRef(AbsoluteFillElementRefForwarding));
 
 // src/use-current-scale.ts
 import React10, { createContext as createContext14 } from "react";
@@ -761,12 +758,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
@@ -1166,6 +1163,7 @@ function cancelRenderInternal(scope, err) {
     error = Error("Rendering was cancelled");
   }
   if (scope) {
+    scope.remotion_cancelledErrorObject = error;
     scope.remotion_cancelledError = getErrorStackWithMessage(error);
   }
   throw error;
@@ -1271,7 +1269,9 @@ var delayRenderInternal = ({
           called
         ].filter(truthy).join(" ");
         if (environment.isClientSideRendering) {
-          scope.remotion_cancelledError = getErrorStackWithMessage(Error(message));
+          const error = Error(message);
+          scope.remotion_cancelledErrorObject = error;
+          scope.remotion_cancelledError = getErrorStackWithMessage(error);
         } else {
           cancelRenderInternal(scope, Error(message));
         }
@@ -1494,6 +1494,13 @@ var useSyncExternalStore2 = React12.useSyncExternalStore ?? shim;
 
 // src/use-lazy-component.ts
 var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? useEffect3 : useLayoutEffect3;
+var createComponentWrapper = (componentStore) => {
+  const Wrapper = (props) => {
+    const Comp = useSyncExternalStore2(componentStore.subscribe, componentStore.getSnapshot, componentStore.getSnapshot);
+    return React13.createElement(Comp, props);
+  };
+  return Wrapper;
+};
 var useLazyComponent = ({
   compProps,
   componentName,
@@ -1510,15 +1517,15 @@ var useLazyComponent = ({
       componentStore.setSnapshot(() => componentFromProps);
     }
   }, [componentFromProps, componentStore]);
+  const createWrapper = createComponentWrapper;
+  const Wrapper = useMemo7(createWrapper.bind(null, componentStore), [
+    componentStore
+  ]);
   const lazy = useMemo7(() => {
     if ("component" in compProps) {
       if (typeof document === "undefined" || noSuspense) {
         return compProps.component;
       }
-      const Wrapper = (props) => {
-        const Comp = useSyncExternalStore2(componentStore.subscribe, componentStore.getSnapshot, componentStore.getSnapshot);
-        return React13.createElement(Comp, props);
-      };
       return Wrapper;
     }
     if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
@@ -1528,7 +1535,7 @@ var useLazyComponent = ({
       return React13.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
-  }, [lazyComponentFromProps, componentStore]);
+  }, [lazyComponentFromProps, componentStore, Wrapper]);
   return lazy;
 };
 
@@ -1636,13 +1643,7 @@ var InnerComposition = ({
   const metadata = useMemo8(() => ({ type: "composition", id, value: registration }), [id, registration]);
   useCommittedCompositionEntry(metadata);
   const resolved = useResolvedVideoConfig(id);
-  const { setError, clearError } = useContext10(CompositionRenderErrorContext);
-  const onError = useCallback3((error) => {
-    setError(error);
-  }, [setError]);
-  const onClear = useCallback3(() => {
-    clearError();
-  }, [clearError]);
+  const { setError: onError, clearError: onClear } = useContext10(CompositionRenderErrorContext);
   const wrapRegistration = (content) => /* @__PURE__ */ jsx9(CommittedMetadataProvider, {
     value: null,
     _remotionCommitMetadata: metadata,
@@ -1741,7 +1742,7 @@ var getStackForControls = (controls) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.536";
+var VERSION = "4.0.538";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1779,12 +1780,11 @@ 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 +1805,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,12 +1825,12 @@ 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 {
   createContext as createContext19,
-  useCallback as useCallback4,
+  useCallback as useCallback3,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo10,
   useRef as useRef3,
@@ -1923,8 +1923,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const frame = frameState ?? _frame;
   const frameRef = useRef3(frame);
   frameRef.current = frame;
-  const readIsPlaying = useCallback4(() => playingStore.store.getSnapshot().playing, [playingStore]);
-  const readIsBuffering = useCallback4(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
+  const readIsPlaying = useCallback3(() => playingStore.store.getSnapshot().playing, [playingStore]);
+  const readIsBuffering = useCallback3(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
   const { delayRender, continueRender } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect4(() => {
@@ -2020,6 +2020,7 @@ var useBuffering = () => {
 };
 
 // src/timeline-position-state.ts
+var UnsubscribedTimelineContext = createContext20(null);
 var makeKey = () => {
   return `remotion.time-all`;
 };
@@ -2049,6 +2050,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 +2078,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 +2109,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 +2118,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 +2154,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 +2689,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 +2859,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 +2938,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);
@@ -2969,7 +2988,7 @@ var useSequenceActivityAdmission = (candidate) => {
 };
 
 // src/SequenceManager.tsx
-import React23, { useCallback as useCallback6, useContext as useContext23, useMemo as useMemo15, useRef as useRef5, useState as useState7 } from "react";
+import React23, { useCallback as useCallback5, useContext as useContext23, useMemo as useMemo15, useRef as useRef5, useState as useState7 } from "react";
 
 // src/sequence-registry-context.tsx
 import React20, { useContext as useContext20 } from "react";
@@ -3048,12 +3067,13 @@ var SequenceActivitySuspensionProvider = ({ children }) => {
 };
 
 // src/SequenceRegistryProvider.tsx
-import React22, { useCallback as useCallback5, useContext as useContext22, useMemo as useMemo14, useRef as useRef4, useState as useState6 } from "react";
+import React22, { useCallback as useCallback4, useContext as useContext22, useMemo as useMemo14, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React22.useEffect : React22.useLayoutEffect;
 var SequenceManagerRefProvider = withCommittedMetadata(SequenceManagerRefContext.Provider);
 var SequenceRegistryProvider = ({ children }) => {
   const { isStudio } = useRemotionEnvironment();
+  const logLevel = useLogLevel();
   const sequenceRegistrationEnabled = useContext22(SequenceRegistrationContext);
   const shouldObserveCommits = isStudio || sequenceRegistrationEnabled;
   const [sequenceManagerId] = useState6(() => String(Math.random()));
@@ -3077,7 +3097,7 @@ var SequenceRegistryProvider = ({ children }) => {
       return registry.getSnapshot();
     }
   }), [registry]);
-  const onCommitSequences = useCallback5((scopeId, snapshot, sequenceIds) => {
+  const onCommitSequences = useCallback4((scopeId, snapshot, sequenceIds) => {
     if (registrationObserverFailedRef.current || registrationUnmountedRef.current) {
       return;
     }
@@ -3117,6 +3137,13 @@ var SequenceRegistryProvider = ({ children }) => {
       committedOrderIdsRef.current = ids;
       committedOrderRef.current = order;
       committedRegistrationIdsRef.current = nextIds;
+      if (isStudio && logLevel === "trace") {
+        for (const sequence of sequences) {
+          if (!previousIds.has(sequence.id)) {
+            Log.trace({ logLevel, tag: null }, `[Sequence registration] Registered "${sequence.displayName}" (${sequence.id}) after commit`, sequence);
+          }
+        }
+      }
       setSequences((current) => reconcileRegistryEntries({
         current,
         entries: sequences,
@@ -3128,8 +3155,8 @@ var SequenceRegistryProvider = ({ children }) => {
         orderProperty: "timelineOrder"
       }));
     });
-  }, [sequenceManagerId, setSequences]);
-  const onCommitRootSequences = useCallback5((sequences, sequenceIds) => {
+  }, [isStudio, logLevel, sequenceManagerId, setSequences]);
+  const onCommitRootSequences = useCallback4((sequences, sequenceIds) => {
     if (!rootObservationFailedRef.current) {
       observedCommitRef.current = true;
       onCommitSequences(sequenceManagerId, sequences, sequenceIds);
@@ -3224,7 +3251,10 @@ var SequenceRegistryProvider = ({ children }) => {
     commitRegistrationEnabled,
     onCommitSequences
   ]);
-  const registerSequence = useCallback5((seq) => {
+  const registerSequence = useCallback4((seq) => {
+    if (isStudio) {
+      Log.trace({ logLevel, tag: null }, `[Sequence registration] Registered "${seq.displayName}" (${seq.id}) after commit`, seq);
+    }
     setSequences((seqs) => {
       return [
         ...seqs,
@@ -3234,8 +3264,8 @@ var SequenceRegistryProvider = ({ children }) => {
         }
       ];
     });
-  }, [setSequences]);
-  const updateSequence = useCallback5((seq) => {
+  }, [isStudio, logLevel, setSequences]);
+  const updateSequence = useCallback4((seq) => {
     setSequences((seqs) => {
       const index = seqs.findIndex((item) => item.id === seq.id);
       if (index === -1) {
@@ -3253,7 +3283,7 @@ var SequenceRegistryProvider = ({ children }) => {
       return next;
     });
   }, [setSequences]);
-  const unregisterSequence = useCallback5((seq) => {
+  const unregisterSequence = useCallback4((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, [setSequences]);
   const actions = useMemo14(() => {
@@ -3332,6 +3362,12 @@ var VisualModePropStatusesContext = React23.createContext({
 var VisualModePropStatusesRefContext = React23.createContext({
   current: {}
 });
+var VisualModePropStatusesSubscriptionContext = React23.createContext({
+  subscribe: () => () => {
+    return;
+  },
+  getSnapshot: () => null
+});
 var defaultVisualModeDragOverrides = {
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
@@ -3342,7 +3378,7 @@ var defaultVisualModeDragOverrides = {
 };
 var VisualModeDragOverridesContext = React23.createContext(defaultVisualModeDragOverrides);
 var VisualModeDragOverridesRefContext = React23.createContext({ current: defaultVisualModeDragOverrides });
-var useDragOverrideSnapshot = (subscribe, getSnapshot) => {
+var useVisualModeSnapshot = (subscribe, getSnapshot) => {
   const dormant = useContext23(SequenceActivityDormantContext);
   const [, forceUpdate] = useState7(0);
   const snapshot = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
@@ -3359,11 +3395,18 @@ var useDragOverridesForNodePath = (nodePath) => {
   const manager = useContext23(SequenceManagerActionsContext);
   const scopedSubscription = subscription?.manager === manager ? subscription : null;
   const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
-  const subscribe = useCallback6((listener) => scopedSubscription?.subscribe(key, listener) ?? (() => {
+  const subscribe = useCallback5((listener) => scopedSubscription?.subscribe(key, listener) ?? (() => {
     return;
   }), [key, scopedSubscription]);
-  const getSnapshot = useCallback6(() => scopedSubscription?.getSnapshot(key) ?? emptyDragOverrides, [key, scopedSubscription]);
-  return useDragOverrideSnapshot(subscribe, getSnapshot);
+  const getSnapshot = useCallback5(() => scopedSubscription?.getSnapshot(key) ?? emptyDragOverrides, [key, scopedSubscription]);
+  return useVisualModeSnapshot(subscribe, getSnapshot);
+};
+var usePropStatusForNodePath = (nodePath) => {
+  const subscription = useContext23(VisualModePropStatusesSubscriptionContext);
+  const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
+  const subscribe = useCallback5((listener) => subscription.subscribe(key, listener), [key, subscription]);
+  const getSnapshot = useCallback5(() => subscription.getSnapshot(key), [key, subscription]);
+  return useVisualModeSnapshot(subscribe, getSnapshot);
 };
 var useActiveFromDragOverrideKeys = () => {
   const snapshot = useContext23(ActiveFromDragOverrideKeysContext);
@@ -3375,11 +3418,11 @@ var useEffectDragOverridesForNodePath = (nodePath) => {
   const manager = useContext23(SequenceManagerActionsContext);
   const scopedSubscription = subscription?.manager === manager ? subscription : null;
   const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
-  const subscribe = useCallback6((listener) => scopedSubscription?.subscribeEffects(key, listener) ?? (() => {
+  const subscribe = useCallback5((listener) => scopedSubscription?.subscribeEffects(key, listener) ?? (() => {
     return;
   }), [key, scopedSubscription]);
-  const getSnapshot = useCallback6(() => scopedSubscription?.getEffectSnapshot(key) ?? emptyEffectDragOverrides, [key, scopedSubscription]);
-  return useDragOverrideSnapshot(subscribe, getSnapshot);
+  const getSnapshot = useCallback5(() => scopedSubscription?.getEffectSnapshot(key) ?? emptyEffectDragOverrides, [key, scopedSubscription]);
+  return useVisualModeSnapshot(subscribe, getSnapshot);
 };
 var VisualModeSettersContext = React23.createContext({
   setDragOverrides: () => {
@@ -3421,10 +3464,20 @@ var SequenceManagerProvider = ({ children }) => {
   });
   const [propStatuses, setPropStatusesMapState] = useState7({});
   const propStatusesRef = useRef5(propStatuses);
+  const requestedPropStatusesRef = useRef5(propStatuses);
+  const propStatusListeners = useRef5(new Map);
   useIsomorphicLayoutEffect4(() => {
+    const previous = propStatusesRef.current;
     propStatusesRef.current = propStatuses;
+    for (const [key, listeners] of propStatusListeners.current) {
+      if (previous[key] !== propStatuses[key]) {
+        for (const listener of listeners) {
+          listener();
+        }
+      }
+    }
   }, [propStatuses]);
-  const setDragOverridesBatch = useCallback6((overrides) => {
+  const setDragOverridesBatch = useCallback5((overrides) => {
     setDragOverrideState((prevState) => {
       const prev = prevState.overrides;
       let next = null;
@@ -3450,8 +3503,8 @@ var SequenceManagerProvider = ({ children }) => {
       return next === null ? prevState : { overrides: next, fromKeys: nextFromKeys };
     });
   }, []);
-  const setDragOverrides = useCallback6((nodePath, key, value) => setDragOverridesBatch([{ nodePath, key, value }]), [setDragOverridesBatch]);
-  const subscribeDragOverrides = useCallback6((key, listener) => {
+  const setDragOverrides = useCallback5((nodePath, key, value) => setDragOverridesBatch([{ nodePath, key, value }]), [setDragOverridesBatch]);
+  const subscribeDragOverrides = useCallback5((key, listener) => {
     if (key === null) {
       return () => {
         return;
@@ -3470,7 +3523,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     };
   }, []);
-  const getDragOverridesSnapshot = useCallback6((key) => {
+  const getDragOverridesSnapshot = useCallback5((key) => {
     return key === null ? emptyDragOverrides : dragOverridesStore.current.snapshot[key] ?? emptyDragOverrides;
   }, []);
   useIsomorphicLayoutEffect4(() => {
@@ -3487,7 +3540,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     }
   }, [dragOverrides]);
-  const subscribeEffectDragOverrides = useCallback6((key, listener) => {
+  const subscribeEffectDragOverrides = useCallback5((key, listener) => {
     if (key === null) {
       return () => {
         return;
@@ -3506,7 +3559,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     };
   }, []);
-  const getEffectDragOverridesSnapshot = useCallback6((key) => {
+  const getEffectDragOverridesSnapshot = useCallback5((key) => {
     return key === null ? emptyEffectDragOverrides : effectDragOverridesStore.current.byNode.get(key) ?? emptyEffectDragOverrides;
   }, []);
   useIsomorphicLayoutEffect4(() => {
@@ -3550,7 +3603,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     }
   }, [effectDragOverridesState]);
-  const clearDragOverrides = useCallback6((nodePath) => {
+  const clearDragOverrides = useCallback5((nodePath) => {
     setDragOverrideState((prevState) => {
       const prev = prevState.overrides;
       const key = makeSequencePropsSubscriptionKey(nodePath);
@@ -3564,7 +3617,7 @@ var SequenceManagerProvider = ({ children }) => {
       return { overrides: next, fromKeys: nextFromKeys };
     });
   }, []);
-  const setEffectDragOverridesBatch = useCallback6((overrides) => {
+  const setEffectDragOverridesBatch = useCallback5((overrides) => {
     setEffectDragOverridesState((prev) => {
       let next = null;
       for (const { nodePath, effectIndex, key, value } of overrides) {
@@ -3584,8 +3637,8 @@ var SequenceManagerProvider = ({ children }) => {
       return next ?? prev;
     });
   }, []);
-  const setEffectDragOverrides = useCallback6((nodePath, effectIndex, key, value) => setEffectDragOverridesBatch([{ nodePath, effectIndex, key, value }]), [setEffectDragOverridesBatch]);
-  const clearEffectDragOverrides = useCallback6((nodePath, effectIndex) => {
+  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => setEffectDragOverridesBatch([{ nodePath, effectIndex, key, value }]), [setEffectDragOverridesBatch]);
+  const clearEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     setEffectDragOverridesState((prev) => {
       const mapKey = effectDragOverridesKey(nodePath, effectIndex);
       if (!prev[mapKey]) {
@@ -3596,8 +3649,17 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const setPropStatuses = useCallback6((nodePath, values) => {
-    setPropStatusesMapState((prev) => {
+  const updatePropStatuses = useCallback5((update) => {
+    const previous = requestedPropStatusesRef.current;
+    const next = update(previous);
+    if (next === previous) {
+      return;
+    }
+    requestedPropStatusesRef.current = next;
+    setPropStatusesMapState(next);
+  }, []);
+  const setPropStatuses = useCallback5((nodePath, values) => {
+    updatePropStatuses((prev) => {
       const key = makeSequencePropsSubscriptionKey(nodePath);
       const prevKey = prev[key];
       const newKey = values(prevKey);
@@ -3606,9 +3668,9 @@ var SequenceManagerProvider = ({ children }) => {
       }
       return { ...prev, [key]: newKey };
     });
-  }, []);
-  const remapPropStatuses = useCallback6((remappings) => {
-    setPropStatusesMapState((prev) => {
+  }, [updatePropStatuses]);
+  const remapPropStatuses = useCallback5((remappings) => {
+    updatePropStatuses((prev) => {
       const next = { ...prev };
       for (const remapping of remappings) {
         delete next[makeSequencePropsSubscriptionKey(remapping.previousNodePath)];
@@ -3620,7 +3682,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
       return next;
     });
-  }, []);
+  }, [updatePropStatuses]);
   const dragOverridesSubscription = useMemo15(() => ({
     subscribe: subscribeDragOverrides,
     getSnapshot: getDragOverridesSnapshot,
@@ -3632,10 +3694,10 @@ var SequenceManagerProvider = ({ children }) => {
     subscribeDragOverrides,
     subscribeEffectDragOverrides
   ]);
-  const getDragOverrides = useCallback6((nodePath) => {
+  const getDragOverrides = useCallback5((nodePath) => {
     return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
   }, [dragOverrides]);
-  const getEffectDragOverrides = useCallback6((nodePath, effectIndex) => {
+  const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
   const propStatusesContext = useMemo15(() => {
@@ -3643,6 +3705,28 @@ var SequenceManagerProvider = ({ children }) => {
       propStatuses
     };
   }, [propStatuses]);
+  const propStatusesSubscription = useMemo15(() => ({
+    subscribe: (key, listener) => {
+      if (key === null) {
+        return () => {
+          return;
+        };
+      }
+      let listeners = propStatusListeners.current.get(key);
+      if (!listeners) {
+        listeners = new Set;
+        propStatusListeners.current.set(key, listeners);
+      }
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          propStatusListeners.current.delete(key);
+        }
+      };
+    },
+    getSnapshot: (key) => key === null ? null : requestedPropStatusesRef.current[key] ?? null
+  }), []);
   const dragOverridesContext = useMemo15(() => {
     return {
       getDragOverrides,
@@ -3674,20 +3758,23 @@ var SequenceManagerProvider = ({ children }) => {
   return /* @__PURE__ */ jsx16(SequenceRegistryProvider, {
     children: /* @__PURE__ */ jsx16(VisualModePropStatusesRefContext.Provider, {
       value: propStatusesRef,
-      children: /* @__PURE__ */ jsx16(VisualModePropStatusesContext.Provider, {
-        value: propStatusesContext,
-        children: /* @__PURE__ */ jsx16(SequenceManagerScopeProviders, {
-          dragOverridesSubscription,
-          fromKeys: dragOverrideState.fromKeys,
-          children: /* @__PURE__ */ jsx16(VisualModeDragOverridesContext.Provider, {
-            value: dragOverridesContext,
-            children: /* @__PURE__ */ jsx16(VisualModeDragOverridesRefContext.Provider, {
-              value: dragOverridesRef,
-              children: /* @__PURE__ */ jsx16(VisualModeSettersContext.Provider, {
-                value: settersContext,
-                children: /* @__PURE__ */ jsx16(VisualModeBatchSettersContext.Provider, {
-                  value: batchSettersContext,
-                  children
+      children: /* @__PURE__ */ jsx16(VisualModePropStatusesSubscriptionContext.Provider, {
+        value: propStatusesSubscription,
+        children: /* @__PURE__ */ jsx16(VisualModePropStatusesContext.Provider, {
+          value: propStatusesContext,
+          children: /* @__PURE__ */ jsx16(SequenceManagerScopeProviders, {
+            dragOverridesSubscription,
+            fromKeys: dragOverrideState.fromKeys,
+            children: /* @__PURE__ */ jsx16(VisualModeDragOverridesContext.Provider, {
+              value: dragOverridesContext,
+              children: /* @__PURE__ */ jsx16(VisualModeDragOverridesRefContext.Provider, {
+                value: dragOverridesRef,
+                children: /* @__PURE__ */ jsx16(VisualModeSettersContext.Provider, {
+                  value: settersContext,
+                  children: /* @__PURE__ */ jsx16(VisualModeBatchSettersContext.Provider, {
+                    value: batchSettersContext,
+                    children
+                  })
                 })
               })
             })
@@ -3699,15 +3786,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
 });
 
@@ -3723,16 +3810,17 @@ var usePremounting = ({
   hideWhilePremounted
 }) => {
   const parentPremountContext = useContext24(PremountContext);
-  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   const environment = useRemotionEnvironment();
   const { fps } = useVideoConfig();
   const defaultPremountInSeconds = useContext24(DefaultPremountContext);
   const effectivePremountFor = premountFor ?? Math.round(defaultPremountInSeconds * fps);
   const effectivePostmountFor = postmountFor ?? 0;
+  const needsFrame = !environment.isRendering && (effectivePremountFor !== 0 || effectivePostmountFor !== 0);
+  const frame = useCurrentFrameWithOptionalSubscription(needsFrame) - parentPremountContext.premountFramesRemaining;
   const endExclusive = from + durationInFrames;
   const sequenceContext = useContext24(SequenceContext);
   const boundaryTolerance = getSequenceBoundaryTolerance({
-    absoluteFrame: useTimelinePosition(),
+    absoluteFrame: useTimelinePositionWithOptionalSubscription(needsFrame),
     cumulatedFrom: sequenceContext ? sequenceContext.cumulatedFrom + sequenceContext.relativeFrom : 0,
     from,
     parentPlaybackRate: sequenceContext?.playbackRate ?? 1,
@@ -3822,11 +3910,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 +3952,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) => {
@@ -5011,27 +5099,30 @@ function springCalculation({
     stiffness: config.stiffness ?? defaultSpringConfig.stiffness,
     overshootClamping: config.overshootClamping ?? defaultSpringConfig.overshootClamping
   };
-  const cacheKey = [
-    frame,
+  const configKey = [
     fps,
     resolvedConfig.damping,
     resolvedConfig.mass,
     resolvedConfig.overshootClamping,
     resolvedConfig.stiffness
   ].join("-");
+  const cacheKey = `${frame}-${configKey}`;
   if (calculationCache[cacheKey]) {
     return calculationCache[cacheKey];
   }
-  let animation = {
+  const frameClamped = Math.max(0, frame);
+  const previousFrame = Math.ceil(frameClamped) - 1;
+  const previousAnimation = previousFrame >= 0 ? calculationCache[`${previousFrame}-${configKey}`] : undefined;
+  let animation = previousAnimation ?? {
     lastTimestamp: 0,
     current: from,
     toValue: to,
     velocity: 0,
     prevPosition: 0
   };
-  const frameClamped = Math.max(0, frame);
   const unevenRest = frameClamped % 1;
-  for (let f = 0;f <= Math.floor(frameClamped); f++) {
+  const startFrame = previousAnimation ? previousFrame + 1 : 0;
+  for (let f = startFrame;f <= Math.floor(frameClamped); f++) {
     const time = f / fps * 1000;
     animation = advance({
       animation,
@@ -5171,6 +5262,7 @@ function spring({
 // src/easing.ts
 var clampUnit = (t) => Math.min(1, Math.max(0, t));
 var springEasingDurationInFrames = 30;
+var easeBezier = null;
 
 class Easing {
   static step0(n) {
@@ -5183,7 +5275,8 @@ class Easing {
     return t;
   }
   static ease(t) {
-    return Easing.bezier(0.42, 0, 1, 1)(t);
+    easeBezier ??= Easing.bezier(0.42, 0, 1, 1);
+    return easeBezier(t);
   }
   static quad(t) {
     return t * t;
@@ -5291,23 +5384,23 @@ var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
 function modernColorCall(name) {
   return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
 }
+var cachedMatchers = {
+  rgb: undefined,
+  rgba: undefined,
+  hsl: undefined,
+  hsla: undefined,
+  hex3: undefined,
+  hex4: undefined,
+  hex5: undefined,
+  hex6: undefined,
+  hex8: undefined,
+  oklch: undefined,
+  oklab: undefined,
+  lab: undefined,
+  lch: undefined,
+  hwb: undefined
+};
 function getMatchers() {
-  const cachedMatchers = {
-    rgb: undefined,
-    rgba: undefined,
-    hsl: undefined,
-    hsla: undefined,
-    hex3: undefined,
-    hex4: undefined,
-    hex5: undefined,
-    hex6: undefined,
-    hex8: undefined,
-    oklch: undefined,
-    oklab: undefined,
-    lab: undefined,
-    lch: undefined,
-    hwb: undefined
-  };
   if (cachedMatchers.rgb === undefined) {
     cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
     cachedMatchers.rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
@@ -5970,11 +6063,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 +6076,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 +6149,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 +6160,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 +6171,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,17 +6184,18 @@ 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;
 };
-var getEffectPropStatusesCtx = ({
-  propStatuses,
-  nodePath,
-  effectIndex
+var getEffectStatusForSequenceStatus = ({
+  status,
+  effectIndex,
+  videoConfigValues
 }) => {
-  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
   if (!status) {
     return { type: "cannot-update-sequence", reason: "not-found" };
   }
@@ -6112,18 +6211,31 @@ var getEffectPropStatusesCtx = ({
   }
   return {
     type: "can-update-effect",
-    props: evaluateSourcePropStatuses(effect.props, nodePath.videoConfigValues)
+    props: evaluateSourcePropStatuses(effect.props, videoConfigValues)
   };
 };
-var getPropStatusesCtx = (propStatuses, nodePath) => {
-  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
+var getEffectPropStatusesCtx = ({
+  propStatuses,
+  nodePath,
+  effectIndex
+}) => {
+  return getEffectStatusForSequenceStatus({
+    status: propStatuses[makeSequencePropsSubscriptionKey(nodePath)] ?? null,
+    effectIndex,
+    videoConfigValues: nodePath.videoConfigValues
+  });
+};
+var getPropStatusesForSequenceStatus = (status, videoConfigValues) => {
   if (!status) {
     return;
   }
   if (!status.canUpdate) {
     return;
   }
-  return evaluateSourcePropStatuses(status.props, nodePath.videoConfigValues);
+  return evaluateSourcePropStatuses(status.props, videoConfigValues);
+};
+var getPropStatusesCtx = (propStatuses, nodePath) => {
+  return getPropStatusesForSequenceStatus(propStatuses[makeSequencePropsSubscriptionKey(nodePath)] ?? null, nodePath.videoConfigValues);
 };
 var useMemoizedEffects = ({
   effects,
@@ -6131,46 +6243,60 @@ var useMemoizedEffects = ({
   videoConfigValues
 }) => {
   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 sequenceStatus = usePropStatusForNodePath(nodePath);
+  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({
-      propStatuses,
-      nodePath: { ...nodePath, videoConfigValues },
-      effectIndex: index
+    const status = getEffectStatusForSequenceStatus({
+      status: sequenceStatus,
+      effectIndex,
+      videoConfigValues
     });
-    const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
+    return status.type === "can-update-effect" ? status.props : null;
+  }), [effects.length, nodePath, sequenceStatus, 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 +6697,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);
 };
@@ -6608,22 +6734,20 @@ var withInteractivitySchema = ({
         ref
       });
     }
-    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 +6776,21 @@ var withInteractivitySchema = ({
     });
     const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const dragOverrides = useDragOverridesForNodePath(nodePath);
+    const sequenceStatus = usePropStatusForNodePath(nodePath);
+    const propStatus = useMemo19(() => getPropStatusesForSequenceStatus(sequenceStatus, videoConfigValues), [sequenceStatus, 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 +6813,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,9 +6845,26 @@ 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 getSequenceRegistration = (sequence) => {
+  return sequence;
+};
+var getSequenceStack = (stack) => {
+  return stack;
+};
+var getSequenceCurrentFrame = (ref) => {
+  return ref.current;
+};
+var setSequenceWrapperRef = (ref, wrapperRef, node) => {
+  wrapperRef.current = node;
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+};
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   trimBefore = 0,
@@ -6875,13 +7010,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 +7024,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 +7057,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const loopContextValue = useMemo19(() => {
+  const loopContextValue = useMemo20(() => {
     if (loopPeriod === null) {
       return null;
     }
@@ -6931,7 +7066,7 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: contentDurationInFrames
     };
   }, [contentDurationInFrames, loopIteration, loopPeriod]);
-  const resolvedLoopDisplay = useMemo19(() => {
+  const resolvedLoopDisplay = useMemo20(() => {
     if (loopDisplay || loopPeriod === null) {
       return loopDisplay;
     }
@@ -6941,21 +7076,21 @@ 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 getStack = useMemo20(() => getSequenceStack.bind(null, registrationStack), [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
   const currentFrame = registeredFrozenFrame ?? (absoluteFrame - currentSequenceStart) * cumulativePlaybackRate;
   const currentFrameRef = useRef8(currentFrame);
   useLayoutEffect8(() => {
     currentFrameRef.current = currentFrame;
   }, [currentFrame]);
-  const getCurrentFrame = useCallback7(() => currentFrameRef.current, []);
+  const getCurrentFrame = useMemo20(() => getSequenceCurrentFrame.bind(null, currentFrameRef), [currentFrameRef]);
   const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
@@ -6973,8 +7108,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;
     }
@@ -6996,7 +7131,7 @@ var RegularSequenceRefForwardingFunction = ({
     controlsSchema,
     controlsSupportsEffects
   ]);
-  const getSequenceForRegistration = useCallback7(() => {
+  const sequenceForRegistration = useMemo20(() => {
     const trackRegistration = timelineTrack ? {
       timelineTrack: {
         ...timelineTrack,
@@ -7130,6 +7265,7 @@ var RegularSequenceRefForwardingFunction = ({
     frozenMediaFrame,
     singleChildComponent
   ]);
+  const getSequenceForRegistration = useMemo20(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
   const registration = useSequenceRegistration({
     getSequence: env.isStudio || sequenceRegistrationEnabled ? getSequenceForRegistration : null,
     id
@@ -7173,15 +7309,8 @@ var RegularSequenceRefForwardingFunction = ({
     bottom: resolvedCropBottom,
     style: styleIfThere
   });
-  const sequenceRef = useCallback7((node) => {
-    wrapperRefForOutline.current = node;
-    if (typeof ref === "function") {
-      ref(node);
-    } else if (ref) {
-      ref.current = node;
-    }
-  }, [ref]);
-  const defaultStyle = useMemo19(() => {
+  const sequenceRef = useMemo20(() => setSequenceWrapperRef.bind(null, ref, wrapperRefForOutline), [ref, wrapperRefForOutline]);
+  const defaultStyle = useMemo20(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -7195,7 +7324,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,
@@ -7328,7 +7457,7 @@ var SequenceWithoutFrom = withInteractivitySchema({
 });
 
 // src/AbsoluteFill.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var absoluteFillSchema = {
   ...baseSchema,
@@ -7441,7 +7570,7 @@ var AbsoluteFillInner = ({
   ...divProps
 }) => {
   const videoConfig = useUnsafeVideoConfig();
-  const callbackRef = useCallback8((element) => {
+  const callbackRef = useCallback6((element) => {
     setRef(ref, element);
   }, [ref]);
   if (videoConfig === null) {
@@ -7483,7 +7612,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 +7619,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 +7629,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 +7642,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 useCallback7, useImperativeHandle, useMemo as useMemo23, useRef as useRef10 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -7884,7 +8012,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 +8034,7 @@ var useEffectChainState = (effectsOutputSize = null) => {
       }
     };
   }, []);
-  return useMemo21(() => ({
+  return useMemo22(() => ({
     get: (width, height) => {
       width = effectWidth ?? width;
       height = effectHeight ?? height;
@@ -7930,13 +8058,13 @@ 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;
     }
     return document.createElement("canvas");
   }, []);
-  const draw = useCallback9((imageData) => {
+  const draw = useCallback7((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -8273,6 +8401,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 +8430,7 @@ var AnimatedImageContent = forwardRef4(({
     const controller = new AbortController;
     let cancelled = false;
     let continued = false;
+    let decoder = null;
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -8319,6 +8449,8 @@ var AnimatedImageContent = forwardRef4(({
         d.close();
         return;
       }
+      decoder = d;
+      activeDecoderRef.current = d;
       setDecodedImage({ decoder: d, handle: decodeHandle });
     }).catch((err) => {
       if (cancelled) {
@@ -8337,6 +8469,8 @@ var AnimatedImageContent = forwardRef4(({
     });
     return () => {
       cancelled = true;
+      activeDecoderRef.current = null;
+      decoder?.close();
       controller.abort();
       continueRenderOnce();
     };
@@ -8349,13 +8483,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 +8770,11 @@ import { useContext as useContext29, useLayoutEffect as useLayoutEffect11, useSt
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext28,
-  useCallback as useCallback10,
+  createContext as createContext29,
+  useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef12,
   useState as useState11
 } from "react";
@@ -8683,7 +8812,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var RenderAssetManager = createContext28({
+var RenderAssetManager = createContext29({
   registerRenderAsset: () => {
     return;
   },
@@ -8695,7 +8824,7 @@ var RenderAssetManager = createContext28({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState11([]);
   const renderAssetsRef = useRef12([]);
-  const registerRenderAsset = useCallback10((renderAsset) => {
+  const registerRenderAsset = useCallback8((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -8712,7 +8841,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback10((id) => {
+  const unregisterRenderAsset = useCallback8((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -8726,7 +8855,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo23(() => {
+  const contextValue = useMemo24(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -8799,7 +8928,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback17, useContext as useContext44 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback15, useContext as useContext44, useMemo as useMemo37 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -8841,9 +8970,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 +9016,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 +9073,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 +9084,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState13(() => preloads);
-  useEffect9(() => {
+  useEffect8(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -9271,7 +9400,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 +9418,10 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext31({
+var onMediaDuration = (setDurations, src, durationInSeconds) => {
+  setDurations({ type: "got-duration", durationInSeconds, src });
+};
+var DurationsContext = createContext32({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -9297,7 +9429,7 @@ var DurationsContext = createContext31({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo25(() => {
+  const value = useMemo26(() => {
     return {
       durations,
       setDurations
@@ -9310,14 +9442,12 @@ var DurationsContextProvider = ({ children }) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback14 } from "react";
 import React35, {
   forwardRef as forwardRef5,
   useContext as useContext41,
-  useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo33,
-  useRef as useRef21,
+  useMemo as useMemo34,
   useState as useState17
 } from "react";
 
@@ -9378,12 +9508,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,
+  useCallback as useCallback9,
   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 +9618,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 +9640,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 +9804,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 +9838,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));
@@ -9727,10 +9857,10 @@ var SharedAudioContextProvider = ({
   }, []);
   const prevEndTimes = useRef14({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef14(new Map);
-  const unscheduleAudioNode = useCallback11((node) => {
+  const unscheduleAudioNode = useCallback9((node) => {
     return nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo27(() => {
+  const scheduleAudioNode = useMemo28(() => {
     return ({
       node,
       mediaTimestamp,
@@ -9782,7 +9912,7 @@ var SharedAudioContextProvider = ({
       };
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
-  const resume = useCallback11(() => {
+  const resume = useCallback9(() => {
     const isAutoPlayAttempt = nextResumeIsAutoPlayAttempt.current;
     nextResumeIsAutoPlayAttempt.current = false;
     if (!ctxAndGain) {
@@ -9824,14 +9954,14 @@ var SharedAudioContextProvider = ({
     };
     return resumePromise.catch(() => {});
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
-  const resumeAsAutoPlay = useCallback11(() => {
+  const resumeAsAutoPlay = useCallback9(() => {
     nextResumeIsAutoPlayAttempt.current = true;
     return resume();
   }, [resume]);
-  const getIsResumingAudioContext = useCallback11(() => {
+  const getIsResumingAudioContext = useCallback9(() => {
     return isResuming.current?.promise ?? null;
   }, []);
-  const suspend = useCallback11(() => {
+  const suspend = useCallback9(() => {
     isResuming.current?.abortController.abort();
     if (!ctxAndGain) {
       return Promise.resolve();
@@ -9847,7 +9977,7 @@ var SharedAudioContextProvider = ({
     }
     return ctxAndGain.suspend();
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!_experimentalKeepAudioContextAlive) {
       return;
     }
@@ -9875,7 +10005,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo27(() => {
+  const audioContextValue = useMemo28(() => {
     return {
       sampleRate,
       audioContext: ctxAndGain?.audioContext ?? null,
@@ -9948,7 +10078,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     };
   }, [refs]);
   const takenAudios = useRef14(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback11(() => {
+  const rerenderAudios = useCallback9(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -9971,7 +10101,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback11((options) => {
+  const registerAudio = useCallback9((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -10000,7 +10130,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback11((id) => {
+  const unregisterAudio = useCallback9((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -10011,7 +10141,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback11(({
+  const updateAudio = useCallback9(({
     aud,
     audioId,
     id,
@@ -10045,7 +10175,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback11(() => {
+  const playAllAudios = useCallback9(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -10063,7 +10193,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo27(() => {
+  const audioTagsValue = useMemo28(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10078,7 +10208,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo27(() => {
+  const sharedAudioTagElements = useMemo28(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx25("audio", {
         ref,
@@ -10095,6 +10225,11 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     ]
   });
 };
+var unregisterSharedAudio = (tagsContext, id) => {
+  if (tagsContext && tagsContext.numberOfAudioTags > 0) {
+    tagsContext.unregisterAudio(id);
+  }
+};
 var useSharedAudio = ({
   aud,
   audioId,
@@ -10141,11 +10276,7 @@ var useSharedAudio = ({
       }
     }, [aud, tagsCtx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
-      return () => {
-        if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
-          tagsCtx.unregisterAudio(elem.id);
-        }
-      };
+      return unregisterSharedAudio.bind(null, tagsCtx, elem.id);
     }, [tagsCtx, elem.id]);
   }
   return elem;
@@ -10356,12 +10487,40 @@ var useVolume = ({
   return audioStuffRef;
 };
 
+// src/use-media-duration.ts
+import { useEffect as useEffect10, useRef as useRef17 } from "react";
+var subscribeToMediaDuration = (mediaRef, onDurationRef, src) => {
+  const { current } = mediaRef;
+  if (!current) {
+    return;
+  }
+  if (current.duration) {
+    onDurationRef.current?.(src ?? current.src, current.duration);
+    return;
+  }
+  const onLoadedMetadata = () => {
+    onDurationRef.current?.(src ?? current.src, current.duration);
+  };
+  current.addEventListener("loadedmetadata", onLoadedMetadata);
+  return () => {
+    current.removeEventListener("loadedmetadata", onLoadedMetadata);
+  };
+};
+var useMediaDuration = (mediaRef, onDuration, src, useCurrentSrc) => {
+  const onDurationRef = useRef17(onDuration);
+  onDurationRef.current = onDuration;
+  useEffect10(subscribeToMediaDuration.bind(null, mediaRef, onDurationRef, useCurrentSrc ? null : src), [mediaRef, src, useCurrentSrc]);
+};
+var scheduleMediaSourceCleanup = (cleanup) => {
+  requestAnimationFrame(() => cleanup?.());
+};
+
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback12, useContext as useContext35, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback10, 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 +10606,7 @@ var useBasicMediaInTimeline = ({
     loop
   });
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo28(() => {
+  const memoizedResult = useMemo29(() => {
     return {
       duration,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
@@ -10482,8 +10641,8 @@ var useMediaInTimelineRegistration = ({
   const canvasOutlinesEnabled = useContext35(SequenceOutlineContext);
   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 getStackForRegistration = useCallback10(() => stack, [stack]);
+  const automaticOutlineRef = useMemo29(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
   const { duration, finalDisplayName } = useBasicMediaInTimeline({
     src,
     displayName,
@@ -10495,7 +10654,7 @@ var useMediaInTimelineRegistration = ({
     loop: false,
     muted
   });
-  const getSequenceForRegistration = useCallback12(() => {
+  const getSequenceForRegistration = useCallback10(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -10563,26 +10722,26 @@ var useMediaInTimelineRegistration = ({
 
 // src/use-media-playback.ts
 import {
-  useCallback as useCallback15,
+  useCallback as useCallback13,
   useContext as useContext38,
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect14,
-  useRef as useRef19
+  useRef as useRef20
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback14, useMemo as useMemo31, useRef as useRef17 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo32, useRef as useRef18 } 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,
+  useCallback as useCallback11,
   useContext as useContext36,
   useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useState as useState15
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -10590,7 +10749,7 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
   const [blockCount, setBlockCount] = useState15(0);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const addBlock = useCallback13(() => {
+  const addBlock = useCallback11(() => {
     if (rendering) {
       return {
         unblock: () => {
@@ -10640,7 +10799,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 +10817,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");
@@ -10693,9 +10852,9 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef17(false);
+  const bufferingRef = useRef18(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback14((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback12((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -10766,7 +10925,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo31(() => {
+  return useMemo32(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -11019,14 +11178,14 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect13, useRef as useRef18 } from "react";
+import { useEffect as useEffect13, useRef as useRef19 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef18(null);
+  const currentTime = useRef19(null);
   useEffect13(() => {
     const { current } = mediaRef;
     if (current) {
@@ -11179,12 +11338,12 @@ var useMediaPlayback = ({
   const playerBuffering = useBuffering();
   const { fps } = useVideoConfig();
   const mediaTrimBefore = useContext38(Html5MediaTrimContext);
-  const lastSeekDueToShift = useRef19(null);
-  const lastSeek = useRef19(null);
+  const lastSeekDueToShift = useRef20(null);
+  const lastSeek = useRef20(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const isVariableFpsVideoMap = useRef19({});
-  const onVariableFpsVideoDetected = useCallback15(() => {
+  const isVariableFpsVideoMap = useRef20({});
+  const onVariableFpsVideoDetected = useCallback13(() => {
     if (!src) {
       return;
     }
@@ -11388,7 +11547,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 useEffect15, useRef as useRef21 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -11399,7 +11558,7 @@ var useMediaTag = ({
 }) => {
   const { audioAndVideoTags, isPlaying } = useTimelineContext();
   const { subscribePlaying } = useContext39(SetTimelineContext);
-  const isPlayingRef = useRef20(isPlaying);
+  const isPlayingRef = useRef21(isPlaying);
   isPlayingRef.current = isPlaying;
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -11462,12 +11621,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 +11637,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 +11766,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo33(() => {
+  const propsToPass = useMemo34(() => {
     return {
       muted: isMutedForPlayback,
       src: preloadedSrc,
@@ -11622,7 +11781,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,
@@ -11670,34 +11829,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   });
   const effectToUse = React35.useInsertionEffect ?? React35.useLayoutEffect;
   effectToUse(() => {
-    return () => {
-      requestAnimationFrame(() => {
-        cleanupOnMediaTagUnmount();
-      });
-    };
+    return scheduleMediaSourceCleanup.bind(null, cleanupOnMediaTagUnmount);
   }, [cleanupOnMediaTagUnmount]);
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef21(onDuration);
-  currentOnDurationCallback.current = onDuration;
-  useEffect16(() => {
-    const { current } = audioRef;
-    if (!current) {
-      return;
-    }
-    if (current.duration) {
-      currentOnDurationCallback.current?.(current.src, current.duration);
-      return;
-    }
-    const onLoadedMetadata = () => {
-      currentOnDurationCallback.current?.(current.src, current.duration);
-    };
-    current.addEventListener("loadedmetadata", onLoadedMetadata);
-    return () => {
-      current.removeEventListener("loadedmetadata", onLoadedMetadata);
-    };
-  }, [audioRef, src]);
+  useMediaDuration(audioRef, onDuration, src, true);
   if (initialShouldPreMountAudioElements) {
     return null;
   }
@@ -11736,7 +11873,7 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     volume: userPreferredVolume,
     audioEnabled: true
   });
-  const getStack = useCallback16(() => {
+  const getStack = useCallback14(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   const { registration } = useMediaInTimelineRegistration({
@@ -11753,7 +11890,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,
@@ -11776,20 +11913,20 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
 var AudioForPreview = forwardRef5(AudioForPreviewRefForwardingFunction);
 
 // src/audio/AudioForRendering.tsx
-import {
+import React36, {
   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 +11952,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
@@ -11827,6 +11964,8 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioRef = useRef22(null);
   const {
+    registerRenderAsset,
+    unregisterRenderAsset,
     volume: volumeProp,
     playbackRate,
     allowAmplificationDuringRender,
@@ -11842,7 +11981,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     loopVolumeCurveBehavior,
     pauseWhenBuffering,
     audioStreamIndex,
-    preservePitch: _preservePitch,
+    preservePitch,
     ...nativeProps
   } = props;
   const absoluteFrame = useTimelinePosition();
@@ -11851,9 +11990,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequenceContext = useContext43(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
   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 +12012,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -11891,7 +12029,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       playbackRate: (props.playbackRate ?? 1) * sequencePlaybackRate,
       toneFrequency: toneFrequency ?? 1,
       audioStartFrame,
-      audioStreamIndex: audioStreamIndex ?? 0
+      audioStreamIndex: audioStreamIndex ?? 0,
+      preservePitch: preservePitch ?? true
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -11909,7 +12048,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     toneFrequency,
     audioStartFrame,
     sequencePlaybackRate,
-    audioStreamIndex
+    audioStreamIndex,
+    preservePitch
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
@@ -11959,7 +12099,16 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     onError: onNativeError
   });
 };
-var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
+var MemoAudioForRendering = React36.memo(forwardRef6(AudioForRenderingRefForwardingFunction));
+var AudioForRendering = forwardRef6((props, ref) => {
+  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
+  return /* @__PURE__ */ jsx29(MemoAudioForRendering, {
+    ...props,
+    ref,
+    registerRenderAsset,
+    unregisterRenderAsset
+  });
+});
 
 // src/audio/html5-audio.tsx
 import { jsx as jsx30 } from "react/jsx-runtime";
@@ -11995,7 +12144,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 = useCallback17((e) => {
+  const onError = useCallback15((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) {
@@ -12009,9 +12158,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback17((src, durationInSeconds) => {
-    setDurations({ type: "got-duration", durationInSeconds, src });
-  }, [setDurations]);
+  const onDuration = useMemo37(() => onMediaDuration.bind(null, setDurations), [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   if (durationInFrames !== undefined) {
@@ -12106,10 +12253,10 @@ var Audio = Html5Audio;
 // src/effects/Solid.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback18,
-  useEffect as useEffect18,
+  useCallback as useCallback16,
+  useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo36,
+  useMemo as useMemo38,
   useRef as useRef23,
   useState as useState18
 } from "react";
@@ -12185,7 +12332,7 @@ var SolidInner = ({
     overrideId: overrideId ?? null,
     videoConfigValues
   });
-  const sourceCanvas = useMemo36(() => {
+  const sourceCanvas = useMemo38(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -12195,7 +12342,7 @@ var SolidInner = ({
     return canvas;
   }, []);
   const chainState = useEffectChainState(effectsOutputSize);
-  const canvasRef = useCallback18((canvas) => {
+  const canvasRef = useCallback16((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
       reference(canvas);
@@ -12203,7 +12350,7 @@ var SolidInner = ({
       reference.current = canvas;
     }
   }, [reference]);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
     }
@@ -12253,7 +12400,7 @@ var SolidInner = ({
     cancelRender,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo36(() => {
+  const canvasStyle = useMemo38(() => {
     return {
       width,
       height,
@@ -12384,15 +12531,71 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext36,
+  createContext as createContext37,
   forwardRef as forwardRef9,
-  useCallback as useCallback19,
+  useCallback as useCallback17,
   useContext as useContext45,
   useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo37,
+  useMemo as useMemo39,
   useRef as useRef24
 } from "react";
+
+// src/HtmlInCanvasFallback.tsx
 import { jsx as jsx32, jsxs as jsxs3 } from "react/jsx-runtime";
+var HtmlInCanvasFallback = ({ children, style, label }) => {
+  const currentScale = useCurrentScale({ dontThrowIfOutsideOfRemotion: true });
+  const scale = currentScale > 0 ? currentScale : 1;
+  return /* @__PURE__ */ jsxs3("div", {
+    style: { position: "relative", ...style },
+    children: [
+      children,
+      /* @__PURE__ */ jsxs3("div", {
+        className: "css-reset",
+        style: {
+          position: "absolute",
+          top: 8 / scale,
+          right: 8 / scale,
+          zIndex: 1000,
+          transform: `scale(${1 / scale})`,
+          transformOrigin: "top right",
+          maxWidth: `calc(${scale * 100}% - 16px)`,
+          padding: "8px 10px",
+          borderRadius: 6,
+          border: "1px solid #7f3540",
+          backgroundColor: "#2b171c",
+          boxShadow: "0 2px 8px #0003",
+          pointerEvents: "none",
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsx32("div", {
+            style: {
+              fontFamily: "Arial, Helvetica, sans-serif",
+              fontSize: 12,
+              fontWeight: 600,
+              lineHeight: 1.5,
+              color: "#ffabb5"
+            },
+            children: "HTML-in-canvas is not available"
+          }),
+          /* @__PURE__ */ jsx32("div", {
+            style: {
+              fontFamily: "Arial, Helvetica, sans-serif",
+              fontSize: 11,
+              fontWeight: 400,
+              lineHeight: 1.5,
+              color: "#e8bdc3"
+            },
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+};
+
+// src/HtmlInCanvas.tsx
+import { jsx as jsx33, jsxs as jsxs4 } from "react/jsx-runtime";
 var transferredOffscreenCanvases = new WeakMap;
 var getTransferredOffscreenCanvas = (canvas) => {
   const existing = transferredOffscreenCanvases.get(canvas);
@@ -12499,7 +12702,17 @@ var defaultOnPaint = ({
   ctx.reset();
   ctx.drawElementImage(elementImage, 0, 0);
 };
-var HtmlInCanvasAncestorContext = createContext36(null);
+var HtmlInCanvasAncestorContext = createContext37(null);
+var useHtmlInCanvasUnsupportedMessage = () => {
+  const ancestorPaintState = useContext45(HtmlInCanvasAncestorContext);
+  if (!isHtmlInCanvasSupported()) {
+    return getHtmlInCanvasUnsupportedMessage();
+  }
+  if (ancestorPaintState && !isHtmlInCanvasNestingSupported()) {
+    return `Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`;
+  }
+  return null;
+};
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -12526,7 +12739,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 +12748,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const paintTargetRef = useRef24(null);
   const divRef = useRef24(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${paintTargetMode}`;
-  const paintState = useMemo37(() => {
+  const paintState = useMemo39(() => {
     const state = {
       pendingChildren: 0,
       generation: 0,
@@ -12566,7 +12779,7 @@ var HtmlInCanvasContent = forwardRef9(({
     };
     return state;
   }, [continueRender, delayRender, ancestorPaintState]);
-  const setVisibleCanvasRef = useCallback19((node) => {
+  const setVisibleCanvasRef = useCallback17((node) => {
     if (paintTargetMode === "copied") {
       outputCanvasRef.current = node;
     } else {
@@ -12593,8 +12806,9 @@ 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 () => {
+  const onPaintCb = useCallback17(async () => {
     if (isRendering && paintState.pendingChildren > 0) {
       return;
     }
@@ -12688,6 +12902,7 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error;
       }
+      let effectSourceCanvas = null;
       try {
         const currentOnPaint = onPaintRef.current;
         if (currentOnPaint) {
@@ -12703,6 +12918,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 +12965,7 @@ var HtmlInCanvasContent = forwardRef9(({
         if (state) {
           await runEffectChain({
             state,
-            source: paintTarget,
+            source: effectSourceCanvas ?? paintTarget,
             effects: effectsRef.current,
             output: paintTarget,
             width: canvasWidth,
@@ -12835,23 +13085,23 @@ var HtmlInCanvasContent = forwardRef9(({
     isRendering,
     ancestorPaintState
   ]);
-  const innerStyle = useMemo37(() => {
+  const innerStyle = useMemo39(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo37(() => {
+  const canvasStyle = useMemo39(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  return /* @__PURE__ */ jsxs3(HtmlInCanvasAncestorContext.Provider, {
+  return /* @__PURE__ */ jsxs4(HtmlInCanvasAncestorContext.Provider, {
     value: paintState,
     children: [
-      /* @__PURE__ */ jsxs3("canvas", {
+      /* @__PURE__ */ jsx33("canvas", {
         ref: paintTargetMode === "copied" ? canvas2dRef : setVisibleCanvasRef,
         width: canvasWidth,
         height: canvasHeight,
@@ -12861,16 +13111,19 @@ 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__ */ jsxs4(DefaultPremountContext.Provider, {
+          value: 0,
+          children: [
+            /* @__PURE__ */ jsx33("div", {
+              ref: divRef,
+              style: paintTargetMode === "copied" ? { ...innerStyle, visibility: "visible" } : innerStyle,
+              children
+            }),
+            canvasSiblings
+          ]
+        })
       }, canvasSizeKey),
-      paintTargetMode === "copied" ? /* @__PURE__ */ jsx32("canvas", {
+      paintTargetMode === "copied" ? /* @__PURE__ */ jsx33("canvas", {
         ref: setVisibleCanvasRef,
         width: canvasWidth,
         height: canvasHeight,
@@ -12882,7 +13135,7 @@ var HtmlInCanvasContent = forwardRef9(({
 HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
 var HtmlInCanvasContentForRendering = forwardRef9((props, ref) => {
   const frame = useCurrentFrame();
-  return /* @__PURE__ */ jsx32(HtmlInCanvasContent, {
+  return /* @__PURE__ */ jsx33(HtmlInCanvasContent, {
     ...props,
     ref,
     renderFrame: frame
@@ -12899,6 +13152,7 @@ var HtmlInCanvasInner = forwardRef9(({
   onInit,
   pixelDensity,
   _remotionInternalCanvasSiblings,
+  _remotionInternalFallbackLabel = "Effects are not visible",
   controls,
   style,
   cropLeft,
@@ -12914,10 +13168,13 @@ var HtmlInCanvasInner = forwardRef9(({
   ...sequenceProps
 }, ref) => {
   const { isRendering } = useRemotionEnvironment();
+  const unsupportedMessage = useHtmlInCanvasUnsupportedMessage();
+  assertHtmlInCanvasDimensions(width, height);
+  resolveHtmlInCanvasPixelDensity(pixelDensity);
   const Content = isRendering ? HtmlInCanvasContentForRendering : HtmlInCanvasContent;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef24(null);
-  const setCanvasRef = useCallback19((node) => {
+  const setCanvasRef = useCallback17((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -12955,11 +13212,11 @@ var HtmlInCanvasInner = forwardRef9(({
     style: premountingStyle,
     componentName: "<HtmlInCanvas />"
   });
-  return /* @__PURE__ */ jsx32(Freeze, {
+  return /* @__PURE__ */ jsx33(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx32(Sequence, {
+    children: /* @__PURE__ */ jsx33(Sequence, {
       layout: "none",
       durationInFrames,
       name: name ?? "<HtmlInCanvas>",
@@ -12971,7 +13228,17 @@ var HtmlInCanvasInner = forwardRef9(({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx32(Content, {
+      children: !isRendering && unsupportedMessage !== null ? /* @__PURE__ */ jsx33(HtmlInCanvasFallback, {
+        style: { width, height, ...croppedStyle },
+        label: _remotionInternalFallbackLabel,
+        children: /* @__PURE__ */ jsx33(DefaultPremountContext.Provider, {
+          value: 0,
+          children: /* @__PURE__ */ jsx33("div", {
+            style: { width, height },
+            children
+          })
+        })
+      }) : /* @__PURE__ */ jsx33(Content, {
         ref: setCanvasRef,
         renderFrame: null,
         width,
@@ -13024,11 +13291,10 @@ addSequenceStackTraces(HtmlInCanvas);
 // src/canvas-image/CanvasImage.tsx
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback20,
   useContext as useContext46,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo38,
+  useMemo as useMemo40,
   useRef as useRef25,
   useState as useState19
 } from "react";
@@ -13045,7 +13311,7 @@ function truncateSrcForLabel(src) {
 }
 
 // src/canvas-image/CanvasImage.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var canvasImageSchema = {
   src: {
     type: "asset",
@@ -13072,6 +13338,26 @@ var canvasImageSchema = {
   ...borderSchema,
   ...borderRadiusSchema
 };
+var continueImageLoadDelay = (pendingLoadDelayRef, setIsLoadPending, continueRender, { markAsReady }) => {
+  const pending = pendingLoadDelayRef.current;
+  if (!pending || pending.continued) {
+    return;
+  }
+  pending.continued = true;
+  if (markAsReady) {
+    setIsLoadPending(false);
+  }
+  continueRender(pending.handle);
+  pendingLoadDelayRef.current = null;
+};
+var setCanvasRef = (setOutputCanvas, ref, canvas) => {
+  setOutputCanvas(canvas);
+  if (typeof ref === "function") {
+    ref(canvas);
+  } else if (ref) {
+    ref.current = canvas;
+  }
+};
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
     return new DOMException("Image loading was aborted", "AbortError");
@@ -13124,7 +13410,7 @@ var loadImage = ({
       onAbort();
       return;
     }
-    image.crossOrigin = crossOrigin ?? "anonymous";
+    image.crossOrigin = crossOrigin || "anonymous";
     image.src = src;
   });
 };
@@ -13178,32 +13464,14 @@ var CanvasImageContent = forwardRef10(({
   const [isLoadPending, setIsLoadPending] = useState19(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const continuePendingLoadDelay = useCallback20(({ markAsReady }) => {
-    const pending = pendingLoadDelayRef.current;
-    if (!pending || pending.continued) {
-      return;
-    }
-    pending.continued = true;
-    if (markAsReady) {
-      setIsLoadPending(false);
-    }
-    continueRender(pending.handle);
-    pendingLoadDelayRef.current = null;
-  }, [continueRender]);
-  const sourceCanvas = useMemo38(() => {
+  const continuePendingLoadDelay = useMemo40(() => continueImageLoadDelay.bind(null, pendingLoadDelayRef, setIsLoadPending, continueRender), [continueRender]);
+  const sourceCanvas = useMemo40(() => {
     if (typeof document === "undefined") {
       return null;
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback20((canvas) => {
-    setOutputCanvas(canvas);
-    if (typeof ref === "function") {
-      ref(canvas);
-    } else if (ref) {
-      ref.current = canvas;
-    }
-  }, [ref]);
+  const canvasRef = useMemo40(() => setCanvasRef.bind(null, setOutputCanvas, ref), [ref]);
   useLayoutEffect17(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
@@ -13366,7 +13634,7 @@ var CanvasImageContent = forwardRef10(({
     sourceCanvas,
     width
   ]);
-  return /* @__PURE__ */ jsx33("canvas", {
+  return /* @__PURE__ */ jsx34("canvas", {
     ...canvasProps,
     ref: canvasRef,
     width,
@@ -13417,7 +13685,7 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
-  const isMedia = useMemo38(() => ({
+  const isMedia = useMemo40(() => ({
     type: "image",
     src
   }), [src]);
@@ -13456,11 +13724,11 @@ var CanvasImageInner = forwardRef10(({
     style: premountingStyle,
     componentName: _remotionInternalCropComponentName ?? "<CanvasImage />"
   });
-  return /* @__PURE__ */ jsx33(Freeze, {
+  return /* @__PURE__ */ jsx34(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx33(Sequence, {
+    children: /* @__PURE__ */ jsx34(Sequence, {
       layout: "none",
       from: from ?? 0,
       trimBefore,
@@ -13478,8 +13746,8 @@ var CanvasImageInner = forwardRef10(({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx33(SequenceContent, {
-        children: /* @__PURE__ */ jsx33(CanvasImageContent, {
+      children: /* @__PURE__ */ jsx34(SequenceContent, {
+        children: /* @__PURE__ */ jsx34(CanvasImageContent, {
           ref: actualRef,
           src,
           crossOrigin,
@@ -13544,8 +13812,8 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback21, useLayoutEffect as useLayoutEffect18, useRef as useRef26 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11, useCallback as useCallback18, useLayoutEffect as useLayoutEffect18, useRef as useRef26 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -13579,7 +13847,7 @@ var IFrameRefForwarding = ({
     src,
     srcDoc
   ]);
-  const didLoad = useCallback21((e) => {
+  const didLoad = useCallback18((e) => {
     loadedSource.current = { src, srcDoc };
     if (handle.current !== null) {
       continueRender(handle.current);
@@ -13587,7 +13855,7 @@ var IFrameRefForwarding = ({
     }
     onLoad?.(e);
   }, [onLoad, continueRender, src, srcDoc]);
-  const didGetError = useCallback21((e) => {
+  const didGetError = useCallback18((e) => {
     loadedSource.current = { src, srcDoc };
     if (handle.current !== null) {
       continueRender(handle.current);
@@ -13599,7 +13867,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [onError, continueRender, src, srcDoc]);
-  return /* @__PURE__ */ jsx34("iframe", {
+  return /* @__PURE__ */ jsx35("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props,
     ref,
@@ -13610,17 +13878,130 @@ var IFrameRefForwarding = ({
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
-  useCallback as useCallback22,
   useContext as useContext47,
   useLayoutEffect as useLayoutEffect19,
-  useMemo as useMemo39,
+  useMemo as useMemo41,
   useRef as useRef27,
   useState as useState20
 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
+var setImageRef = (imageRef, ref, img) => {
+  imageRef.current = img;
+  if (typeof ref === "function") {
+    ref(img);
+  } else if (ref) {
+    ref.current = img;
+  }
+};
+var retryImage = (imageRef, timeout) => {
+  if (!imageRef.current) {
+    return;
+  }
+  const currentSrc = imageRef.current.src;
+  setTimeout(() => {
+    if (!imageRef.current) {
+      return;
+    }
+    const newSrc = imageRef.current?.src;
+    if (newSrc !== currentSrc) {
+      return;
+    }
+    imageRef.current.removeAttribute("src");
+    imageRef.current.setAttribute("src", newSrc);
+  }, timeout);
+};
+var handleImageError = ({
+  errors,
+  imageRef,
+  onError,
+  onImageError,
+  maxRetries,
+  cancelRender,
+  retryIn
+}, e) => {
+  if (!errors.current) {
+    return;
+  }
+  errors.current[imageRef.current?.src] = (errors.current[imageRef.current?.src] ?? 0) + 1;
+  if ((onError || onImageError) && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
+    onError?.(e);
+    onImageError?.(new Error("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src)));
+    return;
+  }
+  if ((errors.current[imageRef.current?.src] ?? 0) <= maxRetries) {
+    const backoff = exponentialBackoff2(errors.current[imageRef.current?.src] ?? 0);
+    console.warn(`Could not load image with source ${truncateSrcForLabel(imageRef.current?.src)}, retrying again in ${backoff}ms`);
+    retryIn(backoff);
+    return;
+  }
+  try {
+    cancelRender("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src));
+  } catch {}
+};
+var loadImage2 = ({
+  imageRef,
+  errors,
+  actualSrc,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  onImageFrame,
+  delayRender,
+  continueRender,
+  setIsLoading
+}) => {
+  if (window.process?.env?.NODE_ENV === "test") {
+    if (imageRef.current) {
+      imageRef.current.src = actualSrc;
+    }
+    return;
+  }
+  const { current } = imageRef;
+  if (!current) {
+    return;
+  }
+  setIsLoading(true);
+  const newHandle = delayRender("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
+    retries: delayRenderRetries ?? undefined,
+    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+  });
+  let unmounted = false;
+  const onComplete = () => {
+    if (unmounted) {
+      continueRender(newHandle);
+      return;
+    }
+    if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
+      delete errors.current[imageRef.current?.src];
+      console.info(`Retry successful - ${truncateSrcForLabel(imageRef.current?.src)} is now loaded`);
+    }
+    if (current) {
+      onImageFrame?.(current);
+    }
+    setIsLoading(false);
+    continueRender(newHandle);
+  };
+  if (!imageRef.current) {
+    onComplete();
+    return;
+  }
+  current.src = actualSrc;
+  current.decode().then(onComplete).catch((err) => {
+    console.warn(err);
+    if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
+      onComplete();
+    } else {
+      current.addEventListener("load", onComplete);
+    }
+  });
+  return () => {
+    unmounted = true;
+    current.removeEventListener("load", onComplete);
+    continueRender(newHandle);
+  };
+};
 var ImgContent = ({
   onError,
   onImageError,
@@ -13644,55 +14025,21 @@ var ImgContent = ({
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useCallback22((img) => {
-    imageRef.current = img;
-    if (typeof ref === "function") {
-      ref(img);
-    } else if (ref) {
-      ref.current = img;
-    }
-  }, [ref]);
+  const imageCallbackRef = useMemo41(() => setImageRef.bind(null, imageRef, ref ?? null), [ref]);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback22((timeout) => {
-    if (!imageRef.current) {
-      return;
-    }
-    const currentSrc = imageRef.current.src;
-    setTimeout(() => {
-      if (!imageRef.current) {
-        return;
-      }
-      const newSrc = imageRef.current?.src;
-      if (newSrc !== currentSrc) {
-        return;
-      }
-      imageRef.current.removeAttribute("src");
-      imageRef.current.setAttribute("src", newSrc);
-    }, timeout);
-  }, []);
+  const retryIn = useMemo41(() => retryImage.bind(null, imageRef), []);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const didGetError = useCallback22((e) => {
-    if (!errors.current) {
-      return;
-    }
-    errors.current[imageRef.current?.src] = (errors.current[imageRef.current?.src] ?? 0) + 1;
-    if ((onError || onImageError) && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
-      onError?.(e);
-      onImageError?.(new Error("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src)));
-      return;
-    }
-    if ((errors.current[imageRef.current?.src] ?? 0) <= maxRetries) {
-      const backoff = exponentialBackoff2(errors.current[imageRef.current?.src] ?? 0);
-      console.warn(`Could not load image with source ${truncateSrcForLabel(imageRef.current?.src)}, retrying again in ${backoff}ms`);
-      retryIn(backoff);
-      return;
-    }
-    try {
-      cancelRender("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src));
-    } catch {}
-  }, [cancelRender, maxRetries, onError, onImageError, retryIn]);
+  const didGetError = useMemo41(() => handleImageError.bind(null, {
+    errors,
+    imageRef,
+    onError: onError ?? null,
+    onImageError: onImageError ?? null,
+    maxRetries,
+    cancelRender,
+    retryIn
+  }), [cancelRender, maxRetries, onError, onImageError, retryIn]);
   if (typeof window !== "undefined") {
     useLayoutEffect19(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
@@ -13706,57 +14053,17 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect19(() => {
-      if (window.process?.env?.NODE_ENV === "test") {
-        if (imageRef.current) {
-          imageRef.current.src = actualSrc;
-        }
-        return;
-      }
-      const { current } = imageRef;
-      if (!current) {
-        return;
-      }
-      setIsLoading(true);
-      const newHandle = delayRender("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
-        retries: delayRenderRetries ?? undefined,
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-      });
-      let unmounted = false;
-      const onComplete = () => {
-        if (unmounted) {
-          continueRender(newHandle);
-          return;
-        }
-        if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
-          delete errors.current[imageRef.current?.src];
-          console.info(`Retry successful - ${truncateSrcForLabel(imageRef.current?.src)} is now loaded`);
-        }
-        if (current) {
-          onImageFrame?.(current);
-        }
-        setIsLoading(false);
-        continueRender(newHandle);
-      };
-      if (!imageRef.current) {
-        onComplete();
-        return;
-      }
-      current.src = actualSrc;
-      current.decode().then(onComplete).catch((err) => {
-        console.warn(err);
-        if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
-          onComplete();
-        } else {
-          current.addEventListener("load", onComplete);
-        }
-      });
-      return () => {
-        unmounted = true;
-        current.removeEventListener("load", onComplete);
-        continueRender(newHandle);
-      };
-    }, [
+    useLayoutEffect19(loadImage2.bind(null, {
+      imageRef,
+      errors,
+      actualSrc,
+      delayRenderRetries: delayRenderRetries ?? null,
+      delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
+      onImageFrame: onImageFrame ?? null,
+      delayRender,
+      continueRender,
+      setIsLoading
+    }), [
       actualSrc,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
@@ -13771,7 +14078,7 @@ var ImgContent = ({
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx35("img", {
+  return /* @__PURE__ */ jsx36("img", {
     ...props,
     ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
@@ -13804,7 +14111,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const isMedia = useMemo39(() => ({
+  const isMedia = useMemo41(() => ({
     type: "image",
     src
   }), [src]);
@@ -13838,11 +14145,11 @@ var NativeImgInner = ({
     style: premountingStyle,
     componentName: "<Img />"
   });
-  return /* @__PURE__ */ jsx35(Freeze, {
+  return /* @__PURE__ */ jsx36(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx35(Sequence, {
+    children: /* @__PURE__ */ jsx36(Sequence, {
       layout: "none",
       from: from ?? 0,
       trimBefore,
@@ -13859,8 +14166,8 @@ var NativeImgInner = ({
       controls,
       showInTimeline: showInTimeline ?? true,
       hidden,
-      children: /* @__PURE__ */ jsx35(SequenceContent, {
-        children: /* @__PURE__ */ jsx35(ImgContent, {
+      children: /* @__PURE__ */ jsx36(SequenceContent, {
+        children: /* @__PURE__ */ jsx36(ImgContent, {
           src,
           style: croppedStyle ?? undefined,
           ...props
@@ -13962,7 +14269,7 @@ var ImgInner = ({
 }) => {
   const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
-    return /* @__PURE__ */ jsx35(NativeImgInner, {
+    return /* @__PURE__ */ jsx36(NativeImgInner, {
       ...props,
       ref,
       hidden,
@@ -14007,7 +14314,7 @@ var ImgInner = ({
   const canvasHeight = typeof height === "number" ? height : undefined;
   const canvasProps = props;
   const canvasFit = getFitFromObjectFit(style) ?? "fill";
-  return /* @__PURE__ */ jsx35(CanvasImageWithPrivateProps, {
+  return /* @__PURE__ */ jsx36(CanvasImageWithPrivateProps, {
     src,
     width: canvasWidth,
     height: canvasHeight,
@@ -14052,8 +14359,8 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React42, { forwardRef as forwardRef12, useCallback as useCallback23, useContext as useContext48 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import React42, { forwardRef as forwardRef12, useCallback as useCallback19, useContext as useContext48 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
     return "dev.remotion.remotion";
@@ -14199,10 +14506,10 @@ var withSchema = (untypedOptions) => {
       style: premountingStyle,
       componentName
     });
-    return /* @__PURE__ */ jsx36(Freeze, {
+    return /* @__PURE__ */ jsx37(Freeze, {
       frame: freezeFrame,
       active: isPremountingOrPostmounting,
-      children: /* @__PURE__ */ jsx36(SequenceWithoutSchema, {
+      children: /* @__PURE__ */ jsx37(SequenceWithoutSchema, {
         _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity,
         layout,
         ...layout === "absolute-fill" ? {
@@ -14312,14 +14619,14 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       style: premountingStyle,
       componentName: displayName
     });
-    const callbackRef = useCallback23((element) => {
+    const callbackRef = useCallback19((element) => {
       setRef2(ref, element);
     }, [ref]);
-    return /* @__PURE__ */ jsx36(Freeze, {
+    return /* @__PURE__ */ jsx37(Freeze, {
       frame: freezeFrame,
       active: isPremountingOrPostmounting,
       _remotionInternalIsPremounting: premountingActive,
-      children: /* @__PURE__ */ jsx36(Sequence, {
+      children: /* @__PURE__ */ jsx37(Sequence, {
         layout: "none",
         from: from ?? 0,
         trimBefore,
@@ -14437,9 +14744,9 @@ var compositionsRef = React43.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback25,
+  useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo41,
+  useMemo as useMemo43,
   useRef as useRef29,
   useState as useState22
 } from "react";
@@ -14447,16 +14754,16 @@ import {
 // src/CompositionRegistryProvider.tsx
 import {
   forwardRef as forwardRef13,
-  useCallback as useCallback24,
-  useEffect as useEffect19,
+  useCallback as useCallback20,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect20,
-  useMemo as useMemo40,
+  useMemo as useMemo42,
   useRef as useRef28,
   useState as useState21
 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect19 : useLayoutEffect20;
+import { jsx as jsx38 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect18 : useLayoutEffect20;
 var CompositionRegistryFallbackProvider = withCommittedMetadata(CompositionRegistryFallbackContext.Provider);
 var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushSnapshotRef) => {
   const { isStudio } = useRemotionEnvironment();
@@ -14468,7 +14775,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
   const onSnapshotRef = useRef28(onSnapshot);
   const lastSnapshotRef = useRef28(null);
   const pendingSnapshotRef = useRef28(null);
-  const flushSnapshot = useCallback24(() => {
+  const flushSnapshot = useCallback20(() => {
     const pending = pendingSnapshotRef.current;
     pendingSnapshotRef.current = null;
     if (pending === null || unmountedRef.current) {
@@ -14483,7 +14790,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
     onSnapshotRef.current(committed);
   }, []);
   useImperativeHandle8(flushSnapshotRef, () => flushSnapshot, [flushSnapshot]);
-  const queueSnapshot = useCallback24((snapshot) => {
+  const queueSnapshot = useCallback20((snapshot) => {
     const alreadyPending = pendingSnapshotRef.current !== null;
     pendingSnapshotRef.current = snapshot;
     if (alreadyPending) {
@@ -14491,14 +14798,14 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
     }
     queueMicrotask(flushSnapshot);
   }, [flushSnapshot]);
-  const onObservedSnapshot = useCallback24((snapshot) => {
+  const onObservedSnapshot = useCallback20((snapshot) => {
     if (observerFailedRef.current) {
       return;
     }
     observedCommitRef.current = true;
     queueSnapshot(snapshot);
   }, [queueSnapshot]);
-  const fallbackRegistry = useMemo40(() => {
+  const fallbackRegistry = useMemo42(() => {
     const entries = new Map;
     const getSnapshot = () => {
       const compositions = [];
@@ -14569,12 +14876,12 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
       }
     };
   }, [isStudio, useCommitObserver]);
-  const metadata = useMemo40(() => isStudio ? {
+  const metadata = useMemo42(() => isStudio ? {
     type: "composition-manager",
     id: managerId,
     onCommit: useCommitObserver ? onObservedSnapshot : null
   } : null, [isStudio, managerId, onObservedSnapshot, useCommitObserver]);
-  return /* @__PURE__ */ jsx37(CompositionRegistryFallbackProvider, {
+  return /* @__PURE__ */ jsx38(CompositionRegistryFallbackProvider, {
     value: useCommitObserver ? null : fallbackRegistry,
     _remotionCommitMetadata: metadata,
     children
@@ -14582,7 +14889,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
 });
 
 // src/CompositionManagerProvider.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -14604,7 +14911,7 @@ var CompositionManagerProvider = ({
   const { compositions, folders } = useSyncExternalStore2(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
   const [canvasContent, setCanvasContent] = useState22(initialCanvasContent);
   const [currentAssetMetadata, setCurrentAssetMetadata] = useState22(null);
-  const onCommitRegistrations = useCallback25((pending) => {
+  const onCommitRegistrations = useCallback21((pending) => {
     const previousKeys = committedKeysRef.current;
     const previousDescriptors = committedDescriptorsRef.current;
     const existingIds = new Set(registry.getSnapshot().compositions.map((composition) => composition.id));
@@ -14656,12 +14963,12 @@ var CompositionManagerProvider = ({
       }
     };
   }, [registry]);
-  const compositionManagerSetters = useMemo41(() => ({
+  const compositionManagerSetters = useMemo43(() => ({
     setCanvasContent,
     setCurrentAssetMetadata,
     onlyRenderComposition
   }), [onlyRenderComposition]);
-  const compositionManagerContextValue = useMemo41(() => {
+  const compositionManagerContextValue = useMemo43(() => {
     return {
       compositions,
       folders,
@@ -14676,17 +14983,22 @@ var CompositionManagerProvider = ({
     currentAssetMetadata,
     canvasContent
   ]);
+  const compositionManagerRef = useRef29(compositionManagerContextValue);
+  compositionManagerRef.current = compositionManagerContextValue;
   if (registrationError !== null) {
     throw registrationError;
   }
-  return /* @__PURE__ */ jsx38(CompositionRegistryProvider, {
+  return /* @__PURE__ */ jsx39(CompositionRegistryProvider, {
     ref: flushSnapshotRef,
     onSnapshot: onCommitRegistrations,
-    children: /* @__PURE__ */ jsx38(CompositionManager.Provider, {
+    children: /* @__PURE__ */ jsx39(CompositionManager.Provider, {
       value: compositionManagerContextValue,
-      children: /* @__PURE__ */ jsx38(CompositionSetters.Provider, {
-        value: compositionManagerSetters,
-        children
+      children: /* @__PURE__ */ jsx39(CompositionManagerRefContext.Provider, {
+        value: compositionManagerRef,
+        children: /* @__PURE__ */ jsx39(CompositionSetters.Provider, {
+          value: compositionManagerSetters,
+          children
+        })
       })
     })
   });
@@ -14704,11 +15016,41 @@ var createElementSourceProxy = (api, sourceArgumentIndex, getSourceFileName) =>
         const source = sourceArgumentIndex === null ? null : argArray[sourceArgumentIndex];
         const existingStack = props?.[internalStackProp];
         const controlsStack = !existingStack && component === getSequenceComponent() && props?.controls ? getStackForControls(props.controls) : null;
-        const stack = existingStack || (controlsStack ?? (source && typeof source.fileName === "string" && typeof source.lineNumber === "number" && typeof source.columnNumber === "number" ? makeOriginalSourceStack({
-          fileName: getSourceFileName(source.fileName),
-          lineNumber: source.lineNumber,
-          columnNumber: source.columnNumber - 1
-        }) : new Error().stack));
+        let stack = existingStack || controlsStack;
+        if (!stack) {
+          if (source && typeof source.fileName === "string" && typeof source.lineNumber === "number" && typeof source.columnNumber === "number") {
+            stack = makeOriginalSourceStack({
+              fileName: getSourceFileName(source.fileName),
+              lineNumber: source.lineNumber,
+              columnNumber: source.columnNumber - 1
+            });
+          } else {
+            const { stackTraceLimit } = Error;
+            const canLimitStack = typeof stackTraceLimit === "number" && stackTraceLimit > 2 && Object.getOwnPropertyDescriptor(Error, "stackTraceLimit")?.writable;
+            let capturedError;
+            try {
+              if (canLimitStack) {
+                Error.stackTraceLimit = 2;
+              }
+              capturedError = new Error;
+            } finally {
+              if (canLimitStack) {
+                Error.stackTraceLimit = stackTraceLimit;
+              }
+            }
+            const capturedStack = capturedError.stack;
+            if (capturedStack) {
+              const firstFrameEnd = capturedStack.indexOf(`
+`, capturedStack.startsWith(`Error
+`) ? 6 : 0);
+              const callerEnd = firstFrameEnd === -1 ? -1 : capturedStack.indexOf(`
+`, firstFrameEnd + 1);
+              stack = callerEnd === -1 ? capturedStack : capturedStack.slice(0, callerEnd);
+            } else {
+              stack = capturedStack;
+            }
+          }
+        }
         const newProps = existingStack ? { ...props } : {
           ...props ?? {},
           [internalStackProp]: stack
@@ -14899,6 +15241,10 @@ var getMediabunnyInputResourceKey = ({
 var MEDIABUNNY_DURATION_VALUE_KEY = "mediabunny-duration";
 var globalMediaResourceManager = makeMediaResourceManager();
 
+// src/playback-pitch-context.ts
+import { createContext as createContext38 } from "react";
+var PlaybackPitchContext = createContext38(false);
+
 // src/react-refresh-event.ts
 var REACT_REFRESH_STARTED_EVENT = "remotion-react-refresh-started";
 var REACT_REFRESH_FINISHED_EVENT = "remotion-react-refresh-finished";
@@ -14935,8 +15281,8 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo42 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useMemo as useMemo44 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
   numberOfAudioTags,
@@ -14948,29 +15294,29 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo42(() => {
+  const logging = useMemo44(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx39(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx40(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx39(TimelineContextProvider, {
+    children: /* @__PURE__ */ jsx40(TimelineContextProvider, {
       frameState,
-      children: /* @__PURE__ */ jsx39(MediaEnabledProvider, {
+      children: /* @__PURE__ */ jsx40(MediaEnabledProvider, {
         videoEnabled,
         audioEnabled,
-        children: /* @__PURE__ */ jsx39(EditorPropsProvider, {
-          children: /* @__PURE__ */ jsx39(PrefetchProvider, {
-            children: /* @__PURE__ */ jsx39(SequenceManagerProvider, {
-              children: /* @__PURE__ */ jsx39(DurationsContextProvider, {
-                children: /* @__PURE__ */ jsx39(BufferingProvider, {
-                  children: /* @__PURE__ */ jsx39(SharedAudioContextProvider, {
+        children: /* @__PURE__ */ jsx40(EditorPropsProvider, {
+          children: /* @__PURE__ */ jsx40(PrefetchProvider, {
+            children: /* @__PURE__ */ jsx40(SequenceManagerProvider, {
+              children: /* @__PURE__ */ jsx40(DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx40(BufferingProvider, {
+                  children: /* @__PURE__ */ jsx40(SharedAudioContextProvider, {
                     audioLatencyHint,
                     audioEnabled,
                     previewSampleRate,
                     _experimentalKeepAudioContextAlive,
-                    children: /* @__PURE__ */ jsx39(SharedAudioTagsContextProvider, {
+                    children: /* @__PURE__ */ jsx40(SharedAudioTagsContextProvider, {
                       numberOfAudioTags,
-                      children: /* @__PURE__ */ jsx39(VideoProvider, {
+                      children: /* @__PURE__ */ jsx40(VideoProvider, {
                         children
                       })
                     })
@@ -15249,8 +15595,8 @@ var setupEnvVariables = () => {
 };
 
 // src/Track.tsx
-import { useMemo as useMemo43, useState as useState23 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { useMemo as useMemo45, useState as useState23 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var {
   freeze: _freeze,
   layout: _layout,
@@ -15267,10 +15613,10 @@ var TrackWithoutSchema = ({
   ...props
 }) => {
   const [id] = useState23(() => String(Math.random()));
-  const value = useMemo43(() => ({ id, name }), [id, name]);
-  return /* @__PURE__ */ jsx40(TimelineTrackContext.Provider, {
+  const value = useMemo45(() => ({ id, name }), [id, name]);
+  return /* @__PURE__ */ jsx41(TimelineTrackContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsx40(SequenceWithoutSchema, {
+    children: /* @__PURE__ */ jsx41(SequenceWithoutSchema, {
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/track",
       ...props,
       name,
@@ -15281,7 +15627,7 @@ var TrackWithoutSchema = ({
   });
 };
 var Track = withInteractivitySchema({
-  Component: (props) => /* @__PURE__ */ jsx40(TrackWithoutSchema, {
+  Component: (props) => /* @__PURE__ */ jsx41(TrackWithoutSchema, {
     ...props,
     layout: "none"
   }),
@@ -15320,15 +15666,15 @@ var usePixelDensity = (options) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback28 } from "react";
+import { useCallback as useCallback24 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback26,
+  useCallback as useCallback22,
   useContext as useContext50,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect21,
-  useMemo as useMemo44,
+  useMemo as useMemo46,
   useState as useState24
 } from "react";
 
@@ -15343,7 +15689,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -15361,7 +15707,7 @@ var OffthreadVideoForRendering = ({
   onVideoFrame,
   crossOrigin,
   audioStreamIndex,
-  preservePitch: _preservePitch,
+  preservePitch,
   ...props
 }) => {
   const absoluteFrame = useTimelinePosition();
@@ -15375,7 +15721,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 = useMemo46(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15396,7 +15742,7 @@ var OffthreadVideoForRendering = ({
   if (!videoConfig) {
     throw new Error("No video config found");
   }
-  useEffect20(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -15413,7 +15759,8 @@ var OffthreadVideoForRendering = ({
       playbackRate: playbackRate * sequencePlaybackRate,
       toneFrequency,
       audioStartFrame,
-      audioStreamIndex
+      audioStreamIndex,
+      preservePitch: preservePitch ?? true
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -15429,16 +15776,17 @@ var OffthreadVideoForRendering = ({
     toneFrequency,
     audioStartFrame,
     sequencePlaybackRate,
-    audioStreamIndex
+    audioStreamIndex,
+    preservePitch
   ]);
-  const currentTime = useMemo44(() => {
+  const currentTime = useMemo46(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: audioStartFrame
     }) / videoConfig.fps;
   }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo44(() => {
+  const actualSrc = useMemo46(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -15447,7 +15795,7 @@ var OffthreadVideoForRendering = ({
     });
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState24(null);
-  const { delayRender, continueRender } = useDelayRender();
+  const { delayRender, continueRender, cancelRender } = useDelayRender();
   useLayoutEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -15517,19 +15865,20 @@ var OffthreadVideoForRendering = ({
     delayRenderTimeoutInMilliseconds,
     onError,
     continueRender,
+    cancelRender,
     delayRender
   ]);
-  const onErr = useCallback26(() => {
+  const onErr = useCallback22(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
       cancelRender("Failed to load image with src " + imageSrc);
     }
-  }, [imageSrc, onError]);
-  const className = useMemo44(() => {
+  }, [imageSrc, onError, cancelRender]);
+  const className = useMemo46(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props.className].filter(truthy).join(" ");
   }, [props.className]);
-  const onImageFrame = useCallback26((img) => {
+  const onImageFrame = useCallback22((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -15538,7 +15887,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender(imageSrc.handle);
-  return /* @__PURE__ */ jsx41(Img, {
+  return /* @__PURE__ */ jsx42(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -15552,22 +15901,22 @@ var OffthreadVideoForRendering = ({
 // src/video/VideoForPreview.tsx
 import React51, {
   forwardRef as forwardRef14,
-  useCallback as useCallback27,
+  useCallback as useCallback23,
   useContext as useContext51,
-  useEffect as useEffect22,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
-  useMemo as useMemo45,
+  useMemo as useMemo47,
   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;
@@ -15607,14 +15956,14 @@ class MediaPlaybackError extends Error {
 }
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   const context = useContext51(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef30(null);
-  const sharedSource = useMemo45(() => {
+  const sharedSource = useMemo47(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -15625,11 +15974,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   }, [context.audioContext]);
   const effectToUse = React51.useInsertionEffect ?? React51.useLayoutEffect;
   effectToUse(() => {
-    return () => {
-      requestAnimationFrame(() => {
-        sharedSource?.cleanup();
-      });
-    };
+    return scheduleMediaSourceCleanup.bind(null, sharedSource?.cleanup ?? null);
   }, [sharedSource]);
   const {
     timelineId,
@@ -15721,7 +16066,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect22(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15761,27 +16106,9 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef30(onDuration);
-  currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect22(() => {
-    const { current } = videoRef;
-    if (!current) {
-      return;
-    }
-    if (current.duration) {
-      currentOnDurationCallback.current?.(src, current.duration);
-      return;
-    }
-    const onLoadedMetadata = () => {
-      currentOnDurationCallback.current?.(src, current.duration);
-    };
-    current.addEventListener("loadedmetadata", onLoadedMetadata);
-    return () => {
-      current.removeEventListener("loadedmetadata", onLoadedMetadata);
-    };
-  }, [src]);
-  useEffect22(() => {
+  useMediaDuration(videoRef, onDuration, src, false);
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -15792,7 +16119,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo45(() => {
+  const actualStyle = useMemo47(() => {
     return {
       ...style
     };
@@ -15802,7 +16129,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  const video = /* @__PURE__ */ jsx42("video", {
+  const video = /* @__PURE__ */ jsx43("video", {
     ...nativeProps,
     ref: videoRef,
     muted: isMutedForPlayback,
@@ -15844,7 +16171,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     volume: userPreferredVolume,
     audioEnabled: true
   });
-  const getStack = useCallback27(() => {
+  const getStack = useCallback23(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   const { automaticOutlineRef, registration } = useMediaInTimelineRegistration({
@@ -15861,17 +16188,17 @@ 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 = useMemo47(() => isStudio || automaticOutlineRef || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
     outlineChildrenRef: automaticOutlineRef
   } : null, [automaticOutlineRef, isStudio, registration, timelineId]);
-  return /* @__PURE__ */ jsx42(CommittedMetadataProvider, {
+  return /* @__PURE__ */ jsx43(CommittedMetadataProvider, {
     value: null,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx42(SequenceContent, {
-      children: /* @__PURE__ */ jsx42(VideoForPreviewContent, {
+    children: /* @__PURE__ */ jsx43(SequenceContent, {
+      children: /* @__PURE__ */ jsx43(VideoForPreviewContent, {
         ...props,
         ref,
         timelineId,
@@ -15884,7 +16211,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
 var VideoForPreview = forwardRef14(VideoForPreviewRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props) => {
   const {
     startFrom,
@@ -15903,7 +16230,7 @@ var InnerOffthreadVideo = (props) => {
   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 = useCallback28(() => {
+  const onDuration = useCallback24(() => {
     return;
   }, []);
   if (typeof props.src !== "string") {
@@ -15928,15 +16255,15 @@ var InnerOffthreadVideo = (props) => {
     trimBefore: trimBeforeValue
   });
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx43(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx44(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx43(Sequence, {
+      children: /* @__PURE__ */ jsx44(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx43(InnerOffthreadVideo, {
+        children: /* @__PURE__ */ jsx44(InnerOffthreadVideo, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           ...otherProps,
           trimAfter: undefined,
@@ -15953,7 +16280,7 @@ var InnerOffthreadVideo = (props) => {
   }
   validateMediaProps(props, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx43(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx44(OffthreadVideoForRendering, {
       pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
@@ -15976,7 +16303,7 @@ var InnerOffthreadVideo = (props) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx43(VideoForPreview, {
+  return /* @__PURE__ */ jsx44(VideoForPreview, {
     _remotionInternalStack: _remotionInternalStack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -16026,7 +16353,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx43(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx44(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -16100,8 +16427,8 @@ 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 { jsx as jsx44 } from "react/jsx-runtime";
+import React53, { useCallback as useCallback25, useMemo as useMemo48, useRef as useRef31, useState as useState26 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React53.useContext(CompositionManager);
   const videoContext = React53.useContext(VideoContext);
@@ -16124,7 +16451,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React53.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React53.useContext(BufferingContextReact);
   const logLevelContext = React53.useContext(LogLevelContext);
-  return useMemo46(() => ({
+  return useMemo48(() => ({
     compositionManagerCtx,
     videoContext,
     timelineContext,
@@ -16185,7 +16512,7 @@ var ForwardedSequenceRegistry = ({
   const scope = contexts.sequenceRegistryScopeContext;
   const activeRegistryRef = useRef31(registry);
   const commitRegistrationEnabled = scope?.commitRegistrationRequested === true && registry !== null && observerAvailable;
-  const onCommitSequences = useCallback29((sequences, sequenceIds) => {
+  const onCommitSequences = useCallback25((sequences, sequenceIds) => {
     if (observerFailedRef.current && sequenceIds.length > 0) {
       return;
     }
@@ -16231,19 +16558,19 @@ var ForwardedSequenceRegistry = ({
       });
     };
   }, [scope, scopeId, registry, commitRegistrationEnabled]);
-  const metadata = useMemo46(() => ({
+  const metadata = useMemo48(() => ({
     type: "sequence-manager",
     id: scopeId,
     onCommit: commitRegistrationEnabled ? onCommitSequences : null
   }), [commitRegistrationEnabled, onCommitSequences, scopeId]);
-  return /* @__PURE__ */ jsx44(SequenceRegistryScopeProvider, {
+  return /* @__PURE__ */ jsx45(SequenceRegistryScopeProvider, {
     value: scope,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx44(SequenceManagerActionsContext.Provider, {
+    children: /* @__PURE__ */ jsx45(SequenceManagerActionsContext.Provider, {
       value: contexts.sequenceManagerActionsContext,
-      children: /* @__PURE__ */ jsx44(SequenceRegistryContext.Provider, {
+      children: /* @__PURE__ */ jsx45(SequenceRegistryContext.Provider, {
         value: registry,
-        children: /* @__PURE__ */ jsx44(SequenceCommitRegistrationContext.Provider, {
+        children: /* @__PURE__ */ jsx45(SequenceCommitRegistrationContext.Provider, {
           value: commitRegistrationEnabled,
           children
         })
@@ -16253,43 +16580,43 @@ var ForwardedSequenceRegistry = ({
 };
 var RemotionContextProvider = (props) => {
   const { children, contexts } = props;
-  return /* @__PURE__ */ jsx44(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx45(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx44(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx45(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx44(PreloadContext.Provider, {
+      children: /* @__PURE__ */ jsx45(PreloadContext.Provider, {
         value: contexts.preloadContext,
-        children: /* @__PURE__ */ jsx44(CompositionManager.Provider, {
+        children: /* @__PURE__ */ jsx45(CompositionManager.Provider, {
           value: contexts.compositionManagerCtx,
-          children: /* @__PURE__ */ jsx44(SequenceManagerRefContext.Provider, {
+          children: /* @__PURE__ */ jsx45(SequenceManagerRefContext.Provider, {
             value: contexts.sequenceManagerRefContext,
-            children: /* @__PURE__ */ jsx44(RemotionEnvironmentContext.Provider, {
+            children: /* @__PURE__ */ jsx45(RemotionEnvironmentContext.Provider, {
               value: contexts.remotionEnvironmentContext,
-              children: /* @__PURE__ */ jsx44(SequenceRegistrationContext.Provider, {
+              children: /* @__PURE__ */ jsx45(SequenceRegistrationContext.Provider, {
                 value: contexts.sequenceRegistrationContext,
-                children: /* @__PURE__ */ jsx44(DisableSequenceRegistrationContext.Provider, {
+                children: /* @__PURE__ */ jsx45(DisableSequenceRegistrationContext.Provider, {
                   value: contexts.disableSequenceRegistrationContext,
-                  children: /* @__PURE__ */ jsx44(ForwardedSequenceRegistry, {
+                  children: /* @__PURE__ */ jsx45(ForwardedSequenceRegistry, {
                     contexts,
-                    children: /* @__PURE__ */ jsx44(VisualModePropStatusesRefContext.Provider, {
+                    children: /* @__PURE__ */ jsx45(VisualModePropStatusesRefContext.Provider, {
                       value: contexts.visualModePropStatusesRefContext,
-                      children: /* @__PURE__ */ jsx44(RenderAssetManager.Provider, {
+                      children: /* @__PURE__ */ jsx45(RenderAssetManager.Provider, {
                         value: contexts.renderAssetManagerContext,
-                        children: /* @__PURE__ */ jsx44(ResolveCompositionContext.Provider, {
+                        children: /* @__PURE__ */ jsx45(ResolveCompositionContext.Provider, {
                           value: contexts.resolveCompositionContext,
-                          children: /* @__PURE__ */ jsx44(TimelineContext.Provider, {
+                          children: /* @__PURE__ */ jsx45(TimelineContext.Provider, {
                             value: contexts.timelineContext,
-                            children: /* @__PURE__ */ jsx44(SetTimelineContext.Provider, {
+                            children: /* @__PURE__ */ jsx45(SetTimelineContext.Provider, {
                               value: contexts.setTimelineContext,
-                              children: /* @__PURE__ */ jsx44(SequenceContext.Provider, {
+                              children: /* @__PURE__ */ jsx45(SequenceContext.Provider, {
                                 value: contexts.sequenceContext,
-                                children: /* @__PURE__ */ jsx44(BufferingContextReact.Provider, {
+                                children: /* @__PURE__ */ jsx45(BufferingContextReact.Provider, {
                                   value: contexts.bufferManagerContext,
-                                  children: /* @__PURE__ */ jsx44(TimelineTrackContext.Provider, {
+                                  children: /* @__PURE__ */ jsx45(TimelineTrackContext.Provider, {
                                     value: contexts.timelineTrackContext,
-                                    children: /* @__PURE__ */ jsx44(DefaultPremountContext.Provider, {
+                                    children: /* @__PURE__ */ jsx45(DefaultPremountContext.Provider, {
                                       value: contexts.defaultPremountInSeconds,
-                                      children: /* @__PURE__ */ jsx44(VideoContext.Provider, {
+                                      children: /* @__PURE__ */ jsx45(VideoContext.Provider, {
                                         value: contexts.videoContext,
                                         children
                                       })
@@ -16316,6 +16643,8 @@ var RemotionContextProvider = (props) => {
 // src/internals.ts
 var compositionSelectorRef = createRef3();
 var Internals = {
+  HtmlInCanvasFallback,
+  useHtmlInCanvasUnsupportedMessage,
   OptimisticSequenceDeletion,
   usePendingSequenceDeletions,
   createElementSourceProxy,
@@ -16350,9 +16679,11 @@ var Internals = {
   resolveTrimProps,
   VideoForPreview,
   CompositionManager,
+  CompositionManagerRefContext,
   CompositionSetters,
   VisualModePropStatusesContext,
   VisualModePropStatusesRefContext,
+  VisualModePropStatusesSubscriptionContext,
   VisualModeBatchSettersContext,
   VisualModeDragOverridesContext,
   VisualModeDragOverridesRefContext,
@@ -16490,6 +16821,7 @@ var Internals = {
   DelayRenderContextType,
   TimelineContext,
   usePlaying,
+  PlaybackPitchContext,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -16532,7 +16864,7 @@ var fontDataByUrl = new Map;
 // src/series/index.tsx
 import React55, {
   forwardRef as forwardRef15,
-  useMemo as useMemo47
+  useMemo as useMemo49
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -16549,7 +16881,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx45, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs5, Fragment } from "react/jsx-runtime";
 var seriesSequenceSchema = {
   durationInFrames: Interactive.baseSchema.durationInFrames,
   name: Interactive.sequenceSchema.name,
@@ -16565,7 +16897,7 @@ var SeriesSequenceInner = forwardRef15(({ offset = 0, className = "", _remotionI
   if (_remotionInternalRender) {
     return _remotionInternalRender({ ...props, offset, className: className || undefined }, ref);
   }
-  return /* @__PURE__ */ jsx45(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx46(IsNotInsideSeriesProvider, {
     children: props.children
   });
 });
@@ -16604,7 +16936,7 @@ var validateSeriesSequenceProps = ({
 };
 var SeriesInner = (props) => {
   const pendingDeletions = usePendingSequenceDeletions();
-  const childrenValue = useMemo47(() => {
+  const childrenValue = useMemo49(() => {
     const flattenedChildren = flattenChildren(props.children).filter((child) => !OptimisticSequenceDeletion.isElementDeleted(child, pendingDeletions));
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -16652,9 +16984,9 @@ var SeriesInner = (props) => {
           });
           const currentStartFrame = startFrame + offset;
           const nextStartFrame = startFrame + timelineDurationInFrames + offset;
-          return /* @__PURE__ */ jsxs4(Fragment, {
+          return /* @__PURE__ */ jsxs5(Fragment, {
             children: [
-              /* @__PURE__ */ jsx45(SequenceWithoutSchemaWithRef, {
+              /* @__PURE__ */ jsx46(SequenceWithoutSchemaWithRef, {
                 ref,
                 name: name || "<Series.Sequence>",
                 _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
@@ -16666,7 +16998,7 @@ var SeriesInner = (props) => {
                   role: "clip",
                   seriesOffset: offset
                 },
-                children: /* @__PURE__ */ jsx45(IsNotInsideSeriesProvider, {
+                children: /* @__PURE__ */ jsx46(IsNotInsideSeriesProvider, {
                   children: sequenceChildren
                 })
               }),
@@ -16678,12 +17010,12 @@ var SeriesInner = (props) => {
     };
     return renderChildren(0, 0);
   }, [props.children, pendingDeletions]);
-  return /* @__PURE__ */ jsx45(TrackWithoutSchema, {
+  return /* @__PURE__ */ jsx46(TrackWithoutSchema, {
     layout: "none",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
     ...props,
     name: props.name ?? "<Series>",
-    children: /* @__PURE__ */ jsx45(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx46(IsInsideSeriesContainer, {
       children: childrenValue
     })
   });
@@ -16808,16 +17140,16 @@ var Still = (props) => {
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef17, useCallback as useCallback30, useContext as useContext53 } from "react";
+import { forwardRef as forwardRef17, useContext as useContext53, useMemo as useMemo51 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef16,
   useContext as useContext52,
-  useEffect as useEffect23,
+  useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect22,
-  useMemo as useMemo48,
+  useMemo as useMemo50,
   useRef as useRef32
 } from "react";
 
@@ -16946,7 +17278,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -16961,7 +17293,7 @@ var VideoForRenderingForwardFunction = ({
   loopVolumeCurveBehavior,
   audioStreamIndex,
   onVideoFrame,
-  preservePitch: _preservePitch,
+  preservePitch,
   ...props
 }, ref) => {
   const absoluteFrame = useTimelinePosition();
@@ -16977,7 +17309,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 = useMemo50(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -16998,7 +17330,7 @@ var VideoForRenderingForwardFunction = ({
   if (!videoConfig) {
     throw new Error("No video config found");
   }
-  useEffect23(() => {
+  useEffect22(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -17015,7 +17347,8 @@ var VideoForRenderingForwardFunction = ({
       playbackRate: (playbackRate ?? 1) * sequencePlaybackRate,
       toneFrequency: toneFrequency ?? 1,
       audioStartFrame,
-      audioStreamIndex: audioStreamIndex ?? 0
+      audioStreamIndex: audioStreamIndex ?? 0,
+      preservePitch: preservePitch ?? true
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -17031,13 +17364,14 @@ var VideoForRenderingForwardFunction = ({
     toneFrequency,
     audioStartFrame,
     sequencePlaybackRate,
-    audioStreamIndex
+    audioStreamIndex,
+    preservePitch
   ]);
   useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect23(() => {
+  useEffect22(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -17161,7 +17495,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender
     ]);
   }
-  return /* @__PURE__ */ jsx46("video", {
+  return /* @__PURE__ */ jsx47("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props
@@ -17170,7 +17504,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef16(VideoForRenderingForwardFunction);
 
 // src/video/html5-video.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props, ref) => {
   const {
     startFrom,
@@ -17202,9 +17536,7 @@ var VideoForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onDuration = useCallback30((src, durationInSeconds) => {
-    setDurations({ type: "got-duration", durationInSeconds, src });
-  }, [setDurations]);
+  const onDuration = useMemo51(() => onMediaDuration.bind(null, setDurations), [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   if (durationInFrames !== undefined) {
@@ -17227,14 +17559,14 @@ var VideoForwardingFunction = (props, ref) => {
   const loopDuration = effectiveTrimAfter ?? (durationFetched === undefined ? undefined : durationFetched * fps);
   if (loop && loopDuration !== undefined) {
     if (!Number.isFinite(loopDuration)) {
-      return /* @__PURE__ */ jsx47(Html5Video, {
+      return /* @__PURE__ */ jsx48(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
         _remotionInternalNativeLoopPassed: true
       });
     }
-    return /* @__PURE__ */ jsx47(Loop, {
+    return /* @__PURE__ */ jsx48(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: effectiveTrimAfter,
         mediaDurationInFrames: loopDuration,
@@ -17244,7 +17576,7 @@ var VideoForwardingFunction = (props, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx47(Html5Video, {
+      children: /* @__PURE__ */ jsx48(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
@@ -17253,15 +17585,15 @@ var VideoForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx47(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx48(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx47(Sequence, {
+      children: /* @__PURE__ */ jsx48(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx47(Html5Video, {
+        children: /* @__PURE__ */ jsx48(Html5Video, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           onVideoFrame,
           ...otherProps,
@@ -17278,14 +17610,14 @@ var VideoForwardingFunction = (props, ref) => {
     volume: props.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx47(VideoForRendering, {
+    return /* @__PURE__ */ jsx48(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx47(VideoForPreview, {
+  return /* @__PURE__ */ jsx48(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,