remotion 3.3.45 → 3.3.51

package/dist/cjs/test/validate-start-from-props.test.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
+const expect_to_throw_js_1 = require("./expect-to-throw.js");
+(0, vitest_1.describe)('ValidateStartFrom props should throw', () => {
+    (0, vitest_1.describe)('Throw with invalid startFrom prop', () => {
+        (0, vitest_1.test)('It should throw if startFrom prop is negative', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(-40, 1), /startFrom must be greater than equal to 0 instead got -40./);
+        });
+        (0, vitest_1.test)('It should throw if startFrom is not a number', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(
+            // @ts-expect-error
+            () => (0, validate_start_from_props_js_1.validateStartFromProps)('10', 20), /type of startFrom prop must be a number, instead got type string./);
+        });
+        (0, vitest_1.test)('It should throw if startFrom is NaN', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(NaN, 20), /startFrom prop can not be NaN or Infinity./);
+        });
+        (0, vitest_1.test)('It should throw if startFrom is Infinity', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(Infinity, 20), /startFrom prop can not be NaN or Infinity./);
+        });
+    });
+    (0, vitest_1.describe)('Throw with invalid endAt prop', () => {
+        (0, vitest_1.test)('It should throw if endAt prop is negative', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(0, -40), /endAt must be a positive number, instead got -40./);
+        });
+        (0, vitest_1.test)('It should throw if endAt is less than startFrom', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(10, 1), /endAt prop must be greater than startFrom prop./);
+        });
+        (0, vitest_1.test)('It should throw if endAt is not a number', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(
+            // @ts-expect-error
+            () => (0, validate_start_from_props_js_1.validateStartFromProps)(10, '20'), /type of endAt prop must be a number, instead got type string./);
+        });
+        (0, vitest_1.test)('It should throw if endAt is NaN', () => {
+            (0, expect_to_throw_js_1.expectToThrow)(() => (0, validate_start_from_props_js_1.validateStartFromProps)(10, NaN), /endAt prop can not be NaN./);
+        });
+    });
+});

package/dist/cjs/test/video.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/test/video.test.js

@@ -0,0 +1,80 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @vitest-environment jsdom
+ */
+const react_1 = require("@testing-library/react");
+const react_2 = __importStar(require("react"));
+const vitest_1 = require("vitest");
+const CanUseRemotionHooks_js_1 = require("../CanUseRemotionHooks.js");
+const internals_js_1 = require("../internals.js");
+const video_1 = require("../video");
+const expect_to_throw_js_1 = require("./expect-to-throw.js");
+const Wrapper = ({ children }) => {
+    const compositions = (0, react_2.useContext)(internals_js_1.Internals.CompositionManager);
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(internals_js_1.Internals.RemotionRoot, { numberOfAudioTags: 0, children: (0, jsx_runtime_1.jsx)(internals_js_1.Internals.CompositionManager.Provider
+            // eslint-disable-next-line react/jsx-no-constructed-context-values
+            , { 
+                // eslint-disable-next-line react/jsx-no-constructed-context-values
+                value: {
+                    ...compositions,
+                    compositions: [
+                        {
+                            height: 1080,
+                            width: 1080,
+                            fps: 30,
+                            durationInFrames: 30,
+                            id: 'markup',
+                            nonce: 0,
+                            component: react_2.default.lazy(() => Promise.resolve({
+                                default: (() => null),
+                            })),
+                            defaultProps: undefined,
+                            folderName: null,
+                            parentFolderName: null,
+                        },
+                    ],
+                    currentComposition: 'markup',
+                }, children: children }) }) }));
+};
+(0, vitest_1.describe)('Render correctly with props', () => {
+    (0, vitest_1.test)('It should render Video without startFrom / endAt props', () => {
+        (0, vitest_1.expect)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(video_1.Video, { src: "test" }) }))).not.toThrow();
+    });
+    (0, vitest_1.test)('It should render Video with startFrom props', () => {
+        (0, vitest_1.expect)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(video_1.Video, { src: "test", startFrom: 10 }) }))).not.toThrow();
+    });
+    (0, vitest_1.test)('It should render Video with endAt props', () => {
+        (0, vitest_1.expect)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(video_1.Video, { src: "test", endAt: 10 }) }))).not.toThrow();
+    });
+    (0, vitest_1.test)('It should render Video with startFrom and endAt props', () => {
+        (0, vitest_1.expect)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(video_1.Video, { src: "test", startFrom: 10, endAt: 15 }) }))).not.toThrow();
+    });
+    (0, vitest_1.test)('It should throw if videoConfig/Wrapper is missing', () => {
+        (0, expect_to_throw_js_1.expectToThrow)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(video_1.Video, { startFrom: 10, endAt: 15 }) })), /No video config found/);
+    });
+});

