@remotion/gif 3.2.20 → 3.2.22

package/dist/Gif.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { RemotionGifProps } from './props';
 export declare const Gif: (props: RemotionGifProps) => JSX.Element;

package/dist/GifForDevelopment.js

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GifForDevelopment = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tools_1 = require("@react-gifs/tools");
-const lru_map_1 = require("lru_map");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const canvas_1 = require("./canvas");
+const gif_cache_1 = require("./gif-cache");
+const is_cors_error_1 = require("./is-cors-error");
+const react_tools_1 = require("./react-tools");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
-const cache = new lru_map_1.LRUMap(30);
 exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, onLoad, fit = 'fill', ...props }, ref) => {
     const resolvedSrc = new URL(src, window.location.origin).href;
     const [state, update] = (0, react_1.useState)(() => {
-        const parsedGif = cache.get(resolvedSrc);
+        const parsedGif = gif_cache_1.gifCache.get(resolvedSrc);
         if (parsedGif === undefined) {
             return {
                 delays: [],
@@ -21,22 +23,48 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
         }
         return parsedGif;
     });
-    // skip loading if frames exist
-    (0, tools_1.useWorkerParser)(Boolean(state.frames.length) || resolvedSrc, (info) => {
-        if ('error' in info) {
-            if (onError) {
-                onError(info.error);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [id] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Rendering <Gif/> with src="${resolvedSrc}"`));
+    const currentOnLoad = (0, react_1.useRef)(onLoad);
+    const currentOnError = (0, react_1.useRef)(onError);
+    currentOnLoad.current = onLoad;
+    currentOnError.current = onError;
+    (0, react_1.useEffect)(() => {
+        let done = false;
+        const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+        const newHandle = (0, remotion_1.delayRender)('Loading <Gif /> with src=' + resolvedSrc);
+        prom
+            .then((parsed) => {
+            var _a;
+            (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
+            update(parsed);
+            gif_cache_1.gifCache.set(resolvedSrc, parsed);
+            done = true;
+            (0, remotion_1.continueRender)(newHandle);
+            (0, remotion_1.continueRender)(id);
+        })
+            .catch((err) => {
+            if (currentOnError.current) {
+                currentOnError.current(err);
             }
             else {
-                console.error('Error loading GIF:', info.error, 'Handle the event using the onError() prop to make this message disappear.');
+                setError(err);
             }
+        });
+        return () => {
+            if (!done) {
+                cancel();
+            }
+            (0, remotion_1.continueRender)(newHandle);
+        };
+    }, [id, resolvedSrc]);
+    if (error) {
+        console.error(error.stack);
+        if ((0, is_cors_error_1.isCorsError)(error)) {
+            throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`);
         }
-        else {
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad(info);
-            cache.set(resolvedSrc, info);
-            update(info);
-        }
-    });
+        throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
+    }
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays);
-    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height, ...props, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, ...props, ref: ref }));
 });

package/dist/GifForRendering.js

@@ -2,37 +2,63 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GifForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tools_1 = require("@react-gifs/tools");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const canvas_1 = require("./canvas");
+const gif_cache_1 = require("./gif-cache");
 const is_cors_error_1 = require("./is-cors-error");
+const react_tools_1 = require("./react-tools");
 const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
 exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, fit = 'fill', ...props }, ref) => {
     const resolvedSrc = new URL(src, window.location.origin).href;
-    const [state, update] = (0, react_1.useState)({
-        delays: [],
-        frames: [],
-        width: 0,
-        height: 0,
+    const [state, update] = (0, react_1.useState)(() => {
+        const parsedGif = gif_cache_1.gifCache.get(resolvedSrc);
+        if (parsedGif === undefined) {
+            return {
+                delays: [],
+                frames: [],
+                width: 0,
+                height: 0,
+            };
+        }
+        return parsedGif;
     });
     const [error, setError] = (0, react_1.useState)(null);
     const [id] = (0, react_1.useState)(() => (0, remotion_1.delayRender)(`Rendering <Gif/> with src="${resolvedSrc}"`));
     const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays);
-    (0, tools_1.useParser)(resolvedSrc, (info) => {
-        if ('error' in info) {
-            if (onError) {
-                onError(info.error);
+    const currentOnLoad = (0, react_1.useRef)(onLoad);
+    const currentOnError = (0, react_1.useRef)(onError);
+    currentOnLoad.current = onLoad;
+    currentOnError.current = onError;
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        let done = false;
+        const newHandle = (0, remotion_1.delayRender)('Loading <Gif /> with src=' + resolvedSrc);
+        (0, react_tools_1.parseGif)({ controller, src: resolvedSrc })
+            .then((parsed) => {
+            var _a;
+            (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
+            update(parsed);
+            gif_cache_1.gifCache.set(resolvedSrc, parsed);
+            done = true;
+            (0, remotion_1.continueRender)(newHandle);
+            (0, remotion_1.continueRender)(id);
+        })
+            .catch((err) => {
+            if (currentOnError.current) {
+                currentOnError.current(err);
             }
             else {
-                setError(info.error);
+                setError(err);
             }
-        }
-        else {
-            onLoad === null || onLoad === void 0 ? void 0 : onLoad(info);
-            update(info);
-        }
-        (0, remotion_1.continueRender)(id);
-    });
+        });
+        return () => {
+            if (!done) {
+                controller.abort();
+            }
+            (0, remotion_1.continueRender)(newHandle);
+        };
+    }, [id, resolvedSrc]);
     if (error) {
         console.error(error.stack);
         if ((0, is_cors_error_1.isCorsError)(error)) {
@@ -40,5 +66,5 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         }
         throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
     }
-    return ((0, jsx_runtime_1.jsx)(tools_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width !== null && width !== void 0 ? width : state.width, height: height !== null && height !== void 0 ? height : state.height, ...props, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, ...props, ref: ref }));
 });

