remotion 4.0.0-webhook.26 → 4.0.0

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 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 SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.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]) {
@@ -20,34 +20,36 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, }) => {
-    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 useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
+    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)(SequenceContext_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)(SequenceManager_js_1.SequenceManager);
     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_js_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(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,
+                allowAmplificationDuringRender: false,
             });
         })
             .join(',');
@@ -65,8 +67,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         if (!src) {
             throw new Error('No src passed');
         }
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
-            process.env.NODE_ENV !== 'test') {
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
             return;
         }
         registerSequence({
@@ -76,14 +77,15 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
             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,
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
+            playbackRate,
         });
         return () => {
             unregisterSequence(id);
@@ -104,6 +106,8 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         mediaRef,
         mediaType,
         startsAt,
+        playbackRate,
+        environment,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {
@@ -113,7 +117,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
                     // 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.d.ts → cjs/use-media-playback.d.ts}

@@ -1,8 +1,10 @@
 import type { RefObject } from 'react';
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, }: {
+export declare const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
     playbackRate: number;
     onlyWarnForMediaSeekingError: boolean;
+    acceptableTimeshift: number;
 }) => void;

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaPlayback = exports.DEFAULT_ACCEPTABLE_TIMESHIFT = void 0;
+const react_1 = require("react");
+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_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;
+        if (!playing) {
+            (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [mediaRef, mediaType, playing]);
+    (0, react_1.useEffect)(() => {
+        const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
+        if (!mediaRef.current) {
+            throw new Error(`No ${mediaType} ref found`);
+        }
+        if (!src) {
+            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_js_1.getMediaTime)({
+            fps,
+            frame,
+            src,
+            playbackRate: localPlaybackRate,
+            startFrom: -mediaStartsAt,
+            mediaType,
+        });
+        const isTime = mediaRef.current.currentTime;
+        const timeShift = Math.abs(shouldBeTime - isTime);
+        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+            // If scrubbing around, adjust timing
+            // or if time shift is bigger than 0.2sec
+            mediaRef.current.currentTime = shouldBeTime;
+            if (!onlyWarnForMediaSeekingError) {
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+            }
+        }
+        // Only perform a seek if the time is not already the same.
+        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
+        // therefore a threshold is allowed.
+        // Refer to the https://github.com/remotion-dev/video-buffering-example
+        // which is fixed by only seeking conditionally.
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!playing || absoluteFrame === 0) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+        }
+        if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+        }
+    }, [
+        absoluteFrame,
+        fps,
+        playbackRate,
+        frame,
+        mediaRef,
+        mediaType,
+        playing,
+        src,
+        mediaStartsAt,
+        localPlaybackRate,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift,
+    ]);
+};
+exports.useMediaPlayback = useMediaPlayback;

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

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

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

@@ -2,16 +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,18 +2,18 @@
 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 SequenceContext_js_1 = require("./SequenceContext.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)(SequenceContext_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;
         }
-        const { id, durationInFrames, fps, height, width, defaultProps } = video;
+        const { id, durationInFrames, fps, height, width, defaultProps, props } = video;
         return {
             id,
             width,
@@ -21,6 +21,7 @@ const useUnsafeVideoConfig = () => {
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
+            props,
         };
     }, [ctxDuration, video]);
 };

package/dist/cjs/use-video-config.d.ts

@@ -0,0 +1,8 @@
+import type { VideoConfig } from './video-config.js';
+/**
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ */
+export declare const useVideoConfig: () => VideoConfig;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoConfig = void 0;
+const react_1 = require("react");
+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");
+/**
+ * /**
+ * @description Get some info about the context of the video that you are making.
+ * @see [Documentation](https://www.remotion.dev/docs/use-video-config)
+ * @returns Returns an object containing `fps`, `width`, `height` and `durationInFrames`, all of type `number`.
+ */
+const useVideoConfig = () => {
+    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) {
+            throw new Error([
+                'No video config found. Likely reasons:',
+                '- You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.',
+                '- You have multiple versions of Remotion installed which causes the React context to get lost.',
+            ].join('-'));
+        }
+        throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');
+    }
+    if (!context) {
+        throw new Error('Called useVideoConfig() outside a Remotion composition.');
+    }
+    return videoConfig;
+};
+exports.useVideoConfig = useVideoConfig;

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

@@ -0,0 +1,7 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import type { VideoConfig } from './video-config.js';
+type ReturnType = (VideoConfig & {
+    component: LazyExoticComponent<ComponentType<Record<string, unknown>>>;
+}) | null;
+export declare const useVideo: () => ReturnType;
+export {};

