remotion 4.0.340 → 4.0.342

package/LICENSE.md

@@ -6,10 +6,10 @@ In Remotion 5.0, the license will slightly change. [View the changes here](https
 
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
-- [Free license](#free-license)
-- [Company license](#company-license)
+- [Free License](#free-license)
+- [Company License](#company-license)
 
-## Free license
+## Free License
 
 Copyright © 2025 [Remotion](https://www.remotion.dev)
 
@@ -24,7 +24,7 @@ You are eligible to use Remotion for free if you are:
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
@@ -38,12 +38,12 @@ The software is provided "as is", without warranty of any kind, express or impli
 
 Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
-## Company license
+## Company License
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
 
 Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
 
 ### FAQs
 
-Are you not sure whether you need a company license because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).
+Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/dist/cjs/Artifact.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Artifact = void 0;
 const react_1 = require("react");
 const RenderAssetManager_1 = require("./RenderAssetManager");
-const get_remotion_environment_1 = require("./get-remotion-environment");
 const use_current_frame_1 = require("./use-current-frame");
+const use_remotion_environment_1 = require("./use-remotion-environment");
 const ArtifactThumbnail = Symbol('Thumbnail');
 const Artifact = ({ filename, content, downloadBehavior }) => {
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_1.RenderAssetManager);
-    const [env] = (0, react_1.useState)(() => (0, get_remotion_environment_1.getRemotionEnvironment)());
+    const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const [id] = (0, react_1.useState)(() => {
         return String(Math.random());

package/dist/cjs/Composition.d.ts

@@ -28,6 +28,7 @@ export type CalculateMetadataFunction<T extends Record<string, unknown>> = (opti
     props: T;
     abortSignal: AbortSignal;
     compositionId: string;
+    isRendering: boolean;
 }) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
 type OptionalDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width?: number;

package/dist/cjs/Composition.js

@@ -9,13 +9,13 @@ 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 get_remotion_environment_js_1 = require("./get-remotion-environment.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_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");
@@ -38,7 +38,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     });
     const nonce = (0, nonce_js_1.useNonce)();
     const isPlayer = (0, is_player_js_1.useIsPlayer)();
-    const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     if (canUseComposition) {
         if (isPlayer) {

package/dist/cjs/ResolveCompositionConfig.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const input_props_js_1 = require("./config/input-props.js");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 const validate_fps_js_1 = require("./validation/validate-fps.js");
@@ -34,12 +34,13 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [canvasContent, compositions]);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const inputProps = (0, react_1.useMemo)(() => {
         var _a;
-        return typeof window === 'undefined' || (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
+        return typeof window === 'undefined' || env.isPlayer
             ? {}
             : ((_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {});
-    }, []);
+    }, [env.isPlayer]);
     const [resolvedConfigs, setResolvedConfigs] = (0, react_1.useState)({});
     const selectedEditorProps = (0, react_1.useMemo)(() => {
         var _a;
@@ -297,6 +298,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         var _a;
         return composition ? ((_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {}) : {};
     }, [allEditorProps, composition]);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     return (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
         if (!composition) {
@@ -332,8 +334,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                     props: {
                         ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
-                        ...(typeof window === 'undefined' ||
-                            (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
+                        ...(typeof window === 'undefined' || env.isPlayer
                             ? {}
                             : ((_d = (0, input_props_js_1.getInputProps)()) !== null && _d !== void 0 ? _d : {})),
                     },
@@ -348,6 +349,12 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return null;
         }
         return context[composition.id];
-    }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
+    }, [
+        composition,
+        context,
+        currentCompositionMetadata,
+        selectedEditorProps,
+        env.isPlayer,
+    ]);
 };
 exports.useResolvedVideoConfig = useResolvedVideoConfig;

package/dist/cjs/Sequence.js

@@ -7,12 +7,12 @@ const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const freeze_js_1 = require("./freeze.js");
 const use_current_frame_1 = require("./use-current-frame");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
@@ -87,9 +87,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     (0, react_1.useEffect)(() => {
         var _a;
-        if (!(0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio) {
+        if (!env.isStudio) {
             return;
         }
         registerSequence({
@@ -127,6 +128,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         stack,
         premountDisplay,
         postmountDisplay,
+        env.isStudio,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -193,7 +195,8 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {
-    if (props.layout !== 'none' && !(0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    if (props.layout !== 'none' && !env.isRendering) {
         if (props.premountFor || props.postmountFor) {
             return (0, jsx_runtime_1.jsx)(PremountedPostmountedSequence, { ...props, ref: ref });
         }

package/dist/cjs/audio/Audio.js

@@ -9,9 +9,9 @@ const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_loop_js_1 = require("../calculate-loop.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
-const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
 const prefetch_js_1 = require("../prefetch.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
@@ -25,7 +25,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);

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

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 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");
 const shared_element_source_node_js_1 = require("./shared-element-source-node.js");
 const use_audio_context_js_1 = require("./use-audio-context.js");
 const EMPTY_AUDIO = 'data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
@@ -186,6 +187,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component, au
         }
     }, [rerenderAudios]);
     const mountTime = (0, log_level_context_js_1.useMountTime)();
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const playAllAudios = (0, react_1.useCallback)(() => {
         refs.forEach((ref) => {
             const audio = audios.current.find((a) => a.el === ref.ref);
@@ -199,10 +201,11 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component, au
                 logLevel,
                 mountTime,
                 reason: 'playing all audios',
+                isPlayer: env.isPlayer,
             });
         });
         audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
-    }, [audioContext, logLevel, mountTime, refs]);
+    }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
     const value = (0, react_1.useMemo)(() => {
         return {
             registerAudio,

package/dist/cjs/delay-render.d.ts

@@ -1,3 +1,4 @@
+import type { RemotionEnvironment } from './get-remotion-environment.js';
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
@@ -6,5 +7,16 @@ export type DelayRenderOptions = {
     timeoutInMilliseconds?: number;
     retries?: number;
 };
+/**
+ * Internal function that accepts environment as parameter.
+ * This allows useDelayRender to control its own environment source.
+ * @private
+ */
+export declare const delayRenderInternal: (environment: RemotionEnvironment, label?: string, options?: DelayRenderOptions) => number;
 export declare const delayRender: (label?: string, options?: DelayRenderOptions) => number;
+/**
+ * Internal function that accepts environment as parameter.
+ * @private
+ */
+export declare const continueRenderInternal: (handle: number, environment: RemotionEnvironment) => void;
 export declare const continueRender: (handle: number) => void;

package/dist/cjs/delay-render.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.continueRender = exports.continueRenderInternal = exports.delayRender = exports.delayRenderInternal = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
 const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_js_1 = require("./log.js");
@@ -17,11 +17,12 @@ exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
 exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
 exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';
 const defaultTimeout = 30000;
-/*
- * @description Call this function to signal that a frame should not be rendered until an asynchronous task (such as data fetching) is complete. Use continueRender(handle) to proceed with rendering once the task is complete.
- * @see [Documentation](https://remotion.dev/docs/delay-render)
+/**
+ * Internal function that accepts environment as parameter.
+ * This allows useDelayRender to control its own environment source.
+ * @private
  */
-const delayRender = (label, options) => {
+const delayRenderInternal = (environment, label, options) => {
     var _a, _b, _c, _d, _e;
     if (typeof label !== 'string' && typeof label !== 'undefined') {
         throw new Error('The label parameter of delayRender() must be a string or undefined, got: ' +
@@ -30,7 +31,7 @@ const delayRender = (label, options) => {
     const handle = Math.random();
     handles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
-    if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
+    if (environment.isRendering) {
         const timeoutToUse = ((_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : (typeof window === 'undefined'
             ? defaultTimeout
             : ((_d = window.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout))) - 2000;
@@ -61,12 +62,20 @@ const delayRender = (label, options) => {
     }
     return handle;
 };
-exports.delayRender = delayRender;
+exports.delayRenderInternal = delayRenderInternal;
 /*
- * @description Unblock a render that has been blocked by delayRender().
- * @see [Documentation](https://remotion.dev/docs/continue-render)
+ * @description Call this function to signal that a frame should not be rendered until an asynchronous task (such as data fetching) is complete. Use continueRender(handle) to proceed with rendering once the task is complete.
+ * @see [Documentation](https://remotion.dev/docs/delay-render)
  */
-const continueRender = (handle) => {
+const delayRender = (label, options) => {
+    return (0, exports.delayRenderInternal)((0, get_remotion_environment_js_1.getRemotionEnvironment)(), label, options);
+};
+exports.delayRender = delayRender;
+/**
+ * Internal function that accepts environment as parameter.
+ * @private
+ */
+const continueRenderInternal = (handle, environment) => {
     if (typeof handle === 'undefined') {
         throw new TypeError('The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.');
     }
@@ -76,7 +85,7 @@ const continueRender = (handle) => {
     }
     handles = handles.filter((h) => {
         if (h === handle) {
-            if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
+            if (environment.isRendering) {
                 if (!window.remotion_delayRenderTimeouts[handle]) {
                     return false;
                 }
@@ -100,4 +109,12 @@ const continueRender = (handle) => {
         window.remotion_renderReady = true;
     }
 };
+exports.continueRenderInternal = continueRenderInternal;
+/*
+ * @description Unblock a render that has been blocked by delayRender().
+ * @see [Documentation](https://remotion.dev/docs/continue-render)
+ */
+const continueRender = (handle) => {
+    (0, exports.continueRenderInternal)(handle, (0, get_remotion_environment_js_1.getRemotionEnvironment)());
+};
 exports.continueRender = continueRender;

package/dist/cjs/get-cross-origin-value.js

@@ -16,7 +16,7 @@ const getCrossOriginValue = ({ crossOrigin, requestsVideoFrame, }) => {
     // zeroing out the volume.
     // But this requires CORS, so we cannot default to that.
     // DONT DO THIS:
-    // if (!getRemotionEnvironment().isRendering) {
+    // if (!useRemotionEnvironment().isRendering) {
     // 	return 'anonymous';
     // }
     // During rendering, we opt out of the crossOrigin value

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

@@ -9,7 +9,8 @@ const getEnvString = () => {
     return ['e', 'nv'].join('');
 };
 /*
- * @description Provides information about the Remotion Environment
+ * @description Provides information about the Remotion Environment.
+ * @note Prefer using the `useRemotionEnvironment()` hook as it will support future scoped contexts for browser rendering scenarios.
  * @see [Documentation](https://remotion.dev/docs/get-remotion-environment)
  */
 const getRemotionEnvironment = () => {

package/dist/cjs/index.d.ts

@@ -44,8 +44,10 @@ declare global {
         remotion_audioEnabled: boolean;
         remotion_videoEnabled: boolean;
         remotion_puppeteerTimeout: number;
+        remotion_broadcastChannel: BroadcastChannel | undefined;
         remotion_inputProps: string;
         remotion_envVariables: string;
+        remotion_isMainTab: boolean;
         remotion_collectAssets: () => TRenderAsset[];
         remotion_isPlayer: boolean;
         remotion_isStudio: boolean;
@@ -113,6 +115,8 @@ export type { PlayableMediaTag } from './timeline-position-state.js';
 export { useBufferState } from './use-buffer-state';
 export { useCurrentFrame } from './use-current-frame.js';
 export { CurrentScaleContextType, PreviewSize, PreviewSizeCtx, Translation, useCurrentScale, } from './use-current-scale';
+export { useDelayRender } from './use-delay-render';
+export { useRemotionEnvironment } from './use-remotion-environment.js';
 export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = exports.Artifact = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -74,6 +74,10 @@ var use_current_frame_js_1 = require("./use-current-frame.js");
 Object.defineProperty(exports, "useCurrentFrame", { enumerable: true, get: function () { return use_current_frame_js_1.useCurrentFrame; } });
 var use_current_scale_1 = require("./use-current-scale");
 Object.defineProperty(exports, "useCurrentScale", { enumerable: true, get: function () { return use_current_scale_1.useCurrentScale; } });
+var use_delay_render_1 = require("./use-delay-render");
+Object.defineProperty(exports, "useDelayRender", { enumerable: true, get: function () { return use_delay_render_1.useDelayRender; } });
+var use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+Object.defineProperty(exports, "useRemotionEnvironment", { enumerable: true, get: function () { return use_remotion_environment_js_1.useRemotionEnvironment; } });
 __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);

package/dist/cjs/play-and-handle-not-allowed-error.d.ts

@@ -1,10 +1,11 @@
 import type { RefObject } from 'react';
 import type { LogLevel } from './log';
-export declare const playAndHandleNotAllowedError: ({ mediaRef, mediaType, onAutoPlayError, logLevel, mountTime, reason, }: {
+export declare const playAndHandleNotAllowedError: ({ mediaRef, mediaType, onAutoPlayError, logLevel, mountTime, reason, isPlayer, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     mediaType: "audio" | "video";
     onAutoPlayError: null | (() => void);
     logLevel: LogLevel;
     mountTime: number;
     reason: string;
+    isPlayer: boolean;
 }) => void;

package/dist/cjs/play-and-handle-not-allowed-error.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.playAndHandleNotAllowedError = void 0;
-const get_remotion_environment_1 = require("./get-remotion-environment");
 const playback_logging_1 = require("./playback-logging");
-const playAndHandleNotAllowedError = ({ mediaRef, mediaType, onAutoPlayError, logLevel, mountTime, reason, }) => {
+const playAndHandleNotAllowedError = ({ mediaRef, mediaType, onAutoPlayError, logLevel, mountTime, reason, isPlayer, }) => {
     const { current } = mediaRef;
     if (!current) {
         return;
@@ -56,7 +55,7 @@ const playAndHandleNotAllowedError = ({ mediaRef, mediaType, onAutoPlayError, lo
             }
             // eslint-disable-next-line no-console
             console.log(`The video will be muted and we'll retry playing it.`);
-            if (mediaType === 'video' && (0, get_remotion_environment_1.getRemotionEnvironment)().isPlayer) {
+            if (mediaType === 'video' && isPlayer) {
                 // eslint-disable-next-line no-console
                 console.log('Use onAutoPlayError() to handle this error yourself.');
             }

package/dist/cjs/resolve-video-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveVideoConfigOrCatch = exports.resolveVideoConfig = void 0;
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
@@ -45,6 +46,7 @@ const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalP
             props: originalProps,
             abortSignal: signal,
             compositionId,
+            isRendering: (0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering,
         })
         : null;
     if (calculatedProm !== null &&

package/dist/cjs/timeline-position-state.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
     frame: {},
@@ -56,14 +56,13 @@ const useTimelinePosition = () => {
     var _a, _b;
     const videoConfig = (0, use_video_js_1.useVideo)();
     const state = (0, react_1.useContext)(exports.TimelineContext);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!videoConfig) {
         return typeof window === 'undefined'
             ? 0
             : ((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
     }
-    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
-        ? 0
-        : (0, exports.getFrameForComposition)(videoConfig.id));
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (env.isPlayer ? 0 : (0, exports.getFrameForComposition)(videoConfig.id));
     return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 exports.useTimelinePosition = useTimelinePosition;

package/dist/cjs/use-current-frame.js

@@ -4,16 +4,17 @@ exports.useCurrentFrame = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 /*
  * @description Retrieves the current frame of the video within a component. Frames are 0-indexed, and if the component is wrapped in a `<Sequence>`, it returns the frame relative to when the Sequence starts.
  * @see [Documentation](https://www.remotion.dev/docs/use-current-frame)
  */
 const useCurrentFrame = () => {
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!canUseRemotionHooks) {
-        if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer) {
+        if (env.isPlayer) {
             throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
         }
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);

package/dist/cjs/use-current-scale.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentScale = exports.calculateScale = exports.PreviewSizeContext = exports.CurrentScaleContext = void 0;
 const react_1 = __importStar(require("react"));
-const get_remotion_environment_1 = require("./get-remotion-environment");
+const use_remotion_environment_1 = require("./use-remotion-environment");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 exports.CurrentScaleContext = react_1.default.createContext(null);
 exports.PreviewSizeContext = (0, react_1.createContext)({
@@ -64,11 +64,12 @@ const useCurrentScale = (options) => {
     const hasContext = react_1.default.useContext(exports.CurrentScaleContext);
     const zoomContext = react_1.default.useContext(exports.PreviewSizeContext);
     const config = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
+    const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     if (hasContext === null || config === null || zoomContext === null) {
         if (options === null || options === void 0 ? void 0 : options.dontThrowIfOutsideOfRemotion) {
             return 1;
         }
-        if ((0, get_remotion_environment_1.getRemotionEnvironment)().isRendering) {
+        if (env.isRendering) {
             return 1;
         }
         throw new Error([

package/dist/cjs/use-delay-render.d.ts

@@ -0,0 +1,8 @@
+import type { DelayRenderOptions } from './delay-render.js';
+type DelayRenderFn = (label?: string, options?: DelayRenderOptions) => number;
+type ContinueRenderFn = (handle: number) => void;
+export declare const useDelayRender: () => {
+    delayRender: DelayRenderFn;
+    continueRender: ContinueRenderFn;
+};
+export {};

package/dist/cjs/use-delay-render.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayRender = void 0;
+const react_1 = require("react");
+const delay_render_js_1 = require("./delay-render.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useDelayRender = () => {
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const delayRender = (0, react_1.useCallback)((label, options) => {
+        return (0, delay_render_js_1.delayRenderInternal)(environment, label, options);
+    }, [environment]);
+    const continueRender = (0, react_1.useCallback)((handle) => {
+        (0, delay_render_js_1.continueRenderInternal)(handle, environment);
+    }, [environment]);
+    return { delayRender, continueRender };
+};
+exports.useDelayRender = useDelayRender;

package/dist/cjs/use-media-in-timeline.js

@@ -6,11 +6,11 @@ const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
 const didWarn = {};
@@ -60,6 +60,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             warnOnce(`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`);
         }
     }, [initialVolume, mediaType, src, volume]);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!mediaRef.current) {
@@ -68,8 +69,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (!src) {
             throw new Error('No src passed');
         }
-        if (!(0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio &&
-            ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
+        if (!env.isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
             return;
         }
         if (!showInTimeline) {
@@ -120,6 +120,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         showInTimeline,
         premountDisplay,
         postmountDisplay,
+        env.isStudio,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {
@@ -139,6 +140,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
                     logLevel,
                     mountTime,
                     reason,
+                    isPlayer: env.isPlayer,
                 });
             },
         };
@@ -157,6 +159,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         isPostmounting,
         logLevel,
         mountTime,
+        env.isPlayer,
     ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;