remotion 4.0.244 → 4.0.246

package/LICENSE.md

@@ -11,7 +11,7 @@ Depending on the type of your legal entity, you are granted permission to use Re
 
 ## Free license
 
-Copyright © 2024 [Remotion](https://www.remotion.dev)
+Copyright © 2025 [Remotion](https://www.remotion.dev)
 
 ### Eligibility
 

package/dist/cjs/AbsoluteFill.d.ts

@@ -1,6 +1,2 @@
 import React from 'react';
-/**
- * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
- */
 export declare const AbsoluteFill: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/AbsoluteFill.js

@@ -21,8 +21,8 @@ const AbsoluteFillRefForwarding = (props, ref) => {
     }, [style]);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
 };
-/**
- * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
+/*
+ * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.
+ * @see [Documentation](https://remotion.dev/docs/absolute-fill)
  */
 exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);

package/dist/cjs/Composition.d.ts

@@ -51,9 +51,5 @@ export type CompositionProps<Schema extends AnyZodObject, Props extends Record<s
     readonly id: string;
     readonly schema?: Schema;
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-/**
- * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
- * @see [Documentation](https://www.remotion.dev/docs/composition)
- */
 export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
 export {};

package/dist/cjs/Composition.js

@@ -26,9 +26,9 @@ const Fallback = () => {
     }, []);
     return null;
 };
-/**
+/*
  * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
- * @see [Documentation](https://www.remotion.dev/docs/composition)
+ * @see [Documentation](https://remotion.dev/docs/composition)
  */
 const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
     var _a, _b;

package/dist/cjs/Folder.d.ts

@@ -8,10 +8,6 @@ type FolderContextType = {
     parentName: string | null;
 };
 export declare const FolderContext: import("react").Context<FolderContextType>;
-/**
- * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
- * @see [Documentation](https://www.remotion.dev/docs/folder)
- */
 export declare const Folder: FC<{
     readonly name: string;
     readonly children: React.ReactNode;

package/dist/cjs/Folder.js

@@ -10,9 +10,9 @@ exports.FolderContext = (0, react_1.createContext)({
     folderName: null,
     parentName: null,
 });
-/**
+/*
  * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
- * @see [Documentation](https://www.remotion.dev/docs/folder)
+ * @see [Documentation](https://remotion.dev/docs/folder)
  */
 const Folder = ({ name, children }) => {
     const parent = (0, react_1.useContext)(exports.FolderContext);

package/dist/cjs/IFrame.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-/**
- * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
- * @see [Documentation](https://www.remotion.dev/docs/iframe)
- */
 export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;

package/dist/cjs/IFrame.js

@@ -25,8 +25,8 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
     }, [handle, onError]);
     return (0, jsx_runtime_1.jsx)("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
 };
-/**
+/*
  * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
- * @see [Documentation](https://www.remotion.dev/docs/iframe)
+ * @see [Documentation](https://remotion.dev/docs/iframe)
  */
 exports.IFrame = (0, react_1.forwardRef)(IFrameRefForwarding);

package/dist/cjs/Img.d.ts

@@ -7,8 +7,4 @@ export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTML
     readonly onImageFrame?: (imgelement: HTMLImageElement) => void;
     readonly src: string;
 };
-/**
- * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
- * @see [Documentation](https://www.remotion.dev/docs/img)
- */
 export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/cjs/Img.js

@@ -149,8 +149,8 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
     // src gets set once we've loaded and decoded the image.
     return (0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, onError: didGetError });
 };
-/**
+/*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
- * @see [Documentation](https://www.remotion.dev/docs/img)
+ * @see [Documentation](https://remotion.dev/docs/img)
  */
 exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);

package/dist/cjs/Sequence.d.ts

@@ -36,8 +36,4 @@ export type SequencePropsWithoutDuration = {
 export type SequenceProps = {
     readonly durationInFrames?: number;
 } & SequencePropsWithoutDuration;
-/**
- * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @see [Documentation](https://www.remotion.dev/docs/sequence)
- */
 export declare const Sequence: React.ForwardRefExoticComponent<SequenceProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Sequence.js

@@ -173,7 +173,7 @@ const SequenceRefForwardingFunction = (props, ref) => {
     }
     return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
 };
-/**
+/*
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
  * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */

package/dist/cjs/Still.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { StillProps } from './Composition.js';
-/**
- * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
- * @see [Documentation](https://www.remotion.dev/docs/still)
- */
 export declare const Still: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: StillProps<Schema, Props>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/dist/cjs/Still.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Still = void 0;
 const react_1 = __importDefault(require("react"));
 const Composition_js_1 = require("./Composition.js");
