@remotion/gif 4.0.0-prefetch.11 → 4.0.0-prefetch.12

package/LICENSE.md

@@ -1,34 +1,34 @@
 # Remotion License
 
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)
 - [Company license](#company-license)
 
 ## Free license
 
-Copyright © 2022 [Jonny Burger](https://jonny.io)
+Copyright © 2022 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 
 You are eligible to use Remotion for free if you are:
 
 - an individual
-- a for-profit organisation with up to 3 employees
-- a non-profit or not-for-profit organisation
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
 - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
 
 ### Warranty notice
 
-The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
 
 ### Support
 

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,54 @@ 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;
+        let aborted = 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 (aborted) {
+                (0, remotion_1.continueRender)(newHandle);
+                return;
+            }
+            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) {
+                aborted = true;
+                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}".`);
+    }
     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,69 @@
 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;
+        let aborted = 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 (aborted) {
+                (0, remotion_1.continueRender)(newHandle);
+                return;
+            }
+            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) {
+                aborted = true;
+                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 +72,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/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,39 @@
+"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;
+const parseWithWorker = (src) => {
+    const 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);
+            worker.terminate();
+        },
+    };
+};
+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": "4.0.0-prefetch.11+edeed0968",
+	"version": "4.0.0-prefetch.12+c7eb5bd76",
 	"description": "Gif component for remotion",
 	"sideEffects": false,
 	"repository": {
@@ -21,23 +21,22 @@
 		"watch": "tsc -w"
 	},
 	"dependencies": {
-		"@react-gifs/tools": "0.1.2",
+		"gifuct-js": "2.1.2",
 		"lru_map": "0.4.1",
-		"remotion": "4.0.0-prefetch.11+edeed0968"
+		"remotion": "4.0.0-prefetch.12+c7eb5bd76"
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
 		"@types/node": "^16.7.5",
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
-		"eslint": "8.13.0",
-		"jest": "^27.2.4",
+		"eslint": "8.25.0",
 		"prettier": "2.6.2",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "18.0.0",
 		"react-dom": "18.0.0",
 		"typescript": "^4.7.0",
-		"webpack": "5.72.0"
+		"webpack": "5.74.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -54,5 +53,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "edeed0968f80a7678bd7c3bdf90fa8b9466f9059"
+	"gitHead": "c7eb5bd76f2f89677f007a54e1bc5d3e3403094f"
 }