remotion 4.0.0-lambda.3 → 4.0.0-newpaths.1

package/dist/{use-frame.d.ts → use-current-frame.d.ts}

@@ -1,4 +1,3 @@
-export declare const useAbsoluteCurrentFrame: () => number;
 /**
  * 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.

package/dist/use-current-frame.js

@@ -0,0 +1,28 @@
+"use strict";
+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");
+/**
+ * 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);
+    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 contextOffset = context
+        ? context.cumulatedFrom + context.relativeFrom
+        : 0;
+    return frame - contextOffset;
+};
+exports.useCurrentFrame = useCurrentFrame;

package/dist/use-lazy-component.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
-import { CompProps } from './internals';
+import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
+import type { CompProps } from './internals';
 declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
     readonly _result: T;
 };
-export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<React.ComponentType<T>>;
+export declare const useLazyComponent: <T>(compProps: CompProps<T>) => LazyExoticComponent<ComponentType<T>>;
 export {};

package/dist/use-media-in-timeline.d.ts

@@ -1,9 +1,10 @@
-import { RefObject } from 'react';
-import { VolumeProp } from './volume-prop';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
+import type { RefObject } from 'react';
+import type { VolumeProp } from './volume-prop';
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
+    playbackRate: number;
 }) => void;

package/dist/use-media-in-timeline.js

@@ -5,9 +5,10 @@ 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 sequencing_1 = require("./sequencing");
+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");
@@ -19,10 +20,10 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, }) => {
+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)(sequencing_1.SequenceContext);
+    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
@@ -32,12 +33,11 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const nonce = (0, nonce_1.useNonce)();
-    const duration = (() => {
-        return parentSequence
-            ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
-            : videoConfig.durationInFrames;
-    })();
+    const duration = parentSequence
+        ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
+        : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -49,6 +49,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
                 frame: i + startsAt,
                 volume,
                 mediaVolume,
+                allowAmplificationDuringRender: false,
             });
         })
             .join(',');
@@ -66,6 +67,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         if (!src) {
             throw new Error('No src passed');
         }
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,
@@ -81,6 +85,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
             showLoopTimesInTimeline: undefined,
+            playbackRate,
         });
         return () => {
             unregisterSequence(id);
@@ -101,6 +106,8 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         mediaRef,
         mediaType,
         startsAt,
+        playbackRate,
+        environment,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/use-media-playback.d.ts

@@ -1,7 +1,10 @@
-import { RefObject } from 'react';
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, }: {
+import type { RefObject } from 'react';
+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/use-media-playback.js

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaPlayback = void 0;
+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_frame_1 = require("./use-frame");
+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 useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, }) => {
+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_frame_1.useCurrentFrame)();
-    const absoluteFrame = (0, use_frame_1.useAbsoluteCurrentFrame)();
+    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)();
@@ -38,15 +39,17 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             src,
             playbackRate: localPlaybackRate,
             startFrom: -mediaStartsAt,
+            mediaType,
         });
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > 0.45 && !mediaRef.current.ended) {
-            console.log('Time has shifted by', timeShift, 'sec. Fixing...', `(isTime=${isTime},shouldBeTime=${shouldBeTime})`);
+        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.2sec
             mediaRef.current.currentTime = shouldBeTime;
-            (0, warn_about_non_seekable_media_1.warnAboutNonSeekableMedia)(mediaRef.current);
+            if (!onlyWarnForMediaSeekingError) {
+                (0, warn_about_non_seekable_media_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+            }
         }
         if (!playing || absoluteFrame === 0) {
             mediaRef.current.currentTime = shouldBeTime;
@@ -67,6 +70,8 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         src,
         mediaStartsAt,
         localPlaybackRate,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

package/dist/use-media-tag-volume.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare const useMediaTagVolume: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>) => number;

package/dist/use-sync-volume-with-media-tag.d.ts

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

package/dist/use-sync-volume-with-media-tag.js

@@ -10,6 +10,7 @@ const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, medi
             frame: volumePropFrame,
             volume,
             mediaVolume,
+            allowAmplificationDuringRender: false,
         });
         if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
             mediaRef.current) {

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

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

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useUnsafeVideoConfig = void 0;
 const react_1 = require("react");
-const sequencing_1 = require("./sequencing");
+const Sequence_1 = require("./Sequence");
 const use_video_1 = require("./use-video");
 const useUnsafeVideoConfig = () => {
     var _a;
-    const context = (0, react_1.useContext)(sequencing_1.SequenceContext);
+    const context = (0, react_1.useContext)(Sequence_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)();
     return (0, react_1.useMemo)(() => {

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

@@ -1,4 +1,4 @@
-import { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config';
 /**
  * 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

@@ -1,6 +1,9 @@
 "use strict";
 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");
 /**
  * Get some info about the context of the video that you are making.
@@ -9,12 +12,18 @@ const use_unsafe_video_config_1 = require("./use-unsafe-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)();
     if (!videoConfig) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
+            isPlayer) {
             throw new Error('No video config found. 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.');
         }
         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/use-video.d.ts

@@ -1 +1,13 @@
-export declare const useVideo: () => import("./CompositionManager").TComposition<unknown> | null;
+/// <reference types="react" />
+export declare const useVideo: () => {
+    height: number;
+    width: number;
+    fps: number;
+    durationInFrames: number;
+    defaultProps: unknown;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: import("react").LazyExoticComponent<import("react").ComponentType<unknown>>;
+    nonce: number;
+} | null;

package/dist/use-video.js

@@ -7,9 +7,22 @@ const useVideo = () => {
     const context = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     return (0, react_1.useMemo)(() => {
         var _a;
-        return (_a = context.compositions.find((c) => {
+        const selected = context.compositions.find((c) => {
             return c.id === context.currentComposition;
-        })) !== null && _a !== void 0 ? _a : null;
-    }, [context.compositions, context.currentComposition]);
+        });
+        if (selected) {
+            return {
+                ...selected,
+                // We override the selected metadata with the metadata that was passed to renderMedia(),
+                // and don't allow it to be changed during render anymore
+                ...((_a = context.currentCompositionMetadata) !== null && _a !== void 0 ? _a : {}),
+            };
+        }
+        return null;
+    }, [
+        context.compositions,
+        context.currentComposition,
+        context.currentCompositionMetadata,
+    ]);
 };
 exports.useVideo = useVideo;

package/dist/validate-media-props.d.ts

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

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

@@ -1 +1 @@
-export declare const validateFps: (fps: number, location: string) => void;
+export declare const validateFps: (fps: number, location: string, isGif: boolean) => void;

package/dist/validation/validate-fps.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateFps = void 0;
-const validateFps = (fps, location) => {
+const 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}`);
     }
@@ -14,5 +14,8 @@ const validateFps = (fps, location) => {
     if (fps <= 0) {
         throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
     }
+    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/validation/validate-offthreadvideo-image-format.d.ts

@@ -0,0 +1 @@
+export declare const validateOffthreadVideoImageFormat: (input: unknown) => void;

package/dist/validation/validate-offthreadvideo-image-format.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOffthreadVideoImageFormat = void 0;
+const validateOffthreadVideoImageFormat = (input) => {
+    if (typeof input === 'undefined') {
+        return;
+    }
+    if (typeof input !== 'string') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be a string, but got ${JSON.stringify(input)} instead.`);
+    }
+    if (input !== 'png' && input !== 'jpeg') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be either "png" or "jpeg", but got ${input}`);
+    }
+};
+exports.validateOffthreadVideoImageFormat = validateOffthreadVideoImageFormat;

package/dist/validation/validation-spring-duration.d.ts

@@ -0,0 +1 @@
+export declare const validateSpringDuration: (dur: unknown) => void;

package/dist/validation/validation-spring-duration.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateSpringDuration = void 0;
+const validateSpringDuration = (dur) => {
+    if (typeof dur === 'undefined') {
+        return;
+    }
+    if (typeof dur !== 'number') {
+        throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
+    }
+    if (Number.isNaN(dur)) {
+        throw new TypeError('A "duration" of a spring is NaN, which it must not be');
+    }
+    if (!Number.isFinite(dur)) {
+        throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
+    }
+    if (dur <= 0) {
+        throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
+    }
+};
+exports.validateSpringDuration = validateSpringDuration;

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "4.0.0-newpaths.1+2111c6d63";

package/dist/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERSION = void 0;
+// Automatically generated on publish
+exports.VERSION = '4.0.0-newpaths.1+2111c6d63';

package/dist/video/NativeVideo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RemotionMainVideoProps } from './props';
+export declare const NativeVideo: React.FC<{
+    src: string;
+} & RemotionMainVideoProps>;

package/dist/video/NativeVideo.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_environment_1 = require("../get-environment");
+const Sequence_1 = require("../Sequence");
+const validate_media_props_1 = require("../validate-media-props");
+const validate_start_from_props_1 = require("../validate-start-from-props");
+const NativeVideoForRendering_1 = require("./NativeVideoForRendering");
+const VideoForDevelopment_1 = require("./VideoForDevelopment");
+const NativeVideo = (props) => {
+    const { startFrom, endAt, ...otherProps } = props;
+    const onDuration = (0, react_1.useCallback)(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<NativeVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        (0, validate_start_from_props_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.NativeVideo, { ...otherProps }) }));
+    }
+    (0, validate_media_props_1.validateMediaProps)(props, 'Video');
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        throw new Error('Cannot render in the browser');
+    }
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'server-rendering') {
+        return (0, jsx_runtime_1.jsx)(NativeVideoForRendering_1.NativeVideoForRendering, { ...otherProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+};
+exports.NativeVideo = NativeVideo;

package/dist/video/NativeVideoForRendering.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type NativeVideoLayerInfo = {
+    src: string;
+    frame: number;
+};
+export declare const NativeVideoForRendering: React.FC<{
+    src: string;
+}>;

package/dist/video/NativeVideoForRendering.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeVideoForRendering = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_current_frame_1 = require("../use-current-frame");
+const NativeVideoForRendering = ({ src }) => {
+    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    return ((0, jsx_runtime_1.jsx)("div", { 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+            __html: JSON.stringify({ src, frame }),
+        } }));
+};
+exports.NativeVideoForRendering = NativeVideoForRendering;

package/dist/video/OffthreadVideo.d.ts

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

package/dist/video/OffthreadVideo.js

@@ -2,24 +2,32 @@
 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_1 = require("../get-environment");
-const sequencing_1 = require("../sequencing");
+const Sequence_1 = require("../Sequence");
 const validate_media_props_1 = require("../validate-media-props");
 const validate_start_from_props_1 = require("../validate-start-from-props");
+const validate_offthreadvideo_image_format_1 = require("../validation/validate-offthreadvideo-image-format");
 const OffthreadVideoForRendering_1 = require("./OffthreadVideoForRendering");
 const VideoForDevelopment_1 = require("./VideoForDevelopment");
 const OffthreadVideo = (props) => {
     const { startFrom, endAt, ...otherProps } = props;
+    const environment = (0, get_environment_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 (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_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)(sequencing_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { ...otherProps }) }));
+        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.OffthreadVideo, { ...otherProps }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    (0, validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat)(props.imageFormat);
+    if (environment === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps });
     }
-    return (0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { ...otherProps });
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
 };
 exports.OffthreadVideo = OffthreadVideo;

package/dist/video/OffthreadVideoForRendering.d.ts

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