package/dist/cjs/use-video.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideo = void 0;
+const react_1 = require("react");
+const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const useVideo = () => {
+    const context = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const selected = context.compositions.find((c) => {
+        return c.id === context.currentComposition;
+    });
+    const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(context.currentComposition);
+    return (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!resolved) {
+            return null;
+        }
+        if (resolved.type === 'error') {
+            return null;
+        }
+        if (resolved.type === 'loading') {
+            return null;
+        }
+        if (!selected) {
+            return null;
+        }
+        return {
+            ...resolved.result,
+            defaultProps: (_a = selected.defaultProps) !== null && _a !== void 0 ? _a : {},
+            id: selected.id,
+            // We override the selected metadata with the metadata that was passed to renderMedia(),
+            // and don't allow it to be changed during render anymore
+            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
+            component: selected.component,
+        };
+    }, [context.currentCompositionMetadata, resolved, selected]);
+};
+exports.useVideo = useVideo;

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

@@ -0,0 +1,5 @@
+export declare const validateFrame: ({ allowFloats, durationInFrames, frame, }: {
+    frame: number;
+    durationInFrames: number;
+    allowFloats: boolean;
+}) => 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 = ({ allowFloats, durationInFrames, frame, }) => {
+    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 && !allowFloats) {
+        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/cjs/validate-media-props.d.ts

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

package/dist/cjs/validation/validate-default-props.d.ts

@@ -0,0 +1 @@
+export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: 'defaultProps' | 'inputProps', compositionId: string | null) => void;

package/dist/cjs/validation/validate-default-props.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDefaultAndInputProps = void 0;
+const validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+    if (!defaultProps) {
+        return;
+    }
+    if (typeof defaultProps !== 'object') {
+        throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
+    }
+    if (Array.isArray(defaultProps)) {
+        throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ''}`);
+    }
+};
+exports.validateDefaultAndInputProps = validateDefaultAndInputProps;

package/dist/cjs/validation/validate-dimensions.d.ts

@@ -0,0 +1 @@
+export declare function validateDimension(amount: unknown, nameOfProp: string, location: string): asserts amount is number;

package/dist/{validation → cjs/validation}/validate-dimensions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDimension = void 0;
-const validateDimension = (amount, nameOfProp, location) => {
+function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
     }
@@ -17,5 +17,5 @@ const validateDimension = (amount, nameOfProp, location) => {
     if (amount <= 0) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
-};
+}
 exports.validateDimension = validateDimension;

package/dist/cjs/validation/validate-duration-in-frames.d.ts

@@ -0,0 +1,4 @@
+export declare function validateDurationInFrames(durationInFrames: unknown, options: {
+    component: string;
+    allowFloats: boolean;
+}): asserts durationInFrames is number;

package/dist/{validation → cjs/validation}/validate-duration-in-frames.js

@@ -1,15 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateDurationInFrames = void 0;
-const validateDurationInFrames = (durationInFrames, component) => {
+function validateDurationInFrames(durationInFrames, options) {
+    const { allowFloats, component } = options;
+    if (typeof durationInFrames === 'undefined') {
+        throw new Error(`The "durationInFrames" prop ${component} is missing.`);
+    }
     if (typeof durationInFrames !== 'number') {
         throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
     }
     if (durationInFrames <= 0) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
     }
-    if (durationInFrames % 1 !== 0) {
+    if (!allowFloats && durationInFrames % 1 !== 0) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
     }
-};
+    if (!Number.isFinite(durationInFrames)) {
+        throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
+    }
+}
 exports.validateDurationInFrames = validateDurationInFrames;

package/dist/cjs/validation/validate-fps.d.ts

@@ -0,0 +1 @@
+export declare function validateFps(fps: unknown, location: string, isGif: boolean): asserts fps is number;

package/dist/{validation → cjs/validation}/validate-fps.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateFps = void 0;
-const validateFps = (fps, location, isGif) => {
+function validateFps(fps, location, isGif) {
     if (typeof fps !== 'number') {
         throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
     }
@@ -17,5 +17,5 @@ const validateFps = (fps, location, isGif) => {
     if (isGif && fps > 50) {
         throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
     }
-};
+}
 exports.validateFps = validateFps;

package/dist/cjs/version.d.ts

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

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 = '4.0.0-webhook.26+c8e41db11';
+exports.VERSION = '4.0.0';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OffthreadVideoProps, RemotionMainVideoProps } from './props.js';
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
+export declare const OffthreadVideo: React.FC<Omit<OffthreadVideoProps & RemotionMainVideoProps, 'loop'>>;

package/dist/cjs/video/OffthreadVideo.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OffthreadVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_environment_js_1 = require("../get-environment.js");
+const Sequence_js_1 = require("../Sequence.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 OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");
+const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
+/**
+ * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
+ * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
+ */
+const OffthreadVideo = (props) => {
+    // Should only destruct `startFrom` and `endAt` from props,
+    // rest gets drilled down
+    const { startFrom, endAt, ...otherProps } = props;
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const onDuration = (0, react_1.useCallback)(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    if (props.imageFormat) {
+        throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        (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_js_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { ...otherProps }) }));
+    }
+    (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
+    if (environment === 'rendering') {
+        return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+};
+exports.OffthreadVideo = OffthreadVideo;

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

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