@remotion/promo-pages 4.0.390 → 4.0.391

package/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.390", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,6 +1582,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
+}, useTimelineFrameRef = () => {
+  const { frameRef } = useContext6(TimelineContext);
+  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1647,7 +1650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+}, Log, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
   scope,
   environment,
   label,
@@ -1657,33 +1660,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
-  handles.push(handle);
+  scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof scope !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-      scope.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy2).join(" ");
-          cancelRenderInternal(scope, Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof scope !== "undefined") {
-    scope.remotion_renderReady = false;
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy2).join(" ");
+        cancelRenderInternal(scope, Error(message));
+      }, timeoutToUse)
+    };
   }
+  scope.remotion_renderReady = false;
   return handle;
 }, continueRenderInternal = ({
   scope,
@@ -1697,7 +1696,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  handles = handles.filter((h) => {
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
     if (h === handle) {
       if (environment.isRendering && scope !== undefined) {
         if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1716,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     return true;
   });
-  if (handles.length === 0 && typeof scope !== "undefined") {
+  if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
 }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1733,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
     return delayRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       environment,
       label: label ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
+    if (!scope) {
+      return;
+    }
     continueRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       handle,
       environment,
       logLevel
@@ -1764,6 +1769,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1799,7 +1805,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags
+      audioAndVideoTags,
+      frameRef
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -3105,7 +3112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [refs]);
   const registerAudio = useCallback7((options) => {
-    const { aud, audioId, premounting } = options;
+    const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3124,7 +3131,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       el: ref,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(ref.current),
+      postmounting
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3145,12 +3154,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
     aud,
     audioId,
     id,
-    premounting
+    premounting,
+    postmounting
   }) => {
     let changed = false;
     audios.current = audios.current?.map((prevA) => {
+      const audioMounted = Boolean(prevA.el.current);
+      if (prevA.audioMounted !== audioMounted) {
+        changed = true;
+      }
       if (prevA.id === id) {
-        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
           return prevA;
         }
@@ -3159,7 +3173,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
           ...prevA,
           props: aud,
           premounting,
-          audioId
+          postmounting,
+          audioId,
+          audioMounted
         };
       }
       return prevA;
@@ -3221,12 +3237,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useSharedAudio = ({
   aud,
   audioId,
-  premounting
+  premounting,
+  postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
   const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
-      return ctx.registerAudio({ aud, audioId, premounting });
+      return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3239,16 +3256,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       props: aud,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(el.current),
+      postmounting
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
-        ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+        ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
       }
-    }, [aud, ctx, elem.id, audioId, premounting]);
+    }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
       return () => {
         if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4486,7 +4505,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
-    premounting: Boolean(sequenceContext?.premounting)
+    premounting: Boolean(sequenceContext?.premounting),
+    postmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaInTimeline({
     volume,
@@ -6780,6 +6800,7 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
+    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6855,12 +6876,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  handles = [];
   if (typeof window !== "undefined") {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
       window.remotion_delayRenderTimeouts = {};
     }
+    window.remotion_delayRenderHandles = [];
   }
   LogLevelContext = createContext8({
     logLevel: "info",
@@ -6877,6 +6898,7 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
+    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",

package/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.390", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1582,6 +1582,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
+}, useTimelineFrameRef = () => {
+  const { frameRef } = useContext6(TimelineContext);
+  return frameRef;
 }, useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1647,7 +1650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+}, Log, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
   scope,
   environment,
   label,
@@ -1657,33 +1660,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
-  handles.push(handle);
+  scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof scope !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-      scope.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy2).join(" ");
-          cancelRenderInternal(scope, Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof scope !== "undefined") {
-    scope.remotion_renderReady = false;
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy2).join(" ");
+        cancelRenderInternal(scope, Error(message));
+      }, timeoutToUse)
+    };
   }
+  scope.remotion_renderReady = false;
   return handle;
 }, continueRenderInternal = ({
   scope,
@@ -1697,7 +1696,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  handles = handles.filter((h) => {
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
     if (h === handle) {
       if (environment.isRendering && scope !== undefined) {
         if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1716,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     return true;
   });
-  if (handles.length === 0 && typeof scope !== "undefined") {
+  if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
 }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1733,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
     return delayRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       environment,
       label: label ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
+    if (!scope) {
+      return;
+    }
     continueRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       handle,
       environment,
       logLevel
@@ -1764,6 +1769,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1799,7 +1805,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags
+      audioAndVideoTags,
+      frameRef
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -3105,7 +3112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [refs]);
   const registerAudio = useCallback7((options) => {
-    const { aud, audioId, premounting } = options;
+    const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3124,7 +3131,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       el: ref,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(ref.current),
+      postmounting
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3145,12 +3154,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
     aud,
     audioId,
     id,
-    premounting
+    premounting,
+    postmounting
   }) => {
     let changed = false;
     audios.current = audios.current?.map((prevA) => {
+      const audioMounted = Boolean(prevA.el.current);
+      if (prevA.audioMounted !== audioMounted) {
+        changed = true;
+      }
       if (prevA.id === id) {
-        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
           return prevA;
         }
@@ -3159,7 +3173,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
           ...prevA,
           props: aud,
           premounting,
-          audioId
+          postmounting,
+          audioId,
+          audioMounted
         };
       }
       return prevA;
@@ -3221,12 +3237,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, useSharedAudio = ({
   aud,
   audioId,
-  premounting
+  premounting,
+  postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
   const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
-      return ctx.registerAudio({ aud, audioId, premounting });
+      return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3239,16 +3256,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       props: aud,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(el.current),
+      postmounting
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
-        ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+        ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
       }
-    }, [aud, ctx, elem.id, audioId, premounting]);
+    }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
       return () => {
         if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4486,7 +4505,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
-    premounting: Boolean(sequenceContext?.premounting)
+    premounting: Boolean(sequenceContext?.premounting),
+    postmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaInTimeline({
     volume,
@@ -6780,6 +6800,7 @@ var init_esm = __esm(() => {
   __export2(exports_timeline_position_state, {
     useTimelineSetFrame: () => useTimelineSetFrame,
     useTimelinePosition: () => useTimelinePosition,
+    useTimelineFrameRef: () => useTimelineFrameRef,
     usePlayingState: () => usePlayingState,
     persistCurrentFrame: () => persistCurrentFrame,
     getInitialFrameState: () => getInitialFrameState,
@@ -6855,12 +6876,12 @@ var init_esm = __esm(() => {
     warn,
     error
   };
-  handles = [];
   if (typeof window !== "undefined") {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
       window.remotion_delayRenderTimeouts = {};
     }
+    window.remotion_delayRenderHandles = [];
   }
   LogLevelContext = createContext8({
     logLevel: "info",
@@ -6877,6 +6898,7 @@ var init_esm = __esm(() => {
   });
   TimelineContext = createContext10({
     frame: {},
+    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: "",