@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.
- package/.turbo/turbo-make.log +4 -0
- package/dist/cjs/Gif.d.ts +0 -1
- package/dist/cjs/GifForDevelopment.d.ts +0 -1
- package/dist/cjs/GifForRendering.d.ts +0 -1
- package/dist/cjs/canvas.d.ts +0 -1
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/js-binary-schema-parser/gif.d.ts +2 -2
- package/dist/cjs/parse-generate.d.ts +1 -1
- package/dist/cjs/props.d.ts +0 -1
- package/dist/cjs/useCurrentGifIndex.js +1 -2
- package/dist/esm/index.mjs +209 -207
- package/package.json +3 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/Gif.d.ts +0 -7
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/Gif.js +0 -16
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForDevelopment.d.ts +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForDevelopment.js +0 -82
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForRendering.d.ts +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForRendering.js +0 -86
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/canvas.d.ts +0 -13
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/canvas.js +0 -93
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/get-gif-duration-in-seconds.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/get-gif-duration-in-seconds.js +0 -30
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gif-cache.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gif-cache.js +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/deinterlace.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/deinterlace.js +0 -22
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/index.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/index.js +0 -50
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/lzw.d.ts +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/lzw.js +0 -115
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/types.d.ts +0 -96
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/gifuct/types.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/index.d.ts +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/index.js +0 -3
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/is-cors-error.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/is-cors-error.js +0 -9
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/gif.d.ts +0 -51
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/gif.js +0 -155
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/parser.d.ts +0 -9
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/parser.js +0 -48
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/uint8-parser.d.ts +0 -17
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/js-binary-schema-parser/uint8-parser.js +0 -67
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/lru/index.d.ts +0 -101
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/lru/index.js +0 -254
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parse-generate.d.ts +0 -18
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parse-generate.js +0 -110
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parser/decompress-frames.d.ts +0 -2
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/parser/decompress-frames.js +0 -12
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/preload-gif.d.ts +0 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/preload-gif.js +0 -37
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/props.d.ts +0 -26
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/props.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/react-tools.d.ts +0 -9
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/react-tools.js +0 -35
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/resolve-gif-source.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/resolve-gif-source.js +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/use-element-size.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/use-element-size.js +0 -68
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/useCurrentGifIndex.d.ts +0 -6
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/useCurrentGifIndex.js +0 -32
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/index.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/index.js +0 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/source.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/source.js +0 -4
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/worker.d.ts +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/worker/worker.js +0 -37
- package/.turbo/turbo-build.log +0 -4
package/dist/cjs/Gif.d.ts
CHANGED
package/dist/cjs/canvas.d.ts
CHANGED
package/dist/cjs/index.d.ts
CHANGED
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.
|
|
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:
|
|
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:
|
|
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
|
})[];
|
package/dist/cjs/props.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useCurrentGifIndex =
|
|
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;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,182 +1,6 @@
|
|
|
1
|
-
// src/
|
|
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 =
|
|
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.
|
|
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.
|
|
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
|
-
"
|
|
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
|
-
});
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/gif/dist/esm/GifForDevelopment.js
DELETED
|
@@ -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
|
-
});
|