remotion 3.3.44 → 3.3.51

package/dist/{video → cjs/video}/OffthreadVideoForRendering.js

@@ -3,34 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OffthreadVideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const absolute_src_1 = require("../absolute-src");
-const use_audio_frame_1 = require("../audio/use-audio-frame");
-const CompositionManager_1 = require("../CompositionManager");
-const default_css_1 = require("../default-css");
-const Img_1 = require("../Img");
-const internals_1 = require("../internals");
-const random_1 = require("../random");
-const Sequence_1 = require("../Sequence");
-const timeline_position_state_1 = require("../timeline-position-state");
-const use_current_frame_1 = require("../use-current-frame");
-const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
-const volume_prop_1 = require("../volume-prop");
-const get_current_time_1 = require("./get-current-time");
+const absolute_src_js_1 = require("../absolute-src.js");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const CompositionManager_js_1 = require("../CompositionManager.js");
+const default_css_js_1 = require("../default-css.js");
+const Img_js_1 = require("../Img.js");
+const internals_js_1 = require("../internals.js");
+const random_js_1 = require("../random.js");
+const Sequence_js_1 = require("../Sequence.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_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
+const volume_prop_js_1 = require("../volume-prop.js");
+const get_current_time_js_1 = require("./get-current-time.js");
 const DEFAULT_IMAGE_FORMAT = 'jpeg';
 const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, imageFormat, allowAmplificationDuringRender, ...props }) => {
-    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
-    const frame = (0, use_current_frame_1.useCurrentFrame)();
-    const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
-    const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
-    const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
-    const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
+    const sequenceContext = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
     }
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
-    const id = (0, react_1.useMemo)(() => `offthreadvideo-${(0, random_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`, [
+    const id = (0, react_1.useMemo)(() => `offthreadvideo-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`, [
         src,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
@@ -39,7 +39,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     if (!videoConfig) {
         throw new Error('No video config found');
     }
-    const volume = (0, volume_prop_1.evaluateVolume)({
+    const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1,
@@ -60,7 +60,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         }
         registerAsset({
             type: 'video',
-            src: (0, absolute_src_1.getAbsoluteSrc)(src),
+            src: (0, absolute_src_js_1.getAbsoluteSrc)(src),
             id,
             frame: absoluteFrame,
             volume,
@@ -82,23 +82,23 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         allowAmplificationDuringRender,
     ]);
     const currentTime = (0, react_1.useMemo)(() => {
-        return ((0, get_current_time_1.getExpectedMediaFrameUncorrected)({
+        return ((0, get_current_time_js_1.getExpectedMediaFrameUncorrected)({
             frame,
             playbackRate: playbackRate || 1,
             startFrom: -mediaStartsAt,
         }) / videoConfig.fps);
     }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
     const actualSrc = (0, react_1.useMemo)(() => {
-        return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&imageFormat=${imageFormat !== null && imageFormat !== void 0 ? imageFormat : DEFAULT_IMAGE_FORMAT}`;
+        return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_js_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&imageFormat=${imageFormat !== null && imageFormat !== void 0 ? imageFormat : DEFAULT_IMAGE_FORMAT}`;
     }, [currentTime, imageFormat, src]);
     const onErr = (0, react_1.useCallback)((e) => {
         onError === null || onError === void 0 ? void 0 : onError(e);
     }, [onError]);
     const className = (0, react_1.useMemo)(() => {
-        return [default_css_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
-            .filter(internals_1.Internals.truthy)
+        return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
+            .filter(internals_js_1.Internals.truthy)
             .join(' ');
     }, [props.className]);
-    return ((0, jsx_runtime_1.jsx)(Img_1.Img, { src: actualSrc, className: className, ...props, onError: onErr }));
+    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: actualSrc, className: className, ...props, onError: onErr }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/{video → cjs/video}/Video.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { RemotionMainVideoProps } from './props';
+import type { RemotionMainVideoProps } from './props.js';
 export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
-    volume?: import("../volume-prop").VolumeProp | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;

package/dist/{video → cjs/video}/Video.js

@@ -3,22 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Video = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const get_environment_1 = require("../get-environment");
+const get_environment_js_1 = require("../get-environment.js");
 const loop_1 = require("../loop");
-const Sequence_1 = require("../Sequence");
-const use_video_config_1 = require("../use-video-config");
-const validate_media_props_1 = require("../validate-media-props");
-const validate_start_from_props_1 = require("../validate-start-from-props");
-const duration_state_1 = require("./duration-state");
-const VideoForDevelopment_1 = require("./VideoForDevelopment");
-const VideoForRendering_1 = require("./VideoForRendering");
+const Sequence_js_1 = require("../Sequence.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");
+const duration_state_js_1 = require("./duration-state.js");
+const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
+const VideoForRendering_js_1 = require("./VideoForRendering.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a;
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
-    const { fps } = (0, use_video_config_1.useVideoConfig)();
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
-    const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof ref === 'string') {
         throw new Error('string refs are not supported');
     }
@@ -35,16 +35,16 @@ const VideoForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(loop_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
-        (0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
+        (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);
         const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
         const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
-        return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...otherProps, ref: ref }) }));
+        return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...otherProps, ref: ref }) }));
     }
