@remotion/gif 3.3.61 → 3.3.63

package/dist/cjs/Gif.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { RemotionGifProps } from './props';
+/**
+ * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/gif/gif)
+ */
+export declare const Gif: (props: RemotionGifProps) => JSX.Element;

package/dist/cjs/Gif.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gif = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const GifForDevelopment_1 = require("./GifForDevelopment");
+const GifForRendering_1 = require("./GifForRendering");
+/**
+ * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
+ * @see [Documentation](https://www.remotion.dev/docs/gif/gif)
+ */
+const Gif = (props) => {
+    const env = remotion_1.Internals.useRemotionEnvironment();
+    if (env === 'rendering') {
+        return (0, jsx_runtime_1.jsx)(GifForRendering_1.GifForRendering, { ...props });
+    }
+    return (0, jsx_runtime_1.jsx)(GifForDevelopment_1.GifForDevelopment, { ...props });
+};
+exports.Gif = Gif;

package/dist/cjs/GifForDevelopment.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RemotionGifProps } from './props';
+export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForDevelopment.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GifForDevelopment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 resolve_gif_source_1 = require("./resolve-gif-source");
+const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', onLoad, fit = 'fill', ...props }, ref) => {
+    const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
+    const [state, update] = (0, react_1.useState)(() => {
+        var _a;
+        const parsedGif = (_a = gif_cache_1.volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.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 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.volatileGifCache.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(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.`);
+        }
+        throw new Error(`Failed to render GIF with source ${src}: "${error.message}".`);
+    }
+    const index = (0, useCurrentGifIndex_1.useCurrentGifIndex)(state.delays, loopBehavior);
+    if (index === -1) {
+        return null;
+    }
+    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/cjs/GifForRendering.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RemotionGifProps } from './props';
+export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForRendering.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GifForRendering = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 resolve_gif_source_1 = require("./resolve-gif-source");
+const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
+exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', fit = 'fill', ...props }, ref) => {
+    const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
+    const [state, update] = (0, react_1.useState)(() => {
+        const parsedGif = gif_cache_1.volatileGifCache.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, loopBehavior);
+    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.volatileGifCache.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(err);
+            }
+        });
+        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)) {
+            throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL.`);
+        }
+        throw new Error(`Failed to render GIF with source ${src}: "${error.message}". Render with --log=verbose to see the full stack.`);
+    }
+    if (index === -1) {
+        return null;
+    }
+    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/cjs/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/cjs/canvas.js

@@ -0,0 +1,96 @@
+"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 = () => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    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/cjs/get-gif-duration-in-seconds.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description Gets the duration in seconds of a GIF
+ * @see [Documentation](https://www.remotion.dev/docs/gif/get-gif-duration-in-seconds)
+ */
+export declare const getGifDurationInSeconds: (src: string) => Promise<number>;

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

@@ -0,0 +1,34 @@
+"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);
+};
+/**
+ * @description Gets the duration in seconds of a GIF
+ * @see [Documentation](https://www.remotion.dev/docs/gif/get-gif-duration-in-seconds)
+ */
+const getGifDurationInSeconds = async (src) => {
+    var _a;
+    const resolvedSrc = new URL(src, window.location.origin).href;
+    const inCache = (_a = gif_cache_1.volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.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.volatileGifCache.set(resolvedSrc, resolved);
+        return calcDuration(resolved);
+    }
+    const parsed = await (0, react_tools_1.parseGif)({
+        src: resolvedSrc,
+        controller: new AbortController(),
+    });
+    gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
+    return calcDuration(parsed);
+};
+exports.getGifDurationInSeconds = getGifDurationInSeconds;

package/dist/cjs/gif-cache.d.ts

@@ -0,0 +1,4 @@
+import { QuickLRU } from './lru/index';
+import type { GifState } from './props';
+export declare const volatileGifCache: QuickLRU<string, GifState>;
+export declare const manuallyManagedGifCache: Map<string, GifState>;

package/dist/cjs/gif-cache.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.manuallyManagedGifCache = exports.volatileGifCache = void 0;
+const index_1 = require("./lru/index");
+exports.volatileGifCache = new index_1.QuickLRU({ maxSize: 30 });
+exports.manuallyManagedGifCache = new Map();

package/dist/cjs/gifuct/deinterlace.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Deinterlace function from https://github.com/shachaf/jsgif
+ */
+export declare const deinterlace: (pixels: number[], width: number) => any[];

package/dist/cjs/gifuct/deinterlace.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * Deinterlace function from https://github.com/shachaf/jsgif
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deinterlace = void 0;
+const deinterlace = (pixels, width) => {
+    const newPixels = new Array(pixels.length);
+    const rows = pixels.length / width;
+    const cpRow = function (toRow, _fromRow) {
+        const fromPixels = pixels.slice(_fromRow * width, (_fromRow + 1) * width);
+        newPixels.splice(...[toRow * width, width].concat(fromPixels));
+    };
+    // See appendix E.
+    const offsets = [0, 4, 2, 1];
+    const steps = [8, 8, 4, 2];
+    let fromRow = 0;
+    for (let pass = 0; pass < 4; pass++) {
+        for (let toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+            cpRow(toRow, fromRow);
+            fromRow++;
+        }
+    }
+    return newPixels;
+};
+exports.deinterlace = deinterlace;

package/dist/cjs/gifuct/index.d.ts

@@ -0,0 +1,4 @@
+import type { Frame, ParsedFrameWithoutPatch, ParsedGif } from './types';
+export declare const parseGIF: (arrayBuffer: ArrayBuffer) => ParsedGif;
+export declare const decompressFrame: (frame: Frame, gct: [number, number, number][]) => ParsedFrameWithoutPatch | undefined;
+export declare const decompressFrames: (parsedGif: ParsedGif) => (ParsedFrameWithoutPatch | undefined)[];

package/dist/cjs/gifuct/index.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decompressFrames = exports.decompressFrame = exports.parseGIF = void 0;
+const gif_1 = require("../js-binary-schema-parser/gif");
+const parser_1 = require("../js-binary-schema-parser/parser");
+const uint8_parser_1 = require("../js-binary-schema-parser/uint8-parser");
+const deinterlace_1 = require("./deinterlace");
+const lzw_1 = require("./lzw");
+const parseGIF = (arrayBuffer) => {
+    const byteData = new Uint8Array(arrayBuffer);
+    return (0, parser_1.parse)((0, uint8_parser_1.buildStream)(byteData), gif_1.GIF);
+};
+exports.parseGIF = parseGIF;
+const decompressFrame = (frame, gct) => {
+    var _a, _b;
+    if (!frame.image) {
+        console.warn('gif frame does not have associated image.');
+        return;
+    }
+    const { image } = frame;
+    // get the number of pixels
+    const totalPixels = image.descriptor.width * image.descriptor.height;
+    // do lzw decompression
+    let pixels = (0, lzw_1.lzw)(image.data.minCodeSize, image.data.blocks, totalPixels);
+    // deal with interlacing if necessary
+    if ((_a = image.descriptor.lct) === null || _a === void 0 ? void 0 : _a.interlaced) {
+        pixels = (0, deinterlace_1.deinterlace)(pixels, image.descriptor.width);
+    }
+    const resultImage = {
+        pixels,
+        dims: {
+            top: frame.image.descriptor.top,
+            left: frame.image.descriptor.left,
+            width: frame.image.descriptor.width,
+            height: frame.image.descriptor.height,
+        },
+        colorTable: ((_b = image.descriptor.lct) === null || _b === void 0 ? void 0 : _b.exists)
+            ? image.lct
+            : gct,
+        delay: (frame.gce.delay || 10) * 10,
+        disposalType: frame.gce.extras.disposal,
+        transparentIndex: frame.gce.extras.transparentColorGiven
+            ? frame.gce.transparentColorIndex
+            : -1,
+    };
+    return resultImage;
+};
+exports.decompressFrame = decompressFrame;
+const decompressFrames = (parsedGif) => {
+    return parsedGif.frames
+        .filter((f) => !('application' in f))
+        .map((f) => (0, exports.decompressFrame)(f, parsedGif.gct));
+};
+exports.decompressFrames = decompressFrames;

package/dist/cjs/gifuct/lzw.d.ts

@@ -0,0 +1,5 @@
+/**
+ * javascript port of java LZW decompression
+ * Original java author url: https://gist.github.com/devunwired/4479231
+ */
+export declare const lzw: (minCodeSize: number, data: number[], pixelCount: number) => any[];

package/dist/cjs/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;