remotion 4.0.341 → 4.0.342

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;

package/dist/cjs/use-media-playback.js

@@ -14,6 +14,7 @@ const seek_js_1 = require("./seek.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_media_buffering_js_1 = require("./use-media-buffering.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_request_video_callback_time_js_1 = require("./use-request-video-callback-time.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
@@ -128,6 +129,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         playing,
         isPostmounting,
     ]);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     // This must be a useLayoutEffect, because afterwards, useVolume() looks at the playbackRate
     // and it is also in a useLayoutEffect.
     (0, react_1.useLayoutEffect)(() => {
@@ -186,6 +188,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                         logLevel,
                         mountTime,
                         reason: 'player is playing but media tag is paused, and just seeked',
+                        isPlayer: env.isPlayer,
                     });
                 }
             }
@@ -241,6 +244,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 logLevel,
                 mountTime,
                 reason: `player is playing and ${reason}`,
+                isPlayer: env.isPlayer,
             });
             if (!isVariableFpsVideo && playbackRate > 0) {
                 bufferUntilFirstFrame(shouldBeTime);
@@ -268,6 +272,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         pauseWhenBuffering,
         mountTime,
         mediaTagCurrentTime,
+        env.isPlayer,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

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

@@ -0,0 +1,6 @@
+import { type RemotionEnvironment } from './get-remotion-environment';
+/**
+ * @description A React hook that provides information about the current Remotion Environment. This is the preferred way to access environment information in React components as it will support future scoped contexts.
+ * @see [Documentation](https://remotion.dev/docs/use-remotion-environment)
+ */
+export declare const useRemotionEnvironment: () => RemotionEnvironment;