@remotion/gif 4.0.212 → 4.0.214

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.
Files changed (68) hide show
  1. package/.turbo/turbo-make.log +4 -0
  2. package/dist/cjs/Gif.d.ts +0 -1
  3. package/dist/cjs/GifForDevelopment.d.ts +0 -1
  4. package/dist/cjs/GifForRendering.d.ts +0 -1
  5. package/dist/cjs/canvas.d.ts +0 -1
  6. package/dist/cjs/index.d.ts +1 -1
  7. package/dist/cjs/index.js +3 -3
  8. package/dist/cjs/js-binary-schema-parser/gif.d.ts +2 -2
  9. package/dist/cjs/parse-generate.d.ts +1 -1
  10. package/dist/cjs/props.d.ts +0 -1
  11. package/dist/cjs/useCurrentGifIndex.js +1 -2
  12. package/dist/esm/index.mjs +209 -207
  13. package/package.json +3 -3
  14. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/Gif.d.ts +0 -7
  15. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/Gif.js +0 -16
  16. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForDevelopment.d.ts +0 -3
  17. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForDevelopment.js +0 -82
  18. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForRendering.d.ts +0 -3
  19. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForRendering.js +0 -86
  20. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/canvas.d.ts +0 -13
  21. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/canvas.js +0 -93
  22. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/get-gif-duration-in-seconds.d.ts +0 -5
  23. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/get-gif-duration-in-seconds.js +0 -30
  24. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gif-cache.d.ts +0 -4
  25. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gif-cache.js +0 -3
  26. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/deinterlace.d.ts +0 -4
  27. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/deinterlace.js +0 -22
  28. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/index.d.ts +0 -4
  29. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/index.js +0 -50
  30. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/lzw.d.ts +0 -5
  31. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/lzw.js +0 -115
  32. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/types.d.ts +0 -96
  33. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/types.js +0 -1
  34. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/index.d.ts +0 -4
  35. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/index.js +0 -3
  36. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/is-cors-error.d.ts +0 -1
  37. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/is-cors-error.js +0 -9
  38. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/gif.d.ts +0 -51
  39. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/gif.js +0 -155
  40. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/parser.d.ts +0 -9
  41. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/parser.js +0 -48
  42. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/uint8-parser.d.ts +0 -17
  43. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/uint8-parser.js +0 -67
  44. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/lru/index.d.ts +0 -101
  45. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/lru/index.js +0 -254
  46. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parse-generate.d.ts +0 -18
  47. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parse-generate.js +0 -110
  48. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parser/decompress-frames.d.ts +0 -2
  49. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parser/decompress-frames.js +0 -12
  50. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/preload-gif.d.ts +0 -8
  51. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/preload-gif.js +0 -37
  52. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/props.d.ts +0 -26
  53. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/props.js +0 -1
  54. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/react-tools.d.ts +0 -9
  55. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/react-tools.js +0 -35
  56. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/resolve-gif-source.d.ts +0 -1
  57. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/resolve-gif-source.js +0 -4
  58. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/use-element-size.d.ts +0 -6
  59. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/use-element-size.js +0 -68
  60. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/useCurrentGifIndex.d.ts +0 -6
  61. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/useCurrentGifIndex.js +0 -32
  62. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/index.d.ts +0 -1
  63. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/index.js +0 -8
  64. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/source.d.ts +0 -1
  65. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/source.js +0 -4
  66. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/worker.d.ts +0 -1
  67. package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/worker.js +0 -37
  68. package/.turbo/turbo-build.log +0 -4
