remotion 4.0.227 → 4.0.229

package/README.md

@@ -26,11 +26,11 @@ Remotion is a framework for **creating videos programmatically using React.**
 <table>
 <tr>
 <td align="center">
-<img style="width: 290px" src="packages/docs/static/img/fireship-quick.gif" />
+<img style="width: 290px" src="https://remotion-assets.s3.eu-central-1.amazonaws.com/fireship-quick.gif" />
 <p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
 </td>
 <td align="center">
-<img style="width: 240px" src="packages/docs/static/img/unwrapped-2023.gif" />
+<img style="width: 240px" src="https://remotion-assets.s3.eu-central-1.amazonaws.com/unwrapped-2023.gif" />
 <p>GitHub Unwrapped - Personalized Year in Review <a href="https://www.githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped-2023">Source</a></p>
 </td>
 <td align="center">

package/dist/cjs/Clipper.d.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
-export declare const Clipper: React.FC<{
-    readonly width: number;
-    readonly height: number;
-    readonly x: number;
-    readonly y: number;
-}>;
+/**
+ * @deprecated <Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
+export declare const Clipper: React.FC<{}>;

package/dist/cjs/Clipper.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clipper = void 0;
-const react_1 = require("react");
-const NativeLayers_js_1 = require("./NativeLayers.js");
-const Clipper = ({ height, width, x, y }) => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    (0, react_1.useEffect)(() => {
-        setClipRegion((c) => {
-            if (c === 'hide') {
-                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
-            }
-            if (c === null) {
-                return { height, width, x, y };
-            }
-            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
-        });
-        return () => {
-            setClipRegion(null);
-        };
-    }, [height, setClipRegion, width, x, y]);
-    return null;
+/**
+ * @deprecated <Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
+const Clipper = () => {
+    throw new Error('<Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.');
 };
 exports.Clipper = Clipper;

package/dist/cjs/Composition.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, PropsWithChildren } from 'react';
+import type { ComponentType } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { Codec } from './codec.js';
@@ -47,7 +47,6 @@ export type StillProps<Schema extends AnyZodObject, Props extends Record<string,
     id: string;
     schema?: Schema;
 } & StillCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const ClipComposition: React.FC<PropsWithChildren>;
 export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     readonly id: string;
     readonly schema?: Schema;

package/dist/cjs/Composition.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Composition = exports.ClipComposition = void 0;
+exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
-const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const Folder_js_1 = require("./Folder.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const delay_render_js_1 = require("./delay-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
@@ -21,21 +19,6 @@ const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
 const validate_default_props_js_1 = require("./validation/validate-default-props.js");
-const ClipComposition = ({ children }) => {
-    const { clipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            opacity: clipRegion === 'hide' ? 0 : 1,
-            clipPath: clipRegion && clipRegion !== 'hide'
-                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
-                : undefined,
-        };
-    }, [clipRegion]);
-    return (0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { style: style, children: children });
-};
-exports.ClipComposition = ClipComposition;
 const Fallback = () => {
     (0, react_1.useEffect)(() => {
         const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
@@ -110,7 +93,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering && video && video.component === lazy) {
         const Comp = lazy;

package/dist/cjs/Null.d.ts

@@ -1 +1,4 @@
+/**
+ * @deprecated <Null /> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
 export declare const Null: React.FC;

package/dist/cjs/Null.js

@@ -1,25 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Null = void 0;
-const react_1 = require("react");
-const NativeLayers_js_1 = require("./NativeLayers.js");
+/**
+ * @deprecated <Null /> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
 const Null = () => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    (0, react_1.useEffect)(() => {
-        setClipRegion((c) => {
-            if (c === null) {
-                return 'hide';
-            }
-            // Rendering multiple <Null> is fine, because they are all hidden
-            if (c === 'hide') {
-                return 'hide';
-            }
-            throw new Error('Cannot render <Null>, because another component clipping the region was already rendered (most likely <Clipper>)');
-        });
-        return () => {
-            setClipRegion(null);
-        };
-    }, [setClipRegion]);
-    return null;
+    throw new Error('<Null> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.');
 };
 exports.Null = Null;

package/dist/cjs/RemotionRoot.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const EditorProps_js_1 = require("./EditorProps.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const buffering_js_1 = require("./buffering.js");
 const delay_render_js_1 = require("./delay-render.js");
 const nonce_js_1 = require("./nonce.js");
@@ -87,6 +86,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

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,62 @@
+"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, onLoad, fit = 'fill', ...props }, canvasRef) => {
+    const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
+    const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
+    const [id] = (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 / 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;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        (0, decode_image_js_1.decodeImage)({
+            resolvedSrc,
+            signal: controller.signal,
+            currentTime: currentTimeRef.current,
+        })
+            .then((d) => {
+            setImageDecoder(d);
+        })
+            .catch((err) => {
+            if (err.name === 'AbortError') {
+                return;
+            }
+            // TODO: Allow to catch error
+            (0, cancel_render_js_1.cancelRender)(err);
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [resolvedSrc, id, onLoad, onError]);
+    (0, react_1.useEffect)(() => {
+        if (!imageDecoder) {
+            return;
+        }
+        imageDecoder.getFrame(currentTime).then((videoFrame) => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.draw(videoFrame.frame);
+        });
+    }, [currentTime, imageDecoder]);
+    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,15 @@
+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;
+};
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<AnimatedImageCanvasRef>>;
+export {};

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

@@ -0,0 +1,114 @@
+"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;
+            },
+        };
+    }, [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,14 @@
+export type AnimatedImageCacheItem = {
+    timeInSeconds: number;
+    frameIndex: number;
+    frame: VideoFrame | null;
+};
+export type RemotionImageDecoder = {
+    getFrame: (i: number) => Promise<AnimatedImageCacheItem>;
+    frameCount: number;
+};
+export declare const decodeImage: ({ resolvedSrc, signal, currentTime, }: {
+    resolvedSrc: string;
+    signal: AbortSignal;
+    currentTime: number;
+}) => Promise<RemotionImageDecoder>;

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decodeImage = void 0;
+const CACHE_SIZE = 5;
+const decodeImage = async ({ resolvedSrc, signal, currentTime, }) => {
+    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) => {
+        const actualTimeInSec = durationFound
+            ? timeInSec % durationFound
+            : 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) {
+                const duration = (f.frame.timestamp + f.frame.duration) / 1000000;
+                durationFound = duration;
+            }
+            if (f.timeInSeconds > actualTimeInSec || i === selectedTrack.frameCount) {
+                break;
+            }
+        }
+        clearCache(actualTimeInSec);
+    };
+    // Twice because might be over total duration
+    await ensureFrameBeforeAndAfter(currentTime);
+    await ensureFrameBeforeAndAfter(currentTime);
+    const getFrame = async (timeInSec) => {
+        const actualTimeInSec = durationFound
+            ? timeInSec % durationFound
+            : timeInSec;
+        await ensureFrameBeforeAndAfter(actualTimeInSec);
+        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,19 @@
+export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
+export type RemotionAnimatedImageProps = {
+    src: string;
+    width?: number;
+    height?: number;
+    onLoad?: (info: {
+        width: number;
+        height: number;
+        delays: number[];
+        frames: ImageData[];
+    }) => void;
+    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/animated-image/use-element-size.d.ts

@@ -0,0 +1,6 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+export declare const updateAllElementsSizes: () => void;
+export declare const useElementSize: (ref: React.RefObject<HTMLElement>) => Size | null;

package/dist/cjs/animated-image/use-element-size.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = exports.updateAllElementsSizes = void 0;
+const react_1 = require("react");
+let elementSizeHooks = [];
+const updateAllElementsSizes = () => {
+    for (const listener of elementSizeHooks) {
+        listener();
+    }
+};
+exports.updateAllElementsSizes = updateAllElementsSizes;
+const useElementSize = (ref) => {
+    const [size, setSize] = (0, react_1.useState)(null);
+    const observer = (0, react_1.useMemo)(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        return new ResizeObserver((entries) => {
+            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            const { contentRect } = entries[0];
+            // The clientRect returns the size with `scale()` being applied.
+            const newSize = entries[0].target.getClientRects();
+            if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
+                setSize(null);
+                return;
+            }
+            const probableCssParentScale = newSize[0].width / contentRect.width;
+            const width = newSize[0].width * (1 / probableCssParentScale);
+            const height = newSize[0].height * (1 / probableCssParentScale);
+            setSize({
+                width,
+                height,
+            });
+        });
+    }, []);
+    const updateSize = (0, react_1.useCallback)(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getClientRects();
+        if (!rect[0]) {
+            setSize(null);
+            return;
+        }
+        setSize({
+            width: rect[0].width,
+            height: rect[0].height,
+        });
+    }, [ref]);
+    (0, react_1.useEffect)(() => {
+        if (!observer) {
+            return;
+        }
+        updateSize();
+        const { current } = ref;
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (current) {
+                observer.unobserve(current);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    (0, react_1.useEffect)(() => {
+        elementSizeHooks.push(updateSize);
+        return () => {
+            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+        };
+    }, [updateSize]);
+    return size;
+};
+exports.useElementSize = useElementSize;

package/dist/cjs/audio/Audio.js

@@ -50,6 +50,9 @@ const AudioRefForwardingFunction = (props, ref) => {
     }, [setDurations]);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
     if (loop && durationFetched !== undefined) {
+        if (!Number.isFinite(durationFetched)) {
+            return ((0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+        }
         const duration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
                 endAt,