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

package/dist/layers.js

@@ -0,0 +1,149 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayers = exports.convertComponentTypesToLayersWithCache = exports.convertComponentTypesToLayers = void 0;
+const react_1 = __importStar(require("react"));
+const inputLayersToLayers = (layers) => {
+    return layers.map((layer) => {
+        if (layer.type === 'web') {
+            return {
+                component: react_1.default.lazy(() => Promise.resolve({ default: layer.component })),
+                type: 'web',
+            };
+        }
+        // No lazy for Video allowed!
+        if (layer.type === 'video') {
+            return {
+                component: layer.component,
+                type: 'video',
+            };
+        }
+        // No lazy for SVG allowed!
+        return {
+            component: layer.component,
+            type: 'svg',
+        };
+    });
+};
+const convertComponentTypesToLayers = (compProps) => {
+    if ('component' in compProps) {
+        // In SSR, suspense is not yet supported, we cannot use React.lazy
+        if (typeof document === 'undefined') {
+            return [
+                {
+                    component: compProps.component,
+                    type: 'web',
+                },
+            ];
+        }
+        return [
+            {
+                component: react_1.default.lazy(() => Promise.resolve({ default: compProps.component })),
+                type: 'web',
+            },
+        ];
+    }
+    if ('lazyComponent' in compProps) {
+        return [
+            {
+                component: react_1.default.lazy(compProps.lazyComponent),
+                type: 'web',
+            },
+        ];
+    }
+    if ('layers' in compProps) {
+        return inputLayersToLayers(compProps.layers);
+    }
+    throw new Error('Unknown component type');
+};
+exports.convertComponentTypesToLayers = convertComponentTypesToLayers;
+const convertComponentTypesToLayersWithCache = (compProps, prevCompProps, prevReturnValue) => {
+    if ('component' in compProps) {
+        if (prevCompProps &&
+            'component' in prevCompProps &&
+            compProps.component === prevCompProps.component &&
+            prevReturnValue) {
+            return prevReturnValue;
+        }
+        return [
+            {
+                type: 'web',
+                component: react_1.default.lazy(() => Promise.resolve({ default: compProps.component })),
+            },
+        ];
+    }
+    if ('lazyComponent' in compProps) {
+        if (prevCompProps &&
+            'lazyComponent' in prevCompProps &&
+            compProps.lazyComponent === prevCompProps.lazyComponent &&
+            prevReturnValue) {
+            return prevReturnValue;
+        }
+        return [
+            {
+                type: 'web',
+                component: react_1.default.lazy(compProps.lazyComponent),
+            },
+        ];
+    }
+    if ('layers' in compProps) {
+        const isTheSame = () => {
+            if (!prevCompProps) {
+                return false;
+            }
+            if (!('layers' in prevCompProps)) {
+                return false;
+            }
+            if (compProps.layers.length !== prevCompProps.layers.length) {
+                return false;
+            }
+            for (let i = 0; i < compProps.layers.length; i++) {
+                if (compProps.layers[i].component !== prevCompProps.layers[i].component) {
+                    return false;
+                }
+                if (compProps.layers[i].type !== prevCompProps.layers[i].type) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        if (isTheSame()) {
+            return prevReturnValue;
+        }
+        return inputLayersToLayers(compProps.layers);
+    }
+    throw new Error('Unknown component type');
+};
+exports.convertComponentTypesToLayersWithCache = convertComponentTypesToLayersWithCache;
+const useLayers = (compProps) => {
+    var _a, _b;
+    const prevCompProps = (0, react_1.useRef)();
+    const prevLayers = (0, react_1.useRef)();
+    const layers = (0, exports.convertComponentTypesToLayersWithCache)(compProps, (_a = prevCompProps.current) !== null && _a !== void 0 ? _a : null, (_b = prevLayers.current) !== null && _b !== void 0 ? _b : null);
+    prevCompProps.current = compProps;
+    prevLayers.current = layers;
+    return layers;
+};
+exports.useLayers = useLayers;

package/dist/loop/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import type { LayoutAndStyle } from '../Sequence';
 export declare type LoopProps = {
     durationInFrames: number;
     times?: number;
-    layout?: 'absolute-fill' | 'none';
     name?: string;
     children: React.ReactNode;
-};
+} & LayoutAndStyle;
 export declare const Loop: React.FC<LoopProps>;

package/dist/loop/index.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
+const Sequence_1 = require("../Sequence");
+const use_video_config_1 = require("../use-video-config");
 const validate_duration_in_frames_1 = require("../validation/validate-duration-in-frames");
-const Loop = ({ durationInFrames, times = Infinity, children, layout, name, }) => {
-    const { durationInFrames: compDuration } = (0, __1.useVideoConfig)();
+const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const { durationInFrames: compDuration } = (0, use_video_config_1.useVideoConfig)();
     (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Loop /> component');
     if (typeof times !== 'number') {
         throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
@@ -18,10 +19,11 @@ const Loop = ({ durationInFrames, times = Infinity, children, layout, name, }) =
     }
     const maxTimes = Math.ceil(compDuration / durationInFrames);
     const actualTimes = Math.min(maxTimes, times);
+    const style = props.layout === 'none' ? undefined : props.style;
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
-            return ((0, jsx_runtime_1.jsx)(__1.Sequence
+            return ((0, jsx_runtime_1.jsx)(Sequence_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}`));
+            , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
         }) }));
 };
 exports.Loop = Loop;

package/dist/multiple-versions-warning.js

@@ -1,13 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkMultipleRemotionVersions = void 0;
+const truthy_1 = require("./truthy");
+const version_1 = require("./version");
 const checkMultipleRemotionVersions = () => {
-    if (typeof window === 'undefined') {
+    if (typeof globalThis === 'undefined') {
         return;
     }
-    if (window.remotion_imported) {
-        console.error('🚨 Multiple versions of Remotion detected. Multiple versions will cause conflicting React contexts and things may break in an unexpected way. Please check your dependency tree and make sure only one version of Remotion is on the page.');
+    const alreadyImported = globalThis.remotion_imported ||
+        (typeof window !== 'undefined' && window.remotion_imported);
+    if (alreadyImported) {
+        if (typeof window === 'undefined' && alreadyImported === version_1.VERSION) {
+            // Next.JS will reload the package and cause a server-side warning.
+            // It's okay if this happens during SSR in developement
+            return;
+        }
+        throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
+            version_1.VERSION,
+            typeof alreadyImported === 'string'
+                ? alreadyImported
+                : 'an older version',
+        ]
+            .filter(truthy_1.truthy)
+            .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    }
+    globalThis.remotion_imported = version_1.VERSION;
+    if (typeof window !== 'undefined') {
+        window.remotion_imported = version_1.VERSION;
     }
-    window.remotion_imported = true;
 };
 exports.checkMultipleRemotionVersions = checkMultipleRemotionVersions;

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/play-and-handle-not-allowed-error.js

@@ -28,6 +28,10 @@ const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
             if (err.message.includes('request was interrupted by a new load request')) {
                 return;
             }
+            // Audio tag got unmounted
+            if (err.message.includes('because the media was removed from the document')) {
+                return;
+            }
             console.log(`Could not play ${mediaType} due to following error: `, err);
             if (!current.muted) {
                 console.log(`The video will be muted and we'll retry playing it.`, err);

package/dist/prefetch-state.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Value = Record<string, string>;
+export declare const PreloadContext: React.Context<Value>;
+export declare const setPreloads: (updater: (p: Value) => Value) => void;
+export declare const PrefetchProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/prefetch-state.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrefetchProvider = exports.setPreloads = exports.PreloadContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.PreloadContext = (0, react_1.createContext)({});
+let preloads = {};
+let updaters = [];
+const setPreloads = (updater) => {
+    preloads = updater(preloads);
+    updaters.forEach((u) => u());
+};
+exports.setPreloads = setPreloads;
+const PrefetchProvider = ({ children }) => {
+    const [_preloads, _setPreloads] = (0, react_1.useState)(() => preloads);
+    (0, react_1.useEffect)(() => {
+        const updaterFunction = () => {
+            _setPreloads(preloads);
+        };
+        updaters.push(updaterFunction);
+        return () => {
+            updaters = updaters.filter((u) => u !== updaterFunction);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreloadContext.Provider, { value: _preloads, children: children }));
+};
+exports.PrefetchProvider = PrefetchProvider;

package/dist/prefetch.d.ts

@@ -0,0 +1,9 @@
+export declare const usePreload: (src: string) => string;
+declare type FetchAndPreload = {
+    free: () => void;
+    waitUntilDone: () => Promise<string>;
+};
+export declare const prefetch: (src: string, options?: {
+    method?: 'blob-url' | 'base64';
+}) => FetchAndPreload;
+export {};

package/dist/prefetch.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefetch = exports.usePreload = void 0;
+const react_1 = require("react");
+const get_environment_1 = require("./get-environment");
+const prefetch_state_1 = require("./prefetch-state");
+const usePreload = (src) => {
+    var _a;
+    const preloads = (0, react_1.useContext)(prefetch_state_1.PreloadContext);
+    return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
+};
+exports.usePreload = usePreload;
+const blobToBase64 = function (blob) {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = function () {
+            const dataUrl = reader.result;
+            resolve(dataUrl);
+        };
+        reader.onerror = (err) => {
+            return reject(err);
+        };
+        reader.readAsDataURL(blob);
+    });
+};
+const prefetch = (src, options) => {
+    var _a;
+    const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        return {
+            free: () => undefined,
+            waitUntilDone: () => 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;
+    });
+    const controller = new AbortController();
+    let canBeAborted = true;
+    fetch(src, {
+        signal: controller.signal,
+    })
+        .then((res) => {
+        canBeAborted = false;
+        if (canceled) {
+            return null;
+        }
+        if (!res.ok) {
+            throw new Error(`HTTP error, status = ${res.status}`);
+        }
+        return res.blob();
+    })
+        .then((buf) => {
+        if (!buf) {
+            return;
+        }
+        if (method === 'base64') {
+            return blobToBase64(buf);
+        }
+        return URL.createObjectURL(buf);
+    })
+        .then((url) => {
+        if (canceled) {
+            return;
+        }
+        objectUrl = url;
+        (0, prefetch_state_1.setPreloads)((p) => ({
+            ...p,
+            [src]: objectUrl,
+        }));
+        resolve(objectUrl);
+    })
+        .catch((err) => {
+        reject(err);
+    });
+    return {
+        free: () => {
+            if (objectUrl) {
+                if (method === 'blob-url') {
+                    URL.revokeObjectURL(objectUrl);
+                }
+                (0, prefetch_state_1.setPreloads)((p) => {
+                    const copy = { ...p };
+                    delete copy[src];
+                    return copy;
+                });
+            }
+            else {
+                canceled = true;
+                if (canBeAborted) {
+                    try {
+                        controller.abort();
+                    }
+                    catch (e) { }
+                }
+            }
+        },
+        waitUntilDone: () => {
+            return waitUntilDone;
+        },
+    };
+};
+exports.prefetch = prefetch;

package/dist/random.d.ts

@@ -1,6 +1,7 @@
+export declare type RandomSeed = number | string | null;
 /**
  * A deterministic pseudo-random number generator.
  * Pass in the same seed and get the same pseudorandom number.
  * See: https://remotion.dev/docs/random
  */
-export declare const random: (seed: number | string | null, dummy?: unknown) => number;
+export declare const random: (seed: RandomSeed, dummy?: unknown) => number;

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 '../sequencing';
+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

@@ -3,13 +3,15 @@ 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 }) => {
+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)(sequencing_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;