@remotion/gif 4.0.213 → 4.0.215
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 +230 -236
- package/package.json +3 -3
- package/.turbo/turbo-build.log +0 -4
- package/.turbo/turbo-formatting.log +0 -6
- package/.turbo/turbo-lint.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,181 +1,5 @@
|
|
|
1
|
-
// src/
|
|
2
|
-
import {
|
|
3
|
-
import {getRemotionEnvironment} from "remotion";
|
|
4
|
-
|
|
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
|
-
});
|
|
1
|
+
// src/get-gif-duration-in-seconds.ts
|
|
2
|
+
import { getRemotionEnvironment } from "remotion";
|
|
179
3
|
|
|
180
4
|
// src/lru/index.ts
|
|
181
5
|
class QuickLRU {
|
|
@@ -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)) {
|
|
@@ -816,9 +635,9 @@ var decompressFrames = (parsedGif) => {
|
|
|
816
635
|
};
|
|
817
636
|
|
|
818
637
|
// src/parse-generate.ts
|
|
819
|
-
var validateAndFix = (
|
|
638
|
+
var validateAndFix = (gif) => {
|
|
820
639
|
let currentGce = null;
|
|
821
|
-
for (const frame of
|
|
640
|
+
for (const frame of gif.frames) {
|
|
822
641
|
currentGce = frame.gce ? frame.gce : currentGce;
|
|
823
642
|
if ("image" in frame && !("gce" in frame) && currentGce !== null) {
|
|
824
643
|
frame.gce = currentGce;
|
|
@@ -868,12 +687,12 @@ var parse2 = (src, {
|
|
|
868
687
|
if (!resp.headers.get("Content-Type")?.includes("image/gif"))
|
|
869
688
|
throw Error(`Wrong content type: "${resp.headers.get("Content-Type")}"`);
|
|
870
689
|
return resp.arrayBuffer();
|
|
871
|
-
}).then((buffer) => parseGIF(buffer)).then((
|
|
872
|
-
validateAndFix(
|
|
873
|
-
return
|
|
874
|
-
}).then((
|
|
875
|
-
decompressFrames(
|
|
876
|
-
{ width:
|
|
690
|
+
}).then((buffer) => parseGIF(buffer)).then((gif) => {
|
|
691
|
+
validateAndFix(gif);
|
|
692
|
+
return gif;
|
|
693
|
+
}).then((gif) => Promise.all([
|
|
694
|
+
decompressFrames(gif),
|
|
695
|
+
{ width: gif.lsd.width, height: gif.lsd.height }
|
|
877
696
|
])).then(([frames, options]) => {
|
|
878
697
|
const readyFrames = [];
|
|
879
698
|
const size = options.width * options.height * 4;
|
|
@@ -940,7 +759,7 @@ var parseGif = async ({
|
|
|
940
759
|
return generate(raw);
|
|
941
760
|
};
|
|
942
761
|
var parseWithWorker = (src2) => {
|
|
943
|
-
const
|
|
762
|
+
const worker = makeWorker();
|
|
944
763
|
let handler = null;
|
|
945
764
|
const prom = new Promise((resolve, reject) => {
|
|
946
765
|
handler = (e) => {
|
|
@@ -951,31 +770,236 @@ var parseWithWorker = (src2) => {
|
|
|
951
770
|
} else {
|
|
952
771
|
const data = message.error ? message : generate(message);
|
|
953
772
|
resolve(data);
|
|
954
|
-
|
|
773
|
+
worker.terminate();
|
|
955
774
|
}
|
|
956
775
|
}
|
|
957
776
|
};
|
|
958
|
-
|
|
959
|
-
|
|
777
|
+
worker.addEventListener("message", handler);
|
|
778
|
+
worker.postMessage({ src: src2, type: "parse" });
|
|
960
779
|
});
|
|
961
780
|
return {
|
|
962
781
|
prom,
|
|
963
782
|
cancel: () => {
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
783
|
+
worker.postMessage({ src: src2, type: "cancel" });
|
|
784
|
+
worker.removeEventListener("message", handler);
|
|
785
|
+
worker.terminate();
|
|
967
786
|
}
|
|
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 { jsx } from "react/jsx-runtime";
|
|
895
|
+
var calcArgs = (fit, frameSize, canvasSize) => {
|
|
896
|
+
switch (fit) {
|
|
897
|
+
case "fill": {
|
|
898
|
+
return [
|
|
899
|
+
0,
|
|
900
|
+
0,
|
|
901
|
+
frameSize.width,
|
|
902
|
+
frameSize.height,
|
|
903
|
+
0,
|
|
904
|
+
0,
|
|
905
|
+
canvasSize.width,
|
|
906
|
+
canvasSize.height
|
|
907
|
+
];
|
|
908
|
+
}
|
|
909
|
+
case "contain": {
|
|
910
|
+
const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
|
|
911
|
+
const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
|
|
912
|
+
const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
|
|
913
|
+
return [
|
|
914
|
+
0,
|
|
915
|
+
0,
|
|
916
|
+
frameSize.width,
|
|
917
|
+
frameSize.height,
|
|
918
|
+
centerX,
|
|
919
|
+
centerY,
|
|
920
|
+
frameSize.width * ratio,
|
|
921
|
+
frameSize.height * ratio
|
|
922
|
+
];
|
|
923
|
+
}
|
|
924
|
+
case "cover": {
|
|
925
|
+
const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
|
|
926
|
+
const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
|
|
927
|
+
const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
|
|
928
|
+
return [
|
|
929
|
+
0,
|
|
930
|
+
0,
|
|
931
|
+
frameSize.width,
|
|
932
|
+
frameSize.height,
|
|
933
|
+
centerX,
|
|
934
|
+
centerY,
|
|
935
|
+
frameSize.width * ratio,
|
|
936
|
+
frameSize.height * ratio
|
|
937
|
+
];
|
|
938
|
+
}
|
|
939
|
+
default:
|
|
940
|
+
throw new Error("Unknown fit: " + fit);
|
|
941
|
+
}
|
|
942
|
+
};
|
|
943
|
+
var makeCanvas = () => {
|
|
944
|
+
if (typeof document === "undefined") {
|
|
945
|
+
return null;
|
|
946
|
+
}
|
|
947
|
+
const canvas = document.createElement("canvas");
|
|
948
|
+
const ctx = canvas.getContext("2d");
|
|
949
|
+
canvas.width = 0;
|
|
950
|
+
canvas.height = 0;
|
|
951
|
+
return ctx;
|
|
952
|
+
};
|
|
953
|
+
var Canvas = forwardRef(({ index, frames, width, height, fit, className, style }, ref) => {
|
|
954
|
+
const canvasRef = useRef(null);
|
|
955
|
+
const [tempCtx] = useState2(() => {
|
|
956
|
+
return makeCanvas();
|
|
957
|
+
});
|
|
958
|
+
const size = useElementSize(canvasRef);
|
|
959
|
+
useImperativeHandle(ref, () => {
|
|
960
|
+
return canvasRef.current;
|
|
961
|
+
}, []);
|
|
962
|
+
useEffect2(() => {
|
|
963
|
+
if (!size) {
|
|
964
|
+
return;
|
|
965
|
+
}
|
|
966
|
+
const imageData = frames[index];
|
|
967
|
+
const ctx = canvasRef.current?.getContext("2d");
|
|
968
|
+
if (imageData && tempCtx && ctx) {
|
|
969
|
+
if (tempCtx.canvas.width < imageData.width || tempCtx.canvas.height < imageData.height) {
|
|
970
|
+
tempCtx.canvas.width = imageData.width;
|
|
971
|
+
tempCtx.canvas.height = imageData.height;
|
|
972
|
+
}
|
|
973
|
+
if (size.width > 0 && size.height > 0) {
|
|
974
|
+
ctx.clearRect(0, 0, size.width, size.height);
|
|
975
|
+
tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);
|
|
976
|
+
}
|
|
977
|
+
tempCtx.putImageData(imageData, 0, 0);
|
|
978
|
+
ctx.drawImage(tempCtx.canvas, ...calcArgs(fit, imageData, { width: size.width, height: size.height }));
|
|
979
|
+
}
|
|
980
|
+
}, [index, frames, fit, tempCtx, size]);
|
|
981
|
+
return /* @__PURE__ */ jsx("canvas", {
|
|
982
|
+
ref: canvasRef,
|
|
983
|
+
className,
|
|
984
|
+
style,
|
|
985
|
+
width: width ?? size?.width,
|
|
986
|
+
height: height ?? size?.height
|
|
987
|
+
});
|
|
988
|
+
});
|
|
989
|
+
|
|
990
|
+
// src/is-cors-error.ts
|
|
991
|
+
var isCorsError = (error) => {
|
|
992
|
+
return error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource");
|
|
993
|
+
};
|
|
994
|
+
|
|
971
995
|
// src/resolve-gif-source.ts
|
|
972
996
|
var resolveGifSource = (src2) => {
|
|
973
997
|
return new URL(src2, typeof window === "undefined" ? undefined : window.origin).href;
|
|
974
998
|
};
|
|
975
999
|
|
|
976
1000
|
// src/useCurrentGifIndex.tsx
|
|
977
|
-
import {useMemo as useMemo2} from "react";
|
|
978
|
-
import {useCurrentFrame, useVideoConfig} from "remotion";
|
|
1001
|
+
import { useMemo as useMemo2 } from "react";
|
|
1002
|
+
import { useCurrentFrame, useVideoConfig } from "remotion";
|
|
979
1003
|
function useCurrentGifIndex({
|
|
980
1004
|
delays,
|
|
981
1005
|
loopBehavior,
|
|
@@ -1012,9 +1036,7 @@ function useCurrentGifIndex({
|
|
|
1012
1036
|
}
|
|
1013
1037
|
|
|
1014
1038
|
// src/GifForDevelopment.tsx
|
|
1015
|
-
import {
|
|
1016
|
-
jsx as jsx2
|
|
1017
|
-
} from "react/jsx-runtime";
|
|
1039
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
1018
1040
|
var GifForDevelopment = forwardRef2(({
|
|
1019
1041
|
src: src2,
|
|
1020
1042
|
width,
|
|
@@ -1103,11 +1125,9 @@ var GifForDevelopment = forwardRef2(({
|
|
|
1103
1125
|
});
|
|
1104
1126
|
|
|
1105
1127
|
// src/GifForRendering.tsx
|
|
1106
|
-
import {forwardRef as forwardRef3, useEffect as useEffect4, useRef as useRef3, useState as useState4} from "react";
|
|
1107
|
-
import {continueRender as continueRender2, delayRender as delayRender2} from "remotion";
|
|
1108
|
-
import {
|
|
1109
|
-
jsx as jsx3
|
|
1110
|
-
} from "react/jsx-runtime";
|
|
1128
|
+
import { forwardRef as forwardRef3, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
|
|
1129
|
+
import { continueRender as continueRender2, delayRender as delayRender2 } from "remotion";
|
|
1130
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
1111
1131
|
var GifForRendering = forwardRef3(({
|
|
1112
1132
|
src: src2,
|
|
1113
1133
|
width,
|
|
@@ -1201,11 +1221,9 @@ var GifForRendering = forwardRef3(({
|
|
|
1201
1221
|
});
|
|
1202
1222
|
|
|
1203
1223
|
// src/Gif.tsx
|
|
1204
|
-
import {
|
|
1205
|
-
jsx as jsx4
|
|
1206
|
-
} from "react/jsx-runtime";
|
|
1224
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
1207
1225
|
var Gif = forwardRef4((props, ref) => {
|
|
1208
|
-
const env =
|
|
1226
|
+
const env = getRemotionEnvironment2();
|
|
1209
1227
|
if (env.isRendering) {
|
|
1210
1228
|
return /* @__PURE__ */ jsx4(GifForRendering, {
|
|
1211
1229
|
...props,
|
|
@@ -1217,30 +1235,6 @@ var Gif = forwardRef4((props, ref) => {
|
|
|
1217
1235
|
ref
|
|
1218
1236
|
});
|
|
1219
1237
|
});
|
|
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
1238
|
// src/preload-gif.ts
|
|
1245
1239
|
var preloadGif = (src2) => {
|
|
1246
1240
|
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.215",
|
|
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.215"
|
|
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
|
}
|
package/.turbo/turbo-build.log
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
> @remotion/gif@4.0.211 formatting /Users/jonathanburger/remotion/packages/gif
|
|
3
|
-
> prettier src --check
|
|
4
|
-
|
|
5
|
-
Checking formatting...
|
|
6
|
-
src/canvas.tsx[2K[1Gsrc/get-gif-duration-in-seconds.ts[2K[1Gsrc/gif-cache.ts[2K[1Gsrc/Gif.tsx[2K[1Gsrc/GifForDevelopment.tsx[2K[1Gsrc/GifForRendering.tsx[2K[1Gsrc/gifuct/deinterlace.ts[2K[1Gsrc/gifuct/index.ts[2K[1Gsrc/gifuct/lzw.ts[2K[1Gsrc/gifuct/types.ts[2K[1Gsrc/index.ts[2K[1Gsrc/is-cors-error.ts[2K[1Gsrc/js-binary-schema-parser/gif.ts[2K[1Gsrc/js-binary-schema-parser/parser.ts[2K[1Gsrc/js-binary-schema-parser/uint8-parser.ts[2K[1Gsrc/lru/index.ts[2K[1Gsrc/parse-generate.ts[2K[1Gsrc/parser/decompress-frames.ts[2K[1Gsrc/preload-gif.ts[2K[1Gsrc/props.ts[2K[1Gsrc/react-tools.ts[2K[1Gsrc/resolve-gif-source.ts[2K[1Gsrc/use-element-size.ts[2K[1Gsrc/useCurrentGifIndex.tsx[2K[1Gsrc/worker/index.ts[2K[1Gsrc/worker/source.ts[2K[1Gsrc/worker/worker.ts[2K[1GAll matched files use Prettier code style!
|
package/.turbo/turbo-lint.log
DELETED