remotion 4.0.379 → 4.0.381

package/dist/cjs/Composition.js

@@ -101,7 +101,10 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         }));
     }, [defaultProps, id]);
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
-    if (environment.isStudio && video && video.component === lazy) {
+    if (environment.isStudio &&
+        video &&
+        video.component === lazy &&
+        video.id === id) {
         const Comp = lazy;
         if (resolved === null ||
             (resolved.type !== 'success' &&
@@ -110,7 +113,10 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         }
         return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
-    if (environment.isRendering && video && video.component === lazy) {
+    if (environment.isRendering &&
+        video &&
+        video.component === lazy &&
+        video.id === id) {
         const Comp = lazy;
         if (resolved === null ||
             (resolved.type !== 'success' &&

package/dist/cjs/audio/shared-audio-tags.js

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSharedAudio = exports.SharedAudioContextProvider = exports.SharedAudioContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const CompositionManagerContext_js_1 = require("../CompositionManagerContext.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const play_and_handle_not_allowed_error_js_1 = require("../play-and-handle-not-allowed-error.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
@@ -81,13 +80,6 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
     if (numberOfAudioTags !== initialNumberOfAudioTags) {
         throw new Error('The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.');
     }
-    const compositionManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
-    const component = compositionManager.compositions.find((c) => {
-        var _a;
-        return ((_a = compositionManager.canvasContent) === null || _a === void 0 ? void 0 : _a.type) === 'composition'
-            ? c.id === compositionManager.canvasContent.compositionId
-            : null;
-    });
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const audioContext = (0, use_audio_context_js_1.useSingletonAudioContext)(logLevel, audioLatencyHint);
     const refs = (0, react_1.useMemo)(() => {
@@ -231,22 +223,6 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
         updateAudio,
         audioContext,
     ]);
-    // Fixing a bug: In React, if a component is unmounted using useInsertionEffect, then
-    // the cleanup function does sometimes not work properly. That is why when we
-    // are changing the composition, we reset the audio state.
-    // TODO: Possibly this does not save the problem completely, since the
-    // if an audio tag that is inside a sequence will also not be removed
-    // from the shared audios.
-    const resetAudio = (0, react_1.useCallback)(() => {
-        takenAudios.current = new Array(numberOfAudioTags).fill(false);
-        audios.current = [];
-        rerenderAudios();
-    }, [numberOfAudioTags, rerenderAudios]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            resetAudio();
-        };
-    }, [component, resetAudio]);
     return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
                 return (
                 // Without preload="metadata", iOS will seek the time internally

package/dist/cjs/calculate-loop.d.ts

@@ -0,0 +1,6 @@
+export declare const calculateLoopDuration: ({ endAt, mediaDuration, playbackRate, startFrom, }: {
+    mediaDuration: number;
+    playbackRate: number;
+    startFrom: number | undefined;
+    endAt: number | undefined;
+}) => number;

package/dist/cjs/calculate-loop.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLoopDuration = void 0;
+const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
+    let duration = mediaDuration;
+    // Account for endAt
+    if (typeof endAt !== 'undefined') {
+        duration = endAt;
+    }
+    // Account for startFrom
+    if (typeof startFrom !== 'undefined') {
+        duration -= startFrom;
+    }
+    const actualDuration = duration / playbackRate;
+    return Math.floor(actualDuration);
+};
+exports.calculateLoopDuration = calculateLoopDuration;

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.379";
+export declare const VERSION = "4.0.381";

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.379';
+exports.VERSION = '4.0.381';

package/dist/cjs/video/use-audio-channel-index.d.ts

@@ -0,0 +1,4 @@
+export declare const useAudioChannelIndex: ({ ref, audioChannelIndex, }: {
+    ref: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    audioChannelIndex: number;
+}) => void;

package/dist/cjs/video/use-audio-channel-index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAudioChannelIndex = void 0;
+const react_1 = require("react");
+const useAudioChannelIndex = ({ ref, audioChannelIndex, }) => {
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // @ts-expect-error
+        const audioChannels = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.audioTracks;
+        console.log({ audioChannels, audioChannelIndex });
+    }, [ref, audioChannelIndex]);
+};
+exports.useAudioChannelIndex = useAudioChannelIndex;

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.379";
+var VERSION = "4.0.381";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2974,7 +2974,7 @@ var DurationsContextProvider = ({ children }) => {
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
@@ -3004,7 +3004,6 @@ import React15, {
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -3158,8 +3157,6 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
-  const compositionManager = useContext16(CompositionManager);
-  const component = compositionManager.compositions.find((c) => compositionManager.canvasContent?.type === "composition" ? c.id === compositionManager.canvasContent.compositionId : null);
   const logLevel = useLogLevel();
   const audioContext = useSingletonAudioContext(logLevel, audioLatencyHint);
   const refs = useMemo15(() => {
@@ -3298,16 +3295,6 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     updateAudio,
     audioContext
   ]);
-  const resetAudio = useCallback7(() => {
-    takenAudios.current = new Array(numberOfAudioTags).fill(false);
-    audios.current = [];
-    rerenderAudios();
-  }, [numberOfAudioTags, rerenderAudios]);
-  useEffect6(() => {
-    return () => {
-      resetAudio();
-    };
-  }, [component, resetAudio]);
   return /* @__PURE__ */ jsxs(SharedAudioContext.Provider, {
     value,
     children: [
@@ -3558,7 +3545,7 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect6, useMemo as useMemo16, useState as useState12 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { useContext as useContext18 } from "react";
@@ -3656,7 +3643,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -3710,7 +3697,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect7(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3771,7 +3758,7 @@ var useMediaInTimeline = ({
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
@@ -3786,7 +3773,7 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
@@ -3828,7 +3815,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3867,7 +3854,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect8(() => {
+  useEffect7(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -4036,7 +4023,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect9, useState as useState14 } from "react";
+import { useEffect as useEffect8, useState as useState14 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -4048,7 +4035,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect9(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -4176,7 +4163,7 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
@@ -4184,7 +4171,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect10(() => {
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4478,7 +4465,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect11(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4523,7 +4510,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect11(() => {
+  useEffect10(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4642,7 +4629,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext23, useEffect as useEffect12 } from "react";
+import { useContext as useContext23, useEffect as useEffect11 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -4655,7 +4642,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect12(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4872,7 +4859,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect12(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4905,7 +4892,7 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo22,
@@ -4953,7 +4940,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect13(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -5160,11 +5147,11 @@ var Html5Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 // src/Composition.tsx
-import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect15 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect14, useMemo as useMemo23 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -5200,7 +5187,7 @@ var Folder = ({ name, children }) => {
       parentName
     };
   }, [name, parentName]);
-  useEffect15(() => {
+  useEffect14(() => {
     registerFolder(name, parentName);
     return () => {
       unregisterFolder(name, parentName);
@@ -5355,7 +5342,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect15(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -5393,7 +5380,7 @@ var InnerComposition = ({
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -5432,7 +5419,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect15(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5440,7 +5427,7 @@ var InnerComposition = ({
     }));
   }, [defaultProps, id]);
   const resolved = useResolvedVideoConfig(id);
-  if (environment.isStudio && video && video.component === lazy) {
+  if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -5454,7 +5441,7 @@ var InnerComposition = ({
       })
     }), portalNode());
   }
-  if (environment.isRendering && video && video.component === lazy) {
+  if (environment.isRendering && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
@@ -6095,7 +6082,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo27, useState as useState18 } from "react";
 
 // src/use-media-enabled.tsx
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
@@ -6161,7 +6148,7 @@ var RemotionRootContexts = ({
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect16(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -6299,7 +6286,7 @@ import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
   useContext as useContext32,
-  useEffect as useEffect18,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
@@ -6361,7 +6348,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect17(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -6523,7 +6510,7 @@ var OffthreadVideoForRendering = ({
 import {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
@@ -6531,12 +6518,12 @@ import {
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect18 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6686,7 +6673,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6717,7 +6704,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6734,7 +6721,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -7973,7 +7960,7 @@ import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
@@ -8148,7 +8135,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -8191,7 +8178,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }