@remotion/gif 4.0.470 → 4.0.472

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/Gif.js CHANGED
@@ -1,16 +1,22 @@
1
1
  "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
2
5
  Object.defineProperty(exports, "__esModule", { value: true });
3
6
  exports.Gif = void 0;
4
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = __importDefault(require("react"));
5
9
  const remotion_1 = require("remotion");
6
10
  const GifForDevelopment_1 = require("./GifForDevelopment");
7
11
  const GifForRendering_1 = require("./GifForRendering");
8
- const { addSequenceStackTraces, useMemoizedEffectDefinitions, useMemoizedEffects, wrapInSchema, } = remotion_1.Internals;
12
+ const { addSequenceStackTraces, useMemoizedEffectDefinitions, useMemoizedEffects, wrapInSchema, durationInFramesField, fromField, } = remotion_1.Internals;
9
13
  /*
10
14
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
11
15
  * @see [Documentation](https://remotion.dev/docs/gif)
12
16
  */
13
17
  const gifSchema = {
18
+ durationInFrames: durationInFramesField,
19
+ from: fromField,
14
20
  playbackRate: {
15
21
  type: 'number',
16
22
  min: 0,
@@ -18,15 +24,18 @@ const gifSchema = {
18
24
  step: 0.1,
19
25
  default: 1,
20
26
  description: 'Playback Rate',
27
+ hiddenFromList: false,
28
+ keyframable: false,
21
29
  },
22
30
  ...remotion_1.Internals.sequenceVisualStyleSchema,
23
31
  hidden: remotion_1.Internals.hiddenField,
24
32
  };
25
- const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, durationInFrames, style, _experimentalControls: controls, effects = [], ref, ...sequenceProps }) => {
33
+ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loopBehavior, id, delayRenderTimeoutInMilliseconds, requestInit, durationInFrames, style, _experimentalControls: controls, effects = [], ref, ...sequenceProps }) => {
26
34
  var _a;
27
35
  const env = (0, remotion_1.useRemotionEnvironment)();
28
36
  const { durationInFrames: videoDuration } = (0, remotion_1.useVideoConfig)();
29
37
  const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
38
+ const refForOutline = react_1.default.useRef(null);
30
39
  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
31
40
  const memoizedEffects = useMemoizedEffects({
32
41
  effects,
@@ -43,12 +52,17 @@ const GifInner = ({ src, width, height, onLoad, onError, fit, playbackRate, loop
43
52
  loopBehavior,
44
53
  id,
45
54
  delayRenderTimeoutInMilliseconds,
55
+ requestInit,
46
56
  style,
47
57
  effects: memoizedEffects,
48
58
  };
49
- const inner = env.isRendering ? (jsx_runtime_1.jsx(GifForRendering_1.GifForRendering, { ...gifProps, ref: ref })) : (jsx_runtime_1.jsx(GifForDevelopment_1.GifForDevelopment, { ...gifProps, ref: ref }));
50
- 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 }));
59
+ 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 }));
60
+ 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 }));
51
61
  };
52
- exports.Gif = wrapInSchema(GifInner, gifSchema);
62
+ exports.Gif = wrapInSchema({
63
+ Component: GifInner,
64
+ schema: gifSchema,
65
+ supportsEffects: true,
66
+ });
53
67
  exports.Gif.displayName = 'Gif';
54
68
  addSequenceStackTraces(exports.Gif);
@@ -1,5 +1,7 @@
1
+ import { type RefObject } from 'react';
1
2
  import type { EffectDefinitionAndStack } from 'remotion';
2
3
  import type { RemotionGifProps } from './props';
3
4
  export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & {
4
5
  readonly effects: EffectDefinitionAndStack<unknown>[];
6
+ readonly refForOutline: RefObject<HTMLElement | null>;
5
7
  } & import("react").RefAttributes<HTMLCanvasElement>>;
@@ -8,13 +8,17 @@ const canvas_1 = require("./canvas");
8
8
  const gif_cache_1 = require("./gif-cache");
9
9
  const is_cors_error_1 = require("./is-cors-error");
10
10
  const react_tools_1 = require("./react-tools");
11
+ const request_init_1 = require("./request-init");
11
12
  const resolve_gif_source_1 = require("./resolve-gif-source");
12
13
  const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
13
- exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', effects, ...props }, ref) => {
14
+ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', requestInit, effects, refForOutline, ...props }, ref) => {
14
15
  const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
16
+ const requestInitRef = (0, react_1.useRef)(requestInit);
17
+ requestInitRef.current = requestInit;
18
+ const cacheKey = (0, request_init_1.getGifCacheKey)({ resolvedSrc, requestInit });
15
19
  const [state, update] = (0, react_1.useState)(() => {
16
20
  var _a;
17
- const parsedGif = (_a = gif_cache_1.volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(resolvedSrc);
21
+ const parsedGif = (_a = gif_cache_1.volatileGifCache.get(cacheKey)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(cacheKey);
18
22
  if (parsedGif === undefined) {
19
23
  return {
20
24
  delays: [],
@@ -33,13 +37,17 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
33
37
  (0, react_1.useEffect)(() => {
34
38
  let done = false;
35
39
  let aborted = false;
36
- const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
40
+ const { prom, cancel } = (0, react_tools_1.parseWithWorker)({
41
+ src: resolvedSrc,
42
+ cacheKey,
43
+ requestInit: requestInitRef.current,
44
+ });
37
45
  prom
38
46
  .then((parsed) => {
39
47
  var _a;
40
48
  (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
41
49
  update(parsed);
42
- gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
50
+ gif_cache_1.volatileGifCache.set(cacheKey, parsed);
43
51
  done = true;
44
52
  })
45
53
  .catch((err) => {
@@ -59,7 +67,7 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
59
67
  cancel();
60
68
  }
61
69
  };
62
- }, [resolvedSrc]);
70
+ }, [cacheKey, resolvedSrc]);
63
71
  if (error) {
64
72
  console.error(error.stack);
65
73
  if ((0, is_cors_error_1.isCorsError)(error)) {
@@ -75,5 +83,5 @@ exports.GifForDevelopment = (0, react_1.forwardRef)(({ src, width, height, onErr
75
83
  if (index === -1) {
76
84
  return null;
77
85
  }
78
- return (jsx_runtime_1.jsx(canvas_1.Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, effects: effects, ...props, ref: ref }));
86
+ 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 }));
79
87
  });
@@ -8,13 +8,17 @@ const canvas_1 = require("./canvas");
8
8
  const gif_cache_1 = require("./gif-cache");
9
9
  const is_cors_error_1 = require("./is-cors-error");
10
10
  const react_tools_1 = require("./react-tools");
11
+ const request_init_1 = require("./request-init");
11
12
  const resolve_gif_source_1 = require("./resolve-gif-source");
12
13
  const useCurrentGifIndex_1 = require("./useCurrentGifIndex");
13
- exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, effects, ...props }, ref) => {
14
+ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', delayRenderTimeoutInMilliseconds, requestInit, effects, ...props }, ref) => {
14
15
  const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
16
+ const requestInitRef = (0, react_1.useRef)(requestInit);
17
+ requestInitRef.current = requestInit;
18
+ const cacheKey = (0, request_init_1.getGifCacheKey)({ resolvedSrc, requestInit });
15
19
  const { delayRender, continueRender } = (0, remotion_1.useDelayRender)();
16
20
  const [state, update] = (0, react_1.useState)(() => {
17
- const parsedGif = gif_cache_1.volatileGifCache.get(resolvedSrc);
21
+ const parsedGif = gif_cache_1.volatileGifCache.get(cacheKey);
18
22
  if (parsedGif === undefined) {
19
23
  return {
20
24
  delays: [],
@@ -53,13 +57,17 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
53
57
  });
54
58
  remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Loading GIF with source', resolvedSrc);
55
59
  const time = Date.now();
56
- (0, react_tools_1.parseGif)({ controller, src: resolvedSrc })
60
+ (0, react_tools_1.parseGif)({
61
+ controller,
62
+ src: resolvedSrc,
63
+ requestInit: requestInitRef.current,
64
+ })
57
65
  .then((parsed) => {
58
66
  var _a;
59
67
  remotion_1.Internals.Log.verbose({ logLevel, tag: null }, 'Parsed GIF in', Date.now() - time, 'ms');
60
68
  (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
61
69
  update(parsed);
62
- gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
70
+ gif_cache_1.volatileGifCache.set(cacheKey, parsed);
63
71
  done = true;
64
72
  continueRender(newHandle);
65
73
  continueRender(renderHandle);
@@ -88,6 +96,7 @@ exports.GifForRendering = (0, react_1.forwardRef)(({ src, width, height, onLoad,
88
96
  }, [
89
97
  renderHandle,
90
98
  logLevel,
99
+ cacheKey,
91
100
  resolvedSrc,
92
101
  delayRender,
93
102
  continueRender,
@@ -1,3 +1,4 @@
1
+ import { type RefObject } from 'react';
1
2
  import type { EffectDefinitionAndStack } from 'remotion';
2
3
  import type { GifFillMode } from './props';
3
4
  type Props = {
@@ -9,6 +10,7 @@ type Props = {
9
10
  readonly className?: string;
10
11
  readonly style?: React.CSSProperties;
11
12
  readonly effects: EffectDefinitionAndStack<unknown>[];
13
+ readonly refForOutline?: RefObject<HTMLElement | null>;
12
14
  };
13
15
  export declare const Canvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
14
16
  export {};
@@ -65,7 +65,7 @@ const makeCanvas = () => {
65
65
  canvas.height = 0;
66
66
  return ctx;
67
67
  };
68
- exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects }, ref) => {
68
+ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, className, style, effects, refForOutline, }, ref) => {
69
69
  const canvasRef = (0, react_1.useRef)(null);
70
70
  const [tempCtx] = (0, react_1.useState)(() => {
71
71
  return makeCanvas();
@@ -88,6 +88,12 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
88
88
  (0, react_1.useImperativeHandle)(ref, () => {
89
89
  return canvasRef.current;
90
90
  }, []);
91
+ const canvasCallbackRef = (0, react_1.useCallback)((canvas) => {
92
+ canvasRef.current = canvas;
93
+ if (refForOutline) {
94
+ refForOutline.current = canvas;
95
+ }
96
+ }, [refForOutline]);
91
97
  (0, react_1.useEffect)(() => {
92
98
  if (!size) {
93
99
  return;
@@ -196,5 +202,5 @@ exports.Canvas = (0, react_1.forwardRef)(({ index, frames, width, height, fit, c
196
202
  continueRender,
197
203
  cancelRender,
198
204
  ]);
199
- 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 }));
205
+ 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 }));
200
206
  });
@@ -1 +1,3 @@
1
- export declare const getGifDurationInSeconds: (src: string) => Promise<number>;
1
+ export declare const getGifDurationInSeconds: (src: string, options?: {
2
+ requestInit?: RequestInit | undefined;
3
+ } | undefined) => Promise<number>;
@@ -4,6 +4,7 @@ exports.getGifDurationInSeconds = void 0;
4
4
  const remotion_1 = require("remotion");
5
5
  const gif_cache_1 = require("./gif-cache");
6
6
  const react_tools_1 = require("./react-tools");
7
+ const request_init_1 = require("./request-init");
7
8
  const resolve_gif_source_1 = require("./resolve-gif-source");
8
9
  const calcDuration = (parsed) => {
9
10
  return (parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000);
@@ -12,24 +13,33 @@ const calcDuration = (parsed) => {
12
13
  * @description Gets the duration in seconds of a GIF.
13
14
  * @see [Documentation](https://remotion.dev/docs/gif/get-gif-duration-in-seconds)
14
15
  */
15
- const getGifDurationInSeconds = async (src) => {
16
+ const getGifDurationInSeconds = async (src, options) => {
16
17
  var _a;
17
18
  const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
18
- const inCache = (_a = gif_cache_1.volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(resolvedSrc);
19
+ const cacheKey = (0, request_init_1.getGifCacheKey)({
20
+ resolvedSrc,
21
+ requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
22
+ });
23
+ const inCache = (_a = gif_cache_1.volatileGifCache.get(cacheKey)) !== null && _a !== void 0 ? _a : gif_cache_1.manuallyManagedGifCache.get(cacheKey);
19
24
  if (inCache) {
20
25
  return calcDuration(inCache);
21
26
  }
22
27
  if ((0, remotion_1.getRemotionEnvironment)().isRendering) {
23
- const renderingParsed = (0, react_tools_1.parseWithWorker)(resolvedSrc);
28
+ const renderingParsed = (0, react_tools_1.parseWithWorker)({
29
+ src: resolvedSrc,
30
+ cacheKey,
31
+ requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
32
+ });
24
33
  const resolved = await renderingParsed.prom;
25
- gif_cache_1.volatileGifCache.set(resolvedSrc, resolved);
34
+ gif_cache_1.volatileGifCache.set(cacheKey, resolved);
26
35
  return calcDuration(resolved);
27
36
  }
28
37
  const parsed = await (0, react_tools_1.parseGif)({
29
38
  src: resolvedSrc,
30
39
  controller: new AbortController(),
40
+ requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
31
41
  });
32
- gif_cache_1.volatileGifCache.set(resolvedSrc, parsed);
42
+ gif_cache_1.volatileGifCache.set(cacheKey, parsed);
33
43
  return calcDuration(parsed);
34
44
  };
35
45
  exports.getGifDurationInSeconds = getGifDurationInSeconds;
@@ -1,6 +1,7 @@
1
1
  import type { GifState } from './props';
2
- export declare const parse: (src: string, { signal, }: {
2
+ export declare const parse: (src: string, { signal, requestInit, }: {
3
3
  signal: AbortSignal;
4
+ requestInit?: RequestInit | undefined;
4
5
  }) => Promise<{
5
6
  width: number;
6
7
  height: number;
@@ -44,7 +44,7 @@ const putPixels = (typedArray, frame, gifSize) => {
44
44
  }
45
45
  }
46
46
  };
47
- const parse = (src, { signal, }) => fetch(src, { signal })
47
+ const parse = (src, { signal, requestInit, }) => fetch(src, { ...requestInit, signal })
48
48
  .then((resp) => {
49
49
  var _a;
50
50
  if (!((_a = resp.headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.includes('image/gif')))
@@ -2,7 +2,9 @@
2
2
  * @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.
3
3
  * @see [Documentation](https://www.remotion.dev/docs/gif/preload-gif)
4
4
  */
5
- export declare const preloadGif: (src: string) => {
5
+ export declare const preloadGif: (src: string, options?: {
6
+ requestInit?: RequestInit | undefined;
7
+ } | undefined) => {
6
8
  waitUntilDone: () => Promise<void>;
7
9
  free: () => void;
8
10
  };
@@ -3,30 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.preloadGif = void 0;
4
4
  const gif_cache_1 = require("./gif-cache");
5
5
  const react_tools_1 = require("./react-tools");
6
+ const request_init_1 = require("./request-init");
6
7
  const resolve_gif_source_1 = require("./resolve-gif-source");
7
8
  /**
8
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.
9
10
  * @see [Documentation](https://www.remotion.dev/docs/gif/preload-gif)
10
11
  */
11
- const preloadGif = (src) => {
12
+ const preloadGif = (src, options) => {
12
13
  const resolvedSrc = (0, resolve_gif_source_1.resolveGifSource)(src);
13
- if (gif_cache_1.volatileGifCache.has(resolvedSrc)) {
14
+ const cacheKey = (0, request_init_1.getGifCacheKey)({
15
+ resolvedSrc,
16
+ requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
17
+ });
18
+ if (gif_cache_1.volatileGifCache.has(cacheKey)) {
14
19
  return {
15
20
  waitUntilDone: () => Promise.resolve(),
16
- free: () => gif_cache_1.volatileGifCache.delete(resolvedSrc),
21
+ free: () => gif_cache_1.volatileGifCache.delete(cacheKey),
17
22
  };
18
23
  }
19
- if (gif_cache_1.manuallyManagedGifCache.has(resolvedSrc)) {
24
+ if (gif_cache_1.manuallyManagedGifCache.has(cacheKey)) {
20
25
  return {
21
26
  waitUntilDone: () => Promise.resolve(),
22
- free: () => gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc),
27
+ free: () => gif_cache_1.manuallyManagedGifCache.delete(cacheKey),
23
28
  };
24
29
  }
25
- const { prom, cancel } = (0, react_tools_1.parseWithWorker)(resolvedSrc);
30
+ const { prom, cancel } = (0, react_tools_1.parseWithWorker)({
31
+ src: resolvedSrc,
32
+ cacheKey,
33
+ requestInit: options === null || options === void 0 ? void 0 : options.requestInit,
34
+ });
26
35
  let deleted = false;
27
36
  prom.then((p) => {
28
37
  if (!deleted) {
29
- gif_cache_1.manuallyManagedGifCache.set(resolvedSrc, p);
38
+ gif_cache_1.manuallyManagedGifCache.set(cacheKey, p);
30
39
  }
31
40
  });
32
41
  return {
@@ -34,7 +43,7 @@ const preloadGif = (src) => {
34
43
  free: () => {
35
44
  cancel();
36
45
  deleted = true;
37
- gif_cache_1.manuallyManagedGifCache.delete(resolvedSrc);
46
+ gif_cache_1.manuallyManagedGifCache.delete(cacheKey);
38
47
  },
39
48
  };
40
49
  };
@@ -16,6 +16,7 @@ export type RemotionGifProps = {
16
16
  loopBehavior?: GifLoopBehavior;
17
17
  id?: string;
18
18
  delayRenderTimeoutInMilliseconds?: number;
19
+ requestInit?: RequestInit;
19
20
  };
20
21
  export type GifState = {
21
22
  delays: number[];
@@ -1,9 +1,14 @@
1
1
  import type { GifState } from './props';
2
- export declare const parseGif: ({ src, controller, }: {
2
+ export declare const parseGif: ({ src, controller, requestInit, }: {
3
3
  src: string;
4
4
  controller: AbortController;
5
+ requestInit?: RequestInit | undefined;
5
6
  }) => Promise<GifState>;
6
- export declare const parseWithWorker: (src: string) => {
7
+ export declare const parseWithWorker: ({ src, cacheKey, requestInit, }: {
8
+ src: string;
9
+ cacheKey: string;
10
+ requestInit?: RequestInit | undefined;
11
+ }) => {
7
12
  prom: Promise<GifState>;
8
13
  cancel: () => void;
9
14
  };
@@ -2,19 +2,21 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.parseWithWorker = exports.parseGif = void 0;
4
4
  const parse_generate_1 = require("./parse-generate");
5
+ const request_init_1 = require("./request-init");
5
6
  const worker_1 = require("./worker");
6
- const parseGif = async ({ src, controller, }) => {
7
- const raw = await (0, parse_generate_1.parse)(src, { signal: controller.signal });
7
+ const parseGif = async ({ src, controller, requestInit, }) => {
8
+ const raw = await (0, parse_generate_1.parse)(src, { signal: controller.signal, requestInit });
8
9
  return (0, parse_generate_1.generate)(raw);
9
10
  };
10
11
  exports.parseGif = parseGif;
11
- const parseWithWorker = (src) => {
12
+ const parseWithWorker = ({ src, cacheKey, requestInit, }) => {
12
13
  const worker = (0, worker_1.makeWorker)();
14
+ const workerRequestInit = (0, request_init_1.normalizeRequestInit)(requestInit);
13
15
  let handler = null;
14
16
  const prom = new Promise((resolve, reject) => {
15
17
  handler = (e) => {
16
18
  const message = e.data || e;
17
- if (message.src === src) {
19
+ if (message.cacheKey === cacheKey) {
18
20
  if (message.error) {
19
21
  reject(new Error(message.error));
20
22
  }
@@ -26,12 +28,17 @@ const parseWithWorker = (src) => {
26
28
  }
27
29
  };
28
30
  worker.addEventListener('message', handler);
29
- worker.postMessage({ src, type: 'parse' });
31
+ worker.postMessage({
32
+ src,
33
+ cacheKey,
34
+ requestInit: workerRequestInit,
35
+ type: 'parse',
36
+ });
30
37
  });
31
38
  return {
32
39
  prom,
33
40
  cancel: () => {
34
- worker.postMessage({ src, type: 'cancel' });
41
+ worker.postMessage({ cacheKey, type: 'cancel' });
35
42
  worker.removeEventListener('message', handler);
36
43
  worker.terminate();
37
44
  },
@@ -0,0 +1,6 @@
1
+ export declare const normalizeRequestInit: (requestInit: RequestInit | undefined) => RequestInit | undefined;
2
+ export declare const serializeRequestInit: (requestInit: RequestInit | undefined) => string | null;
3
+ export declare const getGifCacheKey: ({ resolvedSrc, requestInit, }: {
4
+ resolvedSrc: string;
5
+ requestInit: RequestInit | undefined;
6
+ }) => string;
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getGifCacheKey = exports.serializeRequestInit = exports.normalizeRequestInit = void 0;
4
+ const normalizeRequestInit = (requestInit) => {
5
+ if (!requestInit) {
6
+ return undefined;
7
+ }
8
+ const requestInitWithoutSignal = { ...requestInit };
9
+ delete requestInitWithoutSignal.signal;
10
+ const { headers, ...rest } = requestInitWithoutSignal;
11
+ return {
12
+ ...rest,
13
+ headers: headers ? Array.from(new Headers(headers).entries()) : undefined,
14
+ };
15
+ };
16
+ exports.normalizeRequestInit = normalizeRequestInit;
17
+ const serializeRequestInit = (requestInit) => {
18
+ const normalizedRequestInit = (0, exports.normalizeRequestInit)(requestInit);
19
+ if (!normalizedRequestInit) {
20
+ return null;
21
+ }
22
+ const { headers, ...rest } = normalizedRequestInit;
23
+ return JSON.stringify({
24
+ ...rest,
25
+ headers: headers !== null && headers !== void 0 ? headers : null,
26
+ });
27
+ };
28
+ exports.serializeRequestInit = serializeRequestInit;
29
+ const getGifCacheKey = ({ resolvedSrc, requestInit, }) => {
30
+ const requestInitKey = (0, exports.serializeRequestInit)(requestInit);
31
+ return requestInitKey === null
32
+ ? resolvedSrc
33
+ : `${resolvedSrc}-${requestInitKey}`;
34
+ };
35
+ exports.getGifCacheKey = getGifCacheKey;
@@ -1 +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";
1
+ 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";
@@ -4,4 +4,4 @@ exports.src = void 0;
4
4
  // Auto-generated by build.mjs
5
5
  exports.src =
6
6
  // eslint-disable-next-line no-template-curly-in-string
7
- "\"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";
7
+ "\"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";
@@ -3,33 +3,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const parse_generate_1 = require("../parse-generate");
4
4
  const abortMap = new Map();
5
5
  self.addEventListener('message', (e) => {
6
- const { type, src } = e.data || e;
6
+ const { type, src, cacheKey, requestInit } = e.data || e;
7
7
  switch (type) {
8
8
  case 'parse': {
9
- if (!abortMap.has(src)) {
9
+ if (!abortMap.has(cacheKey)) {
10
10
  const controller = new AbortController();
11
- const signal = { signal: controller.signal };
12
- abortMap.set(src, controller);
11
+ const signal = { signal: controller.signal, requestInit };
12
+ abortMap.set(cacheKey, controller);
13
13
  (0, parse_generate_1.parse)(src, signal)
14
14
  .then((result) => {
15
- self.postMessage(Object.assign(result, { src }),
15
+ self.postMessage(Object.assign(result, { src, cacheKey }),
16
16
  // @ts-expect-error
17
17
  result.frames.map((frame) => frame.buffer));
18
18
  })
19
19
  .catch((error) => {
20
- self.postMessage({ src, error, loaded: true });
20
+ self.postMessage({ src, cacheKey, error, loaded: true });
21
21
  })
22
22
  .finally(() => {
23
- abortMap.delete(src);
23
+ abortMap.delete(cacheKey);
24
24
  });
25
25
  }
26
26
  break;
27
27
  }
28
28
  case 'cancel': {
29
- if (abortMap.has(src)) {
30
- const controller = abortMap.get(src);
29
+ if (abortMap.has(cacheKey)) {
30
+ const controller = abortMap.get(cacheKey);
31
31
  controller.abort();
32
- abortMap.delete(src);
32
+ abortMap.delete(cacheKey);
33
33
  }
34
34
  break;
35
35
  }
@@ -682,8 +682,9 @@ var putPixels = (typedArray, frame, gifSize) => {
682
682
  }
683
683
  };
684
684
  var parse2 = (src, {
685
- signal
686
- }) => fetch(src, { signal }).then((resp) => {
685
+ signal,
686
+ requestInit
687
+ }) => fetch(src, { ...requestInit, signal }).then((resp) => {
687
688
  if (!resp.headers.get("Content-Type")?.includes("image/gif"))
688
689
  throw Error(`Wrong content type: "${resp.headers.get("Content-Type")}"`);
689
690
  return resp.arrayBuffer();
@@ -738,8 +739,40 @@ var generate = (info) => {
738
739
  };
739
740
  };
740
741
 
742
+ // src/request-init.ts
743
+ var normalizeRequestInit = (requestInit) => {
744
+ if (!requestInit) {
745
+ return;
746
+ }
747
+ const requestInitWithoutSignal = { ...requestInit };
748
+ delete requestInitWithoutSignal.signal;
749
+ const { headers, ...rest } = requestInitWithoutSignal;
750
+ return {
751
+ ...rest,
752
+ headers: headers ? Array.from(new Headers(headers).entries()) : undefined
753
+ };
754
+ };
755
+ var serializeRequestInit = (requestInit) => {
756
+ const normalizedRequestInit = normalizeRequestInit(requestInit);
757
+ if (!normalizedRequestInit) {
758
+ return null;
759
+ }
760
+ const { headers, ...rest } = normalizedRequestInit;
761
+ return JSON.stringify({
762
+ ...rest,
763
+ headers: headers ?? null
764
+ });
765
+ };
766
+ var getGifCacheKey = ({
767
+ resolvedSrc,
768
+ requestInit
769
+ }) => {
770
+ const requestInitKey = serializeRequestInit(requestInit);
771
+ return requestInitKey === null ? resolvedSrc : `${resolvedSrc}-${requestInitKey}`;
772
+ };
773
+
741
774
  // src/worker/source.ts
742
- 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';
775
+ 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';
743
776
 
744
777
  // src/worker/index.ts
745
778
  var makeWorker = () => {
@@ -753,18 +786,24 @@ var makeWorker = () => {
753
786
  // src/react-tools.ts
754
787
  var parseGif = async ({
755
788
  src: src2,
756
- controller
789
+ controller,
790
+ requestInit
757
791
  }) => {
758
- const raw = await parse2(src2, { signal: controller.signal });
792
+ const raw = await parse2(src2, { signal: controller.signal, requestInit });
759
793
  return generate(raw);
760
794
  };
761
- var parseWithWorker = (src2) => {
795
+ var parseWithWorker = ({
796
+ src: src2,
797
+ cacheKey,
798
+ requestInit
799
+ }) => {
762
800
  const worker = makeWorker();
801
+ const workerRequestInit = normalizeRequestInit(requestInit);
763
802
  let handler = null;
764
803
  const prom = new Promise((resolve, reject) => {
765
804
  handler = (e) => {
766
805
  const message = e.data || e;
767
- if (message.src === src2) {
806
+ if (message.cacheKey === cacheKey) {
768
807
  if (message.error) {
769
808
  reject(new Error(message.error));
770
809
  } else {
@@ -775,12 +814,17 @@ var parseWithWorker = (src2) => {
775
814
  }
776
815
  };
777
816
  worker.addEventListener("message", handler);
778
- worker.postMessage({ src: src2, type: "parse" });
817
+ worker.postMessage({
818
+ src: src2,
819
+ cacheKey,
820
+ requestInit: workerRequestInit,
821
+ type: "parse"
822
+ });
779
823
  });
780
824
  return {
781
825
  prom,
782
826
  cancel: () => {
783
- worker.postMessage({ src: src2, type: "cancel" });
827
+ worker.postMessage({ cacheKey, type: "cancel" });
784
828
  worker.removeEventListener("message", handler);
785
829
  worker.terminate();
786
830
  }
@@ -799,26 +843,36 @@ var resolveGifSource = (src2) => {
799
843
  var calcDuration = (parsed) => {
800
844
  return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
801
845
  };
802
- var getGifDurationInSeconds = async (src2) => {
846
+ var getGifDurationInSeconds = async (src2, options) => {
803
847
  const resolvedSrc = resolveGifSource(src2);
804
- const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
848
+ const cacheKey = getGifCacheKey({
849
+ resolvedSrc,
850
+ requestInit: options?.requestInit
851
+ });
852
+ const inCache = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
805
853
  if (inCache) {
806
854
  return calcDuration(inCache);
807
855
  }
808
856
  if (getRemotionEnvironment().isRendering) {
809
- const renderingParsed = parseWithWorker(resolvedSrc);
857
+ const renderingParsed = parseWithWorker({
858
+ src: resolvedSrc,
859
+ cacheKey,
860
+ requestInit: options?.requestInit
861
+ });
810
862
  const resolved = await renderingParsed.prom;
811
- volatileGifCache.set(resolvedSrc, resolved);
863
+ volatileGifCache.set(cacheKey, resolved);
812
864
  return calcDuration(resolved);
813
865
  }
814
866
  const parsed = await parseGif({
815
867
  src: resolvedSrc,
816
- controller: new AbortController
868
+ controller: new AbortController,
869
+ requestInit: options?.requestInit
817
870
  });
818
- volatileGifCache.set(resolvedSrc, parsed);
871
+ volatileGifCache.set(cacheKey, parsed);
819
872
  return calcDuration(parsed);
820
873
  };
821
874
  // src/Gif.tsx
875
+ import React from "react";
822
876
  import {
823
877
  Internals as Internals3,
824
878
  Sequence,
@@ -832,6 +886,7 @@ import { forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2,
832
886
  // src/canvas.tsx
833
887
  import {
834
888
  forwardRef,
889
+ useCallback as useCallback2,
835
890
  useEffect as useEffect2,
836
891
  useImperativeHandle,
837
892
  useMemo as useMemo2,
@@ -964,7 +1019,17 @@ var makeCanvas = () => {
964
1019
  canvas.height = 0;
965
1020
  return ctx;
966
1021
  };
967
- var Canvas = forwardRef(({ index, frames, width, height, fit, className, style, effects }, ref) => {
1022
+ var Canvas = forwardRef(({
1023
+ index,
1024
+ frames,
1025
+ width,
1026
+ height,
1027
+ fit,
1028
+ className,
1029
+ style,
1030
+ effects,
1031
+ refForOutline
1032
+ }, ref) => {
968
1033
  const canvasRef = useRef(null);
969
1034
  const [tempCtx] = useState2(() => {
970
1035
  return makeCanvas();
@@ -987,6 +1052,12 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
987
1052
  useImperativeHandle(ref, () => {
988
1053
  return canvasRef.current;
989
1054
  }, []);
1055
+ const canvasCallbackRef = useCallback2((canvas) => {
1056
+ canvasRef.current = canvas;
1057
+ if (refForOutline) {
1058
+ refForOutline.current = canvas;
1059
+ }
1060
+ }, [refForOutline]);
990
1061
  useEffect2(() => {
991
1062
  if (!size) {
992
1063
  return;
@@ -1088,7 +1159,7 @@ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style,
1088
1159
  cancelRender
1089
1160
  ]);
1090
1161
  return /* @__PURE__ */ jsx("canvas", {
1091
- ref: canvasRef,
1162
+ ref: canvasCallbackRef,
1092
1163
  className,
1093
1164
  style,
1094
1165
  width: width ?? size?.width,
@@ -1150,12 +1221,17 @@ var GifForDevelopment = forwardRef2(({
1150
1221
  playbackRate = 1,
1151
1222
  onLoad,
1152
1223
  fit = "fill",
1224
+ requestInit,
1153
1225
  effects,
1226
+ refForOutline,
1154
1227
  ...props
1155
1228
  }, ref) => {
1156
1229
  const resolvedSrc = resolveGifSource(src2);
1230
+ const requestInitRef = useRef2(requestInit);
1231
+ requestInitRef.current = requestInit;
1232
+ const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
1157
1233
  const [state, update] = useState3(() => {
1158
- const parsedGif = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
1234
+ const parsedGif = volatileGifCache.get(cacheKey) ?? manuallyManagedGifCache.get(cacheKey);
1159
1235
  if (parsedGif === undefined) {
1160
1236
  return {
1161
1237
  delays: [],
@@ -1174,11 +1250,15 @@ var GifForDevelopment = forwardRef2(({
1174
1250
  useEffect3(() => {
1175
1251
  let done = false;
1176
1252
  let aborted = false;
1177
- const { prom, cancel } = parseWithWorker(resolvedSrc);
1253
+ const { prom, cancel } = parseWithWorker({
1254
+ src: resolvedSrc,
1255
+ cacheKey,
1256
+ requestInit: requestInitRef.current
1257
+ });
1178
1258
  prom.then((parsed) => {
1179
1259
  currentOnLoad.current?.(parsed);
1180
1260
  update(parsed);
1181
- volatileGifCache.set(resolvedSrc, parsed);
1261
+ volatileGifCache.set(cacheKey, parsed);
1182
1262
  done = true;
1183
1263
  }).catch((err) => {
1184
1264
  if (aborted) {
@@ -1196,7 +1276,7 @@ var GifForDevelopment = forwardRef2(({
1196
1276
  cancel();
1197
1277
  }
1198
1278
  };
1199
- }, [resolvedSrc]);
1279
+ }, [cacheKey, resolvedSrc]);
1200
1280
  if (error) {
1201
1281
  console.error(error.stack);
1202
1282
  if (isCorsError(error)) {
@@ -1219,6 +1299,7 @@ var GifForDevelopment = forwardRef2(({
1219
1299
  width,
1220
1300
  height,
1221
1301
  effects,
1302
+ refForOutline,
1222
1303
  ...props,
1223
1304
  ref
1224
1305
  });
@@ -1238,13 +1319,17 @@ var GifForRendering = forwardRef3(({
1238
1319
  playbackRate = 1,
1239
1320
  fit = "fill",
1240
1321
  delayRenderTimeoutInMilliseconds,
1322
+ requestInit,
1241
1323
  effects,
1242
1324
  ...props
1243
1325
  }, ref) => {
1244
1326
  const resolvedSrc = resolveGifSource(src2);
1327
+ const requestInitRef = useRef3(requestInit);
1328
+ requestInitRef.current = requestInit;
1329
+ const cacheKey = getGifCacheKey({ resolvedSrc, requestInit });
1245
1330
  const { delayRender, continueRender } = useDelayRender2();
1246
1331
  const [state, update] = useState4(() => {
1247
- const parsedGif = volatileGifCache.get(resolvedSrc);
1332
+ const parsedGif = volatileGifCache.get(cacheKey);
1248
1333
  if (parsedGif === undefined) {
1249
1334
  return {
1250
1335
  delays: [],
@@ -1283,11 +1368,15 @@ var GifForRendering = forwardRef3(({
1283
1368
  });
1284
1369
  Internals2.Log.verbose({ logLevel, tag: null }, "Loading GIF with source", resolvedSrc);
1285
1370
  const time = Date.now();
1286
- parseGif({ controller, src: resolvedSrc }).then((parsed) => {
1371
+ parseGif({
1372
+ controller,
1373
+ src: resolvedSrc,
1374
+ requestInit: requestInitRef.current
1375
+ }).then((parsed) => {
1287
1376
  Internals2.Log.verbose({ logLevel, tag: null }, "Parsed GIF in", Date.now() - time, "ms");
1288
1377
  currentOnLoad.current?.(parsed);
1289
1378
  update(parsed);
1290
- volatileGifCache.set(resolvedSrc, parsed);
1379
+ volatileGifCache.set(cacheKey, parsed);
1291
1380
  done = true;
1292
1381
  continueRender(newHandle);
1293
1382
  continueRender(renderHandle);
@@ -1314,6 +1403,7 @@ var GifForRendering = forwardRef3(({
1314
1403
  }, [
1315
1404
  renderHandle,
1316
1405
  logLevel,
1406
+ cacheKey,
1317
1407
  resolvedSrc,
1318
1408
  delayRender,
1319
1409
  continueRender,
@@ -1347,16 +1437,22 @@ var {
1347
1437
  addSequenceStackTraces,
1348
1438
  useMemoizedEffectDefinitions,
1349
1439
  useMemoizedEffects,
1350
- wrapInSchema
1440
+ wrapInSchema,
1441
+ durationInFramesField,
1442
+ fromField
1351
1443
  } = Internals3;
1352
1444
  var gifSchema = {
1445
+ durationInFrames: durationInFramesField,
1446
+ from: fromField,
1353
1447
  playbackRate: {
1354
1448
  type: "number",
1355
1449
  min: 0,
1356
1450
  max: 10,
1357
1451
  step: 0.1,
1358
1452
  default: 1,
1359
- description: "Playback Rate"
1453
+ description: "Playback Rate",
1454
+ hiddenFromList: false,
1455
+ keyframable: false
1360
1456
  },
1361
1457
  ...Internals3.sequenceVisualStyleSchema,
1362
1458
  hidden: Internals3.hiddenField
@@ -1372,6 +1468,7 @@ var GifInner = ({
1372
1468
  loopBehavior,
1373
1469
  id,
1374
1470
  delayRenderTimeoutInMilliseconds,
1471
+ requestInit,
1375
1472
  durationInFrames,
1376
1473
  style,
1377
1474
  _experimentalControls: controls,
@@ -1382,6 +1479,7 @@ var GifInner = ({
1382
1479
  const env = useRemotionEnvironment();
1383
1480
  const { durationInFrames: videoDuration } = useVideoConfig2();
1384
1481
  const resolvedDuration = durationInFrames ?? videoDuration;
1482
+ const refForOutline = React.useRef(null);
1385
1483
  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
1386
1484
  const memoizedEffects = useMemoizedEffects({
1387
1485
  effects,
@@ -1398,6 +1496,7 @@ var GifInner = ({
1398
1496
  loopBehavior,
1399
1497
  id,
1400
1498
  delayRenderTimeoutInMilliseconds,
1499
+ requestInit,
1401
1500
  style,
1402
1501
  effects: memoizedEffects
1403
1502
  };
@@ -1406,7 +1505,8 @@ var GifInner = ({
1406
1505
  ref
1407
1506
  }) : /* @__PURE__ */ jsx4(GifForDevelopment, {
1408
1507
  ...gifProps,
1409
- ref
1508
+ ref,
1509
+ refForOutline
1410
1510
  });
1411
1511
  return /* @__PURE__ */ jsx4(Sequence, {
1412
1512
  layout: "none",
@@ -1416,32 +1516,45 @@ var GifInner = ({
1416
1516
  _experimentalControls: controls,
1417
1517
  _remotionInternalEffects: memoizedEffectDefinitions,
1418
1518
  ...sequenceProps,
1519
+ _remotionInternalRefForOutline: refForOutline,
1419
1520
  children: inner
1420
1521
  });
1421
1522
  };
1422
- var Gif = wrapInSchema(GifInner, gifSchema);
1523
+ var Gif = wrapInSchema({
1524
+ Component: GifInner,
1525
+ schema: gifSchema,
1526
+ supportsEffects: true
1527
+ });
1423
1528
  Gif.displayName = "Gif";
1424
1529
  addSequenceStackTraces(Gif);
1425
1530
  // src/preload-gif.ts
1426
- var preloadGif = (src2) => {
1531
+ var preloadGif = (src2, options) => {
1427
1532
  const resolvedSrc = resolveGifSource(src2);
1428
- if (volatileGifCache.has(resolvedSrc)) {
1533
+ const cacheKey = getGifCacheKey({
1534
+ resolvedSrc,
1535
+ requestInit: options?.requestInit
1536
+ });
1537
+ if (volatileGifCache.has(cacheKey)) {
1429
1538
  return {
1430
1539
  waitUntilDone: () => Promise.resolve(),
1431
- free: () => volatileGifCache.delete(resolvedSrc)
1540
+ free: () => volatileGifCache.delete(cacheKey)
1432
1541
  };
1433
1542
  }
1434
- if (manuallyManagedGifCache.has(resolvedSrc)) {
1543
+ if (manuallyManagedGifCache.has(cacheKey)) {
1435
1544
  return {
1436
1545
  waitUntilDone: () => Promise.resolve(),
1437
- free: () => manuallyManagedGifCache.delete(resolvedSrc)
1546
+ free: () => manuallyManagedGifCache.delete(cacheKey)
1438
1547
  };
1439
1548
  }
1440
- const { prom, cancel } = parseWithWorker(resolvedSrc);
1549
+ const { prom, cancel } = parseWithWorker({
1550
+ src: resolvedSrc,
1551
+ cacheKey,
1552
+ requestInit: options?.requestInit
1553
+ });
1441
1554
  let deleted = false;
1442
1555
  prom.then((p) => {
1443
1556
  if (!deleted) {
1444
- manuallyManagedGifCache.set(resolvedSrc, p);
1557
+ manuallyManagedGifCache.set(cacheKey, p);
1445
1558
  }
1446
1559
  });
1447
1560
  return {
@@ -1451,7 +1564,7 @@ var preloadGif = (src2) => {
1451
1564
  free: () => {
1452
1565
  cancel();
1453
1566
  deleted = true;
1454
- manuallyManagedGifCache.delete(resolvedSrc);
1567
+ manuallyManagedGifCache.delete(cacheKey);
1455
1568
  }
1456
1569
  };
1457
1570
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/gif"
4
4
  },
5
5
  "name": "@remotion/gif",
6
- "version": "4.0.470",
6
+ "version": "4.0.472",
7
7
  "description": "Embed GIFs in a Remotion video",
8
8
  "bugs": {
9
9
  "url": "https://github.com/remotion-dev/remotion/issues"
@@ -17,6 +17,7 @@
17
17
  "formatting": "oxfmt src --check",
18
18
  "format": "oxfmt src",
19
19
  "lint": "eslint src",
20
+ "test": "bun test src/test",
20
21
  "make": "tsgo -d && node build.mjs && bun --env-file=../.env.bundle bundle.ts"
21
22
  },
22
23
  "exports": {
@@ -29,14 +30,15 @@
29
30
  }
30
31
  },
31
32
  "dependencies": {
32
- "remotion": "4.0.470"
33
+ "remotion": "4.0.472"
33
34
  },
34
35
  "devDependencies": {
36
+ "@testing-library/react": "16.1.0",
35
37
  "esbuild": "0.28.0",
36
38
  "react": "19.2.3",
37
39
  "react-dom": "19.2.3",
38
40
  "webpack": "5.105.0",
39
- "@remotion/eslint-config-internal": "4.0.470",
41
+ "@remotion/eslint-config-internal": "4.0.472",
40
42
  "eslint": "9.19.0",
41
43
  "@typescript/native-preview": "7.0.0-dev.20260217.1"
42
44
  },