remotion 4.0.109 → 4.0.111

package/dist/cjs/Img.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & {
     maxRetries?: number;
+    pauseWhenLoading?: boolean;
     src: string;
 };
 /**

package/dist/cjs/Img.js

@@ -6,12 +6,14 @@ const react_1 = require("react");
 const cancel_render_js_1 = require("./cancel-render.js");
 const delay_render_js_1 = require("./delay-render.js");
 const prefetch_js_1 = require("./prefetch.js");
+const use_buffer_state_js_1 = require("./use-buffer-state.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
+    const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
@@ -67,6 +69,9 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                 return;
             }
             const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc);
+            const unblock = pauseWhenLoading
+                ? delayPlayback().unblock
+                : () => undefined;
             const { current } = imageRef;
             const onComplete = () => {
                 var _a, _b, _c, _d;
@@ -75,6 +80,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                     // eslint-disable-next-line no-console
                     console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
                 }
+                unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
             const didLoad = () => {
@@ -89,9 +95,10 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             // If tag gets unmounted, clear pending handles because image is not going to load
             return () => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
-        }, [actualSrc]);
+        }, [actualSrc, delayPlayback, pauseWhenLoading]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };

package/dist/cjs/RemotionRoot.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const buffering_js_1 = require("./buffering.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const delay_render_js_1 = require("./delay-render.js");
 const EditorProps_js_1 = require("./EditorProps.js");
@@ -69,6 +70,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: children }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/Sequence.d.ts

@@ -13,9 +13,6 @@ export type SequencePropsWithoutDuration = {
     height?: number;
     from?: number;
     name?: string;
-    /**
-     * @deprecated For internal use only.
-     */
     showInTimeline?: boolean;
     /**
      * @deprecated For internal use only.

package/dist/cjs/audio/Audio.d.ts

@@ -13,6 +13,7 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     _remotionInternalNeedsDurationCalculation?: boolean | undefined;
     _remotionInternalNativeLoopPassed?: boolean | undefined;
     toneFrequency?: number | undefined;
+    pauseWhenBuffering?: boolean | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/audio/Audio.js

@@ -16,13 +16,13 @@ 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");
 const duration_state_js_1 = require("../video/duration-state.js");
-const AudioForDevelopment_js_1 = require("./AudioForDevelopment.js");
+const AudioForPreview_js_1 = require("./AudioForPreview.js");
 const AudioForRendering_js_1 = require("./AudioForRendering.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
-    const { startFrom, endAt, name, stack, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, pauseWhenBuffering, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -68,7 +68,9 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForDevelopment_js_1.AudioForDevelopment, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
+        // Proposal: Make this default to true in v5
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

package/dist/cjs/audio/AudioForDevelopment.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "onEnded" | "nonce" | "onResize" | "onResizeCapture"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { RemotionAudioProps } from './props.js';
+type AudioForPreviewProps = RemotionAudioProps & {
+    shouldPreMountAudioTags: boolean;
+    onDuration: (src: string, durationInSeconds: number) => void;
+    pauseWhenBuffering: boolean;
+    _remotionInternalNativeLoopPassed: boolean;
+    _remotionInternalStack: string | null;
+};
+export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
+export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioForPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const prefetch_js_1 = require("../prefetch.js");
+const random_js_1 = require("../random.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
+const SequenceManager_js_1 = require("../SequenceManager.js");
+const use_media_buffering_js_1 = require("../use-media-buffering.js");
+const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
+const use_media_playback_js_1 = require("../use-media-playback.js");
+const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
+const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
+const volume_position_state_js_1 = require("../volume-position-state.js");
+const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
+const use_audio_frame_js_1 = require("./use-audio-frame.js");
+const AudioForDevelopmentForwardRefFunction = (props, ref) => {
+    var _a;
+    const [initialShouldPreMountAudioElements] = (0, react_1.useState)(props.shouldPreMountAudioTags);
+    if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
+        throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
+    }
+    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
+    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, ...nativeProps } = props;
+    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
+    if (!src) {
+        throw new TypeError("No 'src' was passed to <Audio>.");
+    }
+    const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
+    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
+    const propsToPass = (0, react_1.useMemo)(() => {
+        return {
+            muted: muted || mediaMuted || isSequenceHidden,
+            src: preloadedSrc,
+            loop: _remotionInternalNativeLoopPassed,
+            ...nativeProps,
+        };
+    }, [
+        _remotionInternalNativeLoopPassed,
+        isSequenceHidden,
+        mediaMuted,
+        muted,
+        nativeProps,
+        preloadedSrc,
+    ]);
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time deterministic. We use it to combat strict mode issues.
+    const id = (0, react_1.useMemo)(() => `audio-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+        src,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
+        props.muted,
+        props.loop,
+    ]);
+    const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
+    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(audioRef);
+    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
+        volumePropFrame,
+        actualVolume,
+        volume,
+        mediaVolume,
+        mediaRef: audioRef,
+    });
+    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
+        volume,
+        mediaVolume,
+        mediaRef: audioRef,
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        stack: props._remotionInternalStack,
+    });
+    (0, use_media_playback_js_1.useMediaPlayback)({
+        mediaRef: audioRef,
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        onlyWarnForMediaSeekingError: false,
+        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
+    });
+    (0, use_media_buffering_js_1.useMediaBuffering)(audioRef, pauseWhenBuffering);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return audioRef.current;
+    }, [audioRef]);
+    const currentOnDurationCallback = (0, react_1.useRef)();
+    currentOnDurationCallback.current = onDuration;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const { current } = audioRef;
+        if (!current) {
+            return;
+        }
+        if (current.duration) {
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
+            return;
+        }
+        const onLoadedMetadata = () => {
+            var _a;
+            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
+        };
+        current.addEventListener('loadedmetadata', onLoadedMetadata);
+        return () => {
+            current.removeEventListener('loadedmetadata', onLoadedMetadata);
+        };
+    }, [audioRef, src]);
+    if (initialShouldPreMountAudioElements) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", ...propsToPass });
+};
+exports.AudioForPreview = (0, react_1.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -9,6 +9,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     _remotionInternalNeedsDurationCalculation?: boolean | undefined;
     _remotionInternalNativeLoopPassed?: boolean | undefined;
     toneFrequency?: number | undefined;
+    pauseWhenBuffering?: boolean | undefined;
 } & {
     onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/props.d.ts

@@ -13,4 +13,5 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     _remotionInternalNeedsDurationCalculation?: boolean;
     _remotionInternalNativeLoopPassed?: boolean;
     toneFrequency?: number;
+    pauseWhenBuffering?: boolean;
 };

package/dist/cjs/buffering.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type Block = {
+    id: string;
+};
+type OnBufferingCallback = () => void;
+type OnResumeCallback = () => void;
+type ListenForBuffering = (callback: OnBufferingCallback) => {
+    remove: () => void;
+};
+type ListenForResume = (callback: OnResumeCallback) => {
+    remove: () => void;
+};
+type AddBlock = (block: Block) => {
+    unblock: () => void;
+};
+type BufferManager = {
+    addBlock: AddBlock;
+    listenForBuffering: ListenForBuffering;
+    listenForResume: ListenForResume;
+    buffering: React.MutableRefObject<boolean>;
+};
+export declare const BufferingContextReact: React.Context<BufferManager | null>;
+export declare const BufferingProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/cjs/buffering.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BufferingProvider = exports.BufferingContextReact = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const useBufferManager = () => {
+    const [blocks, setBlocks] = (0, react_1.useState)([]);
+    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
+    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    const buffering = (0, react_1.useRef)(false);
+    const addBlock = (0, react_1.useCallback)((block) => {
+        setBlocks((b) => [...b, block]);
+        return {
+            unblock: () => {
+                setBlocks((b) => b.filter((bx) => bx !== block));
+            },
+        };
+    }, []);
+    const listenForBuffering = (0, react_1.useCallback)((callback) => {
+        setOnBufferingCallbacks((c) => [...c, callback]);
+        return {
+            remove: () => {
+                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
+            },
+        };
+    }, []);
+    const listenForResume = (0, react_1.useCallback)((callback) => {
+        setOnResumeCallbacks((c) => [...c, callback]);
+        return {
+            remove: () => {
+                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
+            },
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (blocks.length > 0) {
+            onBufferingCallbacks.forEach((c) => c());
+        }
+        else {
+            onResumeCallbacks.forEach((c) => c());
+        }
+    }, [blocks, onBufferingCallbacks, onResumeCallbacks]);
+    return (0, react_1.useMemo)(() => {
+        return { addBlock, listenForBuffering, listenForResume, buffering };
+    }, [addBlock, buffering, listenForBuffering, listenForResume]);
+};
+exports.BufferingContextReact = react_1.default.createContext(null);
+const BufferingProvider = ({ children }) => {
+    const bufferManager = useBufferManager();
+    return ((0, jsx_runtime_1.jsx)(exports.BufferingContextReact.Provider, { value: bufferManager, children: children }));
+};
+exports.BufferingProvider = BufferingProvider;

package/dist/cjs/index.d.ts

@@ -93,7 +93,9 @@ export * from './spring/index.js';
 export { staticFile } from './static-file.js';
 export * from './Still.js';
 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 * 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.useCurrentFrame = 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 = void 0;
+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 = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
@@ -64,8 +64,12 @@ __exportStar(require("./spring/index.js"), exports);
 var static_file_js_1 = require("./static-file.js");
 Object.defineProperty(exports, "staticFile", { enumerable: true, get: function () { return static_file_js_1.staticFile; } });
 __exportStar(require("./Still.js"), exports);
+var use_buffer_state_1 = require("./use-buffer-state");
+Object.defineProperty(exports, "useBufferState", { enumerable: true, get: function () { return use_buffer_state_1.useBufferState; } });
 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; } });
 __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);

package/dist/cjs/internals.d.ts

@@ -128,9 +128,37 @@ export declare const Internals: {
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
     readonly addSequenceStackTraces: (component: unknown) => void;
     readonly useMediaStartsAt: () => number;
+    readonly BufferingProvider: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    readonly BufferingContextReact: import("react").Context<{
+        addBlock: (block: {
+            id: string;
+        }) => {
+            unblock: () => void;
+        };
+        listenForBuffering: (callback: () => void) => {
+            remove: () => void;
+        };
+        listenForResume: (callback: () => void) => {
+            remove: () => void;
+        };
+        buffering: import("react").MutableRefObject<boolean>;
+    } | null>;
     readonly enableSequenceStackTraces: () => void;
     readonly colorNames: {
         [key: string]: number;
     };
+    readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
+    readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
+    readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+        previewSize: number | "auto";
+        compositionWidth: number;
+        compositionHeight: number;
+        canvasSize: {
+            width: number;
+            height: number;
+        };
+    }) => number;
 };
 export type { TComposition, TimelinePosition as Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const buffering_js_1 = require("./buffering.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const Composition_js_1 = require("./Composition.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
@@ -54,6 +55,7 @@ const setup_env_variables_js_1 = require("./setup-env-variables.js");
 const TimelinePosition = __importStar(require("./timeline-position-state.js"));
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const truthy_js_1 = require("./truthy.js");
+const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
@@ -120,6 +122,11 @@ exports.Internals = {
     WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
     addSequenceStackTraces: enable_sequence_stack_traces_js_1.addSequenceStackTraces,
     useMediaStartsAt: use_audio_frame_js_1.useMediaStartsAt,
+    BufferingProvider: buffering_js_1.BufferingProvider,
+    BufferingContextReact: buffering_js_1.BufferingContextReact,
     enableSequenceStackTraces: enable_sequence_stack_traces_js_1.enableSequenceStackTraces,
     colorNames: interpolate_colors_js_1.colorNames,
+    CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
+    PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
+    calculateScale: use_current_scale_js_1.calculateScale,
 };

package/dist/cjs/use-buffer-state.d.ts

@@ -0,0 +1,5 @@
+export declare const useBufferState: () => {
+    delayPlayback: () => {
+        unblock: () => void;
+    };
+};

package/dist/cjs/use-buffer-state.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBufferState = void 0;
+const react_1 = require("react");
+const buffering_1 = require("./buffering");
+const useBufferState = () => {
+    const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
+    return (0, react_1.useMemo)(() => ({
+        delayPlayback: () => {
+            if (!buffer) {
+                throw new Error('Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state');
+            }
+            const { unblock } = buffer.addBlock({
+                id: String(Math.random()),
+            });
+            return { unblock };
+        },
+    }), [buffer]);
+};
+exports.useBufferState = useBufferState;

package/dist/cjs/use-buffer.d.ts

@@ -0,0 +1,5 @@
+export declare const useBufferState: () => {
+    delayPlayback: () => {
+        unblock: () => void;
+    };
+};

package/dist/cjs/use-buffer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBufferState = void 0;
+const react_1 = require("react");
+const buffering_1 = require("./buffering");
+const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
+const useBufferState = () => {
+    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
+    if (!canUseRemotionHooks) {
+        if (typeof window !== 'undefined' && window.remotion_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`);
+    }
+    const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
+    if (!buffer) {
+        throw new Error('BufferingContextReact was unexpectedly not found. Most likely your Remotion versions are mismatching.');
+    }
+    return (0, react_1.useMemo)(() => ({
+        delayPlayback: () => {
+            const { unblock } = buffer.addBlock({
+                id: String(Math.random()),
+            });
+            return { unblock };
+        },
+    }), [buffer]);
+};
+exports.useBufferState = useBufferState;

package/dist/cjs/use-current-scale.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+export type CurrentScaleContextType = {
+    type: 'scale';
+    scale: number;
+} | {
+    type: 'canvas-size';
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const CurrentScaleContext: React.Context<CurrentScaleContextType | null>;
+type Options = {
+    dontThrowIfOutsideOfRemotion: boolean;
+};
+export type Translation = {
+    x: number;
+    y: number;
+};
+export type PreviewSize = {
+    size: number | 'auto';
+    translation: Translation;
+};
+export type PreviewSizeCtx = {
+    size: PreviewSize;
+    setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
+};
+export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
+export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+}) => number;
+/**
+ * Gets the current scale of the container in which the component is being rendered.
+ * Only works in the Remotion Studio and in the Remotion Player.
+ */
+export declare const useCurrentScale: (options?: Options) => number;
+export {};