@@ -0,0 +1,4 @@
1
+
2
+ > @remotion/gif@4.0.214 make /Users/jonathanburger/remotion/packages/gif
3
+ > node build.mjs && bun --env-file=../.env.bundle bundle.ts
4
+
package/dist/cjs/Gif.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import type { RemotionGifProps } from './props';
3
2
  /**
4
3
  * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type { RemotionGifProps } from './props';
3
2
  export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import type { RemotionGifProps } from './props';
3
2
  export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import type { GifFillMode } from './props';
3
2
  type Props = {
4
3
  index: number;
@@ -1,4 +1,4 @@
1
- export { Gif } from './Gif';
2
1
  export { getGifDurationInSeconds } from './get-gif-duration-in-seconds';
2
+ export { Gif } from './Gif';
3
3
  export { preloadGif } from './preload-gif';
4
4
  export { GifFillMode, RemotionGifProps } from './props';
package/dist/cjs/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.preloadGif = exports.getGifDurationInSeconds = exports.Gif = void 0;
4
- var Gif_1 = require("./Gif");
5
- Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.Gif; } });
3
+ exports.preloadGif = exports.Gif = exports.getGifDurationInSeconds = void 0;
6
4
  var get_gif_duration_in_seconds_1 = require("./get-gif-duration-in-seconds");
7
5
  Object.defineProperty(exports, "getGifDurationInSeconds", { enumerable: true, get: function () { return get_gif_duration_in_seconds_1.getGifDurationInSeconds; } });
6
+ var Gif_1 = require("./Gif");
7
+ Object.defineProperty(exports, "Gif", { enumerable: true, get: function () { return Gif_1.Gif; } });
8
8
  var preload_gif_1 = require("./preload-gif");
9
9
  Object.defineProperty(exports, "preloadGif", { enumerable: true, get: function () { return preload_gif_1.preloadGif; } });
@@ -1,6 +1,6 @@
1
1
  import type { ParsedGif } from '../gifuct/types';
2
2
  import type { Stream } from './uint8-parser';
3
- export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGif, parseFn: (st: Stream, schema: unknown, result: ParsedGif, parent: ParsedGif) => void) => void) | {
3
+ export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGif, parseFn: (st: Stream, schema: import("./parser").GifSchema, result: ParsedGif, parent: ParsedGif) => void) => void) | {
4
4
  header: ({
5
5
  signature: (stream: Stream) => string;
6
6
  version?: undefined;
@@ -45,7 +45,7 @@ export declare const GIF: (((stream: Stream, result: ParsedGif, parent: ParsedGi
45
45
  header?: undefined;
46
46
  frames?: undefined;
47
47
  } | {
48
- frames: (stream: Stream, result: unknown, parent: unknown, _parse: (st: Stream, schema: unknown, result: unknown, parent: unknown) => void) => unknown[];
48
+ frames: (stream: Stream, result: unknown, parent: unknown, _parse: (st: Stream, schema: import("./parser").GifSchema, result: unknown, parent: unknown) => void) => unknown[];
49
49
  header?: undefined;
50
50
  lsd?: undefined;
51
51
  })[];
@@ -1,6 +1,6 @@
1
1
  import type { GifState } from './props';
2
2
  export declare const parse: (src: string, { signal, }: {
3
- signal: AbortController['signal'];
3
+ signal: AbortController["signal"];
4
4
  }) => Promise<{
5
5
  loaded: boolean;
6
6
  delays: number[];
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export type GifLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
3
2
  export type RemotionGifProps = {
4
3
  src: string;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useCurrentGifIndex = void 0;
3
+ exports.useCurrentGifIndex = useCurrentGifIndex;
4
4
  const react_1 = require("react");
5
5
  const remotion_1 = require("remotion");
6
6
  function useCurrentGifIndex({ delays, loopBehavior, playbackRate, }) {
@@ -33,4 +33,3 @@ function useCurrentGifIndex({ delays, loopBehavior, playbackRate, }) {
33
33
  }
34
34
  return 0;
35
35
  }
36
- exports.useCurrentGifIndex = useCurrentGifIndex;
@@ -1,182 +1,6 @@
1
- // src/Gif.tsx
2
- import {forwardRef as forwardRef4} from "react";
1
+ // src/get-gif-duration-in-seconds.ts
3
2
  import {getRemotionEnvironment} from "remotion";
4
3
 
5
- // src/GifForDevelopment.tsx
6
- import {forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3} from "react";
7
- import {continueRender, delayRender} from "remotion";
8
-
9
- // src/canvas.tsx
10
- import {
11
- forwardRef,
12
- useEffect as useEffect2,
13
- useImperativeHandle,
14
- useRef,
15
- useState as useState2
16
- } from "react";
17
-
18
- // src/use-element-size.ts
19
- import {useCallback, useEffect, useMemo, useState} from "react";
20
- var elementSizeHooks = [];
21
- var useElementSize = (ref) => {
22
- const [size, setSize] = useState(null);
23
- const observer = useMemo(() => {
24
- if (typeof ResizeObserver === "undefined") {
25
- return null;
26
- }
27
- return new ResizeObserver((entries) => {
28
- const { contentRect } = entries[0];
29
- const newSize = entries[0].target.getClientRects();
30
- if (!newSize?.[0]) {
31
- setSize(null);
32
- return;
33
- }
34
- const probableCssParentScale = newSize[0].width / contentRect.width;
35
- const width = newSize[0].width * (1 / probableCssParentScale);
36
- const height = newSize[0].height * (1 / probableCssParentScale);
37
- setSize({
38
- width,
39
- height
40
- });
41
- });
42
- }, []);
43
- const updateSize = useCallback(() => {
44
- if (!ref.current) {
45
- return;
46
- }
47
- const rect = ref.current.getClientRects();
48
- if (!rect[0]) {
49
- setSize(null);
50
- return;
51
- }
52
- setSize({
53
- width: rect[0].width,
54
- height: rect[0].height
55
- });
56
- }, [ref]);
57
- useEffect(() => {
58
- if (!observer) {
59
- return;
60
- }
61
- updateSize();
62
- const { current } = ref;
63
- if (ref.current) {
64
- observer.observe(ref.current);
65
- }
66
- return () => {
67
- if (current) {
68
- observer.unobserve(current);
69
- }
70
- };
71
- }, [observer, ref, updateSize]);
72
- useEffect(() => {
73
- elementSizeHooks.push(updateSize);
74
- return () => {
75
- elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
76
- };
77
- }, [updateSize]);
78
- return size;
79
- };
80
-
81
- // src/canvas.tsx
82
- import {
83
- jsx
84
- } from "react/jsx-runtime";
85
- var calcArgs = (fit, frameSize, canvasSize) => {
86
- switch (fit) {
87
- case "fill": {
88
- return [
89
- 0,
90
- 0,
91
- frameSize.width,
92
- frameSize.height,
93
- 0,
94
- 0,
95
- canvasSize.width,
96
- canvasSize.height
97
- ];
98
- }
99
- case "contain": {
100
- const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
101
- const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
102
- const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
103
- return [
104
- 0,
105
- 0,
106
- frameSize.width,
107
- frameSize.height,
108
- centerX,
109
- centerY,
110
- frameSize.width * ratio,
111
- frameSize.height * ratio
112
- ];
113
- }
114
- case "cover": {
115
- const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
116
- const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
117
- const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
118
- return [
119
- 0,
120
- 0,
121
- frameSize.width,
122
- frameSize.height,
123
- centerX,
124
- centerY,
125
- frameSize.width * ratio,
126
- frameSize.height * ratio
127
- ];
128
- }
129
- default:
130
- throw new Error("Unknown fit: " + fit);
131
- }
132
- };
133
- var makeCanvas = () => {
134
- if (typeof document === "undefined") {
135
- return null;
136
- }
137
- const canvas = document.createElement("canvas");
138
- const ctx = canvas.getContext("2d");
139
- canvas.width = 0;
140
- canvas.height = 0;
141
- return ctx;
142
- };
143
- var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
144
- const canvasRef = useRef(null);
145
- const [tempCtx] = useState2(() => {
146
- return makeCanvas();
147
- });
148
- const size = useElementSize(canvasRef);
149
- useImperativeHandle(ref, () => {
150
- return canvasRef.current;
151
- }, []);
152
- useEffect2(() => {
153
- if (!size) {
154
- return;
155
- }
156
- const imageData = frames[index];
157
- const ctx = canvasRef.current?.getContext("2d");
158
- if (imageData && tempCtx && ctx) {
159
- if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
160
- tempCtx.canvas.width = imageData.width;
161
- tempCtx.canvas.height = imageData.height;
162
- }
163
- if (size.width > 0 && size.height > 0) {
164
- ctx.clearRect(0, 0, size.width, size.height);
165
- tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
166
- }
167
- tempCtx.putImageData(imageData, 0, 0);
168
- ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
169
- }
170
- }, [index, frames, fit, tempCtx, size]);
171
- return /* @__PURE__ */ jsx("canvas", {
172
- ref: canvasRef,
173
- className,
174
- style,
175
- width: width ?? size?.width,
176
- height: height ?? size?.height
177
- });
178
- });
179
-
180
4
  // src/lru/index.ts