package/dist/canvas.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { GifFillMode } from './props';
+declare type Props = {
+    index: number;
+    frames: ImageData[];
+    width?: number;
+    height?: number;
+    fit: GifFillMode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const Canvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
+export {};

package/dist/canvas.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Canvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_element_size_1 = require("./use-element-size");
+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 makeCanvas = () => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = 0;
+    canvas.height = 0;
+    return ctx;
+};
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style }, ref) => {
+    const canvasRef = (0, react_1.useRef)(null);
+    const [tempCtx] = (0, react_1.useState)(() => {
+        return makeCanvas();
+    });
+    const size = (0, use_element_size_1.useElementSize)(canvasRef);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return canvasRef.current;
+    });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!size) {
+            return;
+        }
+        const imageData = frames[index];
+        const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+        if (imageData && tempCtx && ctx) {
+            if (tempCtx.canvas.width < imageData.width ||
+                tempCtx.canvas.height < imageData.height) {
+                tempCtx.canvas.width = imageData.width;
+                tempCtx.canvas.height = imageData.height;
+            }
+            if (size.width > 0 && size.height > 0) {
+                ctx.clearRect(0, 0, size.width, size.height);
+                tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
+            }
+            tempCtx.putImageData(imageData, 0, 0);
+            ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
+        }
+    }, [index, frames, fit, tempCtx, size]);
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, className: className, style: style, width: width !== null && width !== void 0 ? width : size === null || size === void 0 ? void 0 : size.width, height: height !== null && height !== void 0 ? height : size === null || size === void 0 ? void 0 : size.height }));
+});

package/dist/get-gif-duration-in-seconds.d.ts

@@ -0,0 +1 @@
+export declare const getGifDurationInSeconds: (src: string) => Promise<number>;

package/dist/get-gif-duration-in-seconds.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGifDurationInSeconds = void 0;
+const remotion_1 = require("remotion");
+const gif_cache_1 = require("./gif-cache");
+const react_tools_1 = require("./react-tools");
+const calcDuration = (parsed) => {
+    return (parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000);
+};
+const getGifDurationInSeconds = async (src) => {
+    const resolvedSrc = new URL(src, window.location.origin).href;
+    const inCache = gif_cache_1.gifCache.get(resolvedSrc);
+    if (inCache) {
+        return calcDuration(inCache);
+    }
+    if (remotion_1.Internals.getRemotionEnvironment() === 'rendering') {
+        const renderingParsed = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+        const resolved = await renderingParsed.prom;
+        gif_cache_1.gifCache.set(resolvedSrc, resolved);
+        return calcDuration(resolved);
+    }
+    const parsed = await (0, react_tools_1.parseGif)({
+        src: resolvedSrc,
+        controller: new AbortController(),
+    });
+    gif_cache_1.gifCache.set(resolvedSrc, parsed);
+    return calcDuration(parsed);
+};
+exports.getGifDurationInSeconds = getGifDurationInSeconds;

package/dist/get-gif-duration.d.ts

@@ -0,0 +1 @@
+export declare const getGifDurationInSeconds: (src: string) => Promise<number>;

package/dist/get-gif-duration.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGifDurationInSeconds = void 0;
+const remotion_1 = require("remotion");
+const react_tools_1 = require("./react-tools");
+const getGifDurationInSeconds = async (src) => {
+    const resolvedSrc = new URL(src, window.location.origin).href;
+    if (remotion_1.Internals.getRemotionEnvironment() === 'rendering') {
+        const renderingParsed = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+        return ((await renderingParsed.prom).delays.reduce((sum, delay) => sum + delay, 0) / 1000);
+    }
+    const parsed = await (0, react_tools_1.parseGif)({
+        src: resolvedSrc,
+        controller: new AbortController(),
+    });
+    return (parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000);
+};
+exports.getGifDurationInSeconds = getGifDurationInSeconds;

package/dist/gif-cache.d.ts

@@ -0,0 +1,3 @@
+import { LRUMap } from 'lru_map';
+import type { GifState } from './props';
+export declare const gifCache: LRUMap<string, GifState>;

package/dist/gif-cache.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gifCache = void 0;
+const lru_map_1 = require("lru_map");
+exports.gifCache = new lru_map_1.LRUMap(30);

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Gif';
-export * from './props';
+export { getGifDurationInSeconds } from './get-gif-duration-in-seconds';
+export { Gif } from './Gif';
+export { GifFillMode, RemotionGifProps } from './props';

package/dist/index.js