-/**
+/*
  * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
  */

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -0,0 +1,2 @@
+import type { RemotionAnimatedImageProps } from './props';
+export declare const AnimatedImage: import("react").ForwardRefExoticComponent<RemotionAnimatedImageProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cancel_render_js_1 = require("../cancel-render.js");
+const delay_render_js_1 = require("../delay-render.js");
+const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_video_config_js_1 = require("../use-video-config.js");
+const canvas_1 = require("./canvas");
+const decode_image_js_1 = require("./decode-image.js");
+const resolve_image_source_1 = require("./resolve-image-source");
+exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', ...props }, canvasRef) => {
+    const mountState = (0, react_1.useRef)({ isMounted: true });
+    (0, react_1.useEffect)(() => {
+        const { current } = mountState;
+        current.isMounted = true;
+        return () => {
+            current.isMounted = false;
+        };
+    }, []);
+    const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
+    const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
+    const [decodeHandle] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const currentTime = frame / playbackRate / fps;
+    const currentTimeRef = (0, react_1.useRef)(currentTime);
+    currentTimeRef.current = currentTime;
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(canvasRef, () => {
+        var _a;
+        const c = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
+        if (!c) {
+            throw new Error('Canvas ref is not set');
+        }
+        return c;
+    }, []);
+    const [initialLoopBehavior] = (0, react_1.useState)(() => loopBehavior);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        (0, decode_image_js_1.decodeImage)({
+            resolvedSrc,
+            signal: controller.signal,
+            currentTime: currentTimeRef.current,
+            initialLoopBehavior,
+        })
+            .then((d) => {
+            setImageDecoder(d);
+            (0, delay_render_js_1.continueRender)(decodeHandle);
+        })
+            .catch((err) => {
+            if (err.name === 'AbortError') {
+                (0, delay_render_js_1.continueRender)(decodeHandle);
+                return;
+            }
+            if (onError) {
+                onError === null || onError === void 0 ? void 0 : onError(err);
+                (0, delay_render_js_1.continueRender)(decodeHandle);
+            }
+            else {
+                (0, cancel_render_js_1.cancelRender)(err);
+            }
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [resolvedSrc, decodeHandle, onError, initialLoopBehavior]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!imageDecoder) {
+            return;
+        }
+        const delay = (0, delay_render_js_1.delayRender)(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+        imageDecoder
+            .getFrame(currentTime, loopBehavior)
+            .then((videoFrame) => {
+            var _a, _b;
+            if (mountState.current.isMounted) {
+                if (videoFrame === null) {
+                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clear();
+                }
+                else {
+                    (_b = ref.current) === null || _b === void 0 ? void 0 : _b.draw(videoFrame.frame);
+                }
+            }
+            (0, delay_render_js_1.continueRender)(delay);
+        })
+            .catch((err) => {
+            if (onError) {
+                onError(err);
+                (0, delay_render_js_1.continueRender)(delay);
+            }
+            else {
+                (0, cancel_render_js_1.cancelRender)(err);
+            }
+        });
+    }, [currentTime, imageDecoder, loopBehavior, onError, src]);
+    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, ...props }));
+});

package/dist/cjs/animated-image/canvas.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { AnimatedImageFillMode } from './props';
+type Props = {
+    readonly width?: number;
+    readonly height?: number;
+    readonly fit: AnimatedImageFillMode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+};
+export type AnimatedImageCanvasRef = {
+    readonly draw: (imageData: VideoFrame) => void;
+    readonly getCanvas: () => HTMLCanvasElement | null;
+    clear: () => void;
+};
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<AnimatedImageCanvasRef>>;
+export {};

package/dist/cjs/animated-image/canvas.js

@@ -0,0 +1,122 @@
+"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.Canvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const calcArgs = (fit, frameSize, canvasSize) => {
+    switch (fit) {
+        case 'fill': {
+            return [
+                0,
+                0,
+                frameSize.width,
+                frameSize.height,
+                0,
+                0,
+                canvasSize.width,
+                canvasSize.height,
+            ];
+        }
+        case 'contain': {
+            const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
+            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                frameSize.width,
+                frameSize.height,
+                centerX,
+                centerY,
+                frameSize.width * ratio,
+                frameSize.height * ratio,
+            ];
+        }
+        case 'cover': {
+            const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
+            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                frameSize.width,
+                frameSize.height,
+                centerX,
+                centerY,
+                frameSize.width * ratio,
+                frameSize.height * ratio,
+            ];
+        }
+        default:
+            throw new Error('Unknown fit: ' + fit);
+    }
+};
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const draw = (0, react_1.useCallback)((imageData) => {
+        var _a;
+        const canvas = canvasRef.current;
+        const canvasWidth = width !== null && width !== void 0 ? width : imageData.displayWidth;
+        const canvasHeight = height !== null && height !== void 0 ? height : imageData.displayHeight;
+        if (!canvas) {
+            throw new Error('Canvas ref is not set');
+        }
+        const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+        if (!ctx) {
+            throw new Error('Could not get 2d context');
+        }
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        ctx.drawImage(imageData, ...calcArgs(fit, {
+            height: imageData.displayHeight,
+            width: imageData.displayWidth,
+        }, {
+            width: canvasWidth,
+            height: canvasHeight,
+        }));
+    }, [fit, height, width]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            draw,
+            getCanvas: () => {
+                if (!canvasRef.current) {
+                    throw new Error('Canvas ref is not set');
+                }
+                return canvasRef.current;
+            },
+            clear: () => {
+                var _a;
+                const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+                if (!ctx) {
+                    throw new Error('Could not get 2d context');
+                }
+                ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+            },
+        };
+    }, [draw]);
+    return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, className: className, style: style });
+};
+exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

