remotion 4.0.0-lambda.1 → 4.0.0-newpathfunctions.13

package/dist/register-root.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const registerRoot: (comp: React.FC) => void;
 export declare const getRoot: () => React.FC<{}> | null;
 export declare const waitForRoot: (fn: (comp: React.FC) => void) => (() => void);

package/dist/register-root.js

@@ -4,6 +4,9 @@ exports.waitForRoot = exports.getRoot = exports.registerRoot = void 0;
 let Root = null;
 let listeners = [];
 const registerRoot = (comp) => {
+    if (!comp) {
+        throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);
+    }
     if (Root) {
         throw new Error('registerRoot() was called more than once.');
     }

package/dist/series/flatten-children.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const flattenChildren: (children: React.ReactNode) => (React.ReactChild | React.ReactFragment | React.ReactPortal)[];
+export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

package/dist/series/index.d.ts

@@ -1,10 +1,10 @@
-import { FC, PropsWithChildren } from 'react';
-import { SequenceProps } from '../Sequence';
+import type { FC, PropsWithChildren } from 'react';
+import type { LayoutAndStyle, SequenceProps } from '../Sequence';
 declare type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
-} & Pick<SequenceProps, 'layout' | 'name'>>;
-declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
+} & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
+declare const SeriesSequence: import("react").ForwardRefExoticComponent<SeriesSequenceProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const Series: FC<{
     children: React.ReactNode;
 }> & {

package/dist/series/index.js

@@ -6,10 +6,12 @@ const react_1 = require("react");
 const Sequence_1 = require("../Sequence");
 const validate_duration_in_frames_1 = require("../validation/validate-duration-in-frames");
 const flatten_children_1 = require("./flatten-children");
-const SeriesSequence = ({ children }) => {
+const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    // Discard ref
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
+const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
 const Series = ({ children }) => {
     const childrenValue = (0, react_1.useMemo)(() => {
         let startFrame = 0;
@@ -45,7 +47,7 @@ const Series = ({ children }) => {
             }
             const currentStartFrame = startFrame + offset;
             startFrame += durationInFramesProp + offset;
-            return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+            return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
     /* eslint-disable react/jsx-no-useless-fragment */

package/dist/spring/index.d.ts

@@ -1,4 +1,4 @@
-import { SpringConfig } from './spring-utils';
+import type { SpringConfig } from './spring-utils';
 /**
  * Calculates a position based on physical parameters, start and end value, and time.
  * @link https://www.remotion.dev/docs/spring
@@ -9,15 +9,19 @@ import { SpringConfig } from './spring-utils';
  * @param {number} [config.damping=10] How hard the animation decelerates.
  * @param {number} [config.stiffness=100] Affects bounciness of the animation.
  * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
- * @param {?number} from The initial value of the animation. Default `0`
- * @param {?number} to The end value of the animation. Default `1`
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
  */
-export declare function spring({ frame, fps, config, from, to, }: {
+export declare function spring({ frame, fps, config, from, to, durationInFrames, durationRestThreshold, }: {
     frame: number;
     fps: number;
     config?: Partial<SpringConfig>;
     from?: number;
     to?: number;
+    durationInFrames?: number;
+    durationRestThreshold?: number;
 }): number;
 export { measureSpring } from './measure-spring';
 export { SpringConfig } from './spring-utils';

package/dist/spring/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureSpring = exports.spring = void 0;
+const validation_spring_duration_1 = require("../validation/validation-spring-duration");
+const measure_spring_1 = require("./measure-spring");
 const spring_utils_1 = require("./spring-utils");
 /**
  * Calculates a position based on physical parameters, start and end value, and time.
@@ -12,13 +14,26 @@ const spring_utils_1 = require("./spring-utils");
  * @param {number} [config.damping=10] How hard the animation decelerates.
  * @param {number} [config.stiffness=100] Affects bounciness of the animation.
  * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
- * @param {?number} from The initial value of the animation. Default `0`
- * @param {?number} to The end value of the animation. Default `1`
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
  */
-function spring({ frame, fps, config = {}, from = 0, to = 1, }) {
+function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, }) {
+    (0, validation_spring_duration_1.validateSpringDuration)(durationInFrames);
+    const durationRatio = durationInFrames === undefined
+        ? 1
+        : durationInFrames /
+            (0, measure_spring_1.measureSpring)({
+                fps,
+                config,
+                from,
+                to,
+                threshold: durationRestThreshold,
+            });
     const spr = (0, spring_utils_1.springCalculation)({
         fps,
-        frame,
+        frame: frame / durationRatio,
         config,
         from,
         to,
@@ -32,5 +47,5 @@ function spring({ frame, fps, config = {}, from = 0, to = 1, }) {
     return Math.max(spr.current, to);
 }
 exports.spring = spring;
-var measure_spring_1 = require("./measure-spring");
-Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_1.measureSpring; } });
+var measure_spring_2 = require("./measure-spring");
+Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_2.measureSpring; } });

package/dist/spring/measure-spring.d.ts

@@ -1,4 +1,4 @@
-import { SpringConfig } from './spring-utils';
+import type { SpringConfig } from './spring-utils';
 export declare function measureSpring({ fps, config, threshold, from, to, }: {
     fps: number;
     config?: Partial<SpringConfig>;

package/dist/spring/measure-spring.js

@@ -22,7 +22,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
     if (threshold < 0) {
         throw new TypeError('Threshold is below 0');
     }
-    (0, validate_fps_1.validateFps)(fps, 'to the measureSpring() function');
+    (0, validate_fps_1.validateFps)(fps, 'to the measureSpring() function', false);
     const range = Math.abs(from - to);
     let frame = 0;
     let finishedFrame = 0;

package/dist/static-file.d.ts

@@ -1 +1,5 @@
+/**
+ * Reference a file from the public/ folder.
+ * If the file does not appear in the autocomplete, type the path manually.
+ */
 export declare const staticFile: (path: string) => string;

package/dist/static-file.js

@@ -13,7 +13,17 @@ const inner = (path) => {
     }
     return `/${trimLeadingSlash(path)}`;
 };
+/**
+ * Reference a file from the public/ folder.
+ * If the file does not appear in the autocomplete, type the path manually.
+ */
 const staticFile = (path) => {
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+        throw new TypeError(`staticFile() does not support remote URLs - got "${path}". Instead, pass the URL without wrapping it in staticFile(). See: https://remotion.dev/docs/staticfile-remote-urls`);
+    }
+    if (path.startsWith('..') || path.startsWith('./')) {
+        throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
     const preparsed = inner(path);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;

package/dist/timeline-position-state.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare type PlayableMediaTag = {
     play: () => void;
     id: string;

package/dist/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

@@ -1,21 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCurrentFrame = exports.useAbsoluteCurrentFrame = void 0;
+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 useAbsoluteCurrentFrame = () => {
-    const timelinePosition = (0, timeline_position_state_1.useTimelinePosition)();
-    return timelinePosition;
-};
-exports.useAbsoluteCurrentFrame = useAbsoluteCurrentFrame;
 /**
  * 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 frame = (0, exports.useAbsoluteCurrentFrame)();
+    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

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,6 +5,7 @@ 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");
@@ -19,7 +20,7 @@ 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)(Sequence_1.SequenceContext);
@@ -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,6 +1,6 @@
 "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");
@@ -9,10 +9,11 @@ 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_current_frame_1.useCurrentFrame)();
-    const absoluteFrame = (0, use_current_frame_1.useAbsoluteCurrentFrame)();
+    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-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;