remotion 4.0.344 → 4.0.346

package/dist/cjs/Composition.js

@@ -8,22 +8,23 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const Folder_js_1 = require("./Folder.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
-const delay_render_js_1 = require("./delay-render.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
 const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
 const validate_default_props_js_1 = require("./validation/validate-default-props.js");
 const Fallback = () => {
+    const { continueRender, delayRender } = (0, use_delay_render_js_1.useDelayRender)();
     (0, react_1.useEffect)(() => {
-        const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
-        return () => (0, delay_render_js_1.continueRender)(fallback);
-    }, []);
+        const fallback = delayRender('Waiting for Root component to unsuspend');
+        return () => continueRender(fallback);
+    }, [continueRender, delayRender]);
     return null;
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {

package/dist/cjs/IFrame.js

@@ -3,18 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const delay_render_js_1 = require("./delay-render.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
 const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
-    const [handle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Loading <IFrame> with source ${props.src}`, {
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const [handle] = (0, react_1.useState)(() => delayRender(`Loading <IFrame> with source ${props.src}`, {
         retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
     }));
     const didLoad = (0, react_1.useCallback)((e) => {
-        (0, delay_render_js_1.continueRender)(handle);
+        continueRender(handle);
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
-    }, [handle, onLoad]);
+    }, [handle, onLoad, continueRender]);
     const didGetError = (0, react_1.useCallback)((e) => {
-        (0, delay_render_js_1.continueRender)(handle);
+        continueRender(handle);
         if (onError) {
             onError(e);
         }
@@ -22,7 +23,7 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
             // eslint-disable-next-line no-console
             console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
         }
-    }, [handle, onError]);
+    }, [handle, onError, continueRender]);
     return (0, jsx_runtime_1.jsx)("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
 };
 /*

package/dist/cjs/Img.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const cancel_render_js_1 = require("./cancel-render.js");
-const delay_render_js_1 = require("./delay-render.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
@@ -69,6 +69,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         }
         (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
@@ -85,7 +86,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             if (!current) {
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc, {
+            const newHandle = delayRender('Loading <Img> with src=' + actualSrc, {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
@@ -97,7 +98,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 var _a, _b, _c, _d;
                 // the decode() promise isn't cancelable -- it may still resolve after unmounting
                 if (unmounted) {
-                    (0, delay_render_js_1.continueRender)(newHandle);
+                    continueRender(newHandle);
                     return;
                 }
                 if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
@@ -109,7 +110,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
                 }
                 unblock();
-                (0, delay_render_js_1.continueRender)(newHandle);
+                continueRender(newHandle);
             };
             if (!imageRef.current) {
                 onComplete();
@@ -140,7 +141,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 unmounted = true;
                 current.removeEventListener('load', onComplete);
                 unblock();
-                (0, delay_render_js_1.continueRender)(newHandle);
+                continueRender(newHandle);
             };
         }, [
             actualSrc,
@@ -151,6 +152,8 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             isPremounting,
             isPostmounting,
             onImageFrame,
+            continueRender,
+            delayRender,
         ]);
     }
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({

package/dist/cjs/RemotionRoot.js

@@ -6,12 +6,12 @@ const react_1 = require("react");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const buffering_js_1 = require("./buffering.js");
-const delay_render_js_1 = require("./delay-render.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const random_js_1 = require("./random.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, audioLatencyHint, }) => {
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
@@ -22,12 +22,13 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposi
     const [manualRefreshes, setManualRefreshes] = (0, react_1.useState)(0);
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             window.remotion_setFrame = (f, composition, attempt) => {
                 window.remotion_attempt = attempt;
-                const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
+                const id = delayRender(`Setting the current frame to ${f}`);
                 let asyncUpdate = true;
                 setFrame((s) => {
                     var _a;
@@ -44,14 +45,14 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposi
                 });
                 // After setting the state, need to wait until it is applied in the next cycle
                 if (asyncUpdate) {
-                    requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
+                    requestAnimationFrame(() => continueRender(id));
                 }
                 else {
-                    (0, delay_render_js_1.continueRender)(id);
+                    continueRender(id);
                 }
             };
             window.remotion_isPlayer = false;
-        }, []);
+        }, [continueRender, delayRender]);
     }
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {

package/dist/cjs/animated-image/AnimatedImage.js

@@ -4,8 +4,8 @@ exports.AnimatedImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const cancel_render_js_1 = require("../cancel-render.js");
-const delay_render_js_1 = require("../delay-render.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
@@ -21,7 +21,8 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
     }, []);
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
-    const [decodeHandle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const [decodeHandle] = (0, react_1.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const currentTime = frame / playbackRate / fps;
@@ -47,16 +48,16 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
         })
             .then((d) => {
             setImageDecoder(d);
-            (0, delay_render_js_1.continueRender)(decodeHandle);
+            continueRender(decodeHandle);
         })
             .catch((err) => {
             if (err.name === 'AbortError') {
-                (0, delay_render_js_1.continueRender)(decodeHandle);
+                continueRender(decodeHandle);
                 return;
             }
             if (onError) {
                 onError === null || onError === void 0 ? void 0 : onError(err);
-                (0, delay_render_js_1.continueRender)(decodeHandle);
+                continueRender(decodeHandle);
             }
             else {
                 (0, cancel_render_js_1.cancelRender)(err);
@@ -65,12 +66,18 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
         return () => {
             controller.abort();
         };
-    }, [resolvedSrc, decodeHandle, onError, initialLoopBehavior]);
+    }, [
+        resolvedSrc,
+        decodeHandle,
+        onError,
+        initialLoopBehavior,
+        continueRender,
+    ]);
     (0, react_1.useLayoutEffect)(() => {
         if (!imageDecoder) {
             return;
         }
-        const delay = (0, delay_render_js_1.delayRender)(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+        const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
         imageDecoder
             .getFrame(currentTime, loopBehavior)
             .then((videoFrame) => {
@@ -83,17 +90,25 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
                     (_b = ref.current) === null || _b === void 0 ? void 0 : _b.draw(videoFrame.frame);
                 }
             }
-            (0, delay_render_js_1.continueRender)(delay);
+            continueRender(delay);
         })
             .catch((err) => {
             if (onError) {
                 onError(err);
-                (0, delay_render_js_1.continueRender)(delay);
+                continueRender(delay);
             }
             else {
                 (0, cancel_render_js_1.cancelRender)(err);
             }
         });
-    }, [currentTime, imageDecoder, loopBehavior, onError, src]);
+    }, [
+        currentTime,
+        imageDecoder,
+        loopBehavior,
+        onError,
+        src,
+        continueRender,
+        delayRender,
+    ]);
     return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, ...props }));
 });

package/dist/cjs/audio/AudioForRendering.js

@@ -6,10 +6,10 @@ const react_1 = require("react");
 const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.js");
-const delay_render_js_1 = require("../delay-render.js");
 const random_js_1 = require("../random.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_delay_render_js_1 = require("../use-delay-render.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
@@ -20,6 +20,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
@@ -95,7 +96,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (!needsToRenderAudioTag) {
             return;
         }
-        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Audio> duration with src=' + src, {
+        const newHandle = delayRender('Loading <Audio> duration with src=' + src, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
@@ -104,11 +105,11 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             if (current === null || current === void 0 ? void 0 : current.duration) {
                 onDuration(current.src, current.duration);
             }
-            (0, delay_render_js_1.continueRender)(newHandle);
+            continueRender(newHandle);
         };
         if (current === null || current === void 0 ? void 0 : current.duration) {
             onDuration(current.src, current.duration);
-            (0, delay_render_js_1.continueRender)(newHandle);
+            continueRender(newHandle);
         }
         else {
             current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
@@ -116,7 +117,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         // If tag gets unmounted, clear pending handles because video metadata is not going to load
         return () => {
             current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
-            (0, delay_render_js_1.continueRender)(newHandle);
+            continueRender(newHandle);
         };
     }, [
         src,
@@ -124,6 +125,8 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         needsToRenderAudioTag,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
+        continueRender,
+        delayRender,
     ]);
     if (!needsToRenderAudioTag) {
         return null;

package/dist/cjs/get-remotion-environment.d.ts

@@ -1,7 +1,10 @@
+import React from 'react';
 export type RemotionEnvironment = {
     isStudio: boolean;
     isRendering: boolean;
+    isClientSideRendering: boolean;
     isPlayer: boolean;
     isReadOnlyStudio: boolean;
 };
 export declare const getRemotionEnvironment: () => RemotionEnvironment;
+export declare const RemotionEnvironmentContext: React.Context<RemotionEnvironment | null>;

package/dist/cjs/get-remotion-environment.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRemotionEnvironment = void 0;
+exports.RemotionEnvironmentContext = exports.getRemotionEnvironment = void 0;
+const react_1 = __importDefault(require("react"));
 // Avoid VITE obfuscation
 function getNodeEnvString() {
     return ['NOD', 'E_EN', 'V'].join('');
@@ -29,6 +33,8 @@ const getRemotionEnvironment = () => {
         isRendering,
         isPlayer,
         isReadOnlyStudio,
+        isClientSideRendering: false,
     };
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;
+exports.RemotionEnvironmentContext = react_1.default.createContext(null);

package/dist/cjs/internals.d.ts

@@ -263,5 +263,6 @@ export declare const Internals: {
         selectComposition: (compName: string) => void;
         toggleFolder: (folderName: string, parentName: string | null) => void;
     } | null>;
+    readonly RemotionEnvironmentContext: import("react").Context<RemotionEnvironment | null>;
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -161,4 +161,5 @@ exports.Internals = {
     playbackLogging: playback_logging_js_1.playbackLogging,
     timeValueRef: EditorProps_js_1.timeValueRef,
     compositionSelectorRef,
+    RemotionEnvironmentContext: get_remotion_environment_js_1.RemotionEnvironmentContext,
 };

package/dist/cjs/use-remotion-environment.js

@@ -8,7 +8,8 @@ const get_remotion_environment_1 = require("./get-remotion-environment");
  * @see [Documentation](https://remotion.dev/docs/use-remotion-environment)
  */
 const useRemotionEnvironment = () => {
+    const context = (0, react_1.useContext)(get_remotion_environment_1.RemotionEnvironmentContext);
     const [env] = (0, react_1.useState)(() => (0, get_remotion_environment_1.getRemotionEnvironment)());
-    return env;
+    return context !== null && context !== void 0 ? context : env;
 };
 exports.useRemotionEnvironment = useRemotionEnvironment;

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

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.344';
+exports.VERSION = '4.0.346';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -10,11 +10,11 @@ const absolute_src_js_1 = require("../absolute-src.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
-const delay_render_js_1 = require("../delay-render.js");
 const random_js_1 = require("../random.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const truthy_js_1 = require("../truthy.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
@@ -106,6 +106,7 @@ crossOrigin, audioStreamIndex, ...props }) => {
         });
     }, [toneMapped, currentTime, src, transparent]);
     const [imageSrc, setImageSrc] = (0, react_1.useState)(null);
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     (0, react_1.useLayoutEffect)(() => {
         if (!window.remotion_videoEnabled) {
             return;
@@ -113,7 +114,7 @@ crossOrigin, audioStreamIndex, ...props }) => {
         const cleanup = [];
         setImageSrc(null);
         const controller = new AbortController();
-        const newHandle = (0, delay_render_js_1.delayRender)(`Fetching ${actualSrc} from server`, {
+        const newHandle = delayRender(`Fetching ${actualSrc} from server`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
@@ -144,11 +145,11 @@ crossOrigin, audioStreamIndex, ...props }) => {
             catch (err) {
                 // If component is unmounted, we should not throw
                 if (err.message.includes('aborted')) {
-                    (0, delay_render_js_1.continueRender)(newHandle);
+                    continueRender(newHandle);
                     return;
                 }
                 if (controller.signal.aborted) {
-                    (0, delay_render_js_1.continueRender)(newHandle);
+                    continueRender(newHandle);
                     return;
                 }
                 if (err.message.includes('Failed to fetch')) {
@@ -178,6 +179,8 @@ crossOrigin, audioStreamIndex, ...props }) => {
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
         onError,
+        continueRender,
+        delayRender,
     ]);
     const onErr = (0, react_1.useCallback)(() => {
         if (onError) {
@@ -200,7 +203,7 @@ crossOrigin, audioStreamIndex, ...props }) => {
     if (!imageSrc || !window.remotion_videoEnabled) {
         return null;
     }
-    (0, delay_render_js_1.continueRender)(imageSrc.handle);
+    continueRender(imageSrc.handle);
     return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: imageSrc.src, className: className, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageFrame: onImageFrame, ...props, onError: onErr }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/cjs/video/VideoForRendering.js

@@ -7,12 +7,12 @@ const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const delay_render_js_1 = require("../delay-render.js");
 const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const random_js_1 = require("../random.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
@@ -29,6 +29,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
+    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -108,21 +109,21 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             startFrom: -mediaStartsAt,
             fps: videoConfig.fps,
         });
-        const handle = (0, delay_render_js_1.delayRender)(`Rendering <Video /> with src="${props.src}" at time ${currentTime}`, {
+        const handle = delayRender(`Rendering <Video /> with src="${props.src}" at time ${currentTime}`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
         if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
-            (0, delay_render_js_1.continueRender)(handle);
+            continueRender(handle);
             return;
         }
         if ((0, is_approximately_the_same_js_1.isApproximatelyTheSame)(current.currentTime, currentTime)) {
             if (current.readyState >= 2) {
-                (0, delay_render_js_1.continueRender)(handle);
+                continueRender(handle);
                 return;
             }
             const loadedDataHandler = () => {
-                (0, delay_render_js_1.continueRender)(handle);
+                continueRender(handle);
             };
             current.addEventListener('loadeddata', loadedDataHandler, { once: true });
             return () => {
@@ -130,7 +131,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             };
         }
         const endedHandler = () => {
-            (0, delay_render_js_1.continueRender)(handle);
+            continueRender(handle);
         };
         const seek = (0, seek_until_right_js_1.seekToTimeMultipleUntilRight)({
             element: current,
@@ -140,7 +141,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             mountTime,
         });
         seek.prom.then(() => {
-            (0, delay_render_js_1.continueRender)(handle);
+            continueRender(handle);
         });
         current.addEventListener('ended', endedHandler, { once: true });
         const errorHandler = () => {
@@ -164,7 +165,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             seek.cancel();
             current.removeEventListener('ended', endedHandler);
             current.removeEventListener('error', errorHandler);
-            (0, delay_render_js_1.continueRender)(handle);
+            continueRender(handle);
         };
     }, [
         volumePropsFrame,
@@ -178,6 +179,8 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         delayRenderTimeoutInMilliseconds,
         logLevel,
         mountTime,
+        continueRender,
+        delayRender,
     ]);
     const { src } = props;
     // If video source switches, make new handle
@@ -188,7 +191,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Video> duration with src=' + src, {
+            const newHandle = delayRender('Loading <Video> duration with src=' + src, {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
@@ -197,11 +200,11 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
                 if (current === null || current === void 0 ? void 0 : current.duration) {
                     onDuration(src, current.duration);
                 }
-                (0, delay_render_js_1.continueRender)(newHandle);
+                continueRender(newHandle);
             };
             if (current === null || current === void 0 ? void 0 : current.duration) {
                 onDuration(src, current.duration);
-                (0, delay_render_js_1.continueRender)(newHandle);
+                continueRender(newHandle);
             }
             else {
                 current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
@@ -209,9 +212,16 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             // If tag gets unmounted, clear pending handles because video metadata is not going to load
             return () => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
-                (0, delay_render_js_1.continueRender)(newHandle);
+                continueRender(newHandle);
             };
-        }, [src, onDuration, delayRenderRetries, delayRenderTimeoutInMilliseconds]);
+        }, [
+            src,
+            onDuration,
+            delayRenderRetries,
+            delayRenderTimeoutInMilliseconds,
+            continueRender,
+            delayRender,
+        ]);
     }
     return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, disableRemotePlayback: true, ...props });
 };

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;