-    (0, validate_media_props_1.validateMediaProps)(props, 'Video');
+    (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment === 'rendering') {
-        return ((0, jsx_runtime_1.jsx)(VideoForRendering_1.VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
+        return ((0, jsx_runtime_1.jsx)(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
-    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));
 };
 const forward = react_1.forwardRef;
 exports.Video = forward(VideoForwardingFunction);

package/dist/{video → cjs/video}/VideoForDevelopment.d.ts

@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
 export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
-    volume?: import("../volume-prop").VolumeProp | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;

package/dist/{video → cjs/video}/VideoForDevelopment.js

@@ -3,32 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoForDevelopment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_audio_frame_1 = require("../audio/use-audio-frame");
-const prefetch_1 = require("../prefetch");
-const Sequence_1 = require("../Sequence");
-const use_media_in_timeline_1 = require("../use-media-in-timeline");
-const use_media_playback_1 = require("../use-media-playback");
-const use_media_tag_volume_1 = require("../use-media-tag-volume");
-const use_sync_volume_with_media_tag_1 = require("../use-sync-volume-with-media-tag");
-const use_video_config_1 = require("../use-video-config");
-const volume_position_state_1 = require("../volume-position-state");
-const video_fragment_1 = require("./video-fragment");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const prefetch_js_1 = require("../prefetch.js");
+const Sequence_js_1 = require("../Sequence.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 use_video_config_js_1 = require("../use-video-config.js");
+const volume_position_state_js_1 = require("../volume-position-state.js");
+const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     var _a, _b;
     const videoRef = (0, react_1.useRef)(null);
-    const volumePropFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
-    const { fps, durationInFrames } = (0, use_video_config_1.useVideoConfig)();
-    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
+    const parentSequence = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
     acceptableTimeShift, acceptableTimeShiftInSeconds, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
-    const actualVolume = (0, use_media_tag_volume_1.useMediaTagVolume)(videoRef);
-    const [mediaVolume] = (0, volume_position_state_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_1.useMediaMutedState)();
-    (0, use_media_in_timeline_1.useMediaInTimeline)({
+    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(videoRef);
+    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
+    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
+    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         mediaRef: videoRef,
         volume,
         mediaVolume,
@@ -36,20 +36,20 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         src,
         playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
     });
-    (0, use_sync_volume_with_media_tag_1.useSyncVolumeWithMediaTag)({
+    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
         actualVolume,
         volume,
         mediaVolume,
         mediaRef: videoRef,
     });
-    (0, use_media_playback_1.useMediaPlayback)({
+    (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: videoRef,
         src,
         mediaType: 'video',
         playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
         onlyWarnForMediaSeekingError,
-        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
+        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
     });
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
@@ -57,8 +57,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, durationInFrames)
         : durationInFrames;
-    const actualSrc = (0, video_fragment_1.useAppendVideoFragment)({
-        actualSrc: (0, prefetch_1.usePreload)(src),
+    const actualSrc = (0, video_fragment_js_1.useAppendVideoFragment)({
+        actualSrc: (0, prefetch_js_1.usePreload)(src),
         actualFrom,
         duration,
         fps,

package/dist/{video → cjs/video}/VideoForRendering.d.ts

@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
 export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
-    volume?: import("../volume-prop").VolumeProp | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;

package/dist/{video → cjs/video}/VideoForRendering.js

@@ -3,35 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const absolute_src_1 = require("../absolute-src");
-const use_audio_frame_1 = require("../audio/use-audio-frame");
-const CompositionManager_1 = require("../CompositionManager");
-const delay_render_1 = require("../delay-render");
-const get_environment_1 = require("../get-environment");
-const is_approximately_the_same_1 = require("../is-approximately-the-same");
-const random_1 = require("../random");
-const Sequence_1 = require("../Sequence");
-const timeline_position_state_1 = require("../timeline-position-state");
-const use_current_frame_1 = require("../use-current-frame");
-const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
-const volume_prop_1 = require("../volume-prop");
-const warn_about_non_seekable_media_1 = require("../warn-about-non-seekable-media");
-const get_current_time_1 = require("./get-current-time");
+const absolute_src_js_1 = require("../absolute-src.js");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const CompositionManager_js_1 = require("../CompositionManager.js");
+const delay_render_js_1 = require("../delay-render.js");
+const get_environment_js_1 = require("../get-environment.js");
+const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
+const random_js_1 = require("../random.js");
+const Sequence_js_1 = require("../Sequence.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_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
+const volume_prop_js_1 = require("../volume-prop.js");
+const warn_about_non_seekable_media_js_1 = require("../warn-about-non-seekable-media.js");
+const get_current_time_js_1 = require("./get-current-time.js");
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {
-    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
-    const frame = (0, use_current_frame_1.useCurrentFrame)();
-    const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
-    const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
+    const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const videoRef = (0, react_1.useRef)(null);
-    const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
-    const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const sequenceContext = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
+    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
         var _a;
-        return `video-${(0, random_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
+        return `video-${(0, random_js_1.random)((_a = props.src) !== null && _a !== void 0 ? _a : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}`;
     }, [
         props.src,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
@@ -41,7 +41,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     if (!videoConfig) {
         throw new Error('No video config found');
     }
-    const volume = (0, volume_prop_1.evaluateVolume)({
+    const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1,
@@ -62,7 +62,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         }
         registerAsset({
             type: 'video',
-            src: (0, absolute_src_1.getAbsoluteSrc)(props.src),
+            src: (0, absolute_src_js_1.getAbsoluteSrc)(props.src),
             id,
             frame: absoluteFrame,
             volume,
@@ -95,7 +95,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             return;
         }
         const currentTime = (() => {
-            return (0, get_current_time_1.getMediaTime)({
+            return (0, get_current_time_js_1.getMediaTime)({
                 fps: videoConfig.fps,
                 frame,
                 src: props.src,
@@ -104,18 +104,18 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
                 mediaType: 'video',
             });
         })();
-        const handle = (0, delay_render_1.delayRender)(`Rendering <Video /> with src="${props.src}"`);
+        const handle = (0, delay_render_js_1.delayRender)(`Rendering <Video /> with src="${props.src}"`);
         if (process.env.NODE_ENV === 'test') {
-            (0, delay_render_1.continueRender)(handle);
+            (0, delay_render_js_1.continueRender)(handle);
             return;
         }
-        if ((0, is_approximately_the_same_1.isApproximatelyTheSame)(current.currentTime, currentTime)) {
+        if ((0, is_approximately_the_same_js_1.isApproximatelyTheSame)(current.currentTime, currentTime)) {
             if (current.readyState >= 2) {
-                (0, delay_render_1.continueRender)(handle);
+                (0, delay_render_js_1.continueRender)(handle);
                 return;
             }
             const loadedDataHandler = () => {
-                (0, delay_render_1.continueRender)(handle);
+                (0, delay_render_js_1.continueRender)(handle);
             };
             current.addEventListener('loadeddata', loadedDataHandler, { once: true });
             return () => {
@@ -124,22 +124,22 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         }
         current.currentTime = currentTime;
         const seekedHandler = () => {
-            (0, warn_about_non_seekable_media_1.warnAboutNonSeekableMedia)(current, 'exception');
+            (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(current, 'exception');
             if (window.navigator.platform.startsWith('Mac')) {
                 // Improve me: This is ensures frame perfectness but slows down render.
                 // Please see this issue for context: https://github.com/remotion-dev/remotion/issues/200
                 // Only affects macOS since it uses VideoToolbox decoding.
                 setTimeout(() => {
-                    (0, delay_render_1.continueRender)(handle);
+                    (0, delay_render_js_1.continueRender)(handle);
                 }, 100);
             }
             else {
-                (0, delay_render_1.continueRender)(handle);
+                (0, delay_render_js_1.continueRender)(handle);
             }
         };
         current.addEventListener('seeked', seekedHandler, { once: true });
         const endedHandler = () => {
-            (0, delay_render_1.continueRender)(handle);
+            (0, delay_render_js_1.continueRender)(handle);
         };
         current.addEventListener('ended', endedHandler, { once: true });
         const errorHandler = () => {
@@ -158,7 +158,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             current.removeEventListener('ended', endedHandler);
             current.removeEventListener('error', errorHandler);
             current.removeEventListener('seeked', seekedHandler);
-            (0, delay_render_1.continueRender)(handle);
+            (0, delay_render_js_1.continueRender)(handle);
         };
     }, [
         volumePropsFrame,
@@ -176,17 +176,17 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_1.delayRender)('Loading <Video> duration with src=' + src);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Video> duration with src=' + src);
             const { current } = videoRef;
             const didLoad = () => {
                 if (current === null || current === void 0 ? void 0 : current.duration) {
                     onDuration(src, current.duration);
                 }
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             };
             if (current === null || current === void 0 ? void 0 : current.duration) {
                 onDuration(src, current.duration);
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             }
             else {
                 current === null || current === void 0 ? void 0 : current.addEventListener('loadedmetadata', didLoad, { once: true });
@@ -194,7 +194,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             // If tag gets unmounted, clear pending handles because video metadata is not going to load
             return () => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('loadedmetadata', didLoad);
-                (0, delay_render_1.continueRender)(newHandle);
+                (0, delay_render_js_1.continueRender)(newHandle);
             };
         }, [src, onDuration]);
     }

package/dist/{video → cjs/video}/get-current-time.js

@@ -2,9 +2,9 @@
 // Calculate the `.currentTime` of a video or audio element
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMediaTime = exports.getExpectedMediaFrameUncorrected = void 0;
-const interpolate_1 = require("../interpolate");
+const interpolate_js_1 = require("../interpolate.js");
 const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) => {
-    return (0, interpolate_1.interpolate)(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
+    return (0, interpolate_js_1.interpolate)(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
 };
 exports.getExpectedMediaFrameUncorrected = getExpectedMediaFrameUncorrected;
 const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, }) => {

package/dist/{video → cjs/video}/index.d.ts

@@ -1,3 +1,3 @@
-export { OffthreadVideo } from './OffthreadVideo';
-export { OffthreadVideoImageFormat, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionMainVideoProps, RemotionVideoProps, } from './props';
-export { Video } from './Video';
+export { OffthreadVideo } from './OffthreadVideo.js';
+export { OffthreadVideoImageFormat, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionMainVideoProps, RemotionVideoProps, } from './props.js';
+export { Video } from './Video.js';

package/dist/{video → cjs/video}/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Video = exports.OffthreadVideo = void 0;
-var OffthreadVideo_1 = require("./OffthreadVideo");
-Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return OffthreadVideo_1.OffthreadVideo; } });
-var Video_1 = require("./Video");
-Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.Video; } });
+var OffthreadVideo_js_1 = require("./OffthreadVideo.js");
+Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return OffthreadVideo_js_1.OffthreadVideo; } });
+var Video_js_1 = require("./Video.js");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_js_1.Video; } });

package/dist/{video → cjs/video}/props.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { VolumeProp } from '../volume-prop';
+import type { VolumeProp } from '../volume-prop.js';
 export declare type RemotionMainVideoProps = {
     startFrom?: number;
     endAt?: number;

package/dist/cjs/wrap-remotion-context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare function useRemotionContexts(): {
+    compositionManagerCtx: import("./CompositionManager.js").CompositionManagerContext;
+    timelineContext: import("./timeline-position-state.js").TimelineContextValue;
+    setTimelineContext: import("./timeline-position-state.js").SetTimelineContextValue;
+    sequenceContext: import("./Sequence.js").SequenceContextType | null;
+    nonceContext: import("./nonce.js").TNonceContext;
+    canUseRemotionHooksContext: boolean;
+    nativeLayersContext: import("./NativeLayers.js").TNativeLayersContext;
+    preloadContext: {
+        [x: string]: string;
+    };
+};
+export interface RemotionContextProviderProps {
+    contexts: ReturnType<typeof useRemotionContexts>;
+    children: React.ReactNode;
+}
+export declare const RemotionContextProvider: (props: RemotionContextProviderProps) => JSX.Element;

package/dist/{wrap-remotion-context.js → cjs/wrap-remotion-context.js}

@@ -29,22 +29,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // such as in React Three Fiber. All the contexts need to be passed again
 // for them to be useable
 const react_1 = __importStar(require("react"));
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const CompositionManager_1 = require("./CompositionManager");
-const NativeLayers_1 = require("./NativeLayers");
-const nonce_1 = require("./nonce");
-const prefetch_state_1 = require("./prefetch-state");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const nonce_js_1 = require("./nonce.js");
+const prefetch_state_js_1 = require("./prefetch-state.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 function useRemotionContexts() {
-    const compositionManagerCtx = react_1.default.useContext(CompositionManager_1.CompositionManager);
-    const timelineContext = react_1.default.useContext(timeline_position_state_1.TimelineContext);
-    const setTimelineContext = react_1.default.useContext(timeline_position_state_1.SetTimelineContext);
-    const sequenceContext = react_1.default.useContext(Sequence_1.SequenceContext);
-    const nonceContext = react_1.default.useContext(nonce_1.NonceContext);
-    const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_1.CanUseRemotionHooks);
-    const nativeLayersContext = react_1.default.useContext(NativeLayers_1.NativeLayersContext);
-    const preloadContext = react_1.default.useContext(prefetch_state_1.PreloadContext);
+    const compositionManagerCtx = react_1.default.useContext(CompositionManager_js_1.CompositionManager);
+    const timelineContext = react_1.default.useContext(timeline_position_state_js_1.TimelineContext);
+    const setTimelineContext = react_1.default.useContext(timeline_position_state_js_1.SetTimelineContext);
+    const sequenceContext = react_1.default.useContext(Sequence_js_1.SequenceContext);
+    const nonceContext = react_1.default.useContext(nonce_js_1.NonceContext);
+    const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
+    const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
     return (0, react_1.useMemo)(() => ({
         compositionManagerCtx,
         timelineContext,
@@ -68,6 +68,6 @@ function useRemotionContexts() {
 exports.useRemotionContexts = useRemotionContexts;
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManager_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(timeline_position_state_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(Sequence_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/AbsoluteFill.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export declare const AbsoluteFill: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/AbsoluteFill.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+const AbsoluteFillRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = useMemo(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...style,
+        };
+    }, [style]);
+    return _jsx("div", { ref: ref, style: actualStyle, ...other });
+};
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);

package/dist/esm/CanUseRemotionHooks.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CanUseRemotionHooks: React.Context<boolean>;
+export declare const CanUseRemotionHooksProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/esm/CanUseRemotionHooks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const CanUseRemotionHooks = createContext(false);
+export const CanUseRemotionHooksProvider = ({ children }) => {
+    return (_jsx(CanUseRemotionHooks.Provider, { value: true, children: children }));
+};