@remotion/promo-pages 4.0.390 → 4.0.391

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.390", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -1582,6 +1582,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
1582
1582
  }
1583
1583
  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
1584
1584
  return Math.min(videoConfig.durationInFrames - 1, unclamped);
1585
+ }, useTimelineFrameRef = () => {
1586
+ const { frameRef } = useContext6(TimelineContext);
1587
+ return frameRef;
1585
1588
  }, useTimelineSetFrame = () => {
1586
1589
  const { setFrame } = useContext6(SetTimelineContext);
1587
1590
  return setFrame;
@@ -1647,7 +1650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1647
1650
  }
1648
1651
  }, error = (options, ...args) => {
1649
1652
  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
1650
- }, 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 = ({
1653
+ }, 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 = ({
1651
1654
  scope,
1652
1655
  environment,
1653
1656
  label,
@@ -1657,33 +1660,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
1657
1660
  throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
1658
1661
  }
1659
1662
  const handle = Math.random();
1660
- handles.push(handle);
1663
+ scope.remotion_delayRenderHandles.push(handle);
1661
1664
  const called = Error().stack?.replace(/^Error/g, "") ?? "";
1662
1665
  if (environment.isRendering) {
1663
- const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
1664
- if (typeof scope !== "undefined") {
1665
- const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
1666
- scope.remotion_delayRenderTimeouts[handle] = {
1667
- label: label ?? null,
1668
- startTime: Date.now(),
1669
- timeout: setTimeout(() => {
1670
- const message = [
1671
- `A delayRender()`,
1672
- label ? `"${label}"` : null,
1673
- `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
1674
- retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
1675
- retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
1676
- DELAY_RENDER_CALLSTACK_TOKEN,
1677
- called
1678
- ].filter(truthy2).join(" ");
1679
- cancelRenderInternal(scope, Error(message));
1680
- }, timeoutToUse)
1681
- };
1682
- }
1683
- }
1684
- if (typeof scope !== "undefined") {
1685
- scope.remotion_renderReady = false;
1666
+ const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
1667
+ const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
1668
+ scope.remotion_delayRenderTimeouts[handle] = {
1669
+ label: label ?? null,
1670
+ startTime: Date.now(),
1671
+ timeout: setTimeout(() => {
1672
+ const message = [
1673
+ `A delayRender()`,
1674
+ label ? `"${label}"` : null,
1675
+ `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
1676
+ retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
1677
+ retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
1678
+ DELAY_RENDER_CALLSTACK_TOKEN,
1679
+ called
1680
+ ].filter(truthy2).join(" ");
1681
+ cancelRenderInternal(scope, Error(message));
1682
+ }, timeoutToUse)
1683
+ };
1686
1684
  }
1685
+ scope.remotion_renderReady = false;
1687
1686
  return handle;
1688
1687
  }, continueRenderInternal = ({
1689
1688
  scope,
@@ -1697,7 +1696,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1697
1696
  if (typeof handle !== "number") {
1698
1697
  throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
1699
1698
  }
1700
- handles = handles.filter((h) => {
1699
+ scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
1701
1700
  if (h === handle) {
1702
1701
  if (environment.isRendering && scope !== undefined) {
1703
1702
  if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1716,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1717
1716
  }
1718
1717
  return true;
1719
1718
  });
1720
- if (handles.length === 0 && typeof scope !== "undefined") {
1719
+ if (scope.remotion_delayRenderHandles.length === 0) {
1721
1720
  scope.remotion_renderReady = true;
1722
1721
  }
1723
1722
  }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1733,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
1734
1733
  return mountTime;
1735
1734
  }, DelayRenderContextType, useDelayRender = () => {
1736
1735
  const environment = useRemotionEnvironment();
1737
- const scope = useContext8(DelayRenderContextType);
1736
+ const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
1738
1737
  const logLevel = useLogLevel();
1739
1738
  const delayRender2 = useCallback4((label, options) => {
1739
+ if (!scope) {
1740
+ return Math.random();
1741
+ }
1740
1742
  return delayRenderInternal({
1741
- scope: scope ?? (typeof window !== "undefined" ? window : undefined),
1743
+ scope,
1742
1744
  environment,
1743
1745
  label: label ?? null,
1744
1746
  options: options ?? {}
1745
1747
  });
1746
1748
  }, [environment, scope]);
1747
1749
  const continueRender2 = useCallback4((handle) => {
1750
+ if (!scope) {
1751
+ return;
1752
+ }
1748
1753
  continueRenderInternal({
1749
- scope: scope ?? (typeof window !== "undefined" ? window : undefined),
1754
+ scope,
1750
1755
  handle,
1751
1756
  environment,
1752
1757
  logLevel
@@ -1764,6 +1769,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1764
1769
  const [remotionRootId] = useState5(() => String(random(null)));
1765
1770
  const [_frame, setFrame] = useState5(() => getInitialFrameState());
1766
1771
  const frame = frameState ?? _frame;
1772
+ const frameRef = useRef2(0);
1767
1773
  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
1768
1774
  if (typeof window !== "undefined") {
1769
1775
  useLayoutEffect(() => {
@@ -1799,7 +1805,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
1799
1805
  rootId: remotionRootId,
1800
1806
  playbackRate,
1801
1807
  setPlaybackRate,
1802
- audioAndVideoTags
1808
+ audioAndVideoTags,
1809
+ frameRef
1803
1810
  };
1804
1811
  }, [frame, playbackRate, playing, remotionRootId]);
1805
1812
  const setTimelineContextValue = useMemo7(() => {
@@ -3105,7 +3112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
3105
3112
  });
3106
3113
  }, [refs]);
3107
3114
  const registerAudio = useCallback7((options) => {
3108
- const { aud, audioId, premounting } = options;
3115
+ const { aud, audioId, premounting, postmounting } = options;
3109
3116
  const found = audios.current?.find((a) => a.audioId === audioId);
3110
3117
  if (found) {
3111
3118
  return found;
@@ -3124,7 +3131,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
3124
3131
  el: ref,
3125
3132
  audioId,
3126
3133
  mediaElementSourceNode,
3127
- premounting
3134
+ premounting,
3135
+ audioMounted: Boolean(ref.current),
3136
+ postmounting
3128
3137
  };
3129
3138
  audios.current?.push(newElem);
3130
3139
  rerenderAudios();
@@ -3145,12 +3154,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
3145
3154
  aud,
3146
3155
  audioId,
3147
3156
  id,
3148
- premounting
3157
+ premounting,
3158
+ postmounting
3149
3159
  }) => {
3150
3160
  let changed = false;
3151
3161
  audios.current = audios.current?.map((prevA) => {
3162
+ const audioMounted = Boolean(prevA.el.current);
3163
+ if (prevA.audioMounted !== audioMounted) {
3164
+ changed = true;
3165
+ }
3152
3166
  if (prevA.id === id) {
3153
- const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
3167
+ const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
3154
3168
  if (isTheSame) {
3155
3169
  return prevA;
3156
3170
  }
@@ -3159,7 +3173,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
3159
3173
  ...prevA,
3160
3174
  props: aud,
3161
3175
  premounting,
3162
- audioId
3176
+ postmounting,
3177
+ audioId,
3178
+ audioMounted
3163
3179
  };
3164
3180
  }
3165
3181
  return prevA;
@@ -3221,12 +3237,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
3221
3237
  }, useSharedAudio = ({
3222
3238
  aud,
3223
3239
  audioId,
3224
- premounting
3240
+ premounting,
3241
+ postmounting
3225
3242
  }) => {
3226
3243
  const ctx = useContext16(SharedAudioContext);
3227
3244
  const [elem] = useState11(() => {
3228
3245
  if (ctx && ctx.numberOfAudioTags > 0) {
3229
- return ctx.registerAudio({ aud, audioId, premounting });
3246
+ return ctx.registerAudio({ aud, audioId, premounting, postmounting });
3230
3247
  }
3231
3248
  const el = React15.createRef();
3232
3249
  const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3239,16 +3256,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
3239
3256
  props: aud,
3240
3257
  audioId,
3241
3258
  mediaElementSourceNode,
3242
- premounting
3259
+ premounting,
3260
+ audioMounted: Boolean(el.current),
3261
+ postmounting
3243
3262
  };
3244
3263
  });
3245
3264
  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
3246
3265
  if (typeof document !== "undefined") {
3247
3266
  effectToUse(() => {
3248
3267
  if (ctx && ctx.numberOfAudioTags > 0) {
3249
- ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
3268
+ ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
3250
3269
  }
3251
- }, [aud, ctx, elem.id, audioId, premounting]);
3270
+ }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
3252
3271
  effectToUse(() => {
3253
3272
  return () => {
3254
3273
  if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4486,7 +4505,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
4486
4505
  const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
4487
4506
  aud: propsToPass,
4488
4507
  audioId: id,
4489
- premounting: Boolean(sequenceContext?.premounting)
4508
+ premounting: Boolean(sequenceContext?.premounting),
4509
+ postmounting: Boolean(sequenceContext?.postmounting)
4490
4510
  });
4491
4511
  useMediaInTimeline({
4492
4512
  volume,
@@ -6780,6 +6800,7 @@ var init_esm = __esm(() => {
6780
6800
  __export2(exports_timeline_position_state, {
6781
6801
  useTimelineSetFrame: () => useTimelineSetFrame,
6782
6802
  useTimelinePosition: () => useTimelinePosition,
6803
+ useTimelineFrameRef: () => useTimelineFrameRef,
6783
6804
  usePlayingState: () => usePlayingState,
6784
6805
  persistCurrentFrame: () => persistCurrentFrame,
6785
6806
  getInitialFrameState: () => getInitialFrameState,
@@ -6855,12 +6876,12 @@ var init_esm = __esm(() => {
6855
6876
  warn,
6856
6877
  error
6857
6878
  };
6858
- handles = [];
6859
6879
  if (typeof window !== "undefined") {
6860
6880
  window.remotion_renderReady = false;
6861
6881
  if (!window.remotion_delayRenderTimeouts) {
6862
6882
  window.remotion_delayRenderTimeouts = {};
6863
6883
  }
6884
+ window.remotion_delayRenderHandles = [];
6864
6885
  }
6865
6886
  LogLevelContext = createContext8({
6866
6887
  logLevel: "info",
@@ -6877,6 +6898,7 @@ var init_esm = __esm(() => {
6877
6898
  });
6878
6899
  TimelineContext = createContext10({
6879
6900
  frame: {},
6901
+ frameRef: { current: 0 },
6880
6902
  playing: false,
6881
6903
  playbackRate: 1,
6882
6904
  rootId: "",
package/dist/templates.js CHANGED
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
755
755
  });
756
756
  }, useIsPlayer = () => {
757
757
  return useContext(IsPlayerContext);
758
- }, VERSION = "4.0.390", checkMultipleRemotionVersions = () => {
758
+ }, VERSION = "4.0.391", checkMultipleRemotionVersions = () => {
759
759
  if (typeof globalThis === "undefined") {
760
760
  return;
761
761
  }
@@ -1582,6 +1582,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
1582
1582
  }
1583
1583
  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
1584
1584
  return Math.min(videoConfig.durationInFrames - 1, unclamped);
1585
+ }, useTimelineFrameRef = () => {
1586
+ const { frameRef } = useContext6(TimelineContext);
1587
+ return frameRef;
1585
1588
  }, useTimelineSetFrame = () => {
1586
1589
  const { setFrame } = useContext6(SetTimelineContext);
1587
1590
  return setFrame;
@@ -1647,7 +1650,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1647
1650
  }
1648
1651
  }, error = (options, ...args) => {
1649
1652
  return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
1650
- }, 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 = ({
1653
+ }, 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 = ({
1651
1654
  scope,
1652
1655
  environment,
1653
1656
  label,
@@ -1657,33 +1660,29 @@ Check that all your Remotion packages are on the same version. If your dependenc
1657
1660
  throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
1658
1661
  }
1659
1662
  const handle = Math.random();
1660
- handles.push(handle);
1663
+ scope.remotion_delayRenderHandles.push(handle);
1661
1664
  const called = Error().stack?.replace(/^Error/g, "") ?? "";
1662
1665
  if (environment.isRendering) {
1663
- const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
1664
- if (typeof scope !== "undefined") {
1665
- const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
1666
- scope.remotion_delayRenderTimeouts[handle] = {
1667
- label: label ?? null,
1668
- startTime: Date.now(),
1669
- timeout: setTimeout(() => {
1670
- const message = [
1671
- `A delayRender()`,
1672
- label ? `"${label}"` : null,
1673
- `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
1674
- retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
1675
- retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
1676
- DELAY_RENDER_CALLSTACK_TOKEN,
1677
- called
1678
- ].filter(truthy2).join(" ");
1679
- cancelRenderInternal(scope, Error(message));
1680
- }, timeoutToUse)
1681
- };
1682
- }
1683
- }
1684
- if (typeof scope !== "undefined") {
1685
- scope.remotion_renderReady = false;
1666
+ const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
1667
+ const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
1668
+ scope.remotion_delayRenderTimeouts[handle] = {
1669
+ label: label ?? null,
1670
+ startTime: Date.now(),
1671
+ timeout: setTimeout(() => {
1672
+ const message = [
1673
+ `A delayRender()`,
1674
+ label ? `"${label}"` : null,
1675
+ `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
1676
+ retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
1677
+ retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
1678
+ DELAY_RENDER_CALLSTACK_TOKEN,
1679
+ called
1680
+ ].filter(truthy2).join(" ");
1681
+ cancelRenderInternal(scope, Error(message));
1682
+ }, timeoutToUse)
1683
+ };
1686
1684
  }
1685
+ scope.remotion_renderReady = false;
1687
1686
  return handle;
1688
1687
  }, continueRenderInternal = ({
1689
1688
  scope,
@@ -1697,7 +1696,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1697
1696
  if (typeof handle !== "number") {
1698
1697
  throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
1699
1698
  }
1700
- handles = handles.filter((h) => {
1699
+ scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
1701
1700
  if (h === handle) {
1702
1701
  if (environment.isRendering && scope !== undefined) {
1703
1702
  if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1717,7 +1716,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1717
1716
  }
1718
1717
  return true;
1719
1718
  });
1720
- if (handles.length === 0 && typeof scope !== "undefined") {
1719
+ if (scope.remotion_delayRenderHandles.length === 0) {
1721
1720
  scope.remotion_renderReady = true;
1722
1721
  }
1723
1722
  }, LogLevelContext, useLogLevel = () => {
@@ -1734,19 +1733,25 @@ Check that all your Remotion packages are on the same version. If your dependenc
1734
1733
  return mountTime;
1735
1734
  }, DelayRenderContextType, useDelayRender = () => {
1736
1735
  const environment = useRemotionEnvironment();
1737
- const scope = useContext8(DelayRenderContextType);
1736
+ const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
1738
1737
  const logLevel = useLogLevel();
1739
1738
  const delayRender2 = useCallback4((label, options) => {
1739
+ if (!scope) {
1740
+ return Math.random();
1741
+ }
1740
1742
  return delayRenderInternal({
1741
- scope: scope ?? (typeof window !== "undefined" ? window : undefined),
1743
+ scope,
1742
1744
  environment,
1743
1745
  label: label ?? null,
1744
1746
  options: options ?? {}
1745
1747
  });
1746
1748
  }, [environment, scope]);
1747
1749
  const continueRender2 = useCallback4((handle) => {
1750
+ if (!scope) {
1751
+ return;
1752
+ }
1748
1753
  continueRenderInternal({
1749
- scope: scope ?? (typeof window !== "undefined" ? window : undefined),
1754
+ scope,
1750
1755
  handle,
1751
1756
  environment,
1752
1757
  logLevel
@@ -1764,6 +1769,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
1764
1769
  const [remotionRootId] = useState5(() => String(random(null)));
1765
1770
  const [_frame, setFrame] = useState5(() => getInitialFrameState());
1766
1771
  const frame = frameState ?? _frame;
1772
+ const frameRef = useRef2(0);
1767
1773
  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
1768
1774
  if (typeof window !== "undefined") {
1769
1775
  useLayoutEffect(() => {
@@ -1799,7 +1805,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
1799
1805
  rootId: remotionRootId,
1800
1806
  playbackRate,
1801
1807
  setPlaybackRate,
1802
- audioAndVideoTags
1808
+ audioAndVideoTags,
1809
+ frameRef
1803
1810
  };
1804
1811
  }, [frame, playbackRate, playing, remotionRootId]);
1805
1812
  const setTimelineContextValue = useMemo7(() => {
@@ -3105,7 +3112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
3105
3112
  });
3106
3113
  }, [refs]);
3107
3114
  const registerAudio = useCallback7((options) => {
3108
- const { aud, audioId, premounting } = options;
3115
+ const { aud, audioId, premounting, postmounting } = options;
3109
3116
  const found = audios.current?.find((a) => a.audioId === audioId);
3110
3117
  if (found) {
3111
3118
  return found;
@@ -3124,7 +3131,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
3124
3131
  el: ref,
3125
3132
  audioId,
3126
3133
  mediaElementSourceNode,
3127
- premounting
3134
+ premounting,
3135
+ audioMounted: Boolean(ref.current),
3136
+ postmounting
3128
3137
  };
3129
3138
  audios.current?.push(newElem);
3130
3139
  rerenderAudios();
@@ -3145,12 +3154,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
3145
3154
  aud,
3146
3155
  audioId,
3147
3156
  id,
3148
- premounting
3157
+ premounting,
3158
+ postmounting
3149
3159
  }) => {
3150
3160
  let changed = false;
3151
3161
  audios.current = audios.current?.map((prevA) => {
3162
+ const audioMounted = Boolean(prevA.el.current);
3163
+ if (prevA.audioMounted !== audioMounted) {
3164
+ changed = true;
3165
+ }
3152
3166
  if (prevA.id === id) {
3153
- const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
3167
+ const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
3154
3168
  if (isTheSame) {
3155
3169
  return prevA;
3156
3170
  }
@@ -3159,7 +3173,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
3159
3173
  ...prevA,
3160
3174
  props: aud,
3161
3175
  premounting,
3162
- audioId
3176
+ postmounting,
3177
+ audioId,
3178
+ audioMounted
3163
3179
  };
3164
3180
  }
3165
3181
  return prevA;
@@ -3221,12 +3237,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
3221
3237
  }, useSharedAudio = ({
3222
3238
  aud,
3223
3239
  audioId,
3224
- premounting
3240
+ premounting,
3241
+ postmounting
3225
3242
  }) => {
3226
3243
  const ctx = useContext16(SharedAudioContext);
3227
3244
  const [elem] = useState11(() => {
3228
3245
  if (ctx && ctx.numberOfAudioTags > 0) {
3229
- return ctx.registerAudio({ aud, audioId, premounting });
3246
+ return ctx.registerAudio({ aud, audioId, premounting, postmounting });
3230
3247
  }
3231
3248
  const el = React15.createRef();
3232
3249
  const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3239,16 +3256,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
3239
3256
  props: aud,
3240
3257
  audioId,
3241
3258
  mediaElementSourceNode,
3242
- premounting
3259
+ premounting,
3260
+ audioMounted: Boolean(el.current),
3261
+ postmounting
3243
3262
  };
3244
3263
  });
3245
3264
  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
3246
3265
  if (typeof document !== "undefined") {
3247
3266
  effectToUse(() => {
3248
3267
  if (ctx && ctx.numberOfAudioTags > 0) {
3249
- ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
3268
+ ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
3250
3269
  }
3251
- }, [aud, ctx, elem.id, audioId, premounting]);
3270
+ }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
3252
3271
  effectToUse(() => {
3253
3272
  return () => {
3254
3273
  if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4486,7 +4505,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
4486
4505
  const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
4487
4506
  aud: propsToPass,
4488
4507
  audioId: id,
4489
- premounting: Boolean(sequenceContext?.premounting)
4508
+ premounting: Boolean(sequenceContext?.premounting),
4509
+ postmounting: Boolean(sequenceContext?.postmounting)
4490
4510
  });
4491
4511
  useMediaInTimeline({
4492
4512
  volume,
@@ -6780,6 +6800,7 @@ var init_esm = __esm(() => {
6780
6800
  __export2(exports_timeline_position_state, {
6781
6801
  useTimelineSetFrame: () => useTimelineSetFrame,
6782
6802
  useTimelinePosition: () => useTimelinePosition,
6803
+ useTimelineFrameRef: () => useTimelineFrameRef,
6783
6804
  usePlayingState: () => usePlayingState,
6784
6805
  persistCurrentFrame: () => persistCurrentFrame,
6785
6806
  getInitialFrameState: () => getInitialFrameState,
@@ -6855,12 +6876,12 @@ var init_esm = __esm(() => {
6855
6876
  warn,
6856
6877
  error
6857
6878
  };
6858
- handles = [];
6859
6879
  if (typeof window !== "undefined") {
6860
6880
  window.remotion_renderReady = false;
6861
6881
  if (!window.remotion_delayRenderTimeouts) {
6862
6882
  window.remotion_delayRenderTimeouts = {};
6863
6883
  }
6884
+ window.remotion_delayRenderHandles = [];
6864
6885
  }
6865
6886
  LogLevelContext = createContext8({
6866
6887
  logLevel: "info",
@@ -6877,6 +6898,7 @@ var init_esm = __esm(() => {
6877
6898
  });
6878
6899
  TimelineContext = createContext10({
6879
6900
  frame: {},
6901
+ frameRef: { current: 0 },
6880
6902
  playing: false,
6881
6903
  playbackRate: 1,
6882
6904
  rootId: "",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/promo-pages",
3
- "version": "4.0.390",
3
+ "version": "4.0.391",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -11,23 +11,23 @@
11
11
  },
12
12
  "type": "module",
13
13
  "dependencies": {
14
- "@remotion/animated-emoji": "4.0.390",
15
- "@remotion/design": "4.0.390",
16
- "@remotion/lambda": "4.0.390",
17
- "@remotion/lottie": "4.0.390",
18
- "@remotion/paths": "4.0.390",
19
- "@remotion/player": "4.0.390",
20
- "@remotion/shapes": "4.0.390",
21
- "@remotion/svg-3d-engine": "4.0.390",
22
- "create-video": "4.0.390",
14
+ "@remotion/animated-emoji": "4.0.391",
15
+ "@remotion/design": "4.0.391",
16
+ "@remotion/lambda": "4.0.391",
17
+ "@remotion/lottie": "4.0.391",
18
+ "@remotion/paths": "4.0.391",
19
+ "@remotion/player": "4.0.391",
20
+ "@remotion/shapes": "4.0.391",
21
+ "@remotion/svg-3d-engine": "4.0.391",
22
+ "create-video": "4.0.391",
23
23
  "hls.js": "1.5.19",
24
24
  "polished": "4.3.1",
25
- "remotion": "4.0.390",
25
+ "remotion": "4.0.391",
26
26
  "zod": "3.22.3",
27
27
  "bun-plugin-tailwind": "0.1.2"
28
28
  },
29
29
  "devDependencies": {
30
- "@remotion/eslint-config-internal": "4.0.390",
30
+ "@remotion/eslint-config-internal": "4.0.391",
31
31
  "@eslint/eslintrc": "3.1.0",
32
32
  "@types/react": "19.2.7",
33
33
  "@types/react-dom": "19.2.3",