@remotion/gif 3.3.61 → 3.3.63

package/dist/cjs/lru/index.js

@@ -0,0 +1,258 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickLRU = void 0;
+class QuickLRU {
+    /**
+    Simple ["Least Recently Used" (LRU) cache](https://en.m.wikipedia.org/wiki/Cache_replacement_policies#Least_Recently_Used_.28LRU.29).
+
+    The instance is an [`Iterable`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols) of `[key, value]` pairs so you can use it directly in a [`for…of`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of) loop.
+
+    @example
+    ```
+    import { QuickLRU } from 'quick-lru-ts';
+
+    const lru = new QuickLRU({maxSize: 1000});
+
+    lru.set('🦄', '🌈');
+
+    lru.has('🦄');
+    //=> true
+
+    lru.get('🦄');
+    //=> '🌈'
+    ```
+    */
+    constructor(options) {
+        if (!(options.maxSize && options.maxSize > 0)) {
+            throw new TypeError('`maxSize` must be a number greater than 0');
+        }
+        if (typeof options.maxAge === 'number' && options.maxAge === 0) {
+            throw new TypeError('`maxAge` must be a number greater than 0');
+        }
+        this.maxSize = options.maxSize;
+        this.maxAge = options.maxAge || Number.POSITIVE_INFINITY;
+        this.onEviction = options.onEviction;
+        this.cache = new Map();
+        this.oldCache = new Map();
+        this._size = 0;
+    }
+    _emitEvictions(cache) {
+        if (typeof this.onEviction !== 'function') {
+            return;
+        }
+        for (const [key, item] of cache) {
+            this.onEviction(key, item.value);
+        }
+    }
+    _deleteIfExpired(key, item) {
+        if (item === undefined)
+            return true;
+        if (typeof item.expiry === 'number' && item.expiry <= Date.now()) {
+            if (typeof this.onEviction === 'function') {
+                this.onEviction(key, item.value);
+            }
+            return this.delete(key);
+        }
+        return false;
+    }
+    _getOrDeleteIfExpired(key, item) {
+        const deleted = this._deleteIfExpired(key, item);
+        if (deleted === false) {
+            return item.value;
+        }
+    }
+    _getItemValue(key, item) {
+        if (item === undefined)
+            return undefined;
+        return item.expiry ? this._getOrDeleteIfExpired(key, item) : item.value;
+    }
+    _peek(key, cache) {
+        const item = cache.get(key);
+        return this._getItemValue(key, item);
+    }
+    _set(key, value) {
+        this.cache.set(key, value);
+        this._size++;
+        if (this._size >= this.maxSize) {
+            this._size = 0;
+            this._emitEvictions(this.oldCache);
+            this.oldCache = this.cache;
+            this.cache = new Map();
+        }
+    }
+    _moveToRecent(key, item) {
+        this.oldCache.delete(key);
+        this._set(key, item);
+    }
+    *_entriesAscending() {
+        for (const item of this.oldCache) {
+            const [key, value] = item;
+            if (!this.cache.has(key)) {
+                const deleted = this._deleteIfExpired(key, value);
+                if (deleted === false) {
+                    yield item;
+                }
+            }
+        }
+        for (const item of this.cache) {
+            const [key, value] = item;
+            const deleted = this._deleteIfExpired(key, value);
+            if (deleted === false) {
+                yield item;
+            }
+        }
+    }
+    /**
+    Get an item.
+
+    @returns The stored item or `undefined`.
+    */
+    get(key) {
+        if (this.cache.has(key)) {
+            const item = this.cache.get(key);
+            return this._getItemValue(key, item);
+        }
+        if (this.oldCache.has(key)) {
+            const item = this.oldCache.get(key);
+            if (this._deleteIfExpired(key, item) === false) {
+                this._moveToRecent(key, item);
+                return item.value;
+            }
+        }
+    }
+    set(key, value, { maxAge = this.maxAge } = {}) {
+        const expiry = typeof maxAge === 'number' && maxAge !== Number.POSITIVE_INFINITY
+            ? Date.now() + maxAge
+            : undefined;
+        if (this.cache.has(key)) {
+            this.cache.set(key, {
+                value,
+                expiry,
+            });
+        }
+        else {
+            this._set(key, { value, expiry });
+        }
+    }
+    has(key) {
+        if (this.cache.has(key)) {
+            return !this._deleteIfExpired(key, this.cache.get(key));
+        }
+        if (this.oldCache.has(key)) {
+            return !this._deleteIfExpired(key, this.oldCache.get(key));
+        }
+        return false;
+    }
+    peek(key) {
+        if (this.cache.has(key)) {
+            return this._peek(key, this.cache);
+        }
+        if (this.oldCache.has(key)) {
+            return this._peek(key, this.oldCache);
+        }
+    }
+    delete(key) {
+        const deleted = this.cache.delete(key);
+        if (deleted) {
+            this._size--;
+        }
+        return this.oldCache.delete(key) || deleted;
+    }
+    clear() {
+        this.cache.clear();
+        this.oldCache.clear();
+        this._size = 0;
+    }
+    resize(maxSize) {
+        if (!(maxSize && maxSize > 0)) {
+            throw new TypeError('`maxSize` must be a number greater than 0');
+        }
+        const items = [...this._entriesAscending()];
+        const removeCount = items.length - maxSize;
+        if (removeCount < 0) {
+            this.cache = new Map(items);
+            this.oldCache = new Map();
+            this._size = items.length;
+        }
+        else {
+            if (removeCount > 0) {
+                this._emitEvictions(items.slice(0, removeCount));
+            }
+            this.oldCache = new Map(items.slice(removeCount));
+            this.cache = new Map();
+            this._size = 0;
+        }
+        this.maxSize = maxSize;
+    }
+    *keys() {
+        for (const [key] of this) {
+            yield key;
+        }
+    }
+    *values() {
+        for (const [, value] of this) {
+            yield value;
+        }
+    }
+    *[Symbol.iterator]() {
+        for (const item of this.cache) {
+            const [key, value] = item;
+            const deleted = this._deleteIfExpired(key, value);
+            if (deleted === false) {
+                yield [key, value.value];
+            }
+        }
+        for (const item of this.oldCache) {
+            const [key, value] = item;
+            if (!this.cache.has(key)) {
+                const deleted = this._deleteIfExpired(key, value);
+                if (deleted === false) {
+                    yield [key, value.value];
+                }
+            }
+        }
+    }
+    /**
+    Iterable for all entries, starting with the newest (descending in recency).
+    */
+    *entriesDescending() {
+        let items = [...this.cache];
+        for (let i = items.length - 1; i >= 0; --i) {
+            const item = items[i];
+            const [key, value] = item;
+            const deleted = this._deleteIfExpired(key, value);
+            if (deleted === false) {
+                yield [key, value.value];
+            }
+        }
+        items = [...this.oldCache];
+        for (let i = items.length - 1; i >= 0; --i) {
+            const item = items[i];
+            const [key, value] = item;
+            if (!this.cache.has(key)) {
+                const deleted = this._deleteIfExpired(key, value);
+                if (deleted === false) {
+                    yield [key, value.value];
+                }
+            }
+        }
+    }
+    *entriesAscending() {
+        for (const [key, value] of this._entriesAscending()) {
+            yield [key, value.value];
+        }
+    }
+    get size() {
+        if (!this._size) {
+            return this.oldCache.size;
+        }
+        let oldCacheSize = 0;
+        for (const key of this.oldCache.keys()) {
+            if (!this.cache.has(key)) {
+                oldCacheSize++;
+            }
+        }
+        return Math.min(this._size + oldCacheSize, this.maxSize);
+    }
+}
+exports.QuickLRU = QuickLRU;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/preload-gif.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description Returns an object with two entries: waitUntilDone() that returns a Promise which can be awaited and free() which will cancel preloading or free up the memory if the GIF is not being used anymore.
+ * @see [Documentation](https://www.remotion.dev/docs/gif/preload-gif)
+ */
+export declare const preloadGif: (src: string) => {
+    waitUntilDone: () => Promise<void>;
+    free: () => void;
+};

package/dist/cjs/preload-gif.js

@@ -0,0 +1,41 @@
+"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");
+/**
+ * @description Returns an object with two entries: waitUntilDone() that returns a Promise which can be awaited and free() which will cancel preloading or free up the memory if the GIF is not being used anymore.
+ * @see [Documentation](https://www.remotion.dev/docs/gif/preload-gif)
+ */
+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/cjs/props.d.ts