package/dist/cjs/animated-image/decode-image.d.ts

@@ -0,0 +1,16 @@
+import type { RemotionAnimatedImageLoopBehavior } from './props';
+export type AnimatedImageCacheItem = {
+    timeInSeconds: number;
+    frameIndex: number;
+    frame: VideoFrame | null;
+};
+export type RemotionImageDecoder = {
+    getFrame: (i: number, loopBehavior: RemotionAnimatedImageLoopBehavior) => Promise<AnimatedImageCacheItem | null>;
+    frameCount: number;
+};
+export declare const decodeImage: ({ resolvedSrc, signal, currentTime, initialLoopBehavior, }: {
+    resolvedSrc: string;
+    signal: AbortSignal;
+    currentTime: number;
+    initialLoopBehavior: RemotionAnimatedImageLoopBehavior;
+}) => Promise<RemotionImageDecoder>;

package/dist/cjs/animated-image/decode-image.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeImage = void 0;
+const CACHE_SIZE = 5;
+const getActualTime = ({ loopBehavior, durationFound, timeInSec, }) => {
+    return loopBehavior === 'loop'
+        ? durationFound
+            ? timeInSec % durationFound
+            : timeInSec
+        : Math.min(timeInSec, durationFound || Infinity);
+};
+const decodeImage = async ({ resolvedSrc, signal, currentTime, initialLoopBehavior, }) => {
+    if (typeof ImageDecoder === 'undefined') {
+        throw new Error('Your browser does not support the WebCodecs ImageDecoder API.');
+    }
+    const res = await fetch(resolvedSrc, { signal });
+    const { body } = res;
+    if (!body) {
+        throw new Error('Got no body');
+    }
+    const decoder = new ImageDecoder({
+        data: body,
+        type: res.headers.get('Content-Type') || 'image/gif',
+    });
+    await decoder.completed;
+    const { selectedTrack } = decoder.tracks;
+    if (!selectedTrack) {
+        throw new Error('No selected track');
+    }
+    const cache = [];
+    let durationFound = null;
+    const getFrameByIndex = async (frameIndex) => {
+        const foundInCache = cache.find((c) => c.frameIndex === frameIndex);
+        if (foundInCache && foundInCache.frame) {
+            return foundInCache;
+        }
+        const frame = await decoder.decode({
+            frameIndex,
+            completeFramesOnly: true,
+        });
+        if (foundInCache) {
+            foundInCache.frame = frame.image;
+        }
+        else {
+            cache.push({
+                frame: frame.image,
+                frameIndex,
+                timeInSeconds: frame.image.timestamp / 1000000,
+            });
+        }
+        return {
+            frame: frame.image,
+            frameIndex,
+            timeInSeconds: frame.image.timestamp / 1000000,
+        };
+    };
+    const clearCache = (closeToTimeInSec) => {
+        const itemsInCache = cache.filter((c) => c.frame);
+        const sortByClosestToCurrentTime = itemsInCache.sort((a, b) => {
+            const aDiff = Math.abs(a.timeInSeconds - closeToTimeInSec);
+            const bDiff = Math.abs(b.timeInSeconds - closeToTimeInSec);
+            return aDiff - bDiff;
+        });
+        for (let i = 0; i < sortByClosestToCurrentTime.length; i++) {
+            if (i < CACHE_SIZE) {
+                continue;
+            }
+            const item = sortByClosestToCurrentTime[i];
+            item.frame = null;
+        }
+    };
+    const ensureFrameBeforeAndAfter = async ({ timeInSec, loopBehavior, }) => {
+        const actualTimeInSec = getActualTime({
+            durationFound,
+            loopBehavior,
+            timeInSec,
+        });
+        const framesBefore = cache.filter((c) => c.timeInSeconds <= actualTimeInSec);
+        const biggestIndex = framesBefore
+            .map((c) => c.frameIndex)
+            .reduce((a, b) => Math.max(a, b), 0);
+        let i = biggestIndex;
+        while (true) {
+            const f = await getFrameByIndex(i);
+            i++;
+            if (!f.frame) {
+                throw new Error('No frame found');
+            }
+            if (!f.frame.duration) {
+                throw new Error('Frame has no duration');
+            }
+            if (i === selectedTrack.frameCount && durationFound === null) {
+                const duration = (f.frame.timestamp + f.frame.duration) / 1000000;
+                durationFound = duration;
+            }
+            if (f.timeInSeconds > actualTimeInSec || i === selectedTrack.frameCount) {
+                break;
+            }
+        }
+        // If close to end, also cache first frame for smooth wrap around
+        if (selectedTrack.frameCount - biggestIndex < 3 &&
+            loopBehavior === 'loop') {
+            await getFrameByIndex(0);
+        }
+        clearCache(actualTimeInSec);
+    };
+    // Twice because might be over total duration
+    await ensureFrameBeforeAndAfter({
+        timeInSec: currentTime,
+        loopBehavior: initialLoopBehavior,
+    });
+    await ensureFrameBeforeAndAfter({
+        timeInSec: currentTime,
+        loopBehavior: initialLoopBehavior,
+    });
+    const getFrame = async (timeInSec, loopBehavior) => {
+        if (durationFound !== null &&
+            timeInSec > durationFound &&
+            loopBehavior === 'clear-after-finish') {
+            return null;
+        }
+        const actualTimeInSec = getActualTime({
+            loopBehavior,
+            durationFound,
+            timeInSec,
+        });
+        await ensureFrameBeforeAndAfter({ timeInSec: actualTimeInSec, loopBehavior });
+        const itemsInCache = cache.filter((c) => c.frame);
+        const closest = itemsInCache.reduce((a, b) => {
+            const aDiff = Math.abs(a.timeInSeconds - actualTimeInSec);
+            const bDiff = Math.abs(b.timeInSeconds - actualTimeInSec);
+            return aDiff < bDiff ? a : b;
+        });
+        if (!closest.frame) {
+            throw new Error('No frame found');
+        }
+        return closest;
+    };
+    return {
+        getFrame,
+        frameCount: selectedTrack.frameCount,
+    };
+};
+exports.decodeImage = decodeImage;