@@ -1,18 +1,7 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Gif"), exports);
-__exportStar(require("./props"), exports);
+exports.Gif = exports.getGifDurationInSeconds = void 0;
+var get_gif_duration_in_seconds_1 = require("./get-gif-duration-in-seconds");
+Object.defineProperty(exports, "getGifDurationInSeconds", { enumerable: true, get: function () { return get_gif_duration_in_seconds_1.getGifDurationInSeconds; } });
+var Gif_1 = require("./Gif");
+Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.Gif; } });

package/dist/parse-generate.d.ts

@@ -0,0 +1,18 @@
+import type { GifState } from './props';
+export declare const parse: (src: string, { signal, }: {
+    signal: AbortController['signal'];
+}) => Promise<{
+    loaded: boolean;
+    delays: number[];
+    frames: Uint8ClampedArray[];
+    width: number;
+    height: number;
+}>;
+declare type ParserCallbackArgs = {
+    width: number;
+    height: number;
+    delays: number[];
+    frames: Uint8ClampedArray[];
+};
+export declare const generate: (info: ParserCallbackArgs) => GifState;
+export {};

package/dist/parse-generate.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generate = exports.parse = void 0;
+const gifuct_js_1 = require("gifuct-js");
+const validateAndFix = (gif) => {
+    let currentGce = null;
+    for (const frame of gif.frames) {
+        currentGce = frame.gce ? frame.gce : currentGce;
+        // fix loosing graphic control extension for same frames
+        if ('image' in frame && !('gce' in frame) && currentGce !== null) {
+            frame.gce = currentGce;
+        }
+    }
+};
+const parse = (src, { signal, }) => fetch(src, { signal })
+    .then((resp) => {
+    var _a;
+    if (!((_a = resp.headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.includes('image/gif')))
+        throw Error(`Wrong content type: "${resp.headers.get('Content-Type')}"`);
+    return resp.arrayBuffer();
+})
+    .then((buffer) => (0, gifuct_js_1.parseGIF)(buffer))
+    .then((gif) => {
+    validateAndFix(gif);
+    return gif;
+})
+    .then((gif) => Promise.all([
+    (0, gifuct_js_1.decompressFrames)(gif, false),
+    { width: gif.lsd.width, height: gif.lsd.height },
+]))
+    .then(([frames, options]) => {
+    const readyFrames = [];
+    const size = options.width * options.height * 4;
+    for (let i = 0; i < frames.length; ++i) {
+        const frame = frames[i];
+        const typedArray = i === 0 || frames[i - 1].disposalType === 2
+            ? new Uint8ClampedArray(size)
+            : readyFrames[i - 1].slice();
+        readyFrames.push(putPixels(typedArray, frame, options));
+    }
+    return {
+        ...options,
+        loaded: true,
+        delays: frames.map((frame) => frame.delay),
+        frames: readyFrames,
+    };
+});
+exports.parse = parse;
+const putPixels = (typedArray, frame, gifSize) => {
+    const { width, height, top: dy, left: dx } = frame.dims;
+    const offset = dy * gifSize.width + dx;
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const pPos = y * width + x;
+            const colorIndex = frame.pixels[pPos];
+            if (colorIndex !== frame.transparentIndex) {
+                const taPos = offset + y * gifSize.width + x;
+                const color = frame.colorTable[colorIndex] || [0, 0, 0];
+                typedArray[taPos * 4] = color[0];
+                typedArray[taPos * 4 + 1] = color[1];
+                typedArray[taPos * 4 + 2] = color[2];
+                typedArray[taPos * 4 + 3] = 255;
+            }
+        }
+    }
+    return typedArray;
+};
+const generate = (info) => {
+    return {
+        ...info,
+        frames: info.frames.map((buffer) => {
+            const image = new ImageData(info.width, info.height);
+            image.data.set(new Uint8ClampedArray(buffer));
+            return image;
+        }),
+    };
+};
+exports.generate = generate;

package/dist/props.d.ts

