remotion 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/portal-node.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.portalNode = void 0;
+let _portalNode = null;
+const portalNode = () => {
+    if (!_portalNode) {
+        if (typeof document === 'undefined') {
+            throw new Error('Tried to call an API that only works in the browser from outside the browser');
+        }
+        _portalNode = document.createElement('div');
+        _portalNode.style.position = 'absolute';
+        _portalNode.style.top = '0px';
+        _portalNode.style.left = '0px';
+        _portalNode.style.right = '0px';
+        _portalNode.style.bottom = '0px';
+        _portalNode.style.width = '100%';
+        _portalNode.style.height = '100%';
+        _portalNode.style.display = 'flex';
+        _portalNode.style.flexDirection = 'column';
+    }
+    return _portalNode;
+};
+exports.portalNode = portalNode;

package/dist/preload.d.ts

@@ -0,0 +1,7 @@
+export declare const usePreload: (src: string) => string;
+declare type FetchAndPreload = {
+    unpreload: () => void;
+    waitForDone: () => Promise<string>;
+};
+export declare const fetchAndPreload: (src: string) => FetchAndPreload;
+export {};

package/dist/preload.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchAndPreload = exports.usePreload = void 0;
+const react_1 = require("react");
+const get_environment_1 = require("./get-environment");
+const preloadRef = (0, react_1.createRef)();
+const usePreload = (src) => {
+    var _a;
+    const [preloads, setPreloads] = (0, react_1.useState)({});
+    (0, react_1.useImperativeHandle)(preloadRef, () => {
+        return {
+            setPreloads,
+        };
+    });
+    return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
+};
+exports.usePreload = usePreload;
+const fetchAndPreload = (src) => {
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        return {
+            unpreload: () => undefined,
+            waitForDone: () => Promise.resolve(src),
+        };
+    }
+    let canceled = false;
+    let objectUrl = null;
+    let resolve = () => undefined;
+    let reject = () => undefined;
+    const waitUntilDone = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    fetch(src)
+        .then((res) => {
+        if (canceled) {
+            reject(new Error('Preloading cancelled'));
+            return null;
+        }
+        if (!res.ok) {
+            throw new Error(`HTTP error, status = ${res.status}`);
+        }
+        return res.blob();
+    })
+        .then((buf) => {
+        var _a;
+        if (canceled) {
+            reject(new Error('Preloading cancelled'));
+            return;
+        }
+        if (buf) {
+            objectUrl = URL.createObjectURL(buf);
+            (_a = preloadRef.current) === null || _a === void 0 ? void 0 : _a.setPreloads((p) => ({
+                ...p,
+                [src]: objectUrl,
+            }));
+            resolve(objectUrl);
+        }
+    })
+        .catch((err) => {
+        reject(err);
+    });
+    return {
+        unpreload: () => {
+            var _a;
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl);
+                (_a = preloadRef.current) === null || _a === void 0 ? void 0 : _a.setPreloads((p) => {
+                    const copy = { ...p };
+                    delete copy[src];
+                    return copy;
+                });
+            }
+            else {
+                canceled = true;
+                reject(new Error('Preloading cancelled'));
+            }
+        },
+        waitForDone: () => {
+            return waitUntilDone;
+        },
+    };
+};
+exports.fetchAndPreload = fetchAndPreload;

package/dist/register-root.d.ts

@@ -1,3 +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

@@ -1,15 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRoot = exports.registerRoot = void 0;
-let root = null;
+exports.waitForRoot = exports.getRoot = exports.registerRoot = void 0;
+let Root = null;
+let listeners = [];
 const registerRoot = (comp) => {
-    if (root) {
+    if (Root) {
         throw new Error('registerRoot() was called more than once.');
     }
-    root = comp;
+    Root = comp;
+    listeners.forEach((l) => {
+        l(comp);
+    });
 };
 exports.registerRoot = registerRoot;
 const getRoot = () => {
-    return root;
+    return Root;
 };
 exports.getRoot = getRoot;
+const waitForRoot = (fn) => {
+    if (Root) {
+        fn(Root);
+        return () => undefined;
+    }
+    listeners.push(fn);
+    return () => {
+        listeners = listeners.filter((l) => l !== fn);
+    };
+};
+exports.waitForRoot = waitForRoot;

package/dist/series/index.d.ts

@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
-import { SequenceProps } from '../sequencing';
+import type { FC, PropsWithChildren } from 'react';
+import type { SequenceProps } from '../Sequence';
 declare type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;

package/dist/series/index.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Series = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const sequencing_1 = require("../sequencing");
+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 }) => {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 const Series = ({ children }) => {
     const childrenValue = (0, react_1.useMemo)(() => {
@@ -45,11 +45,11 @@ const Series = ({ children }) => {
             }
             const currentStartFrame = startFrame + offset;
             startFrame += durationInFramesProp + offset;
-            return ((0, jsx_runtime_1.jsx)(sequencing_1.Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: child }, void 0));
+            return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: child }));
         });
     }, [children]);
     /* eslint-disable react/jsx-no-useless-fragment */
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue }, void 0);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
 };
 exports.Series = Series;
 Series.Sequence = SeriesSequence;

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.js

@@ -14,6 +14,12 @@ const inner = (path) => {
     return `/${trimLeadingSlash(path)}`;
 };
 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-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-lazy-component.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/dist/use-media-in-timeline.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 const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;

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");
@@ -22,7 +23,7 @@ const warnOnce = (message) => {
 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)(sequencing_1.SequenceContext);
+    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
@@ -32,11 +33,9 @@ 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 volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
@@ -66,6 +65,10 @@ 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') {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,

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

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

package/dist/use-media-playback.js

@@ -5,14 +5,14 @@ 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, }) => {
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, }) => {
     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 +38,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 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 +69,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         src,
         mediaStartsAt,
         localPlaybackRate,
+        onlyWarnForMediaSeekingError,
     ]);
 };
 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-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,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoConfig = void 0;
+const react_1 = require("react");
+const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
 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 +11,16 @@ 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);
     if (!videoConfig) {
         if (typeof window !== 'undefined' && window.remotion_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,3 +1,4 @@
-import { RemotionAudioProps } from './audio';
-import { RemotionVideoProps } from './video';
-export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps, component: 'Video' | 'Audio') => void;
+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;