@remotion/gif 4.0.0-lambda.3 → 4.0.0-newpathfunctions.13

package/dist/gifuct/lzw.js

@@ -0,0 +1,119 @@
+"use strict";
+/* eslint-disable no-multi-assign */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-bitwise */
+/* eslint-disable no-var */
+/**
+ * javascript port of java LZW decompression
+ * Original java author url: https://gist.github.com/devunwired/4479231
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lzw = void 0;
+const lzw = (minCodeSize, data, pixelCount) => {
+    const MAX_STACK_SIZE = 4096;
+    const nullCode = -1;
+    const npix = pixelCount;
+    let available;
+    let code_mask;
+    let code_size;
+    let in_code;
+    let old_code;
+    var bits;
+    let code;
+    let i;
+    var datum;
+    var first;
+    var top;
+    var bi;
+    var pi;
+    const dstPixels = new Array(pixelCount);
+    const prefix = new Array(MAX_STACK_SIZE);
+    const suffix = new Array(MAX_STACK_SIZE);
+    const pixelStack = new Array(MAX_STACK_SIZE + 1);
+    // Initialize GIF data stream decoder.
+    const data_size = minCodeSize;
+    const clear = 1 << data_size;
+    const end_of_information = clear + 1;
+    available = clear + 2;
+    old_code = nullCode;
+    code_size = data_size + 1;
+    code_mask = (1 << code_size) - 1;
+    for (code = 0; code < clear; code++) {
+        prefix[code] = 0;
+        suffix[code] = code;
+    }
+    // Decode GIF pixel stream.
+    var datum;
+    var bits;
+    var first;
+    var top;
+    var pi;
+    var bi;
+    datum = bits = first = top = pi = bi = 0;
+    for (i = 0; i < npix;) {
+        if (top === 0) {
+            if (bits < code_size) {
+                // get the next byte
+                datum += data[bi] << bits;
+                bits += 8;
+                bi++;
+                continue;
+            }
+            // Get the next code.
+            code = datum & code_mask;
+            datum >>= code_size;
+            bits -= code_size;
+            // Interpret the code
+            if (code > available || code === end_of_information) {
+                break;
+            }
+            if (code === clear) {
+                // Reset decoder.
+                code_size = data_size + 1;
+                code_mask = (1 << code_size) - 1;
+                available = clear + 2;
+                old_code = nullCode;
+                continue;
+            }
+            if (old_code === nullCode) {
+                pixelStack[top++] = suffix[code];
+                old_code = code;
+                first = code;
+                continue;
+            }
+            in_code = code;
+            if (code === available) {
+                pixelStack[top++] = first;
+                code = old_code;
+            }
+            while (code > clear) {
+                pixelStack[top++] = suffix[code];
+                code = prefix[code];
+            }
+            first = suffix[code] & 0xff;
+            pixelStack[top++] = first;
+            // add a new string to the table, but only if space is available
+            // if not, just continue with current table until a clear code is found
+            // (deferred clear code implementation as per GIF spec)
+            if (available < MAX_STACK_SIZE) {
+                prefix[available] = old_code;
+                suffix[available] = first;
+                available++;
+                if ((available & code_mask) === 0 && available < MAX_STACK_SIZE) {
+                    code_size++;
+                    code_mask += available;
+                }
+            }
+            old_code = in_code;
+        }
+        // Pop a pixel off the pixel stack.
+        top--;
+        dstPixels[pi++] = pixelStack[top];
+        i++;
+    }
+    for (i = pi; i < npix; i++) {
+        dstPixels[i] = 0; // clear missing pixels
+    }
+    return dstPixels;
+};
+exports.lzw = lzw;

package/dist/gifuct/types.d.ts

@@ -0,0 +1,96 @@
+declare type Dimensions = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+declare type Application = {
+    application: {
+        blockSize: number;
+        blocks: number[];
+        codes: number[];
+        id: string;
+    };
+};
+declare type Lct = {
+    exists: boolean;
+    future: number;
+    interlaced: boolean;
+    size: number;
+    sort: boolean;
+};
+export declare type Frame = {
+    gce: {
+        byteSize: number;
+        codes: number[];
+        delay: number;
+        terminator: number;
+        transparentColorIndex: number;
+        extras: {
+            userInput: boolean;
+            transparentColorGiven: boolean;
+            future: number;
+            disposal: number;
+        };
+    };
+    image: {
+        code: number;
+        data: {
+            minCodeSize: number;
+            blocks: number[];
+        };
+        descriptor: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+            lct: Lct;
+        };
+        lct: [number, number, number][] | undefined;
+    };
+};
+export declare type ParsedFrame = {
+    dims: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    colorTable: [number, number, number][];
+    delay: number;
+    disposalType: number;
+    patch: Uint8ClampedArray;
+    pixels: number[];
+    transparentIndex: number;
+};
+export declare type ParsedFrameWithoutPatch = Omit<ParsedFrame, 'patch'>;
+export declare type ParsedGif = {
+    frames: (Application | Frame)[];
+    gct: [number, number, number][];
+    header: {
+        signature: string;
+        version: string;
+    };
+    lsd: {
+        backgroundColorIndex: number;
+        gct: {
+            exists: boolean;
+            resolution: number;
+            size: number;
+            sort: boolean;
+        };
+        height: number;
+        width: number;
+        pixelAspectRatio: number;
+    };
+};
+export declare type Image = {
+    pixels: number[];
+    dims: Dimensions;
+    delay?: number;
+    transparentIndex?: number;
+    colorTable?: [number, number, number][] | Lct;
+    disposalType?: unknown;
+    patch?: Uint8ClampedArray;
+};
+export {};

package/dist/gifuct/types.js

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,18 +1,9 @@
 "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.preloadGif = 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; } });
+var preload_gif_1 = require("./preload-gif");
+Object.defineProperty(exports, "preloadGif", { enumerable: true, get: function () { return preload_gif_1.preloadGif; } });

package/dist/is-cors-error.d.ts

@@ -0,0 +1 @@
+export declare const isCorsError: (error: Error) => boolean;

package/dist/is-cors-error.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCorsError = void 0;
+const isCorsError = (error) => {
+    return (
+    // Chrome
+    error.message.includes('Failed to fetch') ||
+        // Safari
+        error.message.includes('Load failed') ||
+        // Firefox
+        error.message.includes('NetworkError when attempting to fetch resource'));
+};
+exports.isCorsError = isCorsError;

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: any;
+    height: any;
+}>;
+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,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generate = exports.parse = void 0;
+const gifuct_1 = require("./gifuct");
+const decompress_frames_1 = require("./parser/decompress-frames");
+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_1.parseGIF)(buffer))
+    .then((gif) => {
+    validateAndFix(gif);
+    return gif;
+})
+    .then((gif) => Promise.all([
+    (0, decompress_frames_1.decompressFrames)(gif),
+    { width: gif.lsd.width, height: gif.lsd.height },
+]))
+    .then(([frames, options]) => {
+    const readyFrames = [];
+    const size = options.width * options.height * 4;
+    let canvas = new Uint8ClampedArray(size);
+    for (let i = 0; i < frames.length; ++i) {
+        const frame = frames[i];
+        // Read about different disposal types
+        // https://giflib.sourceforge.net/whatsinagif/animation_and_transparency.html
+        const prevCanvas = frames[i].disposalType === 3 ? canvas.slice() : null;
+        readyFrames.push(putPixels(canvas, frame, options));
+        // Disposal type 2: The canvas should be restored to the background color
+        if (frames[i].disposalType === 2) {
+            canvas = new Uint8ClampedArray(size);
+        }
+        // Disposal type 3: The decoder should restore the canvas to its previous state before the current image was drawn
+        else if (frames[i].disposalType === 3) {
+            if (!prevCanvas) {
+                throw Error('Disposal type 3 without previous frame');
+            }
+            canvas = prevCanvas;
+        }
+        // Disposal type 1: Draw the next image on top of it
+        else {
+            canvas = readyFrames[i].slice();
+        }
+    }
+    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];
+                typedArray[taPos * 4] = color[0];
+                typedArray[taPos * 4 + 1] = color[1];
+                typedArray[taPos * 4 + 2] = color[2];
+                typedArray[taPos * 4 + 3] =
+                    colorIndex === frame.transparentIndex ? 0 : 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/parser/decompress-frames.d.ts

@@ -0,0 +1,2 @@
+import type { ParsedFrameWithoutPatch, ParsedGif } from '../gifuct/types';
+export declare const decompressFrames: (parsedGif: ParsedGif) => ParsedFrameWithoutPatch[];

package/dist/parser/decompress-frames.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decompressFrames = void 0;
+const gifuct_1 = require("../gifuct");
+const decompressFrames = (parsedGif) => {
+    return parsedGif.frames
+        .filter((f) => {
+        return !('application' in f);
+    })
+        .map((f) => {
+        const fr = f.image
+            ? (0, gifuct_1.decompressFrame)(f, parsedGif.gct)
+            : null;
+        return fr;
+    })
+        .filter(Boolean)
+        .map((f) => f);
+};
+exports.decompressFrames = decompressFrames;

package/dist/preload-gif.d.ts

@@ -0,0 +1,4 @@
+export declare const preloadGif: (src: string) => {
+    waitUntilDone: () => Promise<void>;
+    free: () => void;
+};

package/dist/preload-gif.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preloadGif = void 0;
+const gif_cache_1 = require("./gif-cache");
+const react_tools_1 = require("./react-tools");
+const resolve_gif_source_1 = require("./resolve-gif-source");
+const preloadGif = (src) => {
+    const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
+    if (gif_cache_1.volatileGifCache.has(resolvedSrc)) {
+        return {
+            waitUntilDone: () => Promise.resolve(),
+            free: () => gif_cache_1.volatileGifCache.delete(resolvedSrc),
+        };
+    }
+    if (gif_cache_1.manuallyManagedGifCache.has(resolvedSrc)) {
+        return {
+            waitUntilDone: () => Promise.resolve(),
+            free: () => gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc),
+        };
+    }
+    const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+    let deleted = false;
+    prom.then((p) => {
+        if (!deleted) {
+            gif_cache_1.manuallyManagedGifCache.set(resolvedSrc, p);
+        }
+    });
+    return {
+        waitUntilDone: () => prom.then(() => undefined),
+        free: () => {
+            cancel();
+            deleted = true;
+            gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc);
+        },
+    };
+};
+exports.preloadGif = preloadGif;

package/dist/props.d.ts

@@ -1,18 +1,19 @@
 /// <reference types="react" />
+export declare type GifLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
 export declare type RemotionGifProps = {
     src: string;
     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;
+    loopBehavior?: GifLoopBehavior;
 };
 export declare type GifState = {
     delays: number[];
@@ -20,3 +21,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/resolve-gif-source.d.ts

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

package/dist/resolve-gif-source.js

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

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,2 @@
-declare function useCurrentGifIndex(delays: number[]): number;
-export { useCurrentGifIndex };
+import type { GifLoopBehavior } from './props';
+export declare function useCurrentGifIndex(delays: number[], loopBehavior: GifLoopBehavior): number;