@@ -4,14 +4,13 @@ export declare type RemotionGifProps = {
     width?: number;
     height?: number;
     onLoad?: (info: {
-        loaded: true;
         width: number;
         height: number;
         delays: number[];
         frames: ImageData[];
     }) => void;
     onError?: (error: Error) => void;
-    fit?: 'contain' | 'fill' | 'cover';
+    fit?: GifFillMode;
     style?: React.CSSProperties;
 };
 export declare type GifState = {
@@ -20,3 +19,4 @@ export declare type GifState = {
     width: number;
     height: number;
 };
+export declare type GifFillMode = 'contain' | 'cover' | 'fill';

package/dist/react-tools.d.ts

@@ -0,0 +1,9 @@
+import type { GifState } from './props';
+export declare const parseGif: ({ src, controller, }: {
+    src: string;
+    controller: AbortController;
+}) => Promise<GifState>;
+export declare const parseWithWorker: (src: string) => {
+    prom: Promise<GifState>;
+    cancel: () => void;
+};

package/dist/react-tools.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseWithWorker = exports.parseGif = void 0;
+const parse_generate_1 = require("./parse-generate");
+const worker_1 = require("./worker");
+const parseGif = async ({ src, controller, }) => {
+    const raw = await (0, parse_generate_1.parse)(src, { signal: controller.signal });
+    return (0, parse_generate_1.generate)(raw);
+};
+exports.parseGif = parseGif;
+let worker = null;
+const parseWithWorker = (src) => {
+    if (!worker) {
+        worker = (0, worker_1.makeWorker)();
+    }
+    let handler = null;
+    const prom = new Promise((resolve, reject) => {
+        handler = (e) => {
+            const message = e.data || e;
+            if (message.src === src) {
+                if (message.error) {
+                    reject(new Error(message.error));
+                }
+                else {
+                    const data = message.error ? message : (0, parse_generate_1.generate)(message);
+                    resolve(data);
+                }
+            }
+        };
+        worker.addEventListener('message', handler);
+        worker.postMessage({ src, type: 'parse' });
+    });
+    return {
+        prom,
+        cancel: () => {
+            worker.postMessage({ src, type: 'cancel' });
+            worker.removeEventListener('message', handler);
+        },
+    };
+};
+exports.parseWithWorker = parseWithWorker;

package/dist/use-element-size.d.ts

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

package/dist/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 || !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/useCurrentGifIndex.d.ts

@@ -1,2 +1 @@
-declare function useCurrentGifIndex(delays: number[]): number;
-export { useCurrentGifIndex };
+export declare function useCurrentGifIndex(delays: number[]): number;

package/dist/worker/index.d.ts

@@ -0,0 +1 @@
+export declare const makeWorker: () => Worker;

package/dist/worker/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeWorker = void 0;
+const source_1 = require("./source");
+const makeWorker = () => {
+    const blob = new Blob([source_1.src], { type: 'application/javascript' });
+    const url = URL.createObjectURL(blob);
+    const worker = new Worker(url);
+    URL.revokeObjectURL(url);
+    return worker;
+};
+exports.makeWorker = makeWorker;

package/dist/worker/source.d.ts

@@ -0,0 +1 @@
+export declare const src = "function e(e){const r={exports:{}};return e(r,r.exports),r.exports}const r=e(((e,r)=> {Object.defineProperty(r,\"__esModule\",{value:!0}),r.loop=r.conditional=r.parse=void 0;r.parse=function e(r,t){const n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}; const a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n;if(Array.isArray(t))t.forEach(((t)=> {return e(r,t,n,a)}));else if(typeof t===\"function\")t(r,n,a,e);else{const i=Object.keys(t)[0];Array.isArray(t[i])?(a[i]={},e(r,t[i],n,a[i])):a[i]=t[i](r,n,a,e)}return n};r.conditional=function(e,r){return function(t,n,a,i){r(t,n,a)&&i(t,e,n,a)}};r.loop=function(e,r){return function(t,n,a,i){for(var o=[];r(t,n,a);){const s={};i(t,e,n,s),o.push(s)}return o}}})); const t=e(((e,r)=> {Object.defineProperty(r,\"__esModule\",{value:!0}),r.readBits=r.readArray=r.readUnsigned=r.readString=r.peekBytes=r.readBytes=r.peekByte=r.readByte=r.buildStream=void 0;r.buildStream=function(e){return{data:e,pos:0}};const t=function(){return function(e){return e.data[e.pos++]}};r.readByte=t;r.peekByte=function(){const e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return function(r){return r.data[r.pos+e]}};const n=function(e){return function(r){return r.data.subarray(r.pos,r.pos+=e)}};r.readBytes=n;r.peekBytes=function(e){return function(r){return r.data.subarray(r.pos,r.pos+e)}};r.readString=function(e){return function(r){return Array.from(n(e)(r)).map(((e)=> {return String.fromCharCode(e)})).join(\"\")}};r.readUnsigned=function(e){return function(r){const t=n(2)(r);return e?(t[1]<<8)+t[0]:(t[0]<<8)+t[1]}};r.readArray=function(e,r){return function(t,a,i){for(var o=typeof r===\"function\"?r(t,a,i):r,s=n(e),d=new Array(o),c=0;c<o;c++)d[c]=s(t);return d}};r.readBits=function(e){return function(r){for(var t=function(e){return e.data[e.pos++]}(r),n=new Array(8),a=0;a<8;a++)n[7-a]=Boolean(t&1<<a);return Object.keys(e).reduce(((r,t)=> {const a=e[t];return a.length?r[t]=function(e,r,t){for(var n=0,a=0;a<t;a++)n+=e[r+a]&&2**(t-a-1);return n}(n,a.index,a.length):r[t]=n[a.index],r}),{})}}})); const n=e(((e,n)=> {Object.defineProperty(n,\"__esModule\",{value:!0}),n.default=void 0;const a={blocks(e){for(var r=[],n=e.data.length,a=0,i=(0,t.readByte)()(e);i!==0;i=(0,t.readByte)()(e)){if(e.pos+i>=n){const o=n-e.pos;r.push((0,t.readBytes)(o)(e)),a+=o;break}r.push((0,t.readBytes)(i)(e)),a+=i}for(var s=new Uint8Array(a),d=0,c=0;c<r.length;c++)s.set(r[c],d),d+=r[c].length;return s}}; const i=(0,r.conditional)({gce:[{codes:(0,t.readBytes)(2)},{byteSize:(0,t.readByte)()},{extras:(0,t.readBits)({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:(0,t.readUnsigned)(!0)},{transparentColorIndex:(0,t.readByte)()},{terminator:(0,t.readByte)()}]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===249})); const o=(0,r.conditional)({image:[{code:(0,t.readByte)()},{descriptor:[{left:(0,t.readUnsigned)(!0)},{top:(0,t.readUnsigned)(!0)},{width:(0,t.readUnsigned)(!0)},{height:(0,t.readUnsigned)(!0)},{lct:(0,t.readBits)({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},(0,r.conditional)({lct:(0,t.readArray)(3,((e,r,t)=> {return 2**(t.descriptor.lct.size+1)}))},((e,r,t)=> {return t.descriptor.lct.exists})),{data:[{minCodeSize:(0,t.readByte)()},a]}]},((e)=> {return (0,t.peekByte)()(e)===44})); const s=(0,r.conditional)({text:[{codes:(0,t.readBytes)(2)},{blockSize:(0,t.readByte)()},{preData(e,r,n){return(0,t.readBytes)(n.text.blockSize)(e)}},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===1})); const d=(0,r.conditional)({application:[{codes:(0,t.readBytes)(2)},{blockSize:(0,t.readByte)()},{id(e,r,n){return(0,t.readString)(n.blockSize)(e)}},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===255})); const c=(0,r.conditional)({comment:[{codes:(0,t.readBytes)(2)},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===254})); const u=[{header:[{signature:(0,t.readString)(3)},{version:(0,t.readString)(3)}]},{lsd:[{width:(0,t.readUnsigned)(!0)},{height:(0,t.readUnsigned)(!0)},{gct:(0,t.readBits)({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:(0,t.readByte)()},{pixelAspectRatio:(0,t.readByte)()}]},(0,r.conditional)({gct:(0,t.readArray)(3,((e,r)=> {return 2**(r.lsd.gct.size+1)}))},((e,r)=> {return r.lsd.gct.exists})),{frames:(0,r.loop)([i,d,c,o,s],((e)=> {const r=(0,t.peekByte)()(e);return r===33||r===44}))}];n.default=u})); const a=e(((e,r)=> {Object.defineProperty(r,\"__esModule\",{value:!0}),r.deinterlace=void 0;r.deinterlace=function(e,r){for(var t=new Array(e.length),n=e.length/r,a=function(n,a){const i=e.slice(a*r,(a+1)*r);t.splice.apply(t,[n*r,r].concat(i))},i=[0,4,2,1],o=[8,8,4,2],s=0,d=0;d<4;d++)for(let c=i[d];c<n;c+=o[d])a(c,s),s++;return t}})); const i=e(((e,r)=> {Object.defineProperty(r,\"__esModule\",{value:!0}),r.lzw=void 0;r.lzw=function(e,r,t){let n; let a; let i; let o; let s; let d; let c; let u; let l; let f; let p; let g; let y; let h; let v; let m; const x=4096; const B=t; const w=new Array(t); const b=new Array(x); const k=new Array(x); const A=new Array(4097);for(s=(a=1<<(f=e))+1,n=a+2,c=-1,i=(1<<(o=f+1))-1,u=0;u<a;u++)b[u]=0,k[u]=u;for(p=g=y=h=v=m=0,l=0;l<B;){if(h===0){if(g<o){p+=r[m]<<g,g+=8,m++;continue}if(u=p&i,p>>=o,g-=o,u>n||u==s)break;if(u==a){i=(1<<(o=f+1))-1,n=a+2,c=-1;continue}if(c==-1){A[h++]=k[u],c=u,y=u;continue}for(d=u,u==n&&(A[h++]=y,u=c);u>a;)A[h++]=k[u],u=b[u];y=255&k[u],A[h++]=y,n<x&&(b[n]=c,k[n]=y,(++n&i)==0&&n<x&&(o++,i+=n)),c=d}h--,w[v++]=A[h],l++}for(l=v;l<B;l++)w[l]=0;return w}})); const o=e(((e,o)=> {Object.defineProperty(o,\"__esModule\",{value:!0}),o.decompressFrames=o.decompressFrame=o.parseGIF=void 0;let s; const d=(s=n)&&s.__esModule?s:{default:s};o.parseGIF=function(e){const n=new Uint8Array(e);return(0,r.parse)((0,t.buildStream)(n),d.default)};const c=function(e,r,t){if(e.image){const n=e.image; const o=n.descriptor.width*n.descriptor.height; let s=(0,i.lzw)(n.data.minCodeSize,n.data.blocks,o);n.descriptor.lct.interlaced&&(s=(0,a.deinterlace)(s,n.descriptor.width));const d={pixels:s,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height}};return n.descriptor.lct&&n.descriptor.lct.exists?d.colorTable=n.lct:d.colorTable=r,e.gce&&(d.delay=10*(e.gce.delay||10),d.disposalType=e.gce.extras.disposal,e.gce.extras.transparentColorGiven&&(d.transparentIndex=e.gce.transparentColorIndex)),t&&(d.patch=function(e){for(var r=e.pixels.length,t=new Uint8ClampedArray(4*r),n=0;n<r;n++){const a=4*n; const i=e.pixels[n]; const o=e.colorTable[i]||[0,0,0];t[a]=o[0],t[a+1]=o[1],t[a+2]=o[2],t[a+3]=i!==e.transparentIndex?255:0}return t}(d)),d}console.warn(\"gif frame does not have associated image.\")};o.decompressFrame=c;o.decompressFrames=function(e,r){return e.frames.filter(((e)=> {return e.image})).map(((t)=> {return c(t,e.gct,r)}))}}));const s=(e,r,t)=>{const{width:n,height:a,top:i,left:o}=r.dims; const s=i*t.width+o;for(let i=0;i<a;i++)for(let a=0;a<n;a++){const o=i*n+a; const d=r.pixels[o];if(d!==r.transparentIndex){const n=s+i*t.width+a; const o=r.colorTable[d]||[0,0,0];e[4*n]=o[0],e[4*n+1]=o[1],e[4*n+2]=o[2],e[4*n+3]=255}}return e}; const d=new Map;self.addEventListener(\"message\",(e=>{const{type:r,src:t}=e.data||e;switch(r){case\"parse\":if(!d.has(t)){const e=new AbortController; const r={signal:e.signal};d.set(t,e),((e,{signal:r})=>fetch(e,{signal:r}).then((e=>{if(!e.headers.get(\"Content-Type\").includes(\"image/gif\"))throw Error(`Wrong content type: \"${e.headers.get(\"Content-Type\")}\"`);return e.arrayBuffer()})).then((e=>o.parseGIF(e))).then((e=>((e=>{let r=null;for(const t of e.frames)r=t.gce?t.gce:r,\"image\"in t&&!(\"gce\"in t)&&(t.gce=r)})(e),e))).then((e=>Promise.all([o.decompressFrames(e,!1),{width:e.lsd.width,height:e.lsd.height}]))).then((([e,r])=>{const t=[]; const n=r.width*r.height*4;for(let a=0;a<e.length;++a){const i=e[a]; const o=a===0||e[a-1].disposalType===2?new Uint8ClampedArray(n):t[a-1].slice();t.push(s(o,i,r))}return{...r,loaded:!0,delays:e.map((e=>e.delay)),frames:t}})))(t,r).then((e=>{self.postMessage(Object.assign(e,{src:t}),e.frames.map((e=>e.buffer)))})).catch((e=>{self.postMessage({src:t,error:e,loaded:!0})})).finally((()=>{d.delete(t)}))}break;case\"cancel\":if(d.has(t)){d.get(t).abort(),d.delete(t)}}}));";

package/dist/worker/source.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.src = void 0;
+// Clone react-tools/gifs and then run npm run build. Make sure to escape the `` characters
+exports.src = `function e(e){const r={exports:{}};return e(r,r.exports),r.exports}const r=e(((e,r)=> {Object.defineProperty(r,"__esModule",{value:!0}),r.loop=r.conditional=r.parse=void 0;r.parse=function e(r,t){const n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}; const a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n;if(Array.isArray(t))t.forEach(((t)=> {return e(r,t,n,a)}));else if(typeof t==="function")t(r,n,a,e);else{const i=Object.keys(t)[0];Array.isArray(t[i])?(a[i]={},e(r,t[i],n,a[i])):a[i]=t[i](r,n,a,e)}return n};r.conditional=function(e,r){return function(t,n,a,i){r(t,n,a)&&i(t,e,n,a)}};r.loop=function(e,r){return function(t,n,a,i){for(var o=[];r(t,n,a);){const s={};i(t,e,n,s),o.push(s)}return o}}})); const t=e(((e,r)=> {Object.defineProperty(r,"__esModule",{value:!0}),r.readBits=r.readArray=r.readUnsigned=r.readString=r.peekBytes=r.readBytes=r.peekByte=r.readByte=r.buildStream=void 0;r.buildStream=function(e){return{data:e,pos:0}};const t=function(){return function(e){return e.data[e.pos++]}};r.readByte=t;r.peekByte=function(){const e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return function(r){return r.data[r.pos+e]}};const n=function(e){return function(r){return r.data.subarray(r.pos,r.pos+=e)}};r.readBytes=n;r.peekBytes=function(e){return function(r){return r.data.subarray(r.pos,r.pos+e)}};r.readString=function(e){return function(r){return Array.from(n(e)(r)).map(((e)=> {return String.fromCharCode(e)})).join("")}};r.readUnsigned=function(e){return function(r){const t=n(2)(r);return e?(t[1]<<8)+t[0]:(t[0]<<8)+t[1]}};r.readArray=function(e,r){return function(t,a,i){for(var o=typeof r==="function"?r(t,a,i):r,s=n(e),d=new Array(o),c=0;c<o;c++)d[c]=s(t);return d}};r.readBits=function(e){return function(r){for(var t=function(e){return e.data[e.pos++]}(r),n=new Array(8),a=0;a<8;a++)n[7-a]=Boolean(t&1<<a);return Object.keys(e).reduce(((r,t)=> {const a=e[t];return a.length?r[t]=function(e,r,t){for(var n=0,a=0;a<t;a++)n+=e[r+a]&&2**(t-a-1);return n}(n,a.index,a.length):r[t]=n[a.index],r}),{})}}})); const n=e(((e,n)=> {Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;const a={blocks(e){for(var r=[],n=e.data.length,a=0,i=(0,t.readByte)()(e);i!==0;i=(0,t.readByte)()(e)){if(e.pos+i>=n){const o=n-e.pos;r.push((0,t.readBytes)(o)(e)),a+=o;break}r.push((0,t.readBytes)(i)(e)),a+=i}for(var s=new Uint8Array(a),d=0,c=0;c<r.length;c++)s.set(r[c],d),d+=r[c].length;return s}}; const i=(0,r.conditional)({gce:[{codes:(0,t.readBytes)(2)},{byteSize:(0,t.readByte)()},{extras:(0,t.readBits)({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:(0,t.readUnsigned)(!0)},{transparentColorIndex:(0,t.readByte)()},{terminator:(0,t.readByte)()}]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===249})); const o=(0,r.conditional)({image:[{code:(0,t.readByte)()},{descriptor:[{left:(0,t.readUnsigned)(!0)},{top:(0,t.readUnsigned)(!0)},{width:(0,t.readUnsigned)(!0)},{height:(0,t.readUnsigned)(!0)},{lct:(0,t.readBits)({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},(0,r.conditional)({lct:(0,t.readArray)(3,((e,r,t)=> {return 2**(t.descriptor.lct.size+1)}))},((e,r,t)=> {return t.descriptor.lct.exists})),{data:[{minCodeSize:(0,t.readByte)()},a]}]},((e)=> {return (0,t.peekByte)()(e)===44})); const s=(0,r.conditional)({text:[{codes:(0,t.readBytes)(2)},{blockSize:(0,t.readByte)()},{preData(e,r,n){return(0,t.readBytes)(n.text.blockSize)(e)}},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===1})); const d=(0,r.conditional)({application:[{codes:(0,t.readBytes)(2)},{blockSize:(0,t.readByte)()},{id(e,r,n){return(0,t.readString)(n.blockSize)(e)}},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===255})); const c=(0,r.conditional)({comment:[{codes:(0,t.readBytes)(2)},a]},((e)=> {const r=(0,t.peekBytes)(2)(e);return r[0]===33&&r[1]===254})); const u=[{header:[{signature:(0,t.readString)(3)},{version:(0,t.readString)(3)}]},{lsd:[{width:(0,t.readUnsigned)(!0)},{height:(0,t.readUnsigned)(!0)},{gct:(0,t.readBits)({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:(0,t.readByte)()},{pixelAspectRatio:(0,t.readByte)()}]},(0,r.conditional)({gct:(0,t.readArray)(3,((e,r)=> {return 2**(r.lsd.gct.size+1)}))},((e,r)=> {return r.lsd.gct.exists})),{frames:(0,r.loop)([i,d,c,o,s],((e)=> {const r=(0,t.peekByte)()(e);return r===33||r===44}))}];n.default=u})); const a=e(((e,r)=> {Object.defineProperty(r,"__esModule",{value:!0}),r.deinterlace=void 0;r.deinterlace=function(e,r){for(var t=new Array(e.length),n=e.length/r,a=function(n,a){const i=e.slice(a*r,(a+1)*r);t.splice.apply(t,[n*r,r].concat(i))},i=[0,4,2,1],o=[8,8,4,2],s=0,d=0;d<4;d++)for(let c=i[d];c<n;c+=o[d])a(c,s),s++;return t}})); const i=e(((e,r)=> {Object.defineProperty(r,"__esModule",{value:!0}),r.lzw=void 0;r.lzw=function(e,r,t){let n; let a; let i; let o; let s; let d; let c; let u; let l; let f; let p; let g; let y; let h; let v; let m; const x=4096; const B=t; const w=new Array(t); const b=new Array(x); const k=new Array(x); const A=new Array(4097);for(s=(a=1<<(f=e))+1,n=a+2,c=-1,i=(1<<(o=f+1))-1,u=0;u<a;u++)b[u]=0,k[u]=u;for(p=g=y=h=v=m=0,l=0;l<B;){if(h===0){if(g<o){p+=r[m]<<g,g+=8,m++;continue}if(u=p&i,p>>=o,g-=o,u>n||u==s)break;if(u==a){i=(1<<(o=f+1))-1,n=a+2,c=-1;continue}if(c==-1){A[h++]=k[u],c=u,y=u;continue}for(d=u,u==n&&(A[h++]=y,u=c);u>a;)A[h++]=k[u],u=b[u];y=255&k[u],A[h++]=y,n<x&&(b[n]=c,k[n]=y,(++n&i)==0&&n<x&&(o++,i+=n)),c=d}h--,w[v++]=A[h],l++}for(l=v;l<B;l++)w[l]=0;return w}})); const o=e(((e,o)=> {Object.defineProperty(o,"__esModule",{value:!0}),o.decompressFrames=o.decompressFrame=o.parseGIF=void 0;let s; const d=(s=n)&&s.__esModule?s:{default:s};o.parseGIF=function(e){const n=new Uint8Array(e);return(0,r.parse)((0,t.buildStream)(n),d.default)};const c=function(e,r,t){if(e.image){const n=e.image; const o=n.descriptor.width*n.descriptor.height; let s=(0,i.lzw)(n.data.minCodeSize,n.data.blocks,o);n.descriptor.lct.interlaced&&(s=(0,a.deinterlace)(s,n.descriptor.width));const d={pixels:s,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height}};return n.descriptor.lct&&n.descriptor.lct.exists?d.colorTable=n.lct:d.colorTable=r,e.gce&&(d.delay=10*(e.gce.delay||10),d.disposalType=e.gce.extras.disposal,e.gce.extras.transparentColorGiven&&(d.transparentIndex=e.gce.transparentColorIndex)),t&&(d.patch=function(e){for(var r=e.pixels.length,t=new Uint8ClampedArray(4*r),n=0;n<r;n++){const a=4*n; const i=e.pixels[n]; const o=e.colorTable[i]||[0,0,0];t[a]=o[0],t[a+1]=o[1],t[a+2]=o[2],t[a+3]=i!==e.transparentIndex?255:0}return t}(d)),d}console.warn("gif frame does not have associated image.")};o.decompressFrame=c;o.decompressFrames=function(e,r){return e.frames.filter(((e)=> {return e.image})).map(((t)=> {return c(t,e.gct,r)}))}}));const s=(e,r,t)=>{const{width:n,height:a,top:i,left:o}=r.dims; const s=i*t.width+o;for(let i=0;i<a;i++)for(let a=0;a<n;a++){const o=i*n+a; const d=r.pixels[o];if(d!==r.transparentIndex){const n=s+i*t.width+a; const o=r.colorTable[d]||[0,0,0];e[4*n]=o[0],e[4*n+1]=o[1],e[4*n+2]=o[2],e[4*n+3]=255}}return e}; const d=new Map;self.addEventListener("message",(e=>{const{type:r,src:t}=e.data||e;switch(r){case"parse":if(!d.has(t)){const e=new AbortController; const r={signal:e.signal};d.set(t,e),((e,{signal:r})=>fetch(e,{signal:r}).then((e=>{if(!e.headers.get("Content-Type").includes("image/gif"))throw Error(\`Wrong content type: "$\{e.headers.get("Content-Type")}"\`);return e.arrayBuffer()})).then((e=>o.parseGIF(e))).then((e=>((e=>{let r=null;for(const t of e.frames)r=t.gce?t.gce:r,"image"in t&&!("gce"in t)&&(t.gce=r)})(e),e))).then((e=>Promise.all([o.decompressFrames(e,!1),{width:e.lsd.width,height:e.lsd.height}]))).then((([e,r])=>{const t=[]; const n=r.width*r.height*4;for(let a=0;a<e.length;++a){const i=e[a]; const o=a===0||e[a-1].disposalType===2?new Uint8ClampedArray(n):t[a-1].slice();t.push(s(o,i,r))}return{...r,loaded:!0,delays:e.map((e=>e.delay)),frames:t}})))(t,r).then((e=>{self.postMessage(Object.assign(e,{src:t}),e.frames.map((e=>e.buffer)))})).catch((e=>{self.postMessage({src:t,error:e,loaded:!0})})).finally((()=>{d.delete(t)}))}break;case"cancel":if(d.has(t)){d.get(t).abort(),d.delete(t)}}}));`;

package/dist/worker/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/worker/worker.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const parse_generate_1 = require("../parse-generate");
+const abortMap = new Map();
+self.addEventListener('message', (e) => {
+    const { type, src } = e.data || e;
+    switch (type) {
+        case 'parse': {
+            if (!abortMap.has(src)) {
+                const controller = new AbortController();
+                const signal = { signal: controller.signal };
+                abortMap.set(src, controller);
+                (0, parse_generate_1.parse)(src, signal)
+                    .then((result) => {
+                    self.postMessage(Object.assign(result, { src }), 
+                    // @ts-expect-error
+                    result.frames.map((frame) => frame.buffer));
+                })
+                    .catch((error) => {
+                    self.postMessage({ src, error, loaded: true });
+                })
+                    .finally(() => {
+                    abortMap.delete(src);
+                });
+            }
+            break;
+        }
+        case 'cancel': {
+            if (abortMap.has(src)) {
+                const controller = abortMap.get(src);
+                controller.abort();
+                abortMap.delete(src);
+            }
+            break;
+        }
+        default:
+            break;
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/gif",
-	"version": "3.2.20",
+	"version": "3.2.22",
 	"description": "Gif component for remotion",
 	"sideEffects": false,
 	"repository": {
@@ -21,9 +21,8 @@
 		"watch": "tsc -w"
 	},
 	"dependencies": {
-		"@react-gifs/tools": "0.1.2",
 		"lru_map": "0.4.1",
-		"remotion": "3.2.20"
+		"remotion": "3.2.22"
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
@@ -31,6 +30,7 @@
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
 		"eslint": "8.13.0",
+		"gifuct-js": "2.1.2",
 		"jest": "^27.2.4",
 		"prettier": "2.6.2",
 		"prettier-plugin-organize-imports": "^2.3.4",
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "640f36c0c2d9fb1b7768925bf9d64840cbc31bc6"
+	"gitHead": "1c35638566717760bb394e0748b088cea15faff4"
 }