remotion 4.0.214 → 4.0.215

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.214";
+export declare const VERSION = "4.0.215";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.214';
+exports.VERSION = '4.0.215';

package/dist/esm/index.mjs

@@ -10,7 +10,7 @@ var __export = (target, all) => {
 };
 
 // src/_check-rsc.ts
-import {createContext} from "react";
+import { createContext } from "react";
 if (typeof createContext !== "function") {
   const err = [
     'Remotion requires React.createContext, but it is "undefined".',
@@ -27,13 +27,11 @@ if (typeof createContext !== "function") {
 }
 
 // src/Clipper.tsx
-import {useContext, useEffect} from "react";
+import { useContext, useEffect } from "react";
 
 // src/NativeLayers.tsx
-import {createContext as createContext2, useLayoutEffect, useMemo, useState} from "react";
-import {
-jsx
-} from "react/jsx-runtime";
+import { createContext as createContext2, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 var NativeLayersContext = createContext2({
   setClipRegion: () => {
     throw new Error("NativeLayers not set");
@@ -132,10 +130,8 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/is-player.tsx
-import {createContext as createContext3, useContext as useContext2} from "react";
-import {
-jsx as jsx2
-} from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var IsPlayerContext = createContext3(false);
 var IsPlayerContextProvider = ({
   children
@@ -155,7 +151,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.214";
+var VERSION = "4.0.215";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -179,7 +175,7 @@ var checkMultipleRemotionVersions = () => {
 };
 
 // src/Null.tsx
-import {useContext as useContext3, useEffect as useEffect2} from "react";
+import { useContext as useContext3, useEffect as useEffect2 } from "react";
 var Null = () => {
   const { setClipRegion } = useContext3(NativeLayersContext);
   useEffect2(() => {
@@ -201,18 +197,16 @@ var Null = () => {
 
 // src/Sequence.tsx
 import {
-forwardRef as forwardRef2,
-useContext as useContext12,
-useEffect as useEffect5,
-useMemo as useMemo10,
-useState as useState5
+  forwardRef as forwardRef2,
+  useContext as useContext12,
+  useEffect as useEffect5,
+  useMemo as useMemo10,
+  useState as useState5
 } from "react";
 
 // src/AbsoluteFill.tsx
-import {forwardRef, useMemo as useMemo2} from "react";
-import {
-jsx as jsx3
-} from "react/jsx-runtime";
+import { forwardRef, useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var AbsoluteFillRefForwarding = (props, ref) => {
   const { style, ...other } = props;
   const actualStyle = useMemo2(() => {
@@ -238,14 +232,12 @@ var AbsoluteFillRefForwarding = (props, ref) => {
 var AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
 // src/SequenceContext.tsx
-import {createContext as createContext4} from "react";
+import { createContext as createContext4 } from "react";
 var SequenceContext = createContext4(null);
 
 // src/SequenceManager.tsx
-import React3, {useCallback, useMemo as useMemo3, useState as useState2} from "react";
-import {
-jsx as jsx4
-} from "react/jsx-runtime";
+import React3, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var SequenceManager = React3.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -295,7 +287,7 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/nonce.ts
-import {createContext as createContext5, useContext as useContext4, useEffect as useEffect3, useRef, useState as useState3} from "react";
+import { createContext as createContext5, useContext as useContext4, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 var NonceContext = createContext5({
   getNonce: () => 0,
   fastRefreshes: 0
@@ -326,13 +318,13 @@ __export(exports_timeline_position_state, {
   TimelineContext: () => TimelineContext,
   SetTimelineContext: () => SetTimelineContext
 });
-import {createContext as createContext9, useContext as useContext7, useMemo as useMemo7} from "react";
+import { createContext as createContext9, useContext as useContext7, useMemo as useMemo7 } from "react";
 
 // src/use-video.ts
-import {useContext as useContext6, useMemo as useMemo6} from "react";
+import { useContext as useContext6, useMemo as useMemo6 } from "react";
 
 // src/CompositionManagerContext.tsx
-import {createContext as createContext6} from "react";
+import { createContext as createContext6 } from "react";
 var CompositionManager = createContext6({
   compositions: [],
   registerComposition: () => {
@@ -363,26 +355,24 @@ var CompositionManager = createContext6({
 
 // src/ResolveCompositionConfig.tsx
 import {
-createContext as createContext8,
-createRef,
-useCallback as useCallback3,
-useContext as useContext5,
-useEffect as useEffect4,
-useImperativeHandle as useImperativeHandle2,
-useMemo as useMemo5,
-useState as useState4
+  createContext as createContext8,
+  createRef,
+  useCallback as useCallback3,
+  useContext as useContext5,
+  useEffect as useEffect4,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo5,
+  useState as useState4
 } from "react";
 
 // src/EditorProps.tsx
 import React4, {
-createContext as createContext7,
-useCallback as useCallback2,
-useImperativeHandle,
-useMemo as useMemo4
+  createContext as createContext7,
+  useCallback as useCallback2,
+  useImperativeHandle,
+  useMemo as useMemo4
 } from "react";
-import {
-jsx as jsx5
-} from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var EditorPropsContext = createContext7({
   props: {},
   updateProps: () => {
@@ -788,9 +778,7 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/ResolveCompositionConfig.tsx
-import {
-jsx as jsx6
-} from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ResolveCompositionContext = createContext8(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
@@ -1206,13 +1194,11 @@ var usePlayingState = () => {
 };
 
 // src/use-video-config.ts
-import {useContext as useContext9} from "react";
+import { useContext as useContext9 } from "react";
 
 // src/CanUseRemotionHooks.tsx
-import {createContext as createContext10} from "react";
-import {
-jsx as jsx7
-} from "react/jsx-runtime";
+import { createContext as createContext10 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var CanUseRemotionHooks = createContext10(false);
 var CanUseRemotionHooksProvider = ({ children }) => {
   return /* @__PURE__ */ jsx7(CanUseRemotionHooks.Provider, {
@@ -1222,7 +1208,7 @@ var CanUseRemotionHooksProvider = ({ children }) => {
 };
 
 // src/use-unsafe-video-config.ts
-import {useContext as useContext8, useMemo as useMemo8} from "react";
+import { useContext as useContext8, useMemo as useMemo8 } from "react";
 var useUnsafeVideoConfig = () => {
   const context = useContext8(SequenceContext);
   const ctxWidth = context?.width ?? null;
@@ -1278,10 +1264,10 @@ var useVideoConfig = () => {
 };
 
 // src/freeze.tsx
-import {useContext as useContext11, useMemo as useMemo9} from "react";
+import { useContext as useContext11, useMemo as useMemo9 } from "react";
 
 // src/use-current-frame.ts
-import {useContext as useContext10} from "react";
+import { useContext as useContext10 } from "react";
 var useCurrentFrame = () => {
   const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
   if (!canUseRemotionHooks) {
@@ -1297,9 +1283,7 @@ var useCurrentFrame = () => {
 };
 
 // src/freeze.tsx
-import {
-jsx as jsx8
-} from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Freeze = ({
   frame: frameToFreeze,
   children,
@@ -1352,9 +1336,7 @@ var Freeze = ({
 };
 
 // src/Sequence.tsx
-import {
-jsx as jsx9
-} from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -1373,7 +1355,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext12(SequenceContext);
   const { rootId } = useContext12(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const nonce3 = useNonce();
+  const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
@@ -1438,7 +1420,7 @@ var RegularSequenceRefForwardingFunction = ({
       type: "sequence",
       rootId,
       showInTimeline,
-      nonce: nonce3,
+      nonce,
       loopDisplay,
       stack: stack ?? null,
       premountDisplay: premountDisplay ?? null
@@ -1458,7 +1440,7 @@ var RegularSequenceRefForwardingFunction = ({
     rootId,
     from,
     showInTimeline,
-    nonce3,
+    nonce,
     loopDisplay,
     stack,
     premountDisplay
@@ -1534,15 +1516,15 @@ var SequenceRefForwardingFunction = (props, ref) => {
 };
 var Sequence = forwardRef2(SequenceRefForwardingFunction);
 // src/Artifact.tsx
-import {useContext as useContext13, useEffect as useEffect6, useState as useState7} from "react";
+import { useContext as useContext13, useEffect as useEffect6, useState as useState7 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-createContext as createContext11,
-useCallback as useCallback4,
-useLayoutEffect as useLayoutEffect2,
-useMemo as useMemo11,
-useState as useState6
+  createContext as createContext11,
+  useCallback as useCallback4,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo11,
+  useState as useState6
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -1574,9 +1556,7 @@ var validateRenderAsset = (artifact) => {
 };
 
 // src/RenderAssetManager.tsx
-import {
-jsx as jsx10
-} from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var RenderAssetManager = createContext11({
   registerRenderAsset: () => {
     return;
@@ -1666,7 +1646,7 @@ var Artifact = ({ filename, content }) => {
   return null;
 };
 // src/audio/Audio.tsx
-import {forwardRef as forwardRef5, useCallback as useCallback9, useContext as useContext23} from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback9, useContext as useContext23 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -1736,10 +1716,8 @@ var isErrorLike = (err) => {
 };
 
 // src/loop/index.tsx
-import React8, {createContext as createContext12, useMemo as useMemo12} from "react";
-import {
-jsx as jsx11
-} from "react/jsx-runtime";
+import React8, { createContext as createContext12, useMemo as useMemo12 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var LoopContext = createContext12(null);
 var useLoop = () => {
   return React8.useContext(LoopContext);
@@ -1796,13 +1774,11 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import {useContext as useContext14} from "react";
+import { useContext as useContext14 } from "react";
 
 // src/prefetch-state.tsx
-import {createContext as createContext13, useEffect as useEffect7, useState as useState8} from "react";
-import {
-jsx as jsx12
-} from "react/jsx-runtime";
+import { createContext as createContext13, useEffect as useEffect7, useState as useState8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var PreloadContext = createContext13({});
 var preloads = {};
 var updaters = [];
@@ -2019,10 +1995,8 @@ var validateStartFromProps = (startFrom, endAt) => {
 };
 
 // src/video/duration-state.tsx
-import {createContext as createContext14, useMemo as useMemo13, useReducer} from "react";
-import {
-jsx as jsx13
-} from "react/jsx-runtime";
+import { createContext as createContext14, useMemo as useMemo13, useReducer } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
     case "got-duration": {
@@ -2061,13 +2035,13 @@ var DurationsContextProvider = ({ children }) => {
 
 // src/audio/AudioForPreview.tsx
 import {
-forwardRef as forwardRef3,
-useContext as useContext21,
-useEffect as useEffect16,
-useImperativeHandle as useImperativeHandle3,
-useMemo as useMemo20,
-useRef as useRef8,
-useState as useState14
+  forwardRef as forwardRef3,
+  useContext as useContext21,
+  useEffect as useEffect16,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo20,
+  useRef as useRef8,
+  useState as useState14
 } from "react";
 
 // src/random.ts
@@ -2105,23 +2079,23 @@ var random = (seed, dummy) => {
 };
 
 // src/use-media-in-timeline.ts
-import {useContext as useContext16, useEffect as useEffect8, useMemo as useMemo14, useState as useState9} from "react";
+import { useContext as useContext16, useEffect as useEffect8, useMemo as useMemo14, useState as useState9 } from "react";
 
 // src/audio/use-audio-frame.ts
-import {useContext as useContext15} from "react";
+import { useContext as useContext15 } from "react";
 var useMediaStartsAt = () => {
   const parentSequence = useContext15(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
 var useFrameForVolumeProp = (behavior) => {
-  const loop2 = Loop.useLoop();
+  const loop = Loop.useLoop();
   const frame = useCurrentFrame();
   const startsAt = useMediaStartsAt();
-  if (behavior === "repeat" || loop2 === null) {
+  if (behavior === "repeat" || loop === null) {
     return frame + startsAt;
   }
-  return frame + startsAt + loop2.durationInFrames * loop2.iteration;
+  return frame + startsAt + loop.durationInFrames * loop.iteration;
 };
 
 // src/get-asset-file-name.ts
@@ -2235,7 +2209,7 @@ var useMediaInTimeline = ({
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
   const [initialVolume] = useState9(() => volume);
-  const nonce4 = useNonce();
+  const nonce = useNonce();
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames) : videoConfig.durationInFrames;
   const doesVolumeChange = typeof volume === "function";
   const volumes = useMemo14(() => {
@@ -2280,7 +2254,7 @@ var useMediaInTimeline = ({
       rootId,
       volume: volumes,
       showInTimeline: true,
-      nonce: nonce4,
+      nonce,
       startMediaFrom: 0 - startsAt,
       doesVolumeChange,
       loopDisplay: undefined,
@@ -2303,7 +2277,7 @@ var useMediaInTimeline = ({
     videoConfig,
     volumes,
     doesVolumeChange,
-    nonce4,
+    nonce,
     mediaRef,
     mediaType,
     startsAt,
@@ -2331,19 +2305,17 @@ var useMediaInTimeline = ({
 };
 
 // src/use-media-playback.ts
-import {useCallback as useCallback7, useContext as useContext18, useEffect as useEffect12, useRef as useRef6} from "react";
+import { useCallback as useCallback7, useContext as useContext18, useEffect as useEffect12, useRef as useRef6 } from "react";
 
 // src/buffer-until-first-frame.ts
-import {useCallback as useCallback6, useMemo as useMemo17, useRef as useRef3} from "react";
+import { useCallback as useCallback6, useMemo as useMemo17, useRef as useRef3 } from "react";
 
 // src/use-buffer-state.ts
-import {useContext as useContext17, useMemo as useMemo16} from "react";
+import { useContext as useContext17, useMemo as useMemo16 } from "react";
 
 // src/buffering.tsx
-import React11, {useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo15, useRef as useRef2, useState as useState10} from "react";
-import {
-jsx as jsx14
-} from "react/jsx-runtime";
+import React11, { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo15, useRef as useRef2, useState as useState10 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var useBufferManager = () => {
   const [blocks, setBlocks] = useState10([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState10([]);
@@ -2484,7 +2456,7 @@ var useBufferUntilFirstFrame = ({
 };
 
 // src/use-media-buffering.ts
-import {useEffect as useEffect10, useState as useState11} from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -2558,7 +2530,7 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import {useEffect as useEffect11, useRef as useRef4} from "react";
+import { useEffect as useEffect11, useRef as useRef4 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
@@ -2742,7 +2714,7 @@ var getMediaTime = ({
 };
 
 // src/video/video-fragment.ts
-import {useRef as useRef5} from "react";
+import { useRef as useRef5 } from "react";
 var toSeconds = (time, fps) => {
   return Math.round(time / fps * 100) / 100;
 };
@@ -2902,12 +2874,12 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering3 = useContext18(BufferingContextReact);
+  const buffering = useContext18(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef6(null);
   const lastSeek = useRef6(null);
-  if (!buffering3) {
+  if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef6({});
@@ -2955,13 +2927,13 @@ var useMediaPlayback = ({
       mediaRef.current?.pause();
       return;
     }
-    const isPlayerBuffering = buffering3.buffering.current;
+    const isPlayerBuffering = buffering.buffering.current;
     const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
     if (isPlayerBuffering && !isMediaTagBufferingOrStalled) {
       mediaRef.current?.pause();
     }
   }, [
-    buffering3.buffering,
+    buffering.buffering,
     isBuffering,
     isMediaTagBuffering,
     mediaRef,
@@ -3026,7 +2998,7 @@ var useMediaPlayback = ({
     const seekThreshold = playing ? 0.15 : 0.00001;
     const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
     const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-    const isSomethingElseBuffering = buffering3.buffering.current && !isMediaTagBufferingOrStalled;
+    const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
     if (!playing || isSomethingElseBuffering) {
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
@@ -3050,7 +3022,7 @@ var useMediaPlayback = ({
     absoluteFrame,
     acceptableTimeShiftButLessThanDuration,
     bufferUntilFirstFrame,
-    buffering3.buffering,
+    buffering.buffering,
     currentTime,
     debugSeeking,
     desiredUnclampedTime,
@@ -3067,7 +3039,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag-volume.ts
-import {useEffect as useEffect13, useState as useState12} from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 var useMediaTagVolume = (mediaRef) => {
   const [actualVolume, setActualVolume] = useState12(1);
   useEffect13(() => {
@@ -3094,7 +3066,7 @@ var useMediaTagVolume = (mediaRef) => {
 };
 
 // src/use-sync-volume-with-media-tag.ts
-import {useEffect as useEffect14} from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/is-approximately-the-same.ts
 var FLOATING_POINT_ERROR_THRESHOLD = 0.00001;
@@ -3124,7 +3096,7 @@ var useSyncVolumeWithMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import {createContext as createContext15, useContext as useContext19, useMemo as useMemo18} from "react";
+import { createContext as createContext15, useContext as useContext19, useMemo as useMemo18 } from "react";
 var MediaVolumeContext = createContext15({
   mediaMuted: false,
   mediaVolume: 1
@@ -3154,19 +3126,16 @@ var useMediaMutedState = () => {
 
 // src/audio/shared-audio-tags.tsx
 import React12, {
-createContext as createContext16,
-createRef as createRef2,
-useCallback as useCallback8,
-useContext as useContext20,
-useEffect as useEffect15,
-useMemo as useMemo19,
-useRef as useRef7,
-useState as useState13
+  createContext as createContext16,
+  createRef as createRef2,
+  useCallback as useCallback8,
+  useContext as useContext20,
+  useEffect as useEffect15,
+  useMemo as useMemo19,
+  useRef as useRef7,
+  useState as useState13
 } from "react";
-import {
-jsx as jsx15,
-jsxs
-} from "react/jsx-runtime";
+import { jsx as jsx15, jsxs } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
 var compareProps = (obj1, obj2) => {
   const keysA = Object.keys(obj1).sort();
@@ -3362,9 +3331,7 @@ var useSharedAudio = (aud, audioId) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import {
-jsx as jsx16
-} from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
@@ -3501,13 +3468,13 @@ var AudioForPreview = forwardRef3(AudioForDevelopmentForwardRefFunction);
 
 // src/audio/AudioForRendering.tsx
 import {
-forwardRef as forwardRef4,
-useContext as useContext22,
-useEffect as useEffect17,
-useImperativeHandle as useImperativeHandle4,
-useLayoutEffect as useLayoutEffect3,
-useMemo as useMemo21,
-useRef as useRef9
+  forwardRef as forwardRef4,
+  useContext as useContext22,
+  useEffect as useEffect17,
+  useImperativeHandle as useImperativeHandle4,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo21,
+  useRef as useRef9
 } from "react";
 
 // src/delay-render.ts
@@ -3578,9 +3545,7 @@ var continueRender = (handle) => {
 };
 
 // src/audio/AudioForRendering.tsx
-import {
-jsx as jsx17
-} from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioRef = useRef9(null);
   const {
@@ -3710,9 +3675,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef4(AudioForRenderingRefForwardingFunction);
 
 // src/audio/Audio.tsx
-import {
-jsx as jsx18
-} from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
   const audioContext = useContext23(SharedAudioContext);
   const {
@@ -3725,7 +3688,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     _remotionDebugSeeking,
     ...otherProps
   } = props;
-  const { loop: loop3, ...propsOtherThanLoop } = props;
+  const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = getRemotionEnvironment();
   const { durations, setDurations } = useContext23(DurationsContext);
@@ -3736,17 +3699,17 @@ var AudioRefForwardingFunction = (props, ref) => {
   const onError = useCallback9((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 (loop3) {
+    if (loop) {
       cancelRender(new Error(errMessage));
     } else {
       console.warn(errMessage);
     }
-  }, [loop3, preloadedSrc]);
+  }, [loop, preloadedSrc]);
   const onDuration = useCallback9((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
-  if (loop3 && durationFetched !== undefined) {
+  if (loop && durationFetched !== undefined) {
     const duration = durationFetched * fps;
     return /* @__PURE__ */ jsx18(Loop, {
       layout: "none",
@@ -3774,7 +3737,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       durationInFrames: endAtFrameNo,
       name,
       children: /* @__PURE__ */ jsx18(Audio, {
-        _remotionInternalNeedsDurationCalculation: Boolean(loop3),
+        _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
@@ -3788,7 +3751,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       ...props,
       ref,
       onError,
-      _remotionInternalNeedsDurationCalculation: Boolean(loop3)
+      _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
   return /* @__PURE__ */ jsx18(AudioForPreview, {
@@ -3801,18 +3764,18 @@ var AudioRefForwardingFunction = (props, ref) => {
     onError,
     onDuration,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
-    _remotionInternalNeedsDurationCalculation: Boolean(loop3),
+    _remotionInternalNeedsDurationCalculation: Boolean(loop),
     showInTimeline: showInTimeline ?? true
   });
 };
 var Audio = forwardRef5(AudioRefForwardingFunction);
 addSequenceStackTraces(Audio);
 // src/Composition.tsx
-import {Suspense, useContext as useContext25, useEffect as useEffect19, useMemo as useMemo24} from "react";
-import {createPortal} from "react-dom";
+import { Suspense, useContext as useContext25, useEffect as useEffect19, useMemo as useMemo24 } from "react";
+import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import {createContext as createContext17, useContext as useContext24, useEffect as useEffect18, useMemo as useMemo22} from "react";
+import { createContext as createContext17, useContext as useContext24, useEffect as useEffect18, useMemo as useMemo22 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -3831,9 +3794,7 @@ var validateFolderName = (name) => {
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
 
 // src/Folder.tsx
-import {
-jsx as jsx19
-} from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var FolderContext = createContext17({
   folderName: null,
   parentName: null
@@ -3866,10 +3827,7 @@ var Folder = ({
 };
 
 // src/loading-indicator.tsx
-import {
-jsx as jsx20,
-jsxs as jsxs2
-} from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs2 } from "react/jsx-runtime";
 var rotate = {
   transform: `rotate(90deg)`
 };
@@ -3957,7 +3915,7 @@ var portalNode = () => {
 };
 
 // src/use-lazy-component.ts
-import React16, {useMemo as useMemo23} from "react";
+import React16, { useMemo as useMemo23 } from "react";
 var useLazyComponent = (compProps) => {
   const lazy = useMemo23(() => {
     if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
@@ -3998,9 +3956,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 };
 
 // src/Composition.tsx
-import {
-jsx as jsx21
-} from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ClipComposition = ({ children }) => {
   const { clipRegion } = useContext25(NativeLayersContext);
   const style = useMemo24(() => {
@@ -4036,7 +3992,7 @@ var Composition = ({
   const { registerComposition, unregisterComposition } = useContext25(CompositionManager);
   const video = useVideo();
   const lazy = useLazyComponent(compProps);
-  const nonce5 = useNonce();
+  const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = getRemotionEnvironment();
   const canUseComposition = useContext25(CanUseRemotionHooks);
@@ -4062,7 +4018,7 @@ var Composition = ({
       folderName,
       component: lazy,
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      nonce: nonce5,
+      nonce,
       parentFolderName: parentName,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null
@@ -4081,7 +4037,7 @@ var Composition = ({
     registerComposition,
     unregisterComposition,
     width,
-    nonce5,
+    nonce,
     parentName,
     schema,
     compProps.calculateMetadata
@@ -4121,15 +4077,13 @@ var Composition = ({
 };
 // src/CompositionManager.tsx
 import React18, {
-useCallback as useCallback10,
-useImperativeHandle as useImperativeHandle5,
-useMemo as useMemo25,
-useRef as useRef10,
-useState as useState15
+  useCallback as useCallback10,
+  useImperativeHandle as useImperativeHandle5,
+  useMemo as useMemo25,
+  useRef as useRef10,
+  useState as useState15
 } from "react";
-import {
-jsx as jsx22
-} from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var compositionsRef = React18.createRef();
 var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
   const [compositions, setCompositions] = useState15([]);
@@ -4448,10 +4402,8 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import {forwardRef as forwardRef6, useCallback as useCallback11, useState as useState16} from "react";
-import {
-jsx as jsx23
-} from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useState as useState16 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -4485,19 +4437,17 @@ var IFrameRefForwarding = ({
 var IFrame = forwardRef6(IFrameRefForwarding);
 // src/Img.tsx
 import {
-forwardRef as forwardRef7,
-useCallback as useCallback12,
-useContext as useContext26,
-useImperativeHandle as useImperativeHandle6,
-useLayoutEffect as useLayoutEffect4,
-useRef as useRef11
+  forwardRef as forwardRef7,
+  useCallback as useCallback12,
+  useContext as useContext26,
+  useImperativeHandle as useImperativeHandle6,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef11
 } from "react";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
-import {
-jsx as jsx24
-} from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ImgRefForwarding = ({
   onError,
   maxRetries = 2,
@@ -4709,15 +4659,13 @@ var waitForRoot = (fn) => {
 
 // src/RemotionRoot.tsx
 import {
-useEffect as useEffect20,
-useLayoutEffect as useLayoutEffect5,
-useMemo as useMemo26,
-useRef as useRef12,
-useState as useState17
+  useEffect as useEffect20,
+  useLayoutEffect as useLayoutEffect5,
+  useMemo as useMemo26,
+  useRef as useRef12,
+  useState as useState17
 } from "react";
-import {
-jsx as jsx25
-} from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var RemotionRoot = ({ children, numberOfAudioTags }) => {
   const [remotionRootId] = useState17(() => String(random(null)));
   const [frame, setFrame] = useState17(() => getInitialFrameState());
@@ -4841,7 +4789,7 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React22, {createContext as createContext18} from "react";
+import React22, { createContext as createContext18 } from "react";
 var CurrentScaleContext = React22.createContext(null);
 var PreviewSizeContext = createContext18({
   setSize: () => {
@@ -4927,7 +4875,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React23, {useMemo as useMemo27} from "react";
+import React23, { useMemo as useMemo27 } from "react";
 function useRemotionContexts() {
   const compositionManagerCtx = React23.useContext(CompositionManager);
   const timelineContext = React23.useContext(TimelineContext);
@@ -4969,9 +4917,7 @@ function useRemotionContexts() {
     bufferManagerContext
   ]);
 }
-import {
-jsx as jsx26
-} from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
   return /* @__PURE__ */ jsx26(CanUseRemotionHooks.Provider, {
@@ -5451,7 +5397,7 @@ var getOffthreadVideoSource = ({
   return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}&toneMapped=${String(toneMapped)}`;
 };
 // src/series/index.tsx
-import {Children, forwardRef as forwardRef8, useMemo as useMemo28} from "react";
+import { Children, forwardRef as forwardRef8, useMemo as useMemo28 } from "react";
 
 // src/series/flatten-children.tsx
 import React24 from "react";
@@ -5467,10 +5413,8 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React25, {createContext as createContext19} from "react";
-import {
-jsx as jsx27
-} from "react/jsx-runtime";
+import React25, { createContext as createContext19 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext19(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx27(IsInsideSeriesContext.Provider, {
@@ -5492,9 +5436,7 @@ var useRequireToBeInsideSeries = () => {
 };
 
 // src/series/index.tsx
-import {
-jsx as jsx28
-} from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
   return /* @__PURE__ */ jsx28(IsNotInsideSeriesProvider, {
@@ -5823,20 +5765,18 @@ var Still = (props2) => {
   return React27.createElement(Composition, newProps);
 };
 // src/video/OffthreadVideo.tsx
-import {useCallback as useCallback14} from "react";
+import { useCallback as useCallback14 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-useCallback as useCallback13,
-useContext as useContext27,
-useEffect as useEffect21,
-useLayoutEffect as useLayoutEffect6,
-useMemo as useMemo29,
-useState as useState18
+  useCallback as useCallback13,
+  useContext as useContext27,
+  useEffect as useEffect21,
+  useLayoutEffect as useLayoutEffect6,
+  useMemo as useMemo29,
+  useState as useState18
 } from "react";
-import {
-jsx as jsx29
-} from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -6032,17 +5972,17 @@ var OffthreadVideoForRendering = ({
 
 // src/video/VideoForPreview.tsx
 import {
-forwardRef as forwardRef9,
-useContext as useContext28,
-useEffect as useEffect23,
-useImperativeHandle as useImperativeHandle7,
-useMemo as useMemo30,
-useRef as useRef13,
-useState as useState19
+  forwardRef as forwardRef9,
+  useContext as useContext28,
+  useEffect as useEffect23,
+  useImperativeHandle as useImperativeHandle7,
+  useMemo as useMemo30,
+  useRef as useRef13,
+  useState as useState19
 } from "react";
 
 // src/video/emit-video-frame.ts
-import {useEffect as useEffect22} from "react";
+import { useEffect as useEffect22 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
@@ -6071,9 +6011,7 @@ var useEmitVideoFrame = ({
 };
 
 // src/video/VideoForPreview.tsx
-import {
-jsx as jsx30
-} from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const videoRef = useRef13(null);
   const {
@@ -6237,9 +6175,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import {
-jsx as jsx31
-} from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var OffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -6306,17 +6242,17 @@ var OffthreadVideo = (props2) => {
   });
 };
 // src/video/Video.tsx
-import {forwardRef as forwardRef11, useCallback as useCallback15, useContext as useContext30} from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback15, useContext as useContext30 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
-forwardRef as forwardRef10,
-useContext as useContext29,
-useEffect as useEffect24,
-useImperativeHandle as useImperativeHandle8,
-useLayoutEffect as useLayoutEffect7,
-useMemo as useMemo31,
-useRef as useRef14
+  forwardRef as forwardRef10,
+  useContext as useContext29,
+  useEffect as useEffect24,
+  useImperativeHandle as useImperativeHandle8,
+  useLayoutEffect as useLayoutEffect7,
+  useMemo as useMemo31,
+  useRef as useRef14
 } from "react";
 
 // src/video/seek-until-right.ts
@@ -6407,9 +6343,7 @@ var seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
 };
 
 // src/video/VideoForRendering.tsx
-import {
-jsx as jsx32
-} from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -6600,9 +6534,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef10(VideoForRenderingForwardFunction);
 
 // src/video/Video.tsx
-import {
-jsx as jsx33
-} from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -6616,7 +6548,7 @@ var VideoForwardingFunction = (props2, ref) => {
     crossOrigin,
     ...otherProps
   } = props2;
-  const { loop: loop4, _remotionDebugSeeking, ...propsOtherThanLoop } = props2;
+  const { loop, _remotionDebugSeeking, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = getRemotionEnvironment();
   const { durations, setDurations } = useContext30(DurationsContext);
@@ -6633,7 +6565,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const onVideoFrame = useCallback15(() => {
   }, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
-  if (loop4 && durationFetched !== undefined) {
+  if (loop && durationFetched !== undefined) {
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx33(Loop, {
       durationInFrames: calculateLoopDuration({

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.214";
+var VERSION = "4.0.215";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.214",
+  "version": "4.0.215",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",