remotion 4.0.485 → 4.0.486
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/LICENSE.md +49 -0
- package/dist/cjs/Folder.d.ts +2 -2
- package/dist/cjs/Interactive.d.ts +6 -0
- package/dist/cjs/ResolveCompositionConfig.d.ts +1 -0
- package/dist/cjs/canvas-image/CanvasImage.js +42 -20
- package/dist/cjs/interactivity-schema.d.ts +13 -1
- package/dist/cjs/interactivity-schema.js +6 -0
- package/dist/cjs/internals.d.ts +7 -0
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/index.mjs +73 -38
- package/dist/esm/version.mjs +1 -1
- package/package.json +3 -3
package/LICENSE.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# Remotion License
|
|
2
|
+
|
|
3
|
+
In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
|
|
8
|
+
|
|
9
|
+
- [Free License](#free-license)
|
|
10
|
+
- [Company License](#company-license)
|
|
11
|
+
|
|
12
|
+
## Free License
|
|
13
|
+
|
|
14
|
+
Copyright © 2026 [Remotion](https://www.remotion.dev)
|
|
15
|
+
|
|
16
|
+
### Eligibility
|
|
17
|
+
|
|
18
|
+
You are eligible to use Remotion for free if you are:
|
|
19
|
+
|
|
20
|
+
- an individual
|
|
21
|
+
- a for-profit organization with up to 3 employees
|
|
22
|
+
- a non-profit or not-for-profit organization
|
|
23
|
+
- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
|
|
24
|
+
|
|
25
|
+
### Allowed use cases
|
|
26
|
+
|
|
27
|
+
Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
|
|
28
|
+
|
|
29
|
+
### Disallowed use cases
|
|
30
|
+
|
|
31
|
+
It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
|
|
32
|
+
|
|
33
|
+
### Warranty notice
|
|
34
|
+
|
|
35
|
+
The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
|
|
36
|
+
|
|
37
|
+
### Support
|
|
38
|
+
|
|
39
|
+
Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
|
|
40
|
+
|
|
41
|
+
## Company License
|
|
42
|
+
|
|
43
|
+
You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
|
|
44
|
+
|
|
45
|
+
Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
|
|
46
|
+
|
|
47
|
+
### FAQs
|
|
48
|
+
|
|
49
|
+
Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).
|
package/dist/cjs/Folder.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { FC } from 'react';
|
|
1
|
+
import type { FC, ReactNode } from 'react';
|
|
2
2
|
import type { NonceHistory } from './nonce.js';
|
|
3
3
|
export type TFolder = {
|
|
4
4
|
name: string;
|
|
@@ -13,6 +13,6 @@ type FolderContextType = {
|
|
|
13
13
|
export declare const FolderContext: import("react").Context<FolderContextType>;
|
|
14
14
|
export declare const Folder: FC<{
|
|
15
15
|
readonly name: string;
|
|
16
|
-
readonly children
|
|
16
|
+
readonly children?: ReactNode;
|
|
17
17
|
}>;
|
|
18
18
|
export {};
|
|
@@ -94,6 +94,12 @@ export declare const Interactive: {
|
|
|
94
94
|
readonly default: undefined;
|
|
95
95
|
readonly description: "Color";
|
|
96
96
|
};
|
|
97
|
+
readonly 'style.fontFamily': {
|
|
98
|
+
readonly type: "font-family";
|
|
99
|
+
readonly default: undefined;
|
|
100
|
+
readonly description: "Font family";
|
|
101
|
+
readonly keyframable: false;
|
|
102
|
+
};
|
|
97
103
|
readonly 'style.fontSize': {
|
|
98
104
|
readonly type: "number";
|
|
99
105
|
readonly default: undefined;
|
|
@@ -5,6 +5,7 @@ export declare const ResolveCompositionContext: import("react").Context<ResolveC
|
|
|
5
5
|
export declare const resolveCompositionsRef: import("react").RefObject<{
|
|
6
6
|
setCurrentRenderModalComposition: (compositionId: string | null) => void;
|
|
7
7
|
reloadCurrentlySelectedComposition: () => void;
|
|
8
|
+
resolveComposition: (compositionId: string) => Promise<VideoConfig>;
|
|
8
9
|
} | null>;
|
|
9
10
|
type VideoConfigState = {
|
|
10
11
|
type: 'loading';
|
|
@@ -86,6 +86,14 @@ const loadImage = ({ src, signal, }) => {
|
|
|
86
86
|
function exponentialBackoff(errorCount) {
|
|
87
87
|
return 1000 * 2 ** (errorCount - 1);
|
|
88
88
|
}
|
|
89
|
+
const waitForNextFrame = ({ onFrame, }) => {
|
|
90
|
+
if (typeof requestAnimationFrame === 'undefined') {
|
|
91
|
+
onFrame();
|
|
92
|
+
return () => undefined;
|
|
93
|
+
}
|
|
94
|
+
const frame = requestAnimationFrame(onFrame);
|
|
95
|
+
return () => cancelAnimationFrame(frame);
|
|
96
|
+
};
|
|
89
97
|
const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
|
|
90
98
|
var _a;
|
|
91
99
|
const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
|
|
@@ -99,6 +107,17 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
99
107
|
overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
|
|
100
108
|
});
|
|
101
109
|
const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
|
|
110
|
+
const pendingLoadDelayRef = (0, react_1.useRef)(null);
|
|
111
|
+
const continuePendingLoadDelay = (0, react_1.useCallback)(() => {
|
|
112
|
+
const pending = pendingLoadDelayRef.current;
|
|
113
|
+
if (!pending || pending.continued) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
pending.continued = true;
|
|
117
|
+
pending.unblock();
|
|
118
|
+
continueRender(pending.handle);
|
|
119
|
+
pendingLoadDelayRef.current = null;
|
|
120
|
+
}, [continueRender]);
|
|
102
121
|
const sourceCanvas = (0, react_1.useMemo)(() => {
|
|
103
122
|
if (typeof document === 'undefined') {
|
|
104
123
|
return null;
|
|
@@ -117,7 +136,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
117
136
|
ref.current = canvas;
|
|
118
137
|
}
|
|
119
138
|
}, [ref, refForOutline]);
|
|
120
|
-
(0, react_1.
|
|
139
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
121
140
|
const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
|
|
122
141
|
const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
|
|
123
142
|
const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
|
|
@@ -129,17 +148,13 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
129
148
|
: () => undefined;
|
|
130
149
|
const controller = new AbortController();
|
|
131
150
|
let cancelled = false;
|
|
132
|
-
let continued = false;
|
|
133
151
|
let errorCount = 0;
|
|
134
152
|
let timeoutId = null;
|
|
135
153
|
setLoadedImage(null);
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
continued = true;
|
|
141
|
-
unblock();
|
|
142
|
-
continueRender(handle);
|
|
154
|
+
pendingLoadDelayRef.current = {
|
|
155
|
+
handle,
|
|
156
|
+
unblock,
|
|
157
|
+
continued: false,
|
|
143
158
|
};
|
|
144
159
|
const attemptLoad = () => {
|
|
145
160
|
loadImage({ src: actualSrc, signal: controller.signal })
|
|
@@ -148,15 +163,10 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
148
163
|
return;
|
|
149
164
|
}
|
|
150
165
|
setLoadedImage(image);
|
|
151
|
-
})
|
|
152
|
-
.then(() => {
|
|
153
|
-
if (!cancelled) {
|
|
154
|
-
continueRenderOnce();
|
|
155
|
-
}
|
|
156
166
|
})
|
|
157
167
|
.catch((err) => {
|
|
158
168
|
if (err.name === 'AbortError') {
|
|
159
|
-
|
|
169
|
+
continuePendingLoadDelay();
|
|
160
170
|
return;
|
|
161
171
|
}
|
|
162
172
|
errorCount++;
|
|
@@ -172,7 +182,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
172
182
|
}
|
|
173
183
|
else if (onError) {
|
|
174
184
|
onError(err);
|
|
175
|
-
|
|
185
|
+
continuePendingLoadDelay();
|
|
176
186
|
}
|
|
177
187
|
else {
|
|
178
188
|
cancelRender(err);
|
|
@@ -186,12 +196,12 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
186
196
|
clearTimeout(timeoutId);
|
|
187
197
|
}
|
|
188
198
|
controller.abort();
|
|
189
|
-
|
|
199
|
+
continuePendingLoadDelay();
|
|
190
200
|
};
|
|
191
201
|
}, [
|
|
192
202
|
actualSrc,
|
|
193
203
|
cancelRender,
|
|
194
|
-
|
|
204
|
+
continuePendingLoadDelay,
|
|
195
205
|
delayPlayback,
|
|
196
206
|
delayRender,
|
|
197
207
|
delayRenderRetries,
|
|
@@ -202,13 +212,14 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
202
212
|
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
|
|
203
213
|
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
|
|
204
214
|
]);
|
|
205
|
-
(0, react_1.
|
|
215
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
206
216
|
if (!loadedImage || !outputCanvas || !sourceCanvas) {
|
|
207
217
|
return;
|
|
208
218
|
}
|
|
209
219
|
const handle = delayRender(`Applying effects to <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`);
|
|
210
220
|
let cancelled = false;
|
|
211
221
|
let continued = false;
|
|
222
|
+
let cancelWaitForNextFrame = () => undefined;
|
|
212
223
|
const continueRenderOnce = () => {
|
|
213
224
|
if (continued) {
|
|
214
225
|
return;
|
|
@@ -244,7 +255,15 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
244
255
|
})
|
|
245
256
|
.then((completed) => {
|
|
246
257
|
if (completed && !cancelled) {
|
|
247
|
-
|
|
258
|
+
cancelWaitForNextFrame = waitForNextFrame({
|
|
259
|
+
onFrame: () => {
|
|
260
|
+
if (cancelled) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
continueRenderOnce();
|
|
264
|
+
continuePendingLoadDelay();
|
|
265
|
+
},
|
|
266
|
+
});
|
|
248
267
|
}
|
|
249
268
|
})
|
|
250
269
|
.catch((err) => {
|
|
@@ -254,6 +273,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
254
273
|
if (onError) {
|
|
255
274
|
onError(err);
|
|
256
275
|
continueRenderOnce();
|
|
276
|
+
continuePendingLoadDelay();
|
|
257
277
|
}
|
|
258
278
|
else {
|
|
259
279
|
cancelRender(err);
|
|
@@ -261,6 +281,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
261
281
|
});
|
|
262
282
|
return () => {
|
|
263
283
|
cancelled = true;
|
|
284
|
+
cancelWaitForNextFrame();
|
|
264
285
|
continueRenderOnce();
|
|
265
286
|
};
|
|
266
287
|
}, [
|
|
@@ -268,6 +289,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
|
|
|
268
289
|
cancelRender,
|
|
269
290
|
chainState,
|
|
270
291
|
continueRender,
|
|
292
|
+
continuePendingLoadDelay,
|
|
271
293
|
delayRender,
|
|
272
294
|
fit,
|
|
273
295
|
height,
|
|
@@ -88,6 +88,12 @@ export type TextContentFieldSchema = {
|
|
|
88
88
|
description?: string;
|
|
89
89
|
keyframable?: false;
|
|
90
90
|
};
|
|
91
|
+
export type FontFamilyFieldSchema = {
|
|
92
|
+
type: 'font-family';
|
|
93
|
+
default: string | undefined;
|
|
94
|
+
description?: string;
|
|
95
|
+
keyframable?: false;
|
|
96
|
+
};
|
|
91
97
|
export type EnumFieldSchema = {
|
|
92
98
|
type: 'enum';
|
|
93
99
|
default: string;
|
|
@@ -117,7 +123,7 @@ export type ArrayFieldSchema = {
|
|
|
117
123
|
description?: string;
|
|
118
124
|
keyframable?: false;
|
|
119
125
|
};
|
|
120
|
-
export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | ArrayFieldSchema | EnumFieldSchema;
|
|
126
|
+
export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | ArrayFieldSchema | EnumFieldSchema;
|
|
121
127
|
export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
|
|
122
128
|
export type InteractivitySchema = {
|
|
123
129
|
[key: string]: InteractivitySchemaField;
|
|
@@ -201,6 +207,12 @@ export declare const textSchema: {
|
|
|
201
207
|
readonly default: undefined;
|
|
202
208
|
readonly description: "Color";
|
|
203
209
|
};
|
|
210
|
+
readonly 'style.fontFamily': {
|
|
211
|
+
readonly type: "font-family";
|
|
212
|
+
readonly default: undefined;
|
|
213
|
+
readonly description: "Font family";
|
|
214
|
+
readonly keyframable: false;
|
|
215
|
+
};
|
|
204
216
|
readonly 'style.fontSize': {
|
|
205
217
|
readonly type: "number";
|
|
206
218
|
readonly default: undefined;
|
|
@@ -44,6 +44,12 @@ exports.textSchema = {
|
|
|
44
44
|
default: undefined,
|
|
45
45
|
description: 'Color',
|
|
46
46
|
},
|
|
47
|
+
'style.fontFamily': {
|
|
48
|
+
type: 'font-family',
|
|
49
|
+
default: undefined,
|
|
50
|
+
description: 'Font family',
|
|
51
|
+
keyframable: false,
|
|
52
|
+
},
|
|
47
53
|
'style.fontSize': {
|
|
48
54
|
type: 'number',
|
|
49
55
|
default: undefined,
|
package/dist/cjs/internals.d.ts
CHANGED
|
@@ -327,6 +327,12 @@ export declare const Internals: {
|
|
|
327
327
|
readonly default: undefined;
|
|
328
328
|
readonly description: "Color";
|
|
329
329
|
};
|
|
330
|
+
readonly 'style.fontFamily': {
|
|
331
|
+
readonly type: "font-family";
|
|
332
|
+
readonly default: undefined;
|
|
333
|
+
readonly description: "Font family";
|
|
334
|
+
readonly keyframable: false;
|
|
335
|
+
};
|
|
330
336
|
readonly 'style.fontSize': {
|
|
331
337
|
readonly type: "number";
|
|
332
338
|
readonly default: undefined;
|
|
@@ -659,6 +665,7 @@ export declare const Internals: {
|
|
|
659
665
|
readonly resolveCompositionsRef: import("react").RefObject<{
|
|
660
666
|
setCurrentRenderModalComposition: (compositionId: string | null) => void;
|
|
661
667
|
reloadCurrentlySelectedComposition: () => void;
|
|
668
|
+
resolveComposition: (compositionId: string) => Promise<import("./video-config.js").VideoConfig>;
|
|
662
669
|
} | null>;
|
|
663
670
|
readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
|
|
664
671
|
readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
|
|
|
1291
1291
|
};
|
|
1292
1292
|
|
|
1293
1293
|
// src/version.ts
|
|
1294
|
-
var VERSION = "4.0.
|
|
1294
|
+
var VERSION = "4.0.486";
|
|
1295
1295
|
|
|
1296
1296
|
// src/multiple-versions-warning.ts
|
|
1297
1297
|
var checkMultipleRemotionVersions = () => {
|
|
@@ -1756,6 +1756,12 @@ var textSchema = {
|
|
|
1756
1756
|
default: undefined,
|
|
1757
1757
|
description: "Color"
|
|
1758
1758
|
},
|
|
1759
|
+
"style.fontFamily": {
|
|
1760
|
+
type: "font-family",
|
|
1761
|
+
default: undefined,
|
|
1762
|
+
description: "Font family",
|
|
1763
|
+
keyframable: false
|
|
1764
|
+
},
|
|
1759
1765
|
"style.fontSize": {
|
|
1760
1766
|
type: "number",
|
|
1761
1767
|
default: undefined,
|
|
@@ -9320,8 +9326,8 @@ import {
|
|
|
9320
9326
|
forwardRef as forwardRef10,
|
|
9321
9327
|
useCallback as useCallback17,
|
|
9322
9328
|
useContext as useContext32,
|
|
9323
|
-
useEffect as useEffect17,
|
|
9324
9329
|
useImperativeHandle as useImperativeHandle7,
|
|
9330
|
+
useLayoutEffect as useLayoutEffect10,
|
|
9325
9331
|
useMemo as useMemo31,
|
|
9326
9332
|
useRef as useRef23,
|
|
9327
9333
|
useState as useState16
|
|
@@ -9409,6 +9415,18 @@ var loadImage = ({
|
|
|
9409
9415
|
function exponentialBackoff(errorCount) {
|
|
9410
9416
|
return 1000 * 2 ** (errorCount - 1);
|
|
9411
9417
|
}
|
|
9418
|
+
var waitForNextFrame = ({
|
|
9419
|
+
onFrame
|
|
9420
|
+
}) => {
|
|
9421
|
+
if (typeof requestAnimationFrame === "undefined") {
|
|
9422
|
+
onFrame();
|
|
9423
|
+
return () => {
|
|
9424
|
+
return;
|
|
9425
|
+
};
|
|
9426
|
+
}
|
|
9427
|
+
const frame = requestAnimationFrame(onFrame);
|
|
9428
|
+
return () => cancelAnimationFrame(frame);
|
|
9429
|
+
};
|
|
9412
9430
|
var CanvasImageContent = forwardRef10(({
|
|
9413
9431
|
src,
|
|
9414
9432
|
width,
|
|
@@ -9438,6 +9456,17 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9438
9456
|
overrideId: controls?.overrideId ?? null
|
|
9439
9457
|
});
|
|
9440
9458
|
const sequenceContext = useContext32(SequenceContext);
|
|
9459
|
+
const pendingLoadDelayRef = useRef23(null);
|
|
9460
|
+
const continuePendingLoadDelay = useCallback17(() => {
|
|
9461
|
+
const pending = pendingLoadDelayRef.current;
|
|
9462
|
+
if (!pending || pending.continued) {
|
|
9463
|
+
return;
|
|
9464
|
+
}
|
|
9465
|
+
pending.continued = true;
|
|
9466
|
+
pending.unblock();
|
|
9467
|
+
continueRender2(pending.handle);
|
|
9468
|
+
pendingLoadDelayRef.current = null;
|
|
9469
|
+
}, [continueRender2]);
|
|
9441
9470
|
const sourceCanvas = useMemo31(() => {
|
|
9442
9471
|
if (typeof document === "undefined") {
|
|
9443
9472
|
return null;
|
|
@@ -9455,7 +9484,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9455
9484
|
ref.current = canvas;
|
|
9456
9485
|
}
|
|
9457
9486
|
}, [ref, refForOutline]);
|
|
9458
|
-
|
|
9487
|
+
useLayoutEffect10(() => {
|
|
9459
9488
|
const isPremounting = Boolean(sequenceContext?.premounting);
|
|
9460
9489
|
const isPostmounting = Boolean(sequenceContext?.postmounting);
|
|
9461
9490
|
const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
|
|
@@ -9467,17 +9496,13 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9467
9496
|
};
|
|
9468
9497
|
const controller = new AbortController;
|
|
9469
9498
|
let cancelled = false;
|
|
9470
|
-
let continued = false;
|
|
9471
9499
|
let errorCount = 0;
|
|
9472
9500
|
let timeoutId = null;
|
|
9473
9501
|
setLoadedImage(null);
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
|
|
9477
|
-
|
|
9478
|
-
continued = true;
|
|
9479
|
-
unblock();
|
|
9480
|
-
continueRender2(handle);
|
|
9502
|
+
pendingLoadDelayRef.current = {
|
|
9503
|
+
handle,
|
|
9504
|
+
unblock,
|
|
9505
|
+
continued: false
|
|
9481
9506
|
};
|
|
9482
9507
|
const attemptLoad = () => {
|
|
9483
9508
|
loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
|
|
@@ -9485,13 +9510,9 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9485
9510
|
return;
|
|
9486
9511
|
}
|
|
9487
9512
|
setLoadedImage(image);
|
|
9488
|
-
}).then(() => {
|
|
9489
|
-
if (!cancelled) {
|
|
9490
|
-
continueRenderOnce();
|
|
9491
|
-
}
|
|
9492
9513
|
}).catch((err) => {
|
|
9493
9514
|
if (err.name === "AbortError") {
|
|
9494
|
-
|
|
9515
|
+
continuePendingLoadDelay();
|
|
9495
9516
|
return;
|
|
9496
9517
|
}
|
|
9497
9518
|
errorCount++;
|
|
@@ -9505,7 +9526,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9505
9526
|
}, backoff);
|
|
9506
9527
|
} else if (onError) {
|
|
9507
9528
|
onError(err);
|
|
9508
|
-
|
|
9529
|
+
continuePendingLoadDelay();
|
|
9509
9530
|
} else {
|
|
9510
9531
|
cancelRender2(err);
|
|
9511
9532
|
}
|
|
@@ -9518,12 +9539,12 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9518
9539
|
clearTimeout(timeoutId);
|
|
9519
9540
|
}
|
|
9520
9541
|
controller.abort();
|
|
9521
|
-
|
|
9542
|
+
continuePendingLoadDelay();
|
|
9522
9543
|
};
|
|
9523
9544
|
}, [
|
|
9524
9545
|
actualSrc,
|
|
9525
9546
|
cancelRender2,
|
|
9526
|
-
|
|
9547
|
+
continuePendingLoadDelay,
|
|
9527
9548
|
delayPlayback,
|
|
9528
9549
|
delayRender2,
|
|
9529
9550
|
delayRenderRetries,
|
|
@@ -9534,13 +9555,16 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9534
9555
|
sequenceContext?.postmounting,
|
|
9535
9556
|
sequenceContext?.premounting
|
|
9536
9557
|
]);
|
|
9537
|
-
|
|
9558
|
+
useLayoutEffect10(() => {
|
|
9538
9559
|
if (!loadedImage || !outputCanvas || !sourceCanvas) {
|
|
9539
9560
|
return;
|
|
9540
9561
|
}
|
|
9541
9562
|
const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
|
|
9542
9563
|
let cancelled = false;
|
|
9543
9564
|
let continued = false;
|
|
9565
|
+
let cancelWaitForNextFrame = () => {
|
|
9566
|
+
return;
|
|
9567
|
+
};
|
|
9544
9568
|
const continueRenderOnce = () => {
|
|
9545
9569
|
if (continued) {
|
|
9546
9570
|
return;
|
|
@@ -9575,7 +9599,15 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9575
9599
|
height: canvasHeight
|
|
9576
9600
|
}).then((completed) => {
|
|
9577
9601
|
if (completed && !cancelled) {
|
|
9578
|
-
|
|
9602
|
+
cancelWaitForNextFrame = waitForNextFrame({
|
|
9603
|
+
onFrame: () => {
|
|
9604
|
+
if (cancelled) {
|
|
9605
|
+
return;
|
|
9606
|
+
}
|
|
9607
|
+
continueRenderOnce();
|
|
9608
|
+
continuePendingLoadDelay();
|
|
9609
|
+
}
|
|
9610
|
+
});
|
|
9579
9611
|
}
|
|
9580
9612
|
}).catch((err) => {
|
|
9581
9613
|
if (cancelled) {
|
|
@@ -9584,12 +9616,14 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9584
9616
|
if (onError) {
|
|
9585
9617
|
onError(err);
|
|
9586
9618
|
continueRenderOnce();
|
|
9619
|
+
continuePendingLoadDelay();
|
|
9587
9620
|
} else {
|
|
9588
9621
|
cancelRender2(err);
|
|
9589
9622
|
}
|
|
9590
9623
|
});
|
|
9591
9624
|
return () => {
|
|
9592
9625
|
cancelled = true;
|
|
9626
|
+
cancelWaitForNextFrame();
|
|
9593
9627
|
continueRenderOnce();
|
|
9594
9628
|
};
|
|
9595
9629
|
}, [
|
|
@@ -9597,6 +9631,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9597
9631
|
cancelRender2,
|
|
9598
9632
|
chainState,
|
|
9599
9633
|
continueRender2,
|
|
9634
|
+
continuePendingLoadDelay,
|
|
9600
9635
|
delayRender2,
|
|
9601
9636
|
fit,
|
|
9602
9637
|
height,
|
|
@@ -9766,7 +9801,7 @@ var IFrameRefForwarding = ({
|
|
|
9766
9801
|
};
|
|
9767
9802
|
var IFrame = forwardRef11(IFrameRefForwarding);
|
|
9768
9803
|
// src/Img.tsx
|
|
9769
|
-
import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as
|
|
9804
|
+
import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
|
|
9770
9805
|
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
9771
9806
|
function exponentialBackoff2(errorCount) {
|
|
9772
9807
|
return 1000 * 2 ** (errorCount - 1);
|
|
@@ -9843,7 +9878,7 @@ var ImgContent = ({
|
|
|
9843
9878
|
if (typeof window !== "undefined") {
|
|
9844
9879
|
const isPremounting = Boolean(sequenceContext?.premounting);
|
|
9845
9880
|
const isPostmounting = Boolean(sequenceContext?.postmounting);
|
|
9846
|
-
|
|
9881
|
+
useLayoutEffect11(() => {
|
|
9847
9882
|
if (window.process?.env?.NODE_ENV === "test") {
|
|
9848
9883
|
if (imageRef.current) {
|
|
9849
9884
|
imageRef.current.src = actualSrc;
|
|
@@ -10813,8 +10848,8 @@ import { useCallback as useCallback24 } from "react";
|
|
|
10813
10848
|
import {
|
|
10814
10849
|
useCallback as useCallback22,
|
|
10815
10850
|
useContext as useContext36,
|
|
10816
|
-
useEffect as
|
|
10817
|
-
useLayoutEffect as
|
|
10851
|
+
useEffect as useEffect17,
|
|
10852
|
+
useLayoutEffect as useLayoutEffect12,
|
|
10818
10853
|
useMemo as useMemo35,
|
|
10819
10854
|
useState as useState19
|
|
10820
10855
|
} from "react";
|
|
@@ -10876,7 +10911,7 @@ var OffthreadVideoForRendering = ({
|
|
|
10876
10911
|
mediaVolume: 1
|
|
10877
10912
|
});
|
|
10878
10913
|
warnAboutTooHighVolume(volume);
|
|
10879
|
-
|
|
10914
|
+
useEffect17(() => {
|
|
10880
10915
|
if (!src) {
|
|
10881
10916
|
throw new Error("No src passed");
|
|
10882
10917
|
}
|
|
@@ -10933,7 +10968,7 @@ var OffthreadVideoForRendering = ({
|
|
|
10933
10968
|
}, [toneMapped, currentTime, src, transparent]);
|
|
10934
10969
|
const [imageSrc, setImageSrc] = useState19(null);
|
|
10935
10970
|
const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
|
|
10936
|
-
|
|
10971
|
+
useLayoutEffect12(() => {
|
|
10937
10972
|
if (!window.remotion_videoEnabled) {
|
|
10938
10973
|
return;
|
|
10939
10974
|
}
|
|
@@ -11039,7 +11074,7 @@ import React37, {
|
|
|
11039
11074
|
forwardRef as forwardRef13,
|
|
11040
11075
|
useCallback as useCallback23,
|
|
11041
11076
|
useContext as useContext37,
|
|
11042
|
-
useEffect as
|
|
11077
|
+
useEffect as useEffect19,
|
|
11043
11078
|
useImperativeHandle as useImperativeHandle9,
|
|
11044
11079
|
useMemo as useMemo36,
|
|
11045
11080
|
useRef as useRef27,
|
|
@@ -11047,12 +11082,12 @@ import React37, {
|
|
|
11047
11082
|
} from "react";
|
|
11048
11083
|
|
|
11049
11084
|
// src/video/emit-video-frame.ts
|
|
11050
|
-
import { useEffect as
|
|
11085
|
+
import { useEffect as useEffect18 } from "react";
|
|
11051
11086
|
var useEmitVideoFrame = ({
|
|
11052
11087
|
ref,
|
|
11053
11088
|
onVideoFrame
|
|
11054
11089
|
}) => {
|
|
11055
|
-
|
|
11090
|
+
useEffect18(() => {
|
|
11056
11091
|
const { current } = ref;
|
|
11057
11092
|
if (!current) {
|
|
11058
11093
|
return;
|
|
@@ -11231,7 +11266,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11231
11266
|
tag: "video",
|
|
11232
11267
|
mountTime
|
|
11233
11268
|
}));
|
|
11234
|
-
|
|
11269
|
+
useEffect19(() => {
|
|
11235
11270
|
const { current } = videoRef;
|
|
11236
11271
|
if (!current) {
|
|
11237
11272
|
return;
|
|
@@ -11274,7 +11309,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11274
11309
|
const currentOnDurationCallback = useRef27(onDuration);
|
|
11275
11310
|
currentOnDurationCallback.current = onDuration;
|
|
11276
11311
|
useEmitVideoFrame({ ref: videoRef, onVideoFrame });
|
|
11277
|
-
|
|
11312
|
+
useEffect19(() => {
|
|
11278
11313
|
const { current } = videoRef;
|
|
11279
11314
|
if (!current) {
|
|
11280
11315
|
return;
|
|
@@ -11291,7 +11326,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11291
11326
|
current.removeEventListener("loadedmetadata", onLoadedMetadata);
|
|
11292
11327
|
};
|
|
11293
11328
|
}, [src]);
|
|
11294
|
-
|
|
11329
|
+
useEffect19(() => {
|
|
11295
11330
|
const { current } = videoRef;
|
|
11296
11331
|
if (!current) {
|
|
11297
11332
|
return;
|
|
@@ -11981,9 +12016,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
|
|
|
11981
12016
|
import {
|
|
11982
12017
|
forwardRef as forwardRef15,
|
|
11983
12018
|
useContext as useContext38,
|
|
11984
|
-
useEffect as
|
|
12019
|
+
useEffect as useEffect20,
|
|
11985
12020
|
useImperativeHandle as useImperativeHandle10,
|
|
11986
|
-
useLayoutEffect as
|
|
12021
|
+
useLayoutEffect as useLayoutEffect13,
|
|
11987
12022
|
useMemo as useMemo39,
|
|
11988
12023
|
useRef as useRef28
|
|
11989
12024
|
} from "react";
|
|
@@ -12158,7 +12193,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12158
12193
|
mediaVolume: 1
|
|
12159
12194
|
});
|
|
12160
12195
|
warnAboutTooHighVolume(volume);
|
|
12161
|
-
|
|
12196
|
+
useEffect20(() => {
|
|
12162
12197
|
if (!props2.src) {
|
|
12163
12198
|
throw new Error("No src passed");
|
|
12164
12199
|
}
|
|
@@ -12202,7 +12237,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12202
12237
|
return videoRef.current;
|
|
12203
12238
|
}, []);
|
|
12204
12239
|
useEmitVideoFrame({ ref: videoRef, onVideoFrame });
|
|
12205
|
-
|
|
12240
|
+
useEffect20(() => {
|
|
12206
12241
|
if (!window.remotion_videoEnabled) {
|
|
12207
12242
|
return;
|
|
12208
12243
|
}
|
|
@@ -12292,7 +12327,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12292
12327
|
]);
|
|
12293
12328
|
const { src } = props2;
|
|
12294
12329
|
if (environment.isRendering) {
|
|
12295
|
-
|
|
12330
|
+
useLayoutEffect13(() => {
|
|
12296
12331
|
if (window.process?.env?.NODE_ENV === "test") {
|
|
12297
12332
|
return;
|
|
12298
12333
|
}
|
package/dist/esm/version.mjs
CHANGED
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
|
|
4
4
|
},
|
|
5
5
|
"name": "remotion",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.486",
|
|
7
7
|
"description": "Make videos programmatically",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"scripts": {
|
|
12
12
|
"formatting": "oxfmt src --check",
|
|
13
13
|
"format": "oxfmt src",
|
|
14
|
-
"prepublishOnly": "bun ensure-correct-version.ts && cp ../../README.md .",
|
|
14
|
+
"prepublishOnly": "bun ensure-correct-version.ts && cp ../../README.md . && cp ../../LICENSE.md .",
|
|
15
15
|
"lint": "eslint src",
|
|
16
16
|
"test": "bun test src/test",
|
|
17
17
|
"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-dom": "19.2.3",
|
|
36
36
|
"webpack": "5.105.0",
|
|
37
37
|
"zod": "4.3.6",
|
|
38
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
38
|
+
"@remotion/eslint-config-internal": "4.0.486",
|
|
39
39
|
"eslint": "9.19.0",
|
|
40
40
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
41
41
|
},
|