181
5
  class QuickLRU {
182
6
  maxAge;
@@ -411,11 +235,6 @@ class QuickLRU {
411
235
  var volatileGifCache = new QuickLRU({ maxSize: 30 });
412
236
  var manuallyManagedGifCache = new Map;
413
237
 
414
- // src/is-cors-error.ts
415
- var isCorsError = (error) => {
416
- return error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource");
417
- };
418
-
419
238
  // src/js-binary-schema-parser/parser.ts
420
239
  var parse = (stream, schema, result = {}, parent = result) => {
421
240
  if (Array.isArray(schema)) {
@@ -968,6 +787,213 @@ var parseWithWorker = (src2) => {
968
787
  };
969
788
  };
970
789
 
790
+ // src/get-gif-duration-in-seconds.ts
791
+ var calcDuration = (parsed) => {
792
+ return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
793
+ };
794
+ var getGifDurationInSeconds = async (src2) => {
795
+ const resolvedSrc = new URL(src2, window.origin).href;
796
+ const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
797
+ if (inCache) {
798
+ return calcDuration(inCache);
799
+ }
800
+ if (getRemotionEnvironment().isRendering) {
801
+ const renderingParsed = parseWithWorker(resolvedSrc);
802
+ const resolved = await renderingParsed.prom;
803
+ volatileGifCache.set(resolvedSrc, resolved);
804
+ return calcDuration(resolved);
805
+ }
806
+ const parsed = await parseGif({
807
+ src: resolvedSrc,
808
+ controller: new AbortController
809
+ });
810
+ volatileGifCache.set(resolvedSrc, parsed);
811
+ return calcDuration(parsed);
812
+ };
813
+ // src/Gif.tsx
814
+ import {forwardRef as forwardRef4} from "react";
815
+ import {getRemotionEnvironment as getRemotionEnvironment2} from "remotion";
816
+
817
+ // src/GifForDevelopment.tsx
818
+ import {forwardRef as forwardRef2, useEffect as useEffect3, useRef as useRef2, useState as useState3} from "react";
819
+ import {continueRender, delayRender} from "remotion";
820
+
821
+ // src/canvas.tsx
822
+ import {
823
+ forwardRef,
824
+ useEffect as useEffect2,
825
+ useImperativeHandle,
826
+ useRef,
827
+ useState as useState2
828
+ } from "react";
829
+
830
+ // src/use-element-size.ts
831
+ import {useCallback, useEffect, useMemo, useState} from "react";
832
+ var elementSizeHooks = [];
833
+ var useElementSize = (ref) => {
834
+ const [size, setSize] = useState(null);
835
+ const observer = useMemo(() => {
836
+ if (typeof ResizeObserver === "undefined") {
837
+ return null;
838
+ }
839
+ return new ResizeObserver((entries) => {
840
+ const { contentRect } = entries[0];
841
+ const newSize = entries[0].target.getClientRects();
842
+ if (!newSize?.[0]) {
843
+ setSize(null);
844
+ return;
845
+ }
846
+ const probableCssParentScale = newSize[0].width / contentRect.width;
847
+ const width = newSize[0].width * (1 / probableCssParentScale);
848
+ const height = newSize[0].height * (1 / probableCssParentScale);
849
+ setSize({
850
+ width,
851
+ height
852
+ });
853
+ });
854
+ }, []);
855
+ const updateSize = useCallback(() => {
856
+ if (!ref.current) {
857
+ return;
858
+ }
859
+ const rect = ref.current.getClientRects();
860
+ if (!rect[0]) {
861
+ setSize(null);
862
+ return;
863
+ }
864
+ setSize({
865
+ width: rect[0].width,
866
+ height: rect[0].height
867
+ });
868
+ }, [ref]);
869
+ useEffect(() => {
870
+ if (!observer) {
871
+ return;
872
+ }
873
+ updateSize();
874
+ const { current } = ref;
875
+ if (ref.current) {
876
+ observer.observe(ref.current);
877
+ }
878
+ return () => {
879
+ if (current) {
880
+ observer.unobserve(current);
881
+ }
882
+ };
883
+ }, [observer, ref, updateSize]);
884
+ useEffect(() => {
885
+ elementSizeHooks.push(updateSize);
886
+ return () => {
887
+ elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
888
+ };
889
+ }, [updateSize]);
890
+ return size;
891
+ };
892
+
893
+ // src/canvas.tsx
894
+ import {
895
+ jsx
896
+ } from "react/jsx-runtime";
897
+ var calcArgs = (fit, frameSize, canvasSize) => {
898
+ switch (fit) {
899
+ case "fill": {
900
+ return [
901
+ 0,
902
+ 0,
903
+ frameSize.width,
904
+ frameSize.height,
905
+ 0,
906
+ 0,
907
+ canvasSize.width,
908
+ canvasSize.height
909
+ ];
910
+ }
911
+ case "contain": {
912
+ const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
913
+ const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
914
+ const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
915
+ return [
916
+ 0,
917
+ 0,
918
+ frameSize.width,
919
+ frameSize.height,
920
+ centerX,
921
+ centerY,
922
+ frameSize.width * ratio,
923
+ frameSize.height * ratio
924
+ ];
925
+ }
926
+ case "cover": {
927
+ const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
928
+ const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
929
+ const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
930
+ return [
931
+ 0,
932
+ 0,
933
+ frameSize.width,
934
+ frameSize.height,
935
+ centerX,
936
+ centerY,
937
+ frameSize.width * ratio,
938
+ frameSize.height * ratio
939
+ ];
940
+ }
941
+ default:
942
+ throw new Error("Unknown fit: " + fit);
943
+ }
944
+ };
945
+ var makeCanvas = () => {
946
+ if (typeof document === "undefined") {
947
+ return null;
948
+ }
949
+ const canvas = document.createElement("canvas");
950
+ const ctx = canvas.getContext("2d");
951
+ canvas.width = 0;
952
+ canvas.height = 0;
953
+ return ctx;
954
+ };
955
+ var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
956
+ const canvasRef = useRef(null);
957
+ const [tempCtx] = useState2(() => {
958
+ return makeCanvas();
959
+ });
960
+ const size = useElementSize(canvasRef);
961
+ useImperativeHandle(ref, () => {
962
+ return canvasRef.current;
963
+ }, []);
964
+ useEffect2(() => {
965
+ if (!size) {
966
+ return;
967
+ }
968
+ const imageData = frames[index];
969
+ const ctx = canvasRef.current?.getContext("2d");
970
+ if (imageData && tempCtx && ctx) {
971
+ if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
972
+ tempCtx.canvas.width = imageData.width;
973
+ tempCtx.canvas.height = imageData.height;
974
+ }
975
+ if (size.width > 0 && size.height > 0) {
976
+ ctx.clearRect(0, 0, size.width, size.height);
977
+ tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
978
+ }
979
+ tempCtx.putImageData(imageData, 0, 0);
980
+ ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
981
+ }
982
+ }, [index, frames, fit, tempCtx, size]);
983
+ return /* @__PURE__ */ jsx("canvas", {
984
+ ref: canvasRef,
985
+ className,
986
+ style,
987
+ width: width ?? size?.width,
988
+ height: height ?? size?.height
989
+ });
990
+ });
991
+
992
+ // src/is-cors-error.ts
993
+ var isCorsError = (error) => {
994
+ return error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource");
995
+ };
996
+
971
997
  // src/resolve-gif-source.ts