package/dist/cjs/test/volume-prop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/test/volume-prop.test.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const volume_prop_js_1 = require("../volume-prop.js");
+const expect_to_throw_js_1 = require("./expect-to-throw.js");
+(0, vitest_1.describe)('EvaluateVolume does not throw', () => {
+    (0, vitest_1.test)('Volume is undefined', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: undefined,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toEqual(1);
+    });
+    (0, vitest_1.test)('Volume is smaller than one', () => {
+        const smallVolume = 0.5;
+        const toEvaluate = {
+            frame: 10,
+            volume: smallVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toEqual(smallVolume);
+    });
+    (0, vitest_1.test)('Volume is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: 10,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: true,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(10);
+    });
+    (0, vitest_1.test)('evaluated volume from frame that is smaller than one', () => {
+        const toEvaluate = {
+            frame: 1,
+            volume: (frame) => frame * 0.5,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(0.5);
+    });
+    (0, vitest_1.test)('evaluated volume from frame that is bigger than one', () => {
+        const toEvaluate = {
+            frame: 10,
+            volume: (frame) => frame,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, vitest_1.expect)((0, volume_prop_js_1.evaluateVolume)(toEvaluate)).toBe(1);
+    });
+});
+(0, vitest_1.describe)('evaluateVolume throws exception', () => {
+    (0, vitest_1.test)('It should throw if volume prop is neither number nor undefined', () => {
+        const toEvaluate = { frame: 10, volume: 'NaN' };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            // @ts-expect-error
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /volume is not a function/);
+    });
+    (0, vitest_1.test)('It should throw if volume is invalid type', () => {
+        const invalidVolume = 'anystring';
+        const toEvaluate = { frame: 1, volume: () => invalidVolume, mediaVolume: 1 };
+        // changing the test because string multiply by a number in javascript is `NaN`
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            // @ts-expect-error
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1./);
+    });
+    (0, vitest_1.test)('It should throw if volume is NaN', () => {
+        const invalidVolume = NaN;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned NaN for frame 1/);
+    });
+    (0, vitest_1.test)('It should throw if volume returns non finite number', () => {
+        const invalidVolume = Infinity;
+        const toEvaluate = {
+            frame: 1,
+            volume: () => invalidVolume,
+            mediaVolume: 1,
+            allowAmplificationDuringRender: false,
+        };
+        (0, expect_to_throw_js_1.expectToThrow)(() => {
+            (0, volume_prop_js_1.evaluateVolume)(toEvaluate);
+        }, /You passed in a function to the volume prop but it returned a non-finite number for frame 1/);
+    });
+});

package/dist/cjs/test/wrap-sequence-context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CompositionManagerContext } from '../CompositionManager.js';
+export declare const mockCompositionContext: CompositionManagerContext;
+export declare const WrapSequenceContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/test/wrap-sequence-context.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapSequenceContext = exports.mockCompositionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CanUseRemotionHooks_js_1 = require("../CanUseRemotionHooks.js");
+const CompositionManager_js_1 = require("../CompositionManager.js");
+const Comp = () => null;
+exports.mockCompositionContext = {
+    assets: [],
+    compositions: [
+        {
+            id: 'my-comp',
+            durationInFrames: 100,
+            // @ts-expect-error
+            component: Comp,
+            defaultProps: {},
+            folderName: null,
+            fps: 30,
+            height: 1080,
+            width: 1080,
+            parentFolderName: null,
+            nonce: 0,
+        },
+    ],
+    currentComposition: 'my-comp',
+    folders: [],
+    registerAsset: () => undefined,
+    registerComposition: () => undefined,
+    registerFolder: () => undefined,
+    registerSequence: () => undefined,
+    sequences: [],
+    setCurrentComposition: () => undefined,
+    unregisterAsset: () => undefined,
+    unregisterComposition: () => undefined,
+    unregisterFolder: () => undefined,
+    unregisterSequence: () => undefined,
+};
+const WrapSequenceContext = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: exports.mockCompositionContext, children: children }) }));
+};
+exports.WrapSequenceContext = WrapSequenceContext;

package/dist/{use-current-frame.js → cjs/use-current-frame.js}

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentFrame = void 0;
 const react_1 = require("react");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 /**
  * Get the current frame of the video.
  * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
  * @link https://www.remotion.dev/docs/use-current-frame
  */
 const useCurrentFrame = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
+    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_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 frame = (0, timeline_position_state_1.useTimelinePosition)();
-    const context = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const frame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;

package/dist/{use-lazy-component.d.ts → cjs/use-lazy-component.d.ts}

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
-import type { CompProps } from './internals';
+import type { CompProps } from './internals.js';
 declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
     readonly _result: T;
 };

