remotion 4.0.0-fastlambda.7 → 4.0.0-forcepublish.6

package/dist/loading-indicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Loading: React.FC;

package/dist/loading-indicator.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AbsoluteFill_1 = require("./AbsoluteFill");
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const ICON_SIZE = 40;
+const label = {
+    color: '#555',
+    fontSize: 14,
+    fontFamily: 'sans-serif',
+};
+const container = {
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const Loading = () => {
+    return ((0, jsx_runtime_1.jsxs)(AbsoluteFill_1.AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			` }), (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), (0, jsx_runtime_1.jsx)("p", { style: label, children: "Loading..." })] }));
+};
+exports.Loading = Loading;

package/dist/loop/index.js

@@ -22,6 +22,6 @@ const Loop = ({ durationInFrames, times = Infinity, children, layout, name, }) =
             return ((0, jsx_runtime_1.jsx)(__1.Sequence
             // eslint-disable-next-line react/no-array-index-key
             , { durationInFrames: durationInFrames, from: i * durationInFrames, layout: layout, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, children: children }, `loop-${i}`));
-        }) }, void 0));
+        }) }));
 };
 exports.Loop = Loop;

package/dist/play-and-handle-not-allowed-error.d.ts

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

package/dist/portal-node.d.ts

@@ -0,0 +1 @@
+export declare const portalNode: () => HTMLElement;

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/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.js → use-current-frame.js}

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentFrame = exports.useAbsoluteCurrentFrame = void 0;
 const react_1 = require("react");
-const sequencing_1 = require("./sequencing");
+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)();
@@ -15,8 +16,15 @@ exports.useAbsoluteCurrentFrame = useAbsoluteCurrentFrame;
  * @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, exports.useAbsoluteCurrentFrame)();
-    const context = (0, react_1.useContext)(sequencing_1.SequenceContext);
+    const context = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;

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

@@ -7,7 +7,7 @@ const CompositionManager_1 = require("./CompositionManager");
 const get_asset_file_name_1 = require("./get-asset-file-name");
 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 +22,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;

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, use_current_frame_1.useAbsoluteCurrentFrame)();
     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/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 --skip-n-frames 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/video/OffthreadVideo.d.ts

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

package/dist/video/OffthreadVideo.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OffthreadVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 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;
+    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.OffthreadVideo, { ...otherProps }) }));
+    }
+    (0, validate_media_props_1.validateMediaProps)(props, 'Video');
+    (0, validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat)(props.imageFormat);
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps });
+    }
+    return (0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: true, ...otherProps });
+};
+exports.OffthreadVideo = OffthreadVideo;

package/dist/video/OffthreadVideoForRendering.d.ts

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