972
998
  var resolveGifSource = (src2) => {
973
999
  return new URL(src2, typeof window === "undefined" ? undefined : window.origin).href;
@@ -1205,7 +1231,7 @@ import {
1205
1231
  jsx as jsx4
1206
1232
  } from "react/jsx-runtime";
1207
1233
  var Gif = forwardRef4((props, ref) => {
1208
- const env = getRemotionEnvironment();
1234
+ const env = getRemotionEnvironment2();
1209
1235
  if (env.isRendering) {
1210
1236
  return /* @__PURE__ */ jsx4(GifForRendering, {
1211
1237
  ...props,
@@ -1217,30 +1243,6 @@ var Gif = forwardRef4((props, ref) => {
1217
1243
  ref
1218
1244
  });
1219
1245
  });
1220
- // src/get-gif-duration-in-seconds.ts
1221
- import {getRemotionEnvironment as getRemotionEnvironment2} from "remotion";
1222
- var calcDuration = (parsed) => {
1223
- return parsed.delays.reduce((sum, delay) => sum + delay, 0) / 1000;
1224
- };
1225
- var getGifDurationInSeconds = async (src2) => {
1226
- const resolvedSrc = new URL(src2, window.origin).href;
1227
- const inCache = volatileGifCache.get(resolvedSrc) ?? manuallyManagedGifCache.get(resolvedSrc);
1228
- if (inCache) {
1229
- return calcDuration(inCache);
1230
- }
1231
- if (getRemotionEnvironment2().isRendering) {
1232
- const renderingParsed = parseWithWorker(resolvedSrc);
1233
- const resolved = await renderingParsed.prom;
1234
- volatileGifCache.set(resolvedSrc, resolved);
1235
- return calcDuration(resolved);
1236
- }
1237
- const parsed = await parseGif({
1238
- src: resolvedSrc,
1239
- controller: new AbortController
1240
- });
1241
- volatileGifCache.set(resolvedSrc, parsed);
1242
- return calcDuration(parsed);
1243
- };
1244
1246
  // src/preload-gif.ts
1245
1247
  var preloadGif = (src2) => {
1246
1248
  const resolvedSrc = resolveGifSource(src2);
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.212",
6
+ "version": "4.0.214",
7
7
  "description": "Embed GIFs in a Remotion video",
8
8
  "sideEffects": false,
9
9
  "bugs": {
@@ -24,7 +24,7 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "remotion": "4.0.212"
27
+ "remotion": "4.0.214"
28
28
  },
29
29
  "devDependencies": {
30
30
  "esbuild": "0.18.6",
@@ -50,6 +50,6 @@
50
50
  "scripts": {
51
51
  "formatting": "prettier src --check",
52
52
  "lint": "eslint src --ext ts,tsx",
53
- "build": "node build.mjs && bun --env-file=../.env.bundle bundle.ts"
53
+ "make": "node build.mjs && bun --env-file=../.env.bundle bundle.ts"
54
54
  }
55
55
  }
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import type { RemotionGifProps } from './props';
3
- /**
4
- * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
5
- * @see [Documentation](https://www.remotion.dev/docs/gif/gif)
6
- */
7
- export declare const Gif: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
@@ -1,16 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import { getRemotionEnvironment } from 'remotion';
4
- import { GifForDevelopment } from './GifForDevelopment';
5
- import { GifForRendering } from './GifForRendering';
6
- /**
7
- * @description Displays a GIF that synchronizes with Remotions useCurrentFrame().
8
- * @see [Documentation](https://www.remotion.dev/docs/gif/gif)
9
- */
10
- export const Gif = forwardRef((props, ref) => {
11
- const env = getRemotionEnvironment();
12
- if (env.isRendering) {
13
- return _jsx(GifForRendering, { ...props, ref: ref });
14
- }
15
- return _jsx(GifForDevelopment, { ...props, ref: ref });
16
- });
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import type { RemotionGifProps } from './props';
3
- export declare const GifForDevelopment: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;
@@ -1,82 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef, useEffect, useRef, useState } from 'react';
3
- import { continueRender, delayRender } from 'remotion';
4
- import { Canvas } from './canvas';
5
- import { manuallyManagedGifCache, volatileGifCache } from './gif-cache';
6
- import { isCorsError } from './is-cors-error';
7
- import { parseWithWorker } from './react-tools';
8
- import { resolveGifSource } from './resolve-gif-source';
9
- import { useCurrentGifIndex } from './useCurrentGifIndex';
10
- export const GifForDevelopment = forwardRef(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', ...props }, ref) => {
11
- const resolvedSrc = resolveGifSource(src);
12
- const [state, update] = useState(() => {
13
- var _a;
14
- const parsedGif = (_a = volatileGifCache.get(resolvedSrc)) !== null && _a !== void 0 ? _a : manuallyManagedGifCache.get(resolvedSrc);
15
- if (parsedGif === undefined) {
16
- return {
17
- delays: [],
18
- frames: [],
19
- width: 0,
20
- height: 0,
21
- };
22
- }
23
- return parsedGif;
24
- });
25
- const [error, setError] = useState(null);
26
- const [id] = useState(() => delayRender(`Rendering <Gif/> with src="${resolvedSrc}"`));
27
- const currentOnLoad = useRef(onLoad);
28
- const currentOnError = useRef(onError);
29
- currentOnLoad.current = onLoad;
30
- currentOnError.current = onError;
31
- useEffect(() => {
32
- let done = false;
33
- let aborted = false;
34
- const { prom, cancel } = parseWithWorker(resolvedSrc);
35
- const newHandle = delayRender('Loading <Gif /> with src=' + resolvedSrc);
36
- prom
37
- .then((parsed) => {
38
- var _a;
39
- (_a = currentOnLoad.current) === null || _a === void 0 ? void 0 : _a.call(currentOnLoad, parsed);
40
- update(parsed);
41
- volatileGifCache.set(resolvedSrc, parsed);
42
- done = true;
43
- continueRender(newHandle);
44
- continueRender(id);
45
- })
46
- .catch((err) => {
47
- if (aborted) {
48
- continueRender(newHandle);
49
- return;
50
- }
51
- if (currentOnError.current) {
52
- currentOnError.current(err);
53
- }
54
- else {
55
- setError(err);
56
- }
57
- });
58
- return () => {
59
- if (!done) {
60
- aborted = true;
61
- cancel();
62
- }
63
- continueRender(newHandle);
64
- };
65
- }, [id, resolvedSrc]);
66
- if (error) {
67
- console.error(error.stack);
68
- if (isCorsError(error)) {
69
- throw new Error(`Failed to render GIF with source ${src}: "${error.message}". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`);
70
- }
71
- throw new Error(`Failed to render GIF with source ${src}: "${error.message}".`);
72
- }
73
- const index = useCurrentGifIndex({
74
- delays: state.delays,
75
- loopBehavior,
76
- playbackRate,
77
- });
78
- if (index === -1) {
79
- return null;
80
- }
81
- return (_jsx(Canvas, { fit: fit, index: index, frames: state.frames, width: width, height: height, ...props, ref: ref }));
82
- });
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import type { RemotionGifProps } from './props';
3
- export declare const GifForRendering: import("react").ForwardRefExoticComponent<RemotionGifProps & import("react").RefAttributes<HTMLCanvasElement>>;