package/dist/{use-media-in-timeline.d.ts → cjs/use-media-in-timeline.d.ts}

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { VolumeProp } from './volume-prop';
+import type { VolumeProp } from './volume-prop.js';
 export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;

package/dist/{use-media-in-timeline.js → cjs/use-media-in-timeline.js}

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = void 0;
 const react_1 = require("react");
-const use_audio_frame_1 = require("./audio/use-audio-frame");
-const CompositionManager_1 = require("./CompositionManager");
-const get_asset_file_name_1 = require("./get-asset-file-name");
-const get_environment_1 = require("./get-environment");
-const nonce_1 = require("./nonce");
-const play_and_handle_not_allowed_error_1 = require("./play-and-handle-not-allowed-error");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
-const use_video_config_1 = require("./use-video-config");
-const volume_prop_1 = require("./volume-prop");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
+const get_environment_js_1 = require("./get-environment.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 Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const volume_prop_js_1 = require("./volume-prop.js");
 const didWarn = {};
 const warnOnce = (message) => {
     if (didWarn[message]) {
@@ -21,23 +21,23 @@ const warnOnce = (message) => {
     didWarn[message] = true;
 };
 const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
-    const videoConfig = (0, use_video_config_1.useVideoConfig)();
-    const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
-    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
+    const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const parentSequence = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
-    const [playing] = (0, timeline_position_state_1.usePlayingState)();
-    const startsAt = (0, use_audio_frame_1.useMediaStartsAt)();
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
-    const nonce = (0, nonce_1.useNonce)();
+    const nonce = (0, nonce_js_1.useNonce)();
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
         : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
-    const environment = (0, get_environment_1.useRemotionEnvironment)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -45,7 +45,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         return new Array(Math.max(0, duration + startsAt))
             .fill(true)
             .map((_, i) => {
-            return (0, volume_prop_1.evaluateVolume)({
+            return (0, volume_prop_js_1.evaluateVolume)({
                 frame: i + startsAt,
                 volume,
                 mediaVolume,
@@ -77,7 +77,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             duration,
             from: 0,
             parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
-            displayName: (0, get_asset_file_name_1.getAssetDisplayName)(src),
+            displayName: (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
             rootId,
             volume: volumes,
             showInTimeline: true,
@@ -117,7 +117,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
-                return (0, play_and_handle_not_allowed_error_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
             },
         };
         audioAndVideoTags.current.push(tag);

package/dist/{use-media-playback.js → cjs/use-media-playback.js}

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaPlayback = exports.DEFAULT_ACCEPTABLE_TIMESHIFT = void 0;
 const react_1 = require("react");
-const use_audio_frame_1 = require("./audio/use-audio-frame");
-const play_and_handle_not_allowed_error_1 = require("./play-and-handle-not-allowed-error");
-const timeline_position_state_1 = require("./timeline-position-state");
-const use_current_frame_1 = require("./use-current-frame");
-const use_video_config_1 = require("./use-video-config");
-const get_current_time_1 = require("./video/get-current-time");
-const warn_about_non_seekable_media_1 = require("./warn-about-non-seekable-media");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.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_current_frame_js_1 = require("./use-current-frame.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const get_current_time_js_1 = require("./video/get-current-time.js");
+const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
 exports.DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
 const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
-    const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
-    const frame = (0, use_current_frame_1.useCurrentFrame)();
-    const absoluteFrame = (0, timeline_position_state_1.useTimelinePosition)();
-    const [playing] = (0, timeline_position_state_1.usePlayingState)();
-    const { fps } = (0, use_video_config_1.useVideoConfig)();
-    const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
+    const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     (0, react_1.useEffect)(() => {
         var _a;
@@ -33,7 +33,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
         mediaRef.current.playbackRate = Math.max(0, playbackRate);
-        const shouldBeTime = (0, get_current_time_1.getMediaTime)({
+        const shouldBeTime = (0, get_current_time_js_1.getMediaTime)({
             fps,
             frame,
             src,
@@ -48,7 +48,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             // or if time shift is bigger than 0.2sec
             mediaRef.current.currentTime = shouldBeTime;
             if (!onlyWarnForMediaSeekingError) {
-                (0, warn_about_non_seekable_media_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
         }
         if (!playing || absoluteFrame === 0) {
@@ -57,7 +57,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
             const { current } = mediaRef;
             current.currentTime = shouldBeTime;
-            (0, play_and_handle_not_allowed_error_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
         }
     }, [
         absoluteFrame,

package/dist/{use-sync-volume-with-media-tag.d.ts → cjs/use-sync-volume-with-media-tag.d.ts}

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { VolumeProp } from './volume-prop';
+import type { VolumeProp } from './volume-prop.js';
 export declare type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
     actualVolume: number;

package/dist/{use-sync-volume-with-media-tag.js → cjs/use-sync-volume-with-media-tag.js}

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSyncVolumeWithMediaTag = void 0;
 const react_1 = require("react");
-const is_approximately_the_same_1 = require("./is-approximately-the-same");
-const volume_prop_1 = require("./volume-prop");
+const is_approximately_the_same_js_1 = require("./is-approximately-the-same.js");
+const volume_prop_js_1 = require("./volume-prop.js");
 const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }) => {
     (0, react_1.useEffect)(() => {
-        const userPreferredVolume = (0, volume_prop_1.evaluateVolume)({
+        const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
             frame: volumePropFrame,
             volume,
             mediaVolume,
             allowAmplificationDuringRender: false,
         });
-        if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
+        if (!(0, is_approximately_the_same_js_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
             mediaRef.current) {
             mediaRef.current.volume = userPreferredVolume;
         }

package/dist/{use-unsafe-video-config.d.ts → cjs/use-unsafe-video-config.d.ts}

@@ -1,2 +1,2 @@
-import type { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config.js';
 export declare const useUnsafeVideoConfig: () => VideoConfig | null;

package/dist/{use-unsafe-video-config.js → cjs/use-unsafe-video-config.js}

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUnsafeVideoConfig = void 0;
 const react_1 = require("react");
-const Sequence_1 = require("./Sequence");
-const use_video_1 = require("./use-video");
+const Sequence_js_1 = require("./Sequence.js");
+const use_video_js_1 = require("./use-video.js");
 const useUnsafeVideoConfig = () => {
     var _a;
-    const context = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const context = (0, react_1.useContext)(Sequence_js_1.SequenceContext);
     const ctxDuration = (_a = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _a !== void 0 ? _a : null;
-    const video = (0, use_video_1.useVideo)();
+    const video = (0, use_video_js_1.useVideo)();
     return (0, react_1.useMemo)(() => {
         if (!video) {
             return null;

package/dist/{use-video-config.d.ts → cjs/use-video-config.d.ts}

@@ -1,4 +1,4 @@
-import type { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config.js';
 /**
  * Get some info about the context of the video that you are making.
  * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.

package/dist/{use-video-config.js → cjs/use-video-config.js}

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoConfig = void 0;
 const react_1 = require("react");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const is_player_1 = require("./is-player");
-const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const is_player_js_1 = require("./is-player.js");
+const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 /**
  * Get some info about the context of the video that you are making.
  * Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
  * @link https://www.remotion.dev/docs/use-video-config
  */
 const useVideoConfig = () => {
-    const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
-    const context = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
-    const isPlayer = (0, is_player_1.useIsPlayer)();
+    const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
+    const context = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    const isPlayer = (0, is_player_js_1.useIsPlayer)();
     if (!videoConfig) {
         if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
             isPlayer) {

package/dist/{use-video.js → cjs/use-video.js}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideo = void 0;
 const react_1 = require("react");
-const CompositionManager_1 = require("./CompositionManager");
+const CompositionManager_js_1 = require("./CompositionManager.js");
 const useVideo = () => {
-    const context = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const context = (0, react_1.useContext)(CompositionManager_js_1.CompositionManager);
     return (0, react_1.useMemo)(() => {
         var _a;
         const selected = context.compositions.find((c) => {

package/dist/cjs/validate-frame.d.ts

@@ -0,0 +1 @@
+export declare const validateFrame: (frame: number, durationInFrames: number) => void;

package/dist/cjs/validate-frame.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateFrame = void 0;
+const validateFrame = (frame, durationInFrames) => {
+    if (typeof frame === 'undefined') {
+        throw new TypeError(`Argument missing for parameter "frame"`);
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new RangeError(`Frame ${frame} is not finite`);
+    }
+    if (frame % 1 !== 0) {
+        throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
+    }
+    if (frame < 0 && frame < -durationInFrames) {
+        throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
+    }
+    if (frame > durationInFrames - 1) {
+        throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
+    }
+};
+exports.validateFrame = validateFrame;

package/dist/{validate-media-props.d.ts → cjs/validate-media-props.d.ts}

@@ -1,4 +1,4 @@
 import type { RemotionAudioProps } from './audio';
 import type { RemotionVideoProps } from './video';
-import type { OffthreadVideoProps } from './video/props';
+import type { OffthreadVideoProps } from './video/props.js';
 export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: 'Video' | 'Audio') => void;

package/dist/cjs/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "3.3.51";

package/dist/{version.js → cjs/version.js}

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '3.3.45';
+exports.VERSION = '3.3.51';

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { OffthreadVideoProps, RemotionMainVideoProps } from './props';
+import type { OffthreadVideoProps, RemotionMainVideoProps } from './props.js';
 export declare const OffthreadVideo: React.FC<Omit<OffthreadVideoProps & RemotionMainVideoProps, 'loop'>>;