@remotion/gif 4.0.469 → 4.0.471

package/dist/cjs/Gif.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gif = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const remotion_1 = require("remotion");
 const GifForDevelopment_1 = require("./GifForDevelopment");
 const GifForRendering_1 = require("./GifForRendering");
@@ -22,11 +26,12 @@ const gifSchema = {
     ...remotion_1.Internals.sequenceVisualStyleSchema,
     hidden: remotion_1.Internals.hiddenField,
 };
-const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, durationInFrames, style, _experimentalControls: controls, effects = [], ref, ...sequenceProps }) => {
+const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, style, _experimentalControls: controls, effects = [], ref, ...sequenceProps }) => {
     var _a;
     const env = (0, remotion_1.useRemotionEnvironment)();
     const { durationInFrames: videoDuration } = (0, remotion_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    const refForOutline = react_1.default.useRef(null);
     const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
     const memoizedEffects = useMemoizedEffects({
         effects,
@@ -43,11 +48,12 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
         loopBehavior,
         id,
         delayRenderTimeoutInMilliseconds,
+        requestInit,
         style,
         effects: memoizedEffects,
     };
-    const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref }));
-    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: inner }));
+    const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref, refForOutline: refForOutline }));
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<Gif>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/gif/gif", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalRefForOutline: refForOutline, children: inner }));
 };
 exports.Gif = wrapInSchema(GifInner, gifSchema);
 exports.Gif.displayName = 'Gif';

package/dist/cjs/GifForDevelopment.d.ts

@@ -1,5 +1,7 @@
+import { type RefObject } from 'react';
 import type { EffectDefinitionAndStack } from 'remotion';
 import type { RemotionGifProps } from './props';
 export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & {
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly refForOutline: RefObject<HTMLElement | null>;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/GifForDevelopment.js

@@ -8,13 +8,17 @@ 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 request_init_1 = require("./request-init");
 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', playbackRate = 1, onLoad, fit = 'fill', effects, ...props }, ref) => {
+exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, refForOutline, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
+    const requestInitRef = (0, react_1.useRef)(requestInit);
+    requestInitRef.current = requestInit;
+    const cacheKey = (0, request_init_1.getGifCacheKey)({ resolvedSrc, requestInit });
     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);
+        const parsedGif = (_a = gif_cache_1.volatileGifCache.get(cacheKey)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(cacheKey);
         if (parsedGif === undefined) {
             return {
                 delays: [],
@@ -33,13 +37,17 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
     (0, react_1.useEffect)(() => {
         let done = false;
         let aborted = false;
-        const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+        const { prom, cancel } = (0, react_tools_1.parseWithWorker)({
+            src: resolvedSrc,
+            cacheKey,
+            requestInit: requestInitRef.current,
+        });
         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);
+            gif_cache_1.volatileGifCache.set(cacheKey, parsed);
             done = true;
         })
             .catch((err) => {
@@ -59,7 +67,7 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
                 cancel();
             }
         };
-    }, [resolvedSrc]);
+    }, [cacheKey, resolvedSrc]);
     if (error) {
         console.error(error.stack);
         if ((0, is_cors_error_1.isCorsError)(error)) {
@@ -75,5 +83,5 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
     if (index === -1) {
         return null;
     }
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, refForOutline: refForOutline, ...props, ref: ref }));
 });

package/dist/cjs/GifForRendering.js

@@ -8,13 +8,17 @@ 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 request_init_1 = require("./request-init");
 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', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, effects, ...props }, ref) => {
+exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, ...props }, ref) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
+    const requestInitRef = (0, react_1.useRef)(requestInit);
+    requestInitRef.current = requestInit;
+    const cacheKey = (0, request_init_1.getGifCacheKey)({ resolvedSrc, requestInit });
     const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
     const [state, update] = (0, react_1.useState)(() => {
-        const parsedGif = gif_cache_1.volatileGifCache.get(resolvedSrc);
+        const parsedGif = gif_cache_1.volatileGifCache.get(cacheKey);
         if (parsedGif === undefined) {
             return {
                 delays: [],
@@ -53,13 +57,17 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
         });
         remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Loading GIF with source', resolvedSrc);
         const time = Date.now();
-        (0, react_tools_1.parseGif)({ controller, src: resolvedSrc })
+        (0, react_tools_1.parseGif)({
+            controller,
+            src: resolvedSrc,
+            requestInit: requestInitRef.current,
+        })
             .then((parsed) => {
             var _a;
             remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Parsed GIF in', Date.now() - time, 'ms');
             (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
             update(parsed);
-            gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
+            gif_cache_1.volatileGifCache.set(cacheKey, parsed);
             done = true;
             continueRender(newHandle);
             continueRender(renderHandle);
@@ -88,6 +96,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
     }, [
         renderHandle,
         logLevel,
+        cacheKey,
         resolvedSrc,
         delayRender,
         continueRender,

package/dist/cjs/canvas.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import type { EffectDefinitionAndStack } from 'remotion';
 import type { GifFillMode } from './props';
 type Props = {
@@ -9,6 +10,7 @@ type Props = {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly refForOutline?: RefObject<HTMLElement | null>;
 };
 export declare const Canvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
 export {};

package/dist/cjs/canvas.js

@@ -65,7 +65,7 @@ const makeCanvas = () => {
     canvas.height = 0;
     return ctx;
 };
-exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects }, ref) => {
+exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects, refForOutline, }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const [tempCtx] = (0, react_1.useState)(() => {
         return makeCanvas();
@@ -88,6 +88,12 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
     (0, react_1.useImperativeHandle)(ref, () => {
         return canvasRef.current;
     }, []);
+    const canvasCallbackRef = (0, react_1.useCallback)((canvas) => {
+        canvasRef.current = canvas;
+        if (refForOutline) {
+            refForOutline.current = canvas;
+        }
+    }, [refForOutline]);
     (0, react_1.useEffect)(() => {
         if (!size) {
             return;
@@ -196,5 +202,5 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
         continueRender,
         cancelRender,
     ]);
-    return (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 }));
+    return (jsx_runtime_1.jsx("canvas", { ref: canvasCallbackRef, 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

@@ -1 +1,3 @@
-export declare const getGifDurationInSeconds: (src: string) => Promise<number>;
+export declare const getGifDurationInSeconds: (src: string, options?: {
+    requestInit?: RequestInit | undefined;
+} | undefined) => Promise<number>;

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

@@ -4,6 +4,7 @@ exports.getGifDurationInSeconds = void 0;
 const remotion_1 = require("remotion");
 const gif_cache_1 = require("./gif-cache");
 const react_tools_1 = require("./react-tools");
+const request_init_1 = require("./request-init");
 const resolve_gif_source_1 = require("./resolve-gif-source");
 const calcDuration = (parsed) => {
     return (parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000);
@@ -12,24 +13,33 @@ const calcDuration = (parsed) => {
  * @description Gets the duration in seconds of a GIF.
  * @see [Documentation](https://remotion.dev/docs/gif/get-gif-duration-in-seconds)
  */
-const getGifDurationInSeconds = async (src) => {
+const getGifDurationInSeconds = async (src, options) => {
     var _a;
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
-    const inCache = (_a = gif_cache_1.volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(resolvedSrc);
+    const cacheKey = (0, request_init_1.getGifCacheKey)({
+        resolvedSrc,
+        requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
+    });
+    const inCache = (_a = gif_cache_1.volatileGifCache.get(cacheKey)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(cacheKey);
     if (inCache) {
         return calcDuration(inCache);
     }
     if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
-        const renderingParsed = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+        const renderingParsed = (0, react_tools_1.parseWithWorker)({
+            src: resolvedSrc,
+            cacheKey,
+            requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
+        });
         const resolved = await renderingParsed.prom;
-        gif_cache_1.volatileGifCache.set(resolvedSrc, resolved);
+        gif_cache_1.volatileGifCache.set(cacheKey, resolved);
         return calcDuration(resolved);
     }
     const parsed = await (0, react_tools_1.parseGif)({
         src: resolvedSrc,
         controller: new AbortController(),
+        requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
     });
-    gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
+    gif_cache_1.volatileGifCache.set(cacheKey, parsed);
     return calcDuration(parsed);
 };
 exports.getGifDurationInSeconds = getGifDurationInSeconds;

package/dist/cjs/parse-generate.d.ts

@@ -1,6 +1,7 @@
 import type { GifState } from './props';
-export declare const parse: (src: string, { signal, }: {
+export declare const parse: (src: string, { signal, requestInit, }: {
     signal: AbortSignal;
+    requestInit?: RequestInit | undefined;
 }) => Promise<{
     width: number;
     height: number;

package/dist/cjs/parse-generate.js

@@ -44,7 +44,7 @@ const putPixels = (typedArray, frame, gifSize) => {
         }
     }
 };
-const parse = (src, { signal, }) => fetch(src, { signal })
+const parse = (src, { signal, requestInit, }) => fetch(src, { ...requestInit, signal })
     .then((resp) => {
     var _a;
     if (!((_a = resp.headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.includes('image/gif')))

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

@@ -2,7 +2,9 @@
  * @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) => {
+export declare const preloadGif: (src: string, options?: {
+    requestInit?: RequestInit | undefined;
+} | undefined) => {
     waitUntilDone: () => Promise<void>;
     free: () => void;
 };

package/dist/cjs/preload-gif.js

@@ -3,30 +3,39 @@ 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 request_init_1 = require("./request-init");
 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 preloadGif = (src, options) => {
     const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
-    if (gif_cache_1.volatileGifCache.has(resolvedSrc)) {
+    const cacheKey = (0, request_init_1.getGifCacheKey)({
+        resolvedSrc,
+        requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
+    });
+    if (gif_cache_1.volatileGifCache.has(cacheKey)) {
         return {
             waitUntilDone: () => Promise.resolve(),
-            free: () => gif_cache_1.volatileGifCache.delete(resolvedSrc),
+            free: () => gif_cache_1.volatileGifCache.delete(cacheKey),
         };
     }
-    if (gif_cache_1.manuallyManagedGifCache.has(resolvedSrc)) {
+    if (gif_cache_1.manuallyManagedGifCache.has(cacheKey)) {
         return {
             waitUntilDone: () => Promise.resolve(),
-            free: () => gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc),
+            free: () => gif_cache_1.manuallyManagedGifCache.delete(cacheKey),
         };
     }
-    const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
+    const { prom, cancel } = (0, react_tools_1.parseWithWorker)({
+        src: resolvedSrc,
+        cacheKey,
+        requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
+    });
     let deleted = false;
     prom.then((p) => {
         if (!deleted) {
-            gif_cache_1.manuallyManagedGifCache.set(resolvedSrc, p);
+            gif_cache_1.manuallyManagedGifCache.set(cacheKey, p);
         }
     });
     return {
@@ -34,7 +43,7 @@ const preloadGif = (src) => {
         free: () => {
             cancel();
             deleted = true;
-            gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc);
+            gif_cache_1.manuallyManagedGifCache.delete(cacheKey);
         },
     };
 };

package/dist/cjs/props.d.ts

@@ -16,6 +16,7 @@ export type RemotionGifProps = {
     loopBehavior?: GifLoopBehavior;
     id?: string;
     delayRenderTimeoutInMilliseconds?: number;
+    requestInit?: RequestInit;
 };
 export type GifState = {
     delays: number[];

package/dist/cjs/react-tools.d.ts

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

package/dist/cjs/react-tools.js

@@ -2,19 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseWithWorker = exports.parseGif = void 0;
 const parse_generate_1 = require("./parse-generate");
+const request_init_1 = require("./request-init");
 const worker_1 = require("./worker");
-const parseGif = async ({ src, controller, }) => {
-    const raw = await (0, parse_generate_1.parse)(src, { signal: controller.signal });
+const parseGif = async ({ src, controller, requestInit, }) => {
+    const raw = await (0, parse_generate_1.parse)(src, { signal: controller.signal, requestInit });
     return (0, parse_generate_1.generate)(raw);
 };
 exports.parseGif = parseGif;
-const parseWithWorker = (src) => {
+const parseWithWorker = ({ src, cacheKey, requestInit, }) => {
     const worker = (0, worker_1.makeWorker)();
+    const workerRequestInit = (0, request_init_1.normalizeRequestInit)(requestInit);
     let handler = null;
     const prom = new Promise((resolve, reject) => {
         handler = (e) => {
             const message = e.data || e;
-            if (message.src === src) {
+            if (message.cacheKey === cacheKey) {
                 if (message.error) {
                     reject(new Error(message.error));
                 }
@@ -26,12 +28,17 @@ const parseWithWorker = (src) => {
             }
         };
         worker.addEventListener('message', handler);
-        worker.postMessage({ src, type: 'parse' });
+        worker.postMessage({
+            src,
+            cacheKey,
+            requestInit: workerRequestInit,
+            type: 'parse',
+        });
     });
     return {
         prom,
         cancel: () => {
-            worker.postMessage({ src, type: 'cancel' });
+            worker.postMessage({ cacheKey, type: 'cancel' });
             worker.removeEventListener('message', handler);
             worker.terminate();
         },

package/dist/cjs/request-init.d.ts

@@ -0,0 +1,6 @@
+export declare const normalizeRequestInit: (requestInit: RequestInit | undefined) => RequestInit | undefined;
+export declare const serializeRequestInit: (requestInit: RequestInit | undefined) => string | null;
+export declare const getGifCacheKey: ({ resolvedSrc, requestInit, }: {
+    resolvedSrc: string;
+    requestInit: RequestInit | undefined;
+}) => string;

package/dist/cjs/request-init.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGifCacheKey = exports.serializeRequestInit = exports.normalizeRequestInit = void 0;
+const normalizeRequestInit = (requestInit) => {
+    if (!requestInit) {
+        return undefined;
+    }
+    const requestInitWithoutSignal = { ...requestInit };
+    delete requestInitWithoutSignal.signal;
+    const { headers, ...rest } = requestInitWithoutSignal;
+    return {
+        ...rest,
+        headers: headers ? Array.from(new Headers(headers).entries()) : undefined,
+    };
+};
+exports.normalizeRequestInit = normalizeRequestInit;
+const serializeRequestInit = (requestInit) => {
+    const normalizedRequestInit = (0, exports.normalizeRequestInit)(requestInit);
+    if (!normalizedRequestInit) {
+        return null;
+    }
+    const { headers, ...rest } = normalizedRequestInit;
+    return JSON.stringify({
+        ...rest,
+        headers: headers !== null && headers !== void 0 ? headers : null,
+    });
+};
+exports.serializeRequestInit = serializeRequestInit;
+const getGifCacheKey = ({ resolvedSrc, requestInit, }) => {
+    const requestInitKey = (0, exports.serializeRequestInit)(requestInit);
+    return requestInitKey === null
+        ? resolvedSrc
+        : `${resolvedSrc}-${requestInitKey}`;
+};
+exports.getGifCacheKey = getGifCacheKey;

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

@@ -1 +1 @@
-export declare const src = "\"use strict\";(()=>{var P=(t,r,e={},n=e)=>{if(Array.isArray(r))r.forEach(o=>P(t,o,e,n));else if(typeof r==\"function\")r(t,e,n,P);else{let o=Object.keys(r)[0];Array.isArray(r[o])?(n[o]={},P(t,r[o],e,n[o])):n[o]=r[o](t,e,n,P)}return e},M=(t,r)=>function(e,n,o,c){let i=[],a=e.pos;for(;r(e,n,o);){let s={};if(c(e,t,n,s),e.pos===a)break;a=e.pos,i.push(s)}return i},g=(t,r)=>(e,n,o,c)=>{r(e,n,o)&&c(e,t,n,o)};var W=t=>({data:t,pos:0}),m=()=>t=>t.data[t.pos++],U=(t=0)=>r=>r.data[r.pos+t],f=t=>r=>r.data.subarray(r.pos,r.pos+=t),k=t=>r=>r.data.subarray(r.pos,r.pos+t),v=t=>r=>Array.from(f(t)(r)).map(e=>String.fromCharCode(e)).join(\"\"),b=t=>r=>{let e=f(2)(r);return t?(e[1]<<8)+e[0]:(e[0]<<8)+e[1]},E=(t,r)=>(e,n,o)=>{let c=typeof r==\"function\"?r(e,n,o):r,i=f(t),a=new Array(c);for(let s=0;s<c;s++)a[s]=i(e);return a},$=(t,r,e)=>{let n=0;for(let o=0;o<e;o++)n+=Number(t[r+o]&&2**(e-o-1));return n},I=t=>r=>{let e=m()(r),n=new Array(8);for(let o=0;o<8;o++)n[7-o]=!!(e&1<<o);return Object.keys(t).reduce((o,c)=>{let i=t[c];return i.length?o[c]=$(n,i.index,i.length):o[c]=n[i.index],o},{})};var z={blocks:t=>{let e=[],n=t.data.length,o=0;for(let a=m()(t);a!==0&&a;a=m()(t)){if(t.pos+a>=n){let s=n-t.pos;e.push(f(s)(t)),o+=s;break}e.push(f(a)(t)),o+=a}let c=new Uint8Array(o),i=0;for(let a=0;a<e.length;a++)c.set(e[a],i),i+=e[a].length;return c}},q=g({gce:[{codes:f(2)},{byteSize:m()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:m()},{terminator:m()}]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===249}),H=g({image:[{code:m()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(t,r,e)=>2**(e.descriptor.lct.size+1))},(t,r,e)=>e.descriptor.lct.exists),{data:[{minCodeSize:m()},z]}]},t=>U()(t)===44),J=g({text:[{codes:f(2)},{blockSize:m()},{preData:(t,r,e)=>f(e.text.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:m()},{id:(t,r,e)=>v(e.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===255}),V=g({comment:[{codes:f(2)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:m()},{pixelAspectRatio:m()}]},g({gct:E(3,(t,r)=>2**(r.lsd.gct.size+1))},(t,r)=>r.lsd.gct.exists),{frames:M([q,Q,V,H,J],t=>{let r=U()(t);return r===33||r===44})}];var X=(t,r)=>{let e=new Array(t.length),n=t.length/r,o=function(s,d){let u=t.slice(d*r,(d+1)*r);e.splice(...[s*r,r].concat(u))},c=[0,4,2,1],i=[8,8,4,2],a=0;for(let s=0;s<4;s++)for(let d=c[s];d<n;d+=i[s])o(d,a),a++;return e};var Z=(t,r,e)=>{let c=e,i,a,s,d,u;var w;let l,p;var C,y,h,_,G;let x=new Array(e),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=t,S=1<<R,O=S+1;for(i=S+2,u=-1,s=R+1,a=(1<<s)-1,l=0;l<S;l++)B[l]=0,T[l]=l;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,p=0;p<c;){if(h===0){if(w<s){C+=r[_]<<w,w+=8,_++;continue}if(l=C&a,C>>=s,w-=s,l>i||l===O)break;if(l===S){s=R+1,a=(1<<s)-1,i=S+2,u=-1;continue}if(u===-1){F[h++]=T[l],u=l,y=l;continue}for(d=l,l===i&&(F[h++]=y,l=u);l>S;)F[h++]=T[l],l=B[l];y=T[l]&255,F[h++]=y,i<4096&&(B[i]=u,T[i]=y,i++,(i&a)===0&&i<4096&&(s++,a+=i)),u=d}h--,x[G++]=F[h],p++}for(p=G;p<c;p++)x[p]=0;return x};var j=t=>{let r=new Uint8Array(t);return P(W(r),K)},D=(t,r)=>{var i,a,s;if(!t.image)return console.warn(\"gif frame does not have associated image.\"),null;let{image:e}=t,n=e.descriptor.width*e.descriptor.height,o=Z(e.data.minCodeSize,e.data.blocks,n);return(i=e.descriptor.lct)!=null&&i.interlaced&&(o=X(o,e.descriptor.width)),{pixels:o,dims:{top:t.image.descriptor.top,left:t.image.descriptor.left,width:t.image.descriptor.width,height:t.image.descriptor.height},colorTable:(a=e.descriptor.lct)!=null&&a.exists?e.lct:r,delay:(((s=t.gce)==null?void 0:s.delay)||10)*10,disposalType:t.gce?t.gce.extras.disposal:1,transparentIndex:t.gce&&t.gce.extras.transparentColorGiven?t.gce.transparentColorIndex:-1}};var L=t=>t.frames.filter(r=>\"image\"in r).map(r=>D(r,t.gct)).filter(Boolean).map(r=>r);var Y=t=>{let r=null;for(let e of t.frames)r=e.gce?e.gce:r,\"image\"in e&&!(\"gce\"in e)&&r!==null&&(e.gce=r)},ee=({typedArray:t,dx:r,dy:e,width:n,height:o,gifWidth:c})=>{let i=e*c+r;for(let a=0;a<o;a++)for(let s=0;s<n;s++){let d=i+a*c+s;t[d*4]=0,t[d*4+1]=0,t[d*4+2]=0,t[d*4+3]=0}},te=(t,r,e)=>{let{width:n,height:o,top:c,left:i}=r.dims,a=c*e.width+i;for(let s=0;s<o;s++)for(let d=0;d<n;d++){let u=s*n+d,l=r.pixels[u];if(l!==r.transparentIndex){let p=a+s*e.width+d,x=r.colorTable[l];t[p*4]=x[0],t[p*4+1]=x[1],t[p*4+2]=x[2],t[p*4+3]=l===r.transparentIndex?0:255}}},N=(t,{signal:r})=>fetch(t,{signal:r}).then(e=>{var n;if(!((n=e.headers.get(\"Content-Type\"))!=null&&n.includes(\"image/gif\")))throw Error(`Wrong content type: \"${e.headers.get(\"Content-Type\")}\"`);return e.arrayBuffer()}).then(e=>j(e)).then(e=>(Y(e),e)).then(e=>Promise.all([L(e),{width:e.lsd.width,height:e.lsd.height}])).then(([e,n])=>{let o=[],c=n.width*n.height*4,i=new Uint8ClampedArray(c);for(let a=0;a<e.length;++a){let s=e[a],d=e[a].disposalType===3?i.slice():null;if(te(i,s,n),o.push(i.slice()),e[a].disposalType===2)ee({typedArray:i,dx:s.dims.left,dy:s.dims.top,width:s.dims.width,height:s.dims.height,gifWidth:n.width});else if(e[a].disposalType===3){if(!d)throw Error(\"Disposal type 3 without previous frame\");i=d}else i=o[a].slice()}return{...n,loaded:!0,delays:e.map(a=>a.delay),frames:o}});var A=new Map;self.addEventListener(\"message\",t=>{let{type:r,src:e}=t.data||t;switch(r){case\"parse\":{if(!A.has(e)){let n=new AbortController,o={signal:n.signal};A.set(e,n),N(e,o).then(c=>{self.postMessage(Object.assign(c,{src:e}),c.frames.map(i=>i.buffer))}).catch(c=>{self.postMessage({src:e,error:c,loaded:!0})}).finally(()=>{A.delete(e)})}break}case\"cancel\":{A.has(e)&&(A.get(e).abort(),A.delete(e));break}default:break}});})();\n";
+export declare const src = "\"use strict\";(()=>{var P=(e,t,r={},o=r)=>{if(Array.isArray(t))t.forEach(n=>P(e,n,r,o));else if(typeof t==\"function\")t(e,r,o,P);else{let n=Object.keys(t)[0];Array.isArray(t[n])?(o[n]={},P(e,t[n],r,o[n])):o[n]=t[n](e,r,o,P)}return r},M=(e,t)=>function(r,o,n,c){let i=[],s=r.pos;for(;t(r,o,n);){let a={};if(c(r,e,o,a),r.pos===s)break;s=r.pos,i.push(a)}return i},g=(e,t)=>(r,o,n,c)=>{t(r,o,n)&&c(r,e,o,n)};var W=e=>({data:e,pos:0}),p=()=>e=>e.data[e.pos++],U=(e=0)=>t=>t.data[t.pos+e],f=e=>t=>t.data.subarray(t.pos,t.pos+=e),k=e=>t=>t.data.subarray(t.pos,t.pos+e),v=e=>t=>Array.from(f(e)(t)).map(r=>String.fromCharCode(r)).join(\"\"),b=e=>t=>{let r=f(2)(t);return e?(r[1]<<8)+r[0]:(r[0]<<8)+r[1]},E=(e,t)=>(r,o,n)=>{let c=typeof t==\"function\"?t(r,o,n):t,i=f(e),s=new Array(c);for(let a=0;a<c;a++)s[a]=i(r);return s},O=(e,t,r)=>{let o=0;for(let n=0;n<r;n++)o+=Number(e[t+n]&&2**(r-n-1));return o},I=e=>t=>{let r=p()(t),o=new Array(8);for(let n=0;n<8;n++)o[7-n]=!!(r&1<<n);return Object.keys(e).reduce((n,c)=>{let i=e[c];return i.length?n[c]=O(o,i.index,i.length):n[c]=o[i.index],n},{})};var z={blocks:e=>{let r=[],o=e.data.length,n=0;for(let s=p()(e);s!==0&&s;s=p()(e)){if(e.pos+s>=o){let a=o-e.pos;r.push(f(a)(e)),n+=a;break}r.push(f(s)(e)),n+=s}let c=new Uint8Array(n),i=0;for(let s=0;s<r.length;s++)c.set(r[s],i),i+=r[s].length;return c}},$=g({gce:[{codes:f(2)},{byteSize:p()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:p()},{terminator:p()}]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===249}),H=g({image:[{code:p()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(e,t,r)=>2**(r.descriptor.lct.size+1))},(e,t,r)=>r.descriptor.lct.exists),{data:[{minCodeSize:p()},z]}]},e=>U()(e)===44),J=g({text:[{codes:f(2)},{blockSize:p()},{preData:(e,t,r)=>f(r.text.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:p()},{id:(e,t,r)=>v(r.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===255}),V=g({comment:[{codes:f(2)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:p()},{pixelAspectRatio:p()}]},g({gct:E(3,(e,t)=>2**(t.lsd.gct.size+1))},(e,t)=>t.lsd.gct.exists),{frames:M([$,Q,V,H,J],e=>{let t=U()(e);return t===33||t===44})}];var X=(e,t)=>{let r=new Array(e.length),o=e.length/t,n=function(a,l){let m=e.slice(l*t,(l+1)*t);r.splice(...[a*t,t].concat(m))},c=[0,4,2,1],i=[8,8,4,2],s=0;for(let a=0;a<4;a++)for(let l=c[a];l<o;l+=i[a])n(l,s),s++;return r};var Z=(e,t,r)=>{let c=r,i,s,a,l,m;var w;let d,u;var C,y,h,_,G;let x=new Array(r),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=e,S=1<<R,N=S+1;for(i=S+2,m=-1,a=R+1,s=(1<<a)-1,d=0;d<S;d++)B[d]=0,T[d]=d;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,u=0;u<c;){if(h===0){if(w<a){C+=t[_]<<w,w+=8,_++;continue}if(d=C&s,C>>=a,w-=a,d>i||d===N)break;if(d===S){a=R+1,s=(1<<a)-1,i=S+2,m=-1;continue}if(m===-1){F[h++]=T[d],m=d,y=d;continue}for(l=d,d===i&&(F[h++]=y,d=m);d>S;)F[h++]=T[d],d=B[d];y=T[d]&255,F[h++]=y,i<4096&&(B[i]=m,T[i]=y,i++,(i&s)===0&&i<4096&&(a++,s+=i)),m=l}h--,x[G++]=F[h],u++}for(u=G;u<c;u++)x[u]=0;return x};var j=e=>{let t=new Uint8Array(e);return P(W(t),K)},D=(e,t)=>{var i,s,a;if(!e.image)return console.warn(\"gif frame does not have associated image.\"),null;let{image:r}=e,o=r.descriptor.width*r.descriptor.height,n=Z(r.data.minCodeSize,r.data.blocks,o);return(i=r.descriptor.lct)!=null&&i.interlaced&&(n=X(n,r.descriptor.width)),{pixels:n,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height},colorTable:(s=r.descriptor.lct)!=null&&s.exists?r.lct:t,delay:(((a=e.gce)==null?void 0:a.delay)||10)*10,disposalType:e.gce?e.gce.extras.disposal:1,transparentIndex:e.gce&&e.gce.extras.transparentColorGiven?e.gce.transparentColorIndex:-1}};var q=e=>e.frames.filter(t=>\"image\"in t).map(t=>D(t,e.gct)).filter(Boolean).map(t=>t);var Y=e=>{let t=null;for(let r of e.frames)t=r.gce?r.gce:t,\"image\"in r&&!(\"gce\"in r)&&t!==null&&(r.gce=t)},ee=({typedArray:e,dx:t,dy:r,width:o,height:n,gifWidth:c})=>{let i=r*c+t;for(let s=0;s<n;s++)for(let a=0;a<o;a++){let l=i+s*c+a;e[l*4]=0,e[l*4+1]=0,e[l*4+2]=0,e[l*4+3]=0}},te=(e,t,r)=>{let{width:o,height:n,top:c,left:i}=t.dims,s=c*r.width+i;for(let a=0;a<n;a++)for(let l=0;l<o;l++){let m=a*o+l,d=t.pixels[m];if(d!==t.transparentIndex){let u=s+a*r.width+l,x=t.colorTable[d];e[u*4]=x[0],e[u*4+1]=x[1],e[u*4+2]=x[2],e[u*4+3]=d===t.transparentIndex?0:255}}},L=(e,{signal:t,requestInit:r})=>fetch(e,{...r,signal:t}).then(o=>{var n;if(!((n=o.headers.get(\"Content-Type\"))!=null&&n.includes(\"image/gif\")))throw Error(`Wrong content type: \"${o.headers.get(\"Content-Type\")}\"`);return o.arrayBuffer()}).then(o=>j(o)).then(o=>(Y(o),o)).then(o=>Promise.all([q(o),{width:o.lsd.width,height:o.lsd.height}])).then(([o,n])=>{let c=[],i=n.width*n.height*4,s=new Uint8ClampedArray(i);for(let a=0;a<o.length;++a){let l=o[a],m=o[a].disposalType===3?s.slice():null;if(te(s,l,n),c.push(s.slice()),o[a].disposalType===2)ee({typedArray:s,dx:l.dims.left,dy:l.dims.top,width:l.dims.width,height:l.dims.height,gifWidth:n.width});else if(o[a].disposalType===3){if(!m)throw Error(\"Disposal type 3 without previous frame\");s=m}else s=c[a].slice()}return{...n,loaded:!0,delays:o.map(a=>a.delay),frames:c}});var A=new Map;self.addEventListener(\"message\",e=>{let{type:t,src:r,cacheKey:o,requestInit:n}=e.data||e;switch(t){case\"parse\":{if(!A.has(o)){let c=new AbortController,i={signal:c.signal,requestInit:n};A.set(o,c),L(r,i).then(s=>{self.postMessage(Object.assign(s,{src:r,cacheKey:o}),s.frames.map(a=>a.buffer))}).catch(s=>{self.postMessage({src:r,cacheKey:o,error:s,loaded:!0})}).finally(()=>{A.delete(o)})}break}case\"cancel\":{A.has(o)&&(A.get(o).abort(),A.delete(o));break}default:break}});})();\n";

package/dist/cjs/worker/source.js

@@ -4,4 +4,4 @@ exports.src = void 0;
 // Auto-generated by build.mjs
 exports.src = 
 // eslint-disable-next-line no-template-curly-in-string
-"\"use strict\";(()=>{var P=(t,r,e={},n=e)=>{if(Array.isArray(r))r.forEach(o=>P(t,o,e,n));else if(typeof r==\"function\")r(t,e,n,P);else{let o=Object.keys(r)[0];Array.isArray(r[o])?(n[o]={},P(t,r[o],e,n[o])):n[o]=r[o](t,e,n,P)}return e},M=(t,r)=>function(e,n,o,c){let i=[],a=e.pos;for(;r(e,n,o);){let s={};if(c(e,t,n,s),e.pos===a)break;a=e.pos,i.push(s)}return i},g=(t,r)=>(e,n,o,c)=>{r(e,n,o)&&c(e,t,n,o)};var W=t=>({data:t,pos:0}),m=()=>t=>t.data[t.pos++],U=(t=0)=>r=>r.data[r.pos+t],f=t=>r=>r.data.subarray(r.pos,r.pos+=t),k=t=>r=>r.data.subarray(r.pos,r.pos+t),v=t=>r=>Array.from(f(t)(r)).map(e=>String.fromCharCode(e)).join(\"\"),b=t=>r=>{let e=f(2)(r);return t?(e[1]<<8)+e[0]:(e[0]<<8)+e[1]},E=(t,r)=>(e,n,o)=>{let c=typeof r==\"function\"?r(e,n,o):r,i=f(t),a=new Array(c);for(let s=0;s<c;s++)a[s]=i(e);return a},$=(t,r,e)=>{let n=0;for(let o=0;o<e;o++)n+=Number(t[r+o]&&2**(e-o-1));return n},I=t=>r=>{let e=m()(r),n=new Array(8);for(let o=0;o<8;o++)n[7-o]=!!(e&1<<o);return Object.keys(t).reduce((o,c)=>{let i=t[c];return i.length?o[c]=$(n,i.index,i.length):o[c]=n[i.index],o},{})};var z={blocks:t=>{let e=[],n=t.data.length,o=0;for(let a=m()(t);a!==0&&a;a=m()(t)){if(t.pos+a>=n){let s=n-t.pos;e.push(f(s)(t)),o+=s;break}e.push(f(a)(t)),o+=a}let c=new Uint8Array(o),i=0;for(let a=0;a<e.length;a++)c.set(e[a],i),i+=e[a].length;return c}},q=g({gce:[{codes:f(2)},{byteSize:m()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:m()},{terminator:m()}]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===249}),H=g({image:[{code:m()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(t,r,e)=>2**(e.descriptor.lct.size+1))},(t,r,e)=>e.descriptor.lct.exists),{data:[{minCodeSize:m()},z]}]},t=>U()(t)===44),J=g({text:[{codes:f(2)},{blockSize:m()},{preData:(t,r,e)=>f(e.text.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:m()},{id:(t,r,e)=>v(e.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===255}),V=g({comment:[{codes:f(2)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:m()},{pixelAspectRatio:m()}]},g({gct:E(3,(t,r)=>2**(r.lsd.gct.size+1))},(t,r)=>r.lsd.gct.exists),{frames:M([q,Q,V,H,J],t=>{let r=U()(t);return r===33||r===44})}];var X=(t,r)=>{let e=new Array(t.length),n=t.length/r,o=function(s,d){let u=t.slice(d*r,(d+1)*r);e.splice(...[s*r,r].concat(u))},c=[0,4,2,1],i=[8,8,4,2],a=0;for(let s=0;s<4;s++)for(let d=c[s];d<n;d+=i[s])o(d,a),a++;return e};var Z=(t,r,e)=>{let c=e,i,a,s,d,u;var w;let l,p;var C,y,h,_,G;let x=new Array(e),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=t,S=1<<R,O=S+1;for(i=S+2,u=-1,s=R+1,a=(1<<s)-1,l=0;l<S;l++)B[l]=0,T[l]=l;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,p=0;p<c;){if(h===0){if(w<s){C+=r[_]<<w,w+=8,_++;continue}if(l=C&a,C>>=s,w-=s,l>i||l===O)break;if(l===S){s=R+1,a=(1<<s)-1,i=S+2,u=-1;continue}if(u===-1){F[h++]=T[l],u=l,y=l;continue}for(d=l,l===i&&(F[h++]=y,l=u);l>S;)F[h++]=T[l],l=B[l];y=T[l]&255,F[h++]=y,i<4096&&(B[i]=u,T[i]=y,i++,(i&a)===0&&i<4096&&(s++,a+=i)),u=d}h--,x[G++]=F[h],p++}for(p=G;p<c;p++)x[p]=0;return x};var j=t=>{let r=new Uint8Array(t);return P(W(r),K)},D=(t,r)=>{var i,a,s;if(!t.image)return console.warn(\"gif frame does not have associated image.\"),null;let{image:e}=t,n=e.descriptor.width*e.descriptor.height,o=Z(e.data.minCodeSize,e.data.blocks,n);return(i=e.descriptor.lct)!=null&&i.interlaced&&(o=X(o,e.descriptor.width)),{pixels:o,dims:{top:t.image.descriptor.top,left:t.image.descriptor.left,width:t.image.descriptor.width,height:t.image.descriptor.height},colorTable:(a=e.descriptor.lct)!=null&&a.exists?e.lct:r,delay:(((s=t.gce)==null?void 0:s.delay)||10)*10,disposalType:t.gce?t.gce.extras.disposal:1,transparentIndex:t.gce&&t.gce.extras.transparentColorGiven?t.gce.transparentColorIndex:-1}};var L=t=>t.frames.filter(r=>\"image\"in r).map(r=>D(r,t.gct)).filter(Boolean).map(r=>r);var Y=t=>{let r=null;for(let e of t.frames)r=e.gce?e.gce:r,\"image\"in e&&!(\"gce\"in e)&&r!==null&&(e.gce=r)},ee=({typedArray:t,dx:r,dy:e,width:n,height:o,gifWidth:c})=>{let i=e*c+r;for(let a=0;a<o;a++)for(let s=0;s<n;s++){let d=i+a*c+s;t[d*4]=0,t[d*4+1]=0,t[d*4+2]=0,t[d*4+3]=0}},te=(t,r,e)=>{let{width:n,height:o,top:c,left:i}=r.dims,a=c*e.width+i;for(let s=0;s<o;s++)for(let d=0;d<n;d++){let u=s*n+d,l=r.pixels[u];if(l!==r.transparentIndex){let p=a+s*e.width+d,x=r.colorTable[l];t[p*4]=x[0],t[p*4+1]=x[1],t[p*4+2]=x[2],t[p*4+3]=l===r.transparentIndex?0:255}}},N=(t,{signal:r})=>fetch(t,{signal:r}).then(e=>{var n;if(!((n=e.headers.get(\"Content-Type\"))!=null&&n.includes(\"image/gif\")))throw Error(`Wrong content type: \"${e.headers.get(\"Content-Type\")}\"`);return e.arrayBuffer()}).then(e=>j(e)).then(e=>(Y(e),e)).then(e=>Promise.all([L(e),{width:e.lsd.width,height:e.lsd.height}])).then(([e,n])=>{let o=[],c=n.width*n.height*4,i=new Uint8ClampedArray(c);for(let a=0;a<e.length;++a){let s=e[a],d=e[a].disposalType===3?i.slice():null;if(te(i,s,n),o.push(i.slice()),e[a].disposalType===2)ee({typedArray:i,dx:s.dims.left,dy:s.dims.top,width:s.dims.width,height:s.dims.height,gifWidth:n.width});else if(e[a].disposalType===3){if(!d)throw Error(\"Disposal type 3 without previous frame\");i=d}else i=o[a].slice()}return{...n,loaded:!0,delays:e.map(a=>a.delay),frames:o}});var A=new Map;self.addEventListener(\"message\",t=>{let{type:r,src:e}=t.data||t;switch(r){case\"parse\":{if(!A.has(e)){let n=new AbortController,o={signal:n.signal};A.set(e,n),N(e,o).then(c=>{self.postMessage(Object.assign(c,{src:e}),c.frames.map(i=>i.buffer))}).catch(c=>{self.postMessage({src:e,error:c,loaded:!0})}).finally(()=>{A.delete(e)})}break}case\"cancel\":{A.has(e)&&(A.get(e).abort(),A.delete(e));break}default:break}});})();\n";
+"\"use strict\";(()=>{var P=(e,t,r={},o=r)=>{if(Array.isArray(t))t.forEach(n=>P(e,n,r,o));else if(typeof t==\"function\")t(e,r,o,P);else{let n=Object.keys(t)[0];Array.isArray(t[n])?(o[n]={},P(e,t[n],r,o[n])):o[n]=t[n](e,r,o,P)}return r},M=(e,t)=>function(r,o,n,c){let i=[],s=r.pos;for(;t(r,o,n);){let a={};if(c(r,e,o,a),r.pos===s)break;s=r.pos,i.push(a)}return i},g=(e,t)=>(r,o,n,c)=>{t(r,o,n)&&c(r,e,o,n)};var W=e=>({data:e,pos:0}),p=()=>e=>e.data[e.pos++],U=(e=0)=>t=>t.data[t.pos+e],f=e=>t=>t.data.subarray(t.pos,t.pos+=e),k=e=>t=>t.data.subarray(t.pos,t.pos+e),v=e=>t=>Array.from(f(e)(t)).map(r=>String.fromCharCode(r)).join(\"\"),b=e=>t=>{let r=f(2)(t);return e?(r[1]<<8)+r[0]:(r[0]<<8)+r[1]},E=(e,t)=>(r,o,n)=>{let c=typeof t==\"function\"?t(r,o,n):t,i=f(e),s=new Array(c);for(let a=0;a<c;a++)s[a]=i(r);return s},O=(e,t,r)=>{let o=0;for(let n=0;n<r;n++)o+=Number(e[t+n]&&2**(r-n-1));return o},I=e=>t=>{let r=p()(t),o=new Array(8);for(let n=0;n<8;n++)o[7-n]=!!(r&1<<n);return Object.keys(e).reduce((n,c)=>{let i=e[c];return i.length?n[c]=O(o,i.index,i.length):n[c]=o[i.index],n},{})};var z={blocks:e=>{let r=[],o=e.data.length,n=0;for(let s=p()(e);s!==0&&s;s=p()(e)){if(e.pos+s>=o){let a=o-e.pos;r.push(f(a)(e)),n+=a;break}r.push(f(s)(e)),n+=s}let c=new Uint8Array(n),i=0;for(let s=0;s<r.length;s++)c.set(r[s],i),i+=r[s].length;return c}},$=g({gce:[{codes:f(2)},{byteSize:p()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:p()},{terminator:p()}]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===249}),H=g({image:[{code:p()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(e,t,r)=>2**(r.descriptor.lct.size+1))},(e,t,r)=>r.descriptor.lct.exists),{data:[{minCodeSize:p()},z]}]},e=>U()(e)===44),J=g({text:[{codes:f(2)},{blockSize:p()},{preData:(e,t,r)=>f(r.text.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:p()},{id:(e,t,r)=>v(r.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===255}),V=g({comment:[{codes:f(2)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:p()},{pixelAspectRatio:p()}]},g({gct:E(3,(e,t)=>2**(t.lsd.gct.size+1))},(e,t)=>t.lsd.gct.exists),{frames:M([$,Q,V,H,J],e=>{let t=U()(e);return t===33||t===44})}];var X=(e,t)=>{let r=new Array(e.length),o=e.length/t,n=function(a,l){let m=e.slice(l*t,(l+1)*t);r.splice(...[a*t,t].concat(m))},c=[0,4,2,1],i=[8,8,4,2],s=0;for(let a=0;a<4;a++)for(let l=c[a];l<o;l+=i[a])n(l,s),s++;return r};var Z=(e,t,r)=>{let c=r,i,s,a,l,m;var w;let d,u;var C,y,h,_,G;let x=new Array(r),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=e,S=1<<R,N=S+1;for(i=S+2,m=-1,a=R+1,s=(1<<a)-1,d=0;d<S;d++)B[d]=0,T[d]=d;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,u=0;u<c;){if(h===0){if(w<a){C+=t[_]<<w,w+=8,_++;continue}if(d=C&s,C>>=a,w-=a,d>i||d===N)break;if(d===S){a=R+1,s=(1<<a)-1,i=S+2,m=-1;continue}if(m===-1){F[h++]=T[d],m=d,y=d;continue}for(l=d,d===i&&(F[h++]=y,d=m);d>S;)F[h++]=T[d],d=B[d];y=T[d]&255,F[h++]=y,i<4096&&(B[i]=m,T[i]=y,i++,(i&s)===0&&i<4096&&(a++,s+=i)),m=l}h--,x[G++]=F[h],u++}for(u=G;u<c;u++)x[u]=0;return x};var j=e=>{let t=new Uint8Array(e);return P(W(t),K)},D=(e,t)=>{var i,s,a;if(!e.image)return console.warn(\"gif frame does not have associated image.\"),null;let{image:r}=e,o=r.descriptor.width*r.descriptor.height,n=Z(r.data.minCodeSize,r.data.blocks,o);return(i=r.descriptor.lct)!=null&&i.interlaced&&(n=X(n,r.descriptor.width)),{pixels:n,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height},colorTable:(s=r.descriptor.lct)!=null&&s.exists?r.lct:t,delay:(((a=e.gce)==null?void 0:a.delay)||10)*10,disposalType:e.gce?e.gce.extras.disposal:1,transparentIndex:e.gce&&e.gce.extras.transparentColorGiven?e.gce.transparentColorIndex:-1}};var q=e=>e.frames.filter(t=>\"image\"in t).map(t=>D(t,e.gct)).filter(Boolean).map(t=>t);var Y=e=>{let t=null;for(let r of e.frames)t=r.gce?r.gce:t,\"image\"in r&&!(\"gce\"in r)&&t!==null&&(r.gce=t)},ee=({typedArray:e,dx:t,dy:r,width:o,height:n,gifWidth:c})=>{let i=r*c+t;for(let s=0;s<n;s++)for(let a=0;a<o;a++){let l=i+s*c+a;e[l*4]=0,e[l*4+1]=0,e[l*4+2]=0,e[l*4+3]=0}},te=(e,t,r)=>{let{width:o,height:n,top:c,left:i}=t.dims,s=c*r.width+i;for(let a=0;a<n;a++)for(let l=0;l<o;l++){let m=a*o+l,d=t.pixels[m];if(d!==t.transparentIndex){let u=s+a*r.width+l,x=t.colorTable[d];e[u*4]=x[0],e[u*4+1]=x[1],e[u*4+2]=x[2],e[u*4+3]=d===t.transparentIndex?0:255}}},L=(e,{signal:t,requestInit:r})=>fetch(e,{...r,signal:t}).then(o=>{var n;if(!((n=o.headers.get(\"Content-Type\"))!=null&&n.includes(\"image/gif\")))throw Error(`Wrong content type: \"${o.headers.get(\"Content-Type\")}\"`);return o.arrayBuffer()}).then(o=>j(o)).then(o=>(Y(o),o)).then(o=>Promise.all([q(o),{width:o.lsd.width,height:o.lsd.height}])).then(([o,n])=>{let c=[],i=n.width*n.height*4,s=new Uint8ClampedArray(i);for(let a=0;a<o.length;++a){let l=o[a],m=o[a].disposalType===3?s.slice():null;if(te(s,l,n),c.push(s.slice()),o[a].disposalType===2)ee({typedArray:s,dx:l.dims.left,dy:l.dims.top,width:l.dims.width,height:l.dims.height,gifWidth:n.width});else if(o[a].disposalType===3){if(!m)throw Error(\"Disposal type 3 without previous frame\");s=m}else s=c[a].slice()}return{...n,loaded:!0,delays:o.map(a=>a.delay),frames:c}});var A=new Map;self.addEventListener(\"message\",e=>{let{type:t,src:r,cacheKey:o,requestInit:n}=e.data||e;switch(t){case\"parse\":{if(!A.has(o)){let c=new AbortController,i={signal:c.signal,requestInit:n};A.set(o,c),L(r,i).then(s=>{self.postMessage(Object.assign(s,{src:r,cacheKey:o}),s.frames.map(a=>a.buffer))}).catch(s=>{self.postMessage({src:r,cacheKey:o,error:s,loaded:!0})}).finally(()=>{A.delete(o)})}break}case\"cancel\":{A.has(o)&&(A.get(o).abort(),A.delete(o));break}default:break}});})();\n";

package/dist/cjs/worker/worker.js

@@ -3,33 +3,33 @@ 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;
+    const { type, src, cacheKey, requestInit } = e.data || e;
     switch (type) {
         case 'parse': {
-            if (!abortMap.has(src)) {
+            if (!abortMap.has(cacheKey)) {
                 const controller = new AbortController();
-                const signal = { signal: controller.signal };
-                abortMap.set(src, controller);
+                const signal = { signal: controller.signal, requestInit };
+                abortMap.set(cacheKey, controller);
                 (0, parse_generate_1.parse)(src, signal)
                     .then((result) => {
-                    self.postMessage(Object.assign(result, { src }), 
+                    self.postMessage(Object.assign(result, { src, cacheKey }), 
                     // @ts-expect-error
                     result.frames.map((frame) => frame.buffer));
                 })
                     .catch((error) => {
-                    self.postMessage({ src, error, loaded: true });
+                    self.postMessage({ src, cacheKey, error, loaded: true });
                 })
                     .finally(() => {
-                    abortMap.delete(src);
+                    abortMap.delete(cacheKey);
                 });
             }
             break;
         }
         case 'cancel': {
-            if (abortMap.has(src)) {
-                const controller = abortMap.get(src);
+            if (abortMap.has(cacheKey)) {
+                const controller = abortMap.get(cacheKey);
                 controller.abort();
-                abortMap.delete(src);
+                abortMap.delete(cacheKey);
             }
             break;
         }

package/dist/esm/index.mjs

@@ -682,8 +682,9 @@ var putPixels = (typedArray, frame, gifSize) => {
   }
 };
 var parse2 = (src, {
-  signal
-}) => fetch(src, { signal }).then((resp) => {
+  signal,
+  requestInit
+}) => fetch(src, { ...requestInit, signal }).then((resp) => {
   if (!resp.headers.get("Content-Type")?.includes("image/gif"))
     throw Error(`Wrong content type: "${resp.headers.get("Content-Type")}"`);
   return resp.arrayBuffer();
@@ -738,8 +739,40 @@ var generate = (info) => {
   };
 };
 
+// src/request-init.ts
+var normalizeRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return;
+  }
+  const requestInitWithoutSignal = { ...requestInit };
+  delete requestInitWithoutSignal.signal;
+  const { headers, ...rest } = requestInitWithoutSignal;
+  return {
+    ...rest,
+    headers: headers ? Array.from(new Headers(headers).entries()) : undefined
+  };
+};
+var serializeRequestInit = (requestInit) => {
+  const normalizedRequestInit = normalizeRequestInit(requestInit);
+  if (!normalizedRequestInit) {
+    return null;
+  }
+  const { headers, ...rest } = normalizedRequestInit;
+  return JSON.stringify({
+    ...rest,
+    headers: headers ?? null
+  });
+};
+var getGifCacheKey = ({
+  resolvedSrc,
+  requestInit
+}) => {
+  const requestInitKey = serializeRequestInit(requestInit);
+  return requestInitKey === null ? resolvedSrc : `${resolvedSrc}-${requestInitKey}`;
+};
+
 // src/worker/source.ts
-var src = '"use strict";(()=>{var P=(t,r,e={},n=e)=>{if(Array.isArray(r))r.forEach(o=>P(t,o,e,n));else if(typeof r=="function")r(t,e,n,P);else{let o=Object.keys(r)[0];Array.isArray(r[o])?(n[o]={},P(t,r[o],e,n[o])):n[o]=r[o](t,e,n,P)}return e},M=(t,r)=>function(e,n,o,c){let i=[],a=e.pos;for(;r(e,n,o);){let s={};if(c(e,t,n,s),e.pos===a)break;a=e.pos,i.push(s)}return i},g=(t,r)=>(e,n,o,c)=>{r(e,n,o)&&c(e,t,n,o)};var W=t=>({data:t,pos:0}),m=()=>t=>t.data[t.pos++],U=(t=0)=>r=>r.data[r.pos+t],f=t=>r=>r.data.subarray(r.pos,r.pos+=t),k=t=>r=>r.data.subarray(r.pos,r.pos+t),v=t=>r=>Array.from(f(t)(r)).map(e=>String.fromCharCode(e)).join(""),b=t=>r=>{let e=f(2)(r);return t?(e[1]<<8)+e[0]:(e[0]<<8)+e[1]},E=(t,r)=>(e,n,o)=>{let c=typeof r=="function"?r(e,n,o):r,i=f(t),a=new Array(c);for(let s=0;s<c;s++)a[s]=i(e);return a},$=(t,r,e)=>{let n=0;for(let o=0;o<e;o++)n+=Number(t[r+o]&&2**(e-o-1));return n},I=t=>r=>{let e=m()(r),n=new Array(8);for(let o=0;o<8;o++)n[7-o]=!!(e&1<<o);return Object.keys(t).reduce((o,c)=>{let i=t[c];return i.length?o[c]=$(n,i.index,i.length):o[c]=n[i.index],o},{})};var z={blocks:t=>{let e=[],n=t.data.length,o=0;for(let a=m()(t);a!==0&&a;a=m()(t)){if(t.pos+a>=n){let s=n-t.pos;e.push(f(s)(t)),o+=s;break}e.push(f(a)(t)),o+=a}let c=new Uint8Array(o),i=0;for(let a=0;a<e.length;a++)c.set(e[a],i),i+=e[a].length;return c}},q=g({gce:[{codes:f(2)},{byteSize:m()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:m()},{terminator:m()}]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===249}),H=g({image:[{code:m()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(t,r,e)=>2**(e.descriptor.lct.size+1))},(t,r,e)=>e.descriptor.lct.exists),{data:[{minCodeSize:m()},z]}]},t=>U()(t)===44),J=g({text:[{codes:f(2)},{blockSize:m()},{preData:(t,r,e)=>f(e.text.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:m()},{id:(t,r,e)=>v(e.blockSize)(t)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===255}),V=g({comment:[{codes:f(2)},z]},t=>{let r=k(2)(t);return r[0]===33&&r[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:m()},{pixelAspectRatio:m()}]},g({gct:E(3,(t,r)=>2**(r.lsd.gct.size+1))},(t,r)=>r.lsd.gct.exists),{frames:M([q,Q,V,H,J],t=>{let r=U()(t);return r===33||r===44})}];var X=(t,r)=>{let e=new Array(t.length),n=t.length/r,o=function(s,d){let u=t.slice(d*r,(d+1)*r);e.splice(...[s*r,r].concat(u))},c=[0,4,2,1],i=[8,8,4,2],a=0;for(let s=0;s<4;s++)for(let d=c[s];d<n;d+=i[s])o(d,a),a++;return e};var Z=(t,r,e)=>{let c=e,i,a,s,d,u;var w;let l,p;var C,y,h,_,G;let x=new Array(e),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=t,S=1<<R,O=S+1;for(i=S+2,u=-1,s=R+1,a=(1<<s)-1,l=0;l<S;l++)B[l]=0,T[l]=l;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,p=0;p<c;){if(h===0){if(w<s){C+=r[_]<<w,w+=8,_++;continue}if(l=C&a,C>>=s,w-=s,l>i||l===O)break;if(l===S){s=R+1,a=(1<<s)-1,i=S+2,u=-1;continue}if(u===-1){F[h++]=T[l],u=l,y=l;continue}for(d=l,l===i&&(F[h++]=y,l=u);l>S;)F[h++]=T[l],l=B[l];y=T[l]&255,F[h++]=y,i<4096&&(B[i]=u,T[i]=y,i++,(i&a)===0&&i<4096&&(s++,a+=i)),u=d}h--,x[G++]=F[h],p++}for(p=G;p<c;p++)x[p]=0;return x};var j=t=>{let r=new Uint8Array(t);return P(W(r),K)},D=(t,r)=>{var i,a,s;if(!t.image)return console.warn("gif frame does not have associated image."),null;let{image:e}=t,n=e.descriptor.width*e.descriptor.height,o=Z(e.data.minCodeSize,e.data.blocks,n);return(i=e.descriptor.lct)!=null&&i.interlaced&&(o=X(o,e.descriptor.width)),{pixels:o,dims:{top:t.image.descriptor.top,left:t.image.descriptor.left,width:t.image.descriptor.width,height:t.image.descriptor.height},colorTable:(a=e.descriptor.lct)!=null&&a.exists?e.lct:r,delay:(((s=t.gce)==null?void 0:s.delay)||10)*10,disposalType:t.gce?t.gce.extras.disposal:1,transparentIndex:t.gce&&t.gce.extras.transparentColorGiven?t.gce.transparentColorIndex:-1}};var L=t=>t.frames.filter(r=>"image"in r).map(r=>D(r,t.gct)).filter(Boolean).map(r=>r);var Y=t=>{let r=null;for(let e of t.frames)r=e.gce?e.gce:r,"image"in e&&!("gce"in e)&&r!==null&&(e.gce=r)},ee=({typedArray:t,dx:r,dy:e,width:n,height:o,gifWidth:c})=>{let i=e*c+r;for(let a=0;a<o;a++)for(let s=0;s<n;s++){let d=i+a*c+s;t[d*4]=0,t[d*4+1]=0,t[d*4+2]=0,t[d*4+3]=0}},te=(t,r,e)=>{let{width:n,height:o,top:c,left:i}=r.dims,a=c*e.width+i;for(let s=0;s<o;s++)for(let d=0;d<n;d++){let u=s*n+d,l=r.pixels[u];if(l!==r.transparentIndex){let p=a+s*e.width+d,x=r.colorTable[l];t[p*4]=x[0],t[p*4+1]=x[1],t[p*4+2]=x[2],t[p*4+3]=l===r.transparentIndex?0:255}}},N=(t,{signal:r})=>fetch(t,{signal:r}).then(e=>{var n;if(!((n=e.headers.get("Content-Type"))!=null&&n.includes("image/gif")))throw Error(`Wrong content type: "${e.headers.get("Content-Type")}"`);return e.arrayBuffer()}).then(e=>j(e)).then(e=>(Y(e),e)).then(e=>Promise.all([L(e),{width:e.lsd.width,height:e.lsd.height}])).then(([e,n])=>{let o=[],c=n.width*n.height*4,i=new Uint8ClampedArray(c);for(let a=0;a<e.length;++a){let s=e[a],d=e[a].disposalType===3?i.slice():null;if(te(i,s,n),o.push(i.slice()),e[a].disposalType===2)ee({typedArray:i,dx:s.dims.left,dy:s.dims.top,width:s.dims.width,height:s.dims.height,gifWidth:n.width});else if(e[a].disposalType===3){if(!d)throw Error("Disposal type 3 without previous frame");i=d}else i=o[a].slice()}return{...n,loaded:!0,delays:e.map(a=>a.delay),frames:o}});var A=new Map;self.addEventListener("message",t=>{let{type:r,src:e}=t.data||t;switch(r){case"parse":{if(!A.has(e)){let n=new AbortController,o={signal:n.signal};A.set(e,n),N(e,o).then(c=>{self.postMessage(Object.assign(c,{src:e}),c.frames.map(i=>i.buffer))}).catch(c=>{self.postMessage({src:e,error:c,loaded:!0})}).finally(()=>{A.delete(e)})}break}case"cancel":{A.has(e)&&(A.get(e).abort(),A.delete(e));break}default:break}});})();\n';
+var src = '"use strict";(()=>{var P=(e,t,r={},o=r)=>{if(Array.isArray(t))t.forEach(n=>P(e,n,r,o));else if(typeof t=="function")t(e,r,o,P);else{let n=Object.keys(t)[0];Array.isArray(t[n])?(o[n]={},P(e,t[n],r,o[n])):o[n]=t[n](e,r,o,P)}return r},M=(e,t)=>function(r,o,n,c){let i=[],s=r.pos;for(;t(r,o,n);){let a={};if(c(r,e,o,a),r.pos===s)break;s=r.pos,i.push(a)}return i},g=(e,t)=>(r,o,n,c)=>{t(r,o,n)&&c(r,e,o,n)};var W=e=>({data:e,pos:0}),p=()=>e=>e.data[e.pos++],U=(e=0)=>t=>t.data[t.pos+e],f=e=>t=>t.data.subarray(t.pos,t.pos+=e),k=e=>t=>t.data.subarray(t.pos,t.pos+e),v=e=>t=>Array.from(f(e)(t)).map(r=>String.fromCharCode(r)).join(""),b=e=>t=>{let r=f(2)(t);return e?(r[1]<<8)+r[0]:(r[0]<<8)+r[1]},E=(e,t)=>(r,o,n)=>{let c=typeof t=="function"?t(r,o,n):t,i=f(e),s=new Array(c);for(let a=0;a<c;a++)s[a]=i(r);return s},O=(e,t,r)=>{let o=0;for(let n=0;n<r;n++)o+=Number(e[t+n]&&2**(r-n-1));return o},I=e=>t=>{let r=p()(t),o=new Array(8);for(let n=0;n<8;n++)o[7-n]=!!(r&1<<n);return Object.keys(e).reduce((n,c)=>{let i=e[c];return i.length?n[c]=O(o,i.index,i.length):n[c]=o[i.index],n},{})};var z={blocks:e=>{let r=[],o=e.data.length,n=0;for(let s=p()(e);s!==0&&s;s=p()(e)){if(e.pos+s>=o){let a=o-e.pos;r.push(f(a)(e)),n+=a;break}r.push(f(s)(e)),n+=s}let c=new Uint8Array(n),i=0;for(let s=0;s<r.length;s++)c.set(r[s],i),i+=r[s].length;return c}},$=g({gce:[{codes:f(2)},{byteSize:p()},{extras:I({future:{index:0,length:3},disposal:{index:3,length:3},userInput:{index:6},transparentColorGiven:{index:7}})},{delay:b(!0)},{transparentColorIndex:p()},{terminator:p()}]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===249}),H=g({image:[{code:p()},{descriptor:[{left:b(!0)},{top:b(!0)},{width:b(!0)},{height:b(!0)},{lct:I({exists:{index:0},interlaced:{index:1},sort:{index:2},future:{index:3,length:2},size:{index:5,length:3}})}]},g({lct:E(3,(e,t,r)=>2**(r.descriptor.lct.size+1))},(e,t,r)=>r.descriptor.lct.exists),{data:[{minCodeSize:p()},z]}]},e=>U()(e)===44),J=g({text:[{codes:f(2)},{blockSize:p()},{preData:(e,t,r)=>f(r.text.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===1}),Q=g({application:[{codes:f(2)},{blockSize:p()},{id:(e,t,r)=>v(r.blockSize)(e)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===255}),V=g({comment:[{codes:f(2)},z]},e=>{let t=k(2)(e);return t[0]===33&&t[1]===254}),K=[{header:[{signature:v(3)},{version:v(3)}]},{lsd:[{width:b(!0)},{height:b(!0)},{gct:I({exists:{index:0},resolution:{index:1,length:3},sort:{index:4},size:{index:5,length:3}})},{backgroundColorIndex:p()},{pixelAspectRatio:p()}]},g({gct:E(3,(e,t)=>2**(t.lsd.gct.size+1))},(e,t)=>t.lsd.gct.exists),{frames:M([$,Q,V,H,J],e=>{let t=U()(e);return t===33||t===44})}];var X=(e,t)=>{let r=new Array(e.length),o=e.length/t,n=function(a,l){let m=e.slice(l*t,(l+1)*t);r.splice(...[a*t,t].concat(m))},c=[0,4,2,1],i=[8,8,4,2],s=0;for(let a=0;a<4;a++)for(let l=c[a];l<o;l+=i[a])n(l,s),s++;return r};var Z=(e,t,r)=>{let c=r,i,s,a,l,m;var w;let d,u;var C,y,h,_,G;let x=new Array(r),B=new Array(4096),T=new Array(4096),F=new Array(4097),R=e,S=1<<R,N=S+1;for(i=S+2,m=-1,a=R+1,s=(1<<a)-1,d=0;d<S;d++)B[d]=0,T[d]=d;var C,w,y,h,G,_;for(C=w=y=h=G=_=0,u=0;u<c;){if(h===0){if(w<a){C+=t[_]<<w,w+=8,_++;continue}if(d=C&s,C>>=a,w-=a,d>i||d===N)break;if(d===S){a=R+1,s=(1<<a)-1,i=S+2,m=-1;continue}if(m===-1){F[h++]=T[d],m=d,y=d;continue}for(l=d,d===i&&(F[h++]=y,d=m);d>S;)F[h++]=T[d],d=B[d];y=T[d]&255,F[h++]=y,i<4096&&(B[i]=m,T[i]=y,i++,(i&s)===0&&i<4096&&(a++,s+=i)),m=l}h--,x[G++]=F[h],u++}for(u=G;u<c;u++)x[u]=0;return x};var j=e=>{let t=new Uint8Array(e);return P(W(t),K)},D=(e,t)=>{var i,s,a;if(!e.image)return console.warn("gif frame does not have associated image."),null;let{image:r}=e,o=r.descriptor.width*r.descriptor.height,n=Z(r.data.minCodeSize,r.data.blocks,o);return(i=r.descriptor.lct)!=null&&i.interlaced&&(n=X(n,r.descriptor.width)),{pixels:n,dims:{top:e.image.descriptor.top,left:e.image.descriptor.left,width:e.image.descriptor.width,height:e.image.descriptor.height},colorTable:(s=r.descriptor.lct)!=null&&s.exists?r.lct:t,delay:(((a=e.gce)==null?void 0:a.delay)||10)*10,disposalType:e.gce?e.gce.extras.disposal:1,transparentIndex:e.gce&&e.gce.extras.transparentColorGiven?e.gce.transparentColorIndex:-1}};var q=e=>e.frames.filter(t=>"image"in t).map(t=>D(t,e.gct)).filter(Boolean).map(t=>t);var Y=e=>{let t=null;for(let r of e.frames)t=r.gce?r.gce:t,"image"in r&&!("gce"in r)&&t!==null&&(r.gce=t)},ee=({typedArray:e,dx:t,dy:r,width:o,height:n,gifWidth:c})=>{let i=r*c+t;for(let s=0;s<n;s++)for(let a=0;a<o;a++){let l=i+s*c+a;e[l*4]=0,e[l*4+1]=0,e[l*4+2]=0,e[l*4+3]=0}},te=(e,t,r)=>{let{width:o,height:n,top:c,left:i}=t.dims,s=c*r.width+i;for(let a=0;a<n;a++)for(let l=0;l<o;l++){let m=a*o+l,d=t.pixels[m];if(d!==t.transparentIndex){let u=s+a*r.width+l,x=t.colorTable[d];e[u*4]=x[0],e[u*4+1]=x[1],e[u*4+2]=x[2],e[u*4+3]=d===t.transparentIndex?0:255}}},L=(e,{signal:t,requestInit:r})=>fetch(e,{...r,signal:t}).then(o=>{var n;if(!((n=o.headers.get("Content-Type"))!=null&&n.includes("image/gif")))throw Error(`Wrong content type: "${o.headers.get("Content-Type")}"`);return o.arrayBuffer()}).then(o=>j(o)).then(o=>(Y(o),o)).then(o=>Promise.all([q(o),{width:o.lsd.width,height:o.lsd.height}])).then(([o,n])=>{let c=[],i=n.width*n.height*4,s=new Uint8ClampedArray(i);for(let a=0;a<o.length;++a){let l=o[a],m=o[a].disposalType===3?s.slice():null;if(te(s,l,n),c.push(s.slice()),o[a].disposalType===2)ee({typedArray:s,dx:l.dims.left,dy:l.dims.top,width:l.dims.width,height:l.dims.height,gifWidth:n.width});else if(o[a].disposalType===3){if(!m)throw Error("Disposal type 3 without previous frame");s=m}else s=c[a].slice()}return{...n,loaded:!0,delays:o.map(a=>a.delay),frames:c}});var A=new Map;self.addEventListener("message",e=>{let{type:t,src:r,cacheKey:o,requestInit:n}=e.data||e;switch(t){case"parse":{if(!A.has(o)){let c=new AbortController,i={signal:c.signal,requestInit:n};A.set(o,c),L(r,i).then(s=>{self.postMessage(Object.assign(s,{src:r,cacheKey:o}),s.frames.map(a=>a.buffer))}).catch(s=>{self.postMessage({src:r,cacheKey:o,error:s,loaded:!0})}).finally(()=>{A.delete(o)})}break}case"cancel":{A.has(o)&&(A.get(o).abort(),A.delete(o));break}default:break}});})();\n';
 
 // src/worker/index.ts
 var makeWorker = () => {
@@ -753,18 +786,24 @@ var makeWorker = () => {
 // src/react-tools.ts
 var parseGif = async ({
   src: src2,
-  controller
+  controller,
+  requestInit
 }) => {
-  const raw = await parse2(src2, { signal: controller.signal });
+  const raw = await parse2(src2, { signal: controller.signal, requestInit });
   return generate(raw);
 };
-var parseWithWorker = (src2) => {
+var parseWithWorker = ({
+  src: src2,
+  cacheKey,
+  requestInit
+}) => {
   const worker = makeWorker();
+  const workerRequestInit = normalizeRequestInit(requestInit);
   let handler = null;
   const prom = new Promise((resolve, reject) => {
     handler = (e) => {
       const message = e.data || e;
-      if (message.src === src2) {
+      if (message.cacheKey === cacheKey) {
         if (message.error) {
           reject(new Error(message.error));
         } else {
@@ -775,12 +814,17 @@ var parseWithWorker = (src2) => {
       }
     };
     worker.addEventListener("message", handler);
-    worker.postMessage({ src: src2, type: "parse" });
+    worker.postMessage({
+      src: src2,
+      cacheKey,
+      requestInit: workerRequestInit,
+      type: "parse"
+    });
   });
   return {
     prom,
     cancel: () => {
-      worker.postMessage({ src: src2, type: "cancel" });
+      worker.postMessage({ cacheKey, type: "cancel" });
       worker.removeEventListener("message", handler);
       worker.terminate();
     }
@@ -799,26 +843,36 @@ var resolveGifSource = (src2) => {
 var calcDuration = (parsed) => {
   return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
 };
-var getGifDurationInSeconds = async (src2) => {
+var getGifDurationInSeconds = async (src2, options) => {
   const resolvedSrc = resolveGifSource(src2);
-  const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
+  const cacheKey = getGifCacheKey({
+    resolvedSrc,
+    requestInit: options?.requestInit
+  });
+  const inCache = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
   if (inCache) {
     return calcDuration(inCache);
   }
   if (getRemotionEnvironment().isRendering) {
-    const renderingParsed = parseWithWorker(resolvedSrc);
+    const renderingParsed = parseWithWorker({
+      src: resolvedSrc,
+      cacheKey,
+      requestInit: options?.requestInit
+    });
     const resolved = await renderingParsed.prom;
-    volatileGifCache.set(resolvedSrc, resolved);
+    volatileGifCache.set(cacheKey, resolved);
     return calcDuration(resolved);
   }
   const parsed = await parseGif({
     src: resolvedSrc,
-    controller: new AbortController
+    controller: new AbortController,
+    requestInit: options?.requestInit
   });
-  volatileGifCache.set(resolvedSrc, parsed);
+  volatileGifCache.set(cacheKey, parsed);
   return calcDuration(parsed);
 };
 // src/Gif.tsx
+import React from "react";
 import {
   Internals as Internals3,
   Sequence,
@@ -832,6 +886,7 @@ import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2,
 // src/canvas.tsx
 import {
   forwardRef,
+  useCallback as useCallback2,
   useEffect as useEffect2,
   useImperativeHandle,
   useMemo as useMemo2,
@@ -964,7 +1019,17 @@ var makeCanvas = () => {
   canvas.height = 0;
   return ctx;
 };
-var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
+var Canvas = forwardRef(({
+  index,
+  frames,
+  width,
+  height,
+  fit,
+  className,
+  style,
+  effects,
+  refForOutline
+}, ref) => {
   const canvasRef = useRef(null);
   const [tempCtx] = useState2(() => {
     return makeCanvas();
@@ -987,6 +1052,12 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
   useImperativeHandle(ref, () => {
     return canvasRef.current;
   }, []);
+  const canvasCallbackRef = useCallback2((canvas) => {
+    canvasRef.current = canvas;
+    if (refForOutline) {
+      refForOutline.current = canvas;
+    }
+  }, [refForOutline]);
   useEffect2(() => {
     if (!size) {
       return;
@@ -1088,7 +1159,7 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
     cancelRender
   ]);
   return /* @__PURE__ */ jsx("canvas", {
-    ref: canvasRef,
+    ref: canvasCallbackRef,
     className,
     style,
     width: width ?? size?.width,
@@ -1150,12 +1221,17 @@ var GifForDevelopment = forwardRef2(({
   playbackRate = 1,
   onLoad,
   fit = "fill",
+  requestInit,
   effects,
+  refForOutline,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src2);
+  const requestInitRef = useRef2(requestInit);
+  requestInitRef.current = requestInit;
+  const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
   const [state, update] = useState3(() => {
-    const parsedGif = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
+    const parsedGif = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
     if (parsedGif === undefined) {
       return {
         delays: [],
@@ -1174,11 +1250,15 @@ var GifForDevelopment = forwardRef2(({
   useEffect3(() => {
     let done = false;
     let aborted = false;
-    const { prom, cancel } = parseWithWorker(resolvedSrc);
+    const { prom, cancel } = parseWithWorker({
+      src: resolvedSrc,
+      cacheKey,
+      requestInit: requestInitRef.current
+    });
     prom.then((parsed) => {
       currentOnLoad.current?.(parsed);
       update(parsed);
-      volatileGifCache.set(resolvedSrc, parsed);
+      volatileGifCache.set(cacheKey, parsed);
       done = true;
     }).catch((err) => {
       if (aborted) {
@@ -1196,7 +1276,7 @@ var GifForDevelopment = forwardRef2(({
         cancel();
       }
     };
-  }, [resolvedSrc]);
+  }, [cacheKey, resolvedSrc]);
   if (error) {
     console.error(error.stack);
     if (isCorsError(error)) {
@@ -1219,6 +1299,7 @@ var GifForDevelopment = forwardRef2(({
     width,
     height,
     effects,
+    refForOutline,
     ...props,
     ref
   });
@@ -1238,13 +1319,17 @@ var GifForRendering = forwardRef3(({
   playbackRate = 1,
   fit = "fill",
   delayRenderTimeoutInMilliseconds,
+  requestInit,
   effects,
   ...props
 }, ref) => {
   const resolvedSrc = resolveGifSource(src2);
+  const requestInitRef = useRef3(requestInit);
+  requestInitRef.current = requestInit;
+  const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
   const { delayRender, continueRender } = useDelayRender2();
   const [state, update] = useState4(() => {
-    const parsedGif = volatileGifCache.get(resolvedSrc);
+    const parsedGif = volatileGifCache.get(cacheKey);
     if (parsedGif === undefined) {
       return {
         delays: [],
@@ -1283,11 +1368,15 @@ var GifForRendering = forwardRef3(({
     });
     Internals2.Log.verbose({ logLevel, tag: null }, "Loading GIF with source", resolvedSrc);
     const time = Date.now();
-    parseGif({ controller, src: resolvedSrc }).then((parsed) => {
+    parseGif({
+      controller,
+      src: resolvedSrc,
+      requestInit: requestInitRef.current
+    }).then((parsed) => {
       Internals2.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
       currentOnLoad.current?.(parsed);
       update(parsed);
-      volatileGifCache.set(resolvedSrc, parsed);
+      volatileGifCache.set(cacheKey, parsed);
       done = true;
       continueRender(newHandle);
       continueRender(renderHandle);
@@ -1314,6 +1403,7 @@ var GifForRendering = forwardRef3(({
   }, [
     renderHandle,
     logLevel,
+    cacheKey,
     resolvedSrc,
     delayRender,
     continueRender,
@@ -1372,6 +1462,7 @@ var GifInner = ({
   loopBehavior,
   id,
   delayRenderTimeoutInMilliseconds,
+  requestInit,
   durationInFrames,
   style,
   _experimentalControls: controls,
@@ -1382,6 +1473,7 @@ var GifInner = ({
   const env = useRemotionEnvironment();
   const { durationInFrames: videoDuration } = useVideoConfig2();
   const resolvedDuration = durationInFrames ?? videoDuration;
+  const refForOutline = React.useRef(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -1398,6 +1490,7 @@ var GifInner = ({
     loopBehavior,
     id,
     delayRenderTimeoutInMilliseconds,
+    requestInit,
     style,
     effects: memoizedEffects
   };
@@ -1406,7 +1499,8 @@ var GifInner = ({
     ref
   }) : /* @__PURE__ */ jsx4(GifForDevelopment, {
     ...gifProps,
-    ref
+    ref,
+    refForOutline
   });
   return /* @__PURE__ */ jsx4(Sequence, {
     layout: "none",
@@ -1416,6 +1510,7 @@ var GifInner = ({
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
+    _remotionInternalRefForOutline: refForOutline,
     children: inner
   });
 };
@@ -1423,25 +1518,33 @@ var Gif = wrapInSchema(GifInner, gifSchema);
 Gif.displayName = "Gif";
 addSequenceStackTraces(Gif);
 // src/preload-gif.ts
-var preloadGif = (src2) => {
+var preloadGif = (src2, options) => {
   const resolvedSrc = resolveGifSource(src2);
-  if (volatileGifCache.has(resolvedSrc)) {
+  const cacheKey = getGifCacheKey({
+    resolvedSrc,
+    requestInit: options?.requestInit
+  });
+  if (volatileGifCache.has(cacheKey)) {
     return {
       waitUntilDone: () => Promise.resolve(),
-      free: () => volatileGifCache.delete(resolvedSrc)
+      free: () => volatileGifCache.delete(cacheKey)
     };
   }
-  if (manuallyManagedGifCache.has(resolvedSrc)) {
+  if (manuallyManagedGifCache.has(cacheKey)) {
     return {
       waitUntilDone: () => Promise.resolve(),
-      free: () => manuallyManagedGifCache.delete(resolvedSrc)
+      free: () => manuallyManagedGifCache.delete(cacheKey)
     };
   }
-  const { prom, cancel } = parseWithWorker(resolvedSrc);
+  const { prom, cancel } = parseWithWorker({
+    src: resolvedSrc,
+    cacheKey,
+    requestInit: options?.requestInit
+  });
   let deleted = false;
   prom.then((p) => {
     if (!deleted) {
-      manuallyManagedGifCache.set(resolvedSrc, p);
+      manuallyManagedGifCache.set(cacheKey, p);
     }
   });
   return {
@@ -1451,7 +1554,7 @@ var preloadGif = (src2) => {
     free: () => {
       cancel();
       deleted = true;
-      manuallyManagedGifCache.delete(resolvedSrc);
+      manuallyManagedGifCache.delete(cacheKey);
     }
   };
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
 	},
 	"name": "@remotion/gif",
-	"version": "4.0.469",
+	"version": "4.0.471",
 	"description": "Embed GIFs in a Remotion video",
 	"bugs": {
 		"url": "https://github.com/remotion-dev/remotion/issues"
@@ -17,6 +17,7 @@
 		"formatting": "oxfmt src --check",
 		"format": "oxfmt src",
 		"lint": "eslint src",
+		"test": "bun test src/test",
 		"make": "tsgo -d && node build.mjs && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"exports": {
@@ -29,14 +30,15 @@
 		}
 	},
 	"dependencies": {
-		"remotion": "4.0.469"
+		"remotion": "4.0.471"
 	},
 	"devDependencies": {
+		"@testing-library/react": "16.1.0",
 		"esbuild": "0.28.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"@remotion/eslint-config-internal": "4.0.469",
+		"@remotion/eslint-config-internal": "4.0.471",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},