@@ -0,0 +1,24 @@
+/// <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: {
+        width: number;
+        height: number;
+        delays: number[];
+        frames: ImageData[];
+    }) => void;
+    onError?: (error: Error) => void;
+    fit?: GifFillMode;
+    style?: React.CSSProperties;
+    loopBehavior?: GifLoopBehavior;
+};
+export declare type GifState = {
+    delays: number[];
+    frames: ImageData[];
+    width: number;
+    height: number;
+};
+export declare type GifFillMode = 'contain' | 'cover' | 'fill';

package/dist/cjs/props.js

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

package/dist/cjs/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/cjs/react-tools.js

@@ -0,0 +1,40 @@
+"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.terminate();
+                }
+            }
+        };
+        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/cjs/resolve-gif-source.d.ts

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

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

@@ -0,0 +1,2 @@
+import type { GifLoopBehavior } from './props';
+export declare function useCurrentGifIndex(delays: number[], loopBehavior: GifLoopBehavior): number;

package/dist/cjs/useCurrentGifIndex.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentGifIndex = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+function useCurrentGifIndex(delays, loopBehavior) {
+    const currentFrame = (0, remotion_1.useCurrentFrame)();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const duration = (0, react_1.useMemo)(() => {
+        if (delays.length !== 0) {
+            return delays.reduce((sum, delay) => sum + (delay !== null && delay !== void 0 ? delay : 0), 0);
+        }
+        return 1;
+    }, [delays]);
+    if (delays.length === 0) {
+        return 0;
+    }
+    const time = (currentFrame / videoConfig.fps) * 1000;
+    if (loopBehavior === 'pause-after-finish' && time >= duration) {
+        return delays.length - 1;
+    }
+    if (loopBehavior === 'unmount-after-finish' && time >= duration) {
+        return -1;
+    }
+    let currentTime = time % duration;
+    for (let i = 0; i < delays.length; i++) {
+        const delay = delays[i];
+        if (currentTime < delay) {
+            return i;
+        }
+        currentTime -= delay;
+    }
+    return 0;
+}
+exports.useCurrentGifIndex = useCurrentGifIndex;

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

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

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