package/dist/cjs/animated-image/index.d.ts

@@ -0,0 +1 @@
+export { AnimatedImage } from './AnimatedImage';

package/dist/cjs/animated-image/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedImage = void 0;
+var AnimatedImage_1 = require("./AnimatedImage");
+Object.defineProperty(exports, "AnimatedImage", { enumerable: true, get: function () { return AnimatedImage_1.AnimatedImage; } });

package/dist/cjs/animated-image/props.d.ts

@@ -0,0 +1,13 @@
+export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
+export type RemotionAnimatedImageProps = {
+    src: string;
+    width?: number;
+    height?: number;
+    onError?: (error: Error) => void;
+    fit?: AnimatedImageFillMode;
+    playbackRate?: number;
+    style?: React.CSSProperties;
+    loopBehavior?: RemotionAnimatedImageLoopBehavior;
+    id?: string;
+};
+export type AnimatedImageFillMode = 'contain' | 'cover' | 'fill';

package/dist/cjs/animated-image/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/animated-image/resolve-image-source.d.ts

@@ -0,0 +1 @@
+export declare const resolveAnimatedImageSource: (src: string) => string;

package/dist/cjs/animated-image/resolve-image-source.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAnimatedImageSource = void 0;
+const resolveAnimatedImageSource = (src) => {
+    return new URL(src, typeof window === 'undefined' ? undefined : window.origin)
+        .href;
+};
+exports.resolveAnimatedImageSource = resolveAnimatedImageSource;

package/dist/cjs/audio/Audio.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
 import type { RemotionMainAudioProps } from './props.js';
-/**
- * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
- * @see [Documentation](https://www.remotion.dev/docs/audio)
- */
 export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     name?: string;
     volume?: import("../volume-prop.js").VolumeProp;

package/dist/cjs/audio/Audio.js

@@ -75,9 +75,9 @@ const AudioRefForwardingFunction = (props, ref) => {
         // Proposal: Make this default to true in v5
         pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
-/**
+/*
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
- * @see [Documentation](https://www.remotion.dev/docs/audio)
+ * @see [Documentation](https://remotion.dev/docs/audio)
  */
 exports.Audio = (0, react_1.forwardRef)(AudioRefForwardingFunction);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Audio);

package/dist/cjs/cancel-render.d.ts

@@ -1,5 +1 @@
-/**
- * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
- * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
- */
 export declare function cancelRender(err: unknown): never;