remotion 4.0.485 → 4.0.487
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/HtmlInCanvas.js +2 -4
- package/dist/cjs/Interactive.d.ts +6 -0
- package/dist/cjs/ResolveCompositionConfig.d.ts +1 -0
- package/dist/cjs/Still.js +2 -0
- package/dist/cjs/TimelineContext.d.ts +3 -3
- package/dist/cjs/buffering.d.ts +1 -1
- package/dist/cjs/buffering.js +14 -6
- package/dist/cjs/canvas-image/CanvasImage.js +42 -20
- package/dist/cjs/get-media-sync-action.d.ts +44 -0
- package/dist/cjs/get-media-sync-action.js +78 -0
- package/dist/cjs/interactivity-schema.d.ts +13 -1
- package/dist/cjs/interactivity-schema.js +6 -0
- package/dist/cjs/internals.d.ts +9 -2
- package/dist/cjs/timeline-position-state.d.ts +2 -2
- package/dist/cjs/use-media-playback.js +70 -82
- package/dist/cjs/use-request-video-callback-time.d.ts +1 -1
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/wrap-remotion-context.d.ts +1 -1
- package/dist/esm/index.mjs +219 -113
- package/dist/esm/version.mjs +1 -1
- package/package.json +3 -3
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.487";
|
|
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,
|
|
@@ -7452,7 +7458,8 @@ var useBufferManager = (logLevel, mountTime) => {
|
|
|
7452
7458
|
if (rendering) {
|
|
7453
7459
|
return;
|
|
7454
7460
|
}
|
|
7455
|
-
if (blocks.length > 0) {
|
|
7461
|
+
if (blocks.length > 0 && !buffering.current) {
|
|
7462
|
+
buffering.current = true;
|
|
7456
7463
|
onBufferingCallbacks.forEach((c2) => c2());
|
|
7457
7464
|
playbackLogging({
|
|
7458
7465
|
logLevel,
|
|
@@ -7467,7 +7474,8 @@ var useBufferManager = (logLevel, mountTime) => {
|
|
|
7467
7474
|
if (rendering) {
|
|
7468
7475
|
return;
|
|
7469
7476
|
}
|
|
7470
|
-
if (blocks.length === 0) {
|
|
7477
|
+
if (blocks.length === 0 && buffering.current) {
|
|
7478
|
+
buffering.current = false;
|
|
7471
7479
|
onResumeCallbacks.forEach((c2) => c2());
|
|
7472
7480
|
playbackLogging({
|
|
7473
7481
|
logLevel,
|
|
@@ -7500,15 +7508,11 @@ var useIsPlayerBuffering = (bufferManager) => {
|
|
|
7500
7508
|
const onResume = () => {
|
|
7501
7509
|
setIsBuffering(false);
|
|
7502
7510
|
};
|
|
7503
|
-
bufferManager.listenForBuffering(onBuffer);
|
|
7504
|
-
bufferManager.listenForResume(onResume);
|
|
7511
|
+
const buffer = bufferManager.listenForBuffering(onBuffer);
|
|
7512
|
+
const resume = bufferManager.listenForResume(onResume);
|
|
7505
7513
|
return () => {
|
|
7506
|
-
|
|
7507
|
-
|
|
7508
|
-
});
|
|
7509
|
-
bufferManager.listenForResume(() => {
|
|
7510
|
-
return;
|
|
7511
|
-
});
|
|
7514
|
+
buffer.remove();
|
|
7515
|
+
resume.remove();
|
|
7512
7516
|
};
|
|
7513
7517
|
}, [bufferManager]);
|
|
7514
7518
|
return isBuffering;
|
|
@@ -7637,6 +7641,74 @@ var useBufferUntilFirstFrame = ({
|
|
|
7637
7641
|
}, [bufferUntilFirstFrame]);
|
|
7638
7642
|
};
|
|
7639
7643
|
|
|
7644
|
+
// src/get-media-sync-action.ts
|
|
7645
|
+
var getMediaSyncAction = (input) => {
|
|
7646
|
+
const {
|
|
7647
|
+
duration,
|
|
7648
|
+
currentTime,
|
|
7649
|
+
paused,
|
|
7650
|
+
ended,
|
|
7651
|
+
desiredUnclampedTime,
|
|
7652
|
+
mediaTagTime,
|
|
7653
|
+
mediaTagLastUpdate,
|
|
7654
|
+
rvcTime,
|
|
7655
|
+
rvcLastUpdate,
|
|
7656
|
+
isVariableFpsVideo,
|
|
7657
|
+
acceptableTimeShift,
|
|
7658
|
+
lastSeekDueToShift,
|
|
7659
|
+
playing,
|
|
7660
|
+
playbackRate,
|
|
7661
|
+
mediaTagBufferingOrStalled,
|
|
7662
|
+
playerBuffering,
|
|
7663
|
+
absoluteFrame,
|
|
7664
|
+
onlyWarnForMediaSeekingError,
|
|
7665
|
+
isPremounting,
|
|
7666
|
+
isPostmounting,
|
|
7667
|
+
pauseWhenBuffering
|
|
7668
|
+
} = input;
|
|
7669
|
+
const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
|
|
7670
|
+
const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
|
|
7671
|
+
const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
|
|
7672
|
+
const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate ? timeShiftRvcTag : timeShiftMediaTag;
|
|
7673
|
+
const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? mostRecentTimeshift : timeShiftMediaTag;
|
|
7674
|
+
if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
|
|
7675
|
+
return {
|
|
7676
|
+
type: "seek-due-to-shift",
|
|
7677
|
+
shouldBeTime,
|
|
7678
|
+
why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
|
|
7679
|
+
bufferUntilFirstFrame: playing && playbackRate > 0,
|
|
7680
|
+
playReason: playing && paused ? "player is playing but media tag is paused, and just seeked" : null,
|
|
7681
|
+
warnAboutNonSeekable: !onlyWarnForMediaSeekingError
|
|
7682
|
+
};
|
|
7683
|
+
}
|
|
7684
|
+
const seekThreshold = playing ? 0.15 : 0.01;
|
|
7685
|
+
const makesSenseToSeek = Math.abs(currentTime - shouldBeTime) > seekThreshold;
|
|
7686
|
+
const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
|
|
7687
|
+
if (!playing || isSomethingElseBuffering) {
|
|
7688
|
+
return {
|
|
7689
|
+
type: "seek-if-not-playing",
|
|
7690
|
+
shouldBeTime,
|
|
7691
|
+
why: makesSenseToSeek ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})` : null
|
|
7692
|
+
};
|
|
7693
|
+
}
|
|
7694
|
+
if (!playing || playerBuffering) {
|
|
7695
|
+
return { type: "none" };
|
|
7696
|
+
}
|
|
7697
|
+
const pausedCondition = paused && !ended;
|
|
7698
|
+
const firstFrameCondition = absoluteFrame === 0;
|
|
7699
|
+
if (pausedCondition || firstFrameCondition) {
|
|
7700
|
+
const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
|
|
7701
|
+
return {
|
|
7702
|
+
type: "play-and-seek",
|
|
7703
|
+
shouldBeTime,
|
|
7704
|
+
why: makesSenseToSeek ? `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}` : null,
|
|
7705
|
+
playReason: `player is playing and ${reason}`,
|
|
7706
|
+
bufferUntilFirstFrame: !isVariableFpsVideo && playbackRate > 0
|
|
7707
|
+
};
|
|
7708
|
+
}
|
|
7709
|
+
return { type: "none" };
|
|
7710
|
+
};
|
|
7711
|
+
|
|
7640
7712
|
// src/media-tag-current-time-timestamp.ts
|
|
7641
7713
|
import React21 from "react";
|
|
7642
7714
|
var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
|
|
@@ -8072,89 +8144,93 @@ var useMediaPlayback = ({
|
|
|
8072
8144
|
if (!src) {
|
|
8073
8145
|
throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
|
|
8074
8146
|
}
|
|
8075
|
-
const {
|
|
8076
|
-
const
|
|
8077
|
-
|
|
8078
|
-
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
|
|
8082
|
-
|
|
8083
|
-
|
|
8084
|
-
|
|
8147
|
+
const { current } = mediaRef;
|
|
8148
|
+
const action = getMediaSyncAction({
|
|
8149
|
+
duration: current.duration,
|
|
8150
|
+
currentTime: current.currentTime,
|
|
8151
|
+
paused: current.paused,
|
|
8152
|
+
ended: current.ended,
|
|
8153
|
+
desiredUnclampedTime,
|
|
8154
|
+
mediaTagTime: mediaTagCurrentTime.current.time,
|
|
8155
|
+
mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
|
|
8156
|
+
rvcTime: rvcCurrentTime.current?.time ?? null,
|
|
8157
|
+
rvcLastUpdate: rvcCurrentTime.current?.lastUpdate ?? null,
|
|
8158
|
+
isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
|
|
8159
|
+
acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
|
|
8160
|
+
lastSeekDueToShift: lastSeekDueToShift.current,
|
|
8161
|
+
playing,
|
|
8162
|
+
playbackRate,
|
|
8163
|
+
mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
|
|
8164
|
+
playerBuffering: buffering.buffering.current,
|
|
8165
|
+
absoluteFrame,
|
|
8166
|
+
onlyWarnForMediaSeekingError,
|
|
8167
|
+
isPremounting,
|
|
8168
|
+
isPostmounting,
|
|
8169
|
+
pauseWhenBuffering
|
|
8170
|
+
});
|
|
8171
|
+
if (action.type === "none") {
|
|
8172
|
+
return;
|
|
8173
|
+
}
|
|
8174
|
+
if (action.type === "seek-due-to-shift") {
|
|
8085
8175
|
lastSeek.current = seek({
|
|
8086
|
-
mediaRef:
|
|
8087
|
-
time: shouldBeTime,
|
|
8176
|
+
mediaRef: current,
|
|
8177
|
+
time: action.shouldBeTime,
|
|
8088
8178
|
logLevel,
|
|
8089
|
-
why:
|
|
8179
|
+
why: action.why,
|
|
8090
8180
|
mountTime
|
|
8091
8181
|
});
|
|
8092
8182
|
lastSeekDueToShift.current = lastSeek.current;
|
|
8093
|
-
if (
|
|
8094
|
-
|
|
8095
|
-
bufferUntilFirstFrame(shouldBeTime);
|
|
8096
|
-
}
|
|
8097
|
-
if (mediaRef.current.paused) {
|
|
8098
|
-
playAndHandleNotAllowedError({
|
|
8099
|
-
mediaRef,
|
|
8100
|
-
mediaType,
|
|
8101
|
-
onAutoPlayError,
|
|
8102
|
-
logLevel,
|
|
8103
|
-
mountTime,
|
|
8104
|
-
reason: "player is playing but media tag is paused, and just seeked",
|
|
8105
|
-
isPlayer: env.isPlayer
|
|
8106
|
-
});
|
|
8107
|
-
}
|
|
8108
|
-
}
|
|
8109
|
-
if (!onlyWarnForMediaSeekingError) {
|
|
8110
|
-
warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? "console-warning" : "console-error");
|
|
8183
|
+
if (action.bufferUntilFirstFrame) {
|
|
8184
|
+
bufferUntilFirstFrame(action.shouldBeTime);
|
|
8111
8185
|
}
|
|
8112
|
-
|
|
8113
|
-
|
|
8114
|
-
|
|
8115
|
-
|
|
8116
|
-
|
|
8117
|
-
const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
|
|
8118
|
-
if (!playing || isSomethingElseBuffering) {
|
|
8119
|
-
if (makesSenseToSeek) {
|
|
8120
|
-
lastSeek.current = seek({
|
|
8121
|
-
mediaRef: mediaRef.current,
|
|
8122
|
-
time: shouldBeTime,
|
|
8186
|
+
if (action.playReason !== null) {
|
|
8187
|
+
playAndHandleNotAllowedError({
|
|
8188
|
+
mediaRef,
|
|
8189
|
+
mediaType,
|
|
8190
|
+
onAutoPlayError,
|
|
8123
8191
|
logLevel,
|
|
8124
|
-
|
|
8125
|
-
|
|
8192
|
+
mountTime,
|
|
8193
|
+
reason: action.playReason,
|
|
8194
|
+
isPlayer: env.isPlayer
|
|
8126
8195
|
});
|
|
8127
8196
|
}
|
|
8197
|
+
if (action.warnAboutNonSeekable) {
|
|
8198
|
+
warnAboutNonSeekableMedia(current, "console-error");
|
|
8199
|
+
}
|
|
8128
8200
|
return;
|
|
8129
8201
|
}
|
|
8130
|
-
if (
|
|
8131
|
-
|
|
8132
|
-
}
|
|
8133
|
-
const pausedCondition = mediaRef.current.paused && !mediaRef.current.ended;
|
|
8134
|
-
const firstFrameCondition = absoluteFrame === 0;
|
|
8135
|
-
if (pausedCondition || firstFrameCondition) {
|
|
8136
|
-
const reason = pausedCondition ? "media tag is paused" : "absolute frame is 0";
|
|
8137
|
-
if (makesSenseToSeek) {
|
|
8202
|
+
if (action.type === "seek-if-not-playing") {
|
|
8203
|
+
if (action.why !== null) {
|
|
8138
8204
|
lastSeek.current = seek({
|
|
8139
|
-
mediaRef:
|
|
8140
|
-
time: shouldBeTime,
|
|
8205
|
+
mediaRef: current,
|
|
8206
|
+
time: action.shouldBeTime,
|
|
8141
8207
|
logLevel,
|
|
8142
|
-
why:
|
|
8208
|
+
why: action.why,
|
|
8143
8209
|
mountTime
|
|
8144
8210
|
});
|
|
8145
8211
|
}
|
|
8146
|
-
|
|
8147
|
-
|
|
8148
|
-
|
|
8149
|
-
|
|
8212
|
+
return;
|
|
8213
|
+
}
|
|
8214
|
+
if (action.why !== null) {
|
|
8215
|
+
lastSeek.current = seek({
|
|
8216
|
+
mediaRef: current,
|
|
8217
|
+
time: action.shouldBeTime,
|
|
8150
8218
|
logLevel,
|
|
8151
|
-
|
|
8152
|
-
|
|
8153
|
-
isPlayer: env.isPlayer
|
|
8219
|
+
why: action.why,
|
|
8220
|
+
mountTime
|
|
8154
8221
|
});
|
|
8155
|
-
|
|
8156
|
-
|
|
8157
|
-
|
|
8222
|
+
}
|
|
8223
|
+
playAndHandleNotAllowedError({
|
|
8224
|
+
mediaRef,
|
|
8225
|
+
mediaType,
|
|
8226
|
+
onAutoPlayError,
|
|
8227
|
+
logLevel,
|
|
8228
|
+
mountTime,
|
|
8229
|
+
reason: action.playReason,
|
|
8230
|
+
isPlayer: env.isPlayer
|
|
8231
|
+
});
|
|
8232
|
+
if (action.bufferUntilFirstFrame) {
|
|
8233
|
+
bufferUntilFirstFrame(action.shouldBeTime);
|
|
8158
8234
|
}
|
|
8159
8235
|
}, [
|
|
8160
8236
|
absoluteFrame,
|
|
@@ -9320,8 +9396,8 @@ import {
|
|
|
9320
9396
|
forwardRef as forwardRef10,
|
|
9321
9397
|
useCallback as useCallback17,
|
|
9322
9398
|
useContext as useContext32,
|
|
9323
|
-
useEffect as useEffect17,
|
|
9324
9399
|
useImperativeHandle as useImperativeHandle7,
|
|
9400
|
+
useLayoutEffect as useLayoutEffect10,
|
|
9325
9401
|
useMemo as useMemo31,
|
|
9326
9402
|
useRef as useRef23,
|
|
9327
9403
|
useState as useState16
|
|
@@ -9409,6 +9485,18 @@ var loadImage = ({
|
|
|
9409
9485
|
function exponentialBackoff(errorCount) {
|
|
9410
9486
|
return 1000 * 2 ** (errorCount - 1);
|
|
9411
9487
|
}
|
|
9488
|
+
var waitForNextFrame = ({
|
|
9489
|
+
onFrame
|
|
9490
|
+
}) => {
|
|
9491
|
+
if (typeof requestAnimationFrame === "undefined") {
|
|
9492
|
+
onFrame();
|
|
9493
|
+
return () => {
|
|
9494
|
+
return;
|
|
9495
|
+
};
|
|
9496
|
+
}
|
|
9497
|
+
const frame = requestAnimationFrame(onFrame);
|
|
9498
|
+
return () => cancelAnimationFrame(frame);
|
|
9499
|
+
};
|
|
9412
9500
|
var CanvasImageContent = forwardRef10(({
|
|
9413
9501
|
src,
|
|
9414
9502
|
width,
|
|
@@ -9438,6 +9526,17 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9438
9526
|
overrideId: controls?.overrideId ?? null
|
|
9439
9527
|
});
|
|
9440
9528
|
const sequenceContext = useContext32(SequenceContext);
|
|
9529
|
+
const pendingLoadDelayRef = useRef23(null);
|
|
9530
|
+
const continuePendingLoadDelay = useCallback17(() => {
|
|
9531
|
+
const pending = pendingLoadDelayRef.current;
|
|
9532
|
+
if (!pending || pending.continued) {
|
|
9533
|
+
return;
|
|
9534
|
+
}
|
|
9535
|
+
pending.continued = true;
|
|
9536
|
+
pending.unblock();
|
|
9537
|
+
continueRender2(pending.handle);
|
|
9538
|
+
pendingLoadDelayRef.current = null;
|
|
9539
|
+
}, [continueRender2]);
|
|
9441
9540
|
const sourceCanvas = useMemo31(() => {
|
|
9442
9541
|
if (typeof document === "undefined") {
|
|
9443
9542
|
return null;
|
|
@@ -9455,7 +9554,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9455
9554
|
ref.current = canvas;
|
|
9456
9555
|
}
|
|
9457
9556
|
}, [ref, refForOutline]);
|
|
9458
|
-
|
|
9557
|
+
useLayoutEffect10(() => {
|
|
9459
9558
|
const isPremounting = Boolean(sequenceContext?.premounting);
|
|
9460
9559
|
const isPostmounting = Boolean(sequenceContext?.postmounting);
|
|
9461
9560
|
const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
|
|
@@ -9467,17 +9566,13 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9467
9566
|
};
|
|
9468
9567
|
const controller = new AbortController;
|
|
9469
9568
|
let cancelled = false;
|
|
9470
|
-
let continued = false;
|
|
9471
9569
|
let errorCount = 0;
|
|
9472
9570
|
let timeoutId = null;
|
|
9473
9571
|
setLoadedImage(null);
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
|
|
9477
|
-
|
|
9478
|
-
continued = true;
|
|
9479
|
-
unblock();
|
|
9480
|
-
continueRender2(handle);
|
|
9572
|
+
pendingLoadDelayRef.current = {
|
|
9573
|
+
handle,
|
|
9574
|
+
unblock,
|
|
9575
|
+
continued: false
|
|
9481
9576
|
};
|
|
9482
9577
|
const attemptLoad = () => {
|
|
9483
9578
|
loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
|
|
@@ -9485,13 +9580,9 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9485
9580
|
return;
|
|
9486
9581
|
}
|
|
9487
9582
|
setLoadedImage(image);
|
|
9488
|
-
}).then(() => {
|
|
9489
|
-
if (!cancelled) {
|
|
9490
|
-
continueRenderOnce();
|
|
9491
|
-
}
|
|
9492
9583
|
}).catch((err) => {
|
|
9493
9584
|
if (err.name === "AbortError") {
|
|
9494
|
-
|
|
9585
|
+
continuePendingLoadDelay();
|
|
9495
9586
|
return;
|
|
9496
9587
|
}
|
|
9497
9588
|
errorCount++;
|
|
@@ -9505,7 +9596,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9505
9596
|
}, backoff);
|
|
9506
9597
|
} else if (onError) {
|
|
9507
9598
|
onError(err);
|
|
9508
|
-
|
|
9599
|
+
continuePendingLoadDelay();
|
|
9509
9600
|
} else {
|
|
9510
9601
|
cancelRender2(err);
|
|
9511
9602
|
}
|
|
@@ -9518,12 +9609,12 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9518
9609
|
clearTimeout(timeoutId);
|
|
9519
9610
|
}
|
|
9520
9611
|
controller.abort();
|
|
9521
|
-
|
|
9612
|
+
continuePendingLoadDelay();
|
|
9522
9613
|
};
|
|
9523
9614
|
}, [
|
|
9524
9615
|
actualSrc,
|
|
9525
9616
|
cancelRender2,
|
|
9526
|
-
|
|
9617
|
+
continuePendingLoadDelay,
|
|
9527
9618
|
delayPlayback,
|
|
9528
9619
|
delayRender2,
|
|
9529
9620
|
delayRenderRetries,
|
|
@@ -9534,13 +9625,16 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9534
9625
|
sequenceContext?.postmounting,
|
|
9535
9626
|
sequenceContext?.premounting
|
|
9536
9627
|
]);
|
|
9537
|
-
|
|
9628
|
+
useLayoutEffect10(() => {
|
|
9538
9629
|
if (!loadedImage || !outputCanvas || !sourceCanvas) {
|
|
9539
9630
|
return;
|
|
9540
9631
|
}
|
|
9541
9632
|
const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
|
|
9542
9633
|
let cancelled = false;
|
|
9543
9634
|
let continued = false;
|
|
9635
|
+
let cancelWaitForNextFrame = () => {
|
|
9636
|
+
return;
|
|
9637
|
+
};
|
|
9544
9638
|
const continueRenderOnce = () => {
|
|
9545
9639
|
if (continued) {
|
|
9546
9640
|
return;
|
|
@@ -9575,7 +9669,15 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9575
9669
|
height: canvasHeight
|
|
9576
9670
|
}).then((completed) => {
|
|
9577
9671
|
if (completed && !cancelled) {
|
|
9578
|
-
|
|
9672
|
+
cancelWaitForNextFrame = waitForNextFrame({
|
|
9673
|
+
onFrame: () => {
|
|
9674
|
+
if (cancelled) {
|
|
9675
|
+
return;
|
|
9676
|
+
}
|
|
9677
|
+
continueRenderOnce();
|
|
9678
|
+
continuePendingLoadDelay();
|
|
9679
|
+
}
|
|
9680
|
+
});
|
|
9579
9681
|
}
|
|
9580
9682
|
}).catch((err) => {
|
|
9581
9683
|
if (cancelled) {
|
|
@@ -9584,12 +9686,14 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9584
9686
|
if (onError) {
|
|
9585
9687
|
onError(err);
|
|
9586
9688
|
continueRenderOnce();
|
|
9689
|
+
continuePendingLoadDelay();
|
|
9587
9690
|
} else {
|
|
9588
9691
|
cancelRender2(err);
|
|
9589
9692
|
}
|
|
9590
9693
|
});
|
|
9591
9694
|
return () => {
|
|
9592
9695
|
cancelled = true;
|
|
9696
|
+
cancelWaitForNextFrame();
|
|
9593
9697
|
continueRenderOnce();
|
|
9594
9698
|
};
|
|
9595
9699
|
}, [
|
|
@@ -9597,6 +9701,7 @@ var CanvasImageContent = forwardRef10(({
|
|
|
9597
9701
|
cancelRender2,
|
|
9598
9702
|
chainState,
|
|
9599
9703
|
continueRender2,
|
|
9704
|
+
continuePendingLoadDelay,
|
|
9600
9705
|
delayRender2,
|
|
9601
9706
|
fit,
|
|
9602
9707
|
height,
|
|
@@ -9766,7 +9871,7 @@ var IFrameRefForwarding = ({
|
|
|
9766
9871
|
};
|
|
9767
9872
|
var IFrame = forwardRef11(IFrameRefForwarding);
|
|
9768
9873
|
// src/Img.tsx
|
|
9769
|
-
import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as
|
|
9874
|
+
import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
|
|
9770
9875
|
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
9771
9876
|
function exponentialBackoff2(errorCount) {
|
|
9772
9877
|
return 1000 * 2 ** (errorCount - 1);
|
|
@@ -9843,7 +9948,7 @@ var ImgContent = ({
|
|
|
9843
9948
|
if (typeof window !== "undefined") {
|
|
9844
9949
|
const isPremounting = Boolean(sequenceContext?.premounting);
|
|
9845
9950
|
const isPostmounting = Boolean(sequenceContext?.postmounting);
|
|
9846
|
-
|
|
9951
|
+
useLayoutEffect11(() => {
|
|
9847
9952
|
if (window.process?.env?.NODE_ENV === "test") {
|
|
9848
9953
|
if (imageRef.current) {
|
|
9849
9954
|
imageRef.current.src = actualSrc;
|
|
@@ -10813,8 +10918,8 @@ import { useCallback as useCallback24 } from "react";
|
|
|
10813
10918
|
import {
|
|
10814
10919
|
useCallback as useCallback22,
|
|
10815
10920
|
useContext as useContext36,
|
|
10816
|
-
useEffect as
|
|
10817
|
-
useLayoutEffect as
|
|
10921
|
+
useEffect as useEffect17,
|
|
10922
|
+
useLayoutEffect as useLayoutEffect12,
|
|
10818
10923
|
useMemo as useMemo35,
|
|
10819
10924
|
useState as useState19
|
|
10820
10925
|
} from "react";
|
|
@@ -10876,7 +10981,7 @@ var OffthreadVideoForRendering = ({
|
|
|
10876
10981
|
mediaVolume: 1
|
|
10877
10982
|
});
|
|
10878
10983
|
warnAboutTooHighVolume(volume);
|
|
10879
|
-
|
|
10984
|
+
useEffect17(() => {
|
|
10880
10985
|
if (!src) {
|
|
10881
10986
|
throw new Error("No src passed");
|
|
10882
10987
|
}
|
|
@@ -10933,7 +11038,7 @@ var OffthreadVideoForRendering = ({
|
|
|
10933
11038
|
}, [toneMapped, currentTime, src, transparent]);
|
|
10934
11039
|
const [imageSrc, setImageSrc] = useState19(null);
|
|
10935
11040
|
const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
|
|
10936
|
-
|
|
11041
|
+
useLayoutEffect12(() => {
|
|
10937
11042
|
if (!window.remotion_videoEnabled) {
|
|
10938
11043
|
return;
|
|
10939
11044
|
}
|
|
@@ -11039,7 +11144,7 @@ import React37, {
|
|
|
11039
11144
|
forwardRef as forwardRef13,
|
|
11040
11145
|
useCallback as useCallback23,
|
|
11041
11146
|
useContext as useContext37,
|
|
11042
|
-
useEffect as
|
|
11147
|
+
useEffect as useEffect19,
|
|
11043
11148
|
useImperativeHandle as useImperativeHandle9,
|
|
11044
11149
|
useMemo as useMemo36,
|
|
11045
11150
|
useRef as useRef27,
|
|
@@ -11047,12 +11152,12 @@ import React37, {
|
|
|
11047
11152
|
} from "react";
|
|
11048
11153
|
|
|
11049
11154
|
// src/video/emit-video-frame.ts
|
|
11050
|
-
import { useEffect as
|
|
11155
|
+
import { useEffect as useEffect18 } from "react";
|
|
11051
11156
|
var useEmitVideoFrame = ({
|
|
11052
11157
|
ref,
|
|
11053
11158
|
onVideoFrame
|
|
11054
11159
|
}) => {
|
|
11055
|
-
|
|
11160
|
+
useEffect18(() => {
|
|
11056
11161
|
const { current } = ref;
|
|
11057
11162
|
if (!current) {
|
|
11058
11163
|
return;
|
|
@@ -11231,7 +11336,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11231
11336
|
tag: "video",
|
|
11232
11337
|
mountTime
|
|
11233
11338
|
}));
|
|
11234
|
-
|
|
11339
|
+
useEffect19(() => {
|
|
11235
11340
|
const { current } = videoRef;
|
|
11236
11341
|
if (!current) {
|
|
11237
11342
|
return;
|
|
@@ -11274,7 +11379,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11274
11379
|
const currentOnDurationCallback = useRef27(onDuration);
|
|
11275
11380
|
currentOnDurationCallback.current = onDuration;
|
|
11276
11381
|
useEmitVideoFrame({ ref: videoRef, onVideoFrame });
|
|
11277
|
-
|
|
11382
|
+
useEffect19(() => {
|
|
11278
11383
|
const { current } = videoRef;
|
|
11279
11384
|
if (!current) {
|
|
11280
11385
|
return;
|
|
@@ -11291,7 +11396,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
11291
11396
|
current.removeEventListener("loadedmetadata", onLoadedMetadata);
|
|
11292
11397
|
};
|
|
11293
11398
|
}, [src]);
|
|
11294
|
-
|
|
11399
|
+
useEffect19(() => {
|
|
11295
11400
|
const { current } = videoRef;
|
|
11296
11401
|
if (!current) {
|
|
11297
11402
|
return;
|
|
@@ -11974,6 +12079,7 @@ var Still = (props2) => {
|
|
|
11974
12079
|
};
|
|
11975
12080
|
return React42.createElement(Composition, newProps);
|
|
11976
12081
|
};
|
|
12082
|
+
addSequenceStackTraces(Still);
|
|
11977
12083
|
// src/video/html5-video.tsx
|
|
11978
12084
|
import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
|
|
11979
12085
|
|
|
@@ -11981,9 +12087,9 @@ import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as
|
|
|
11981
12087
|
import {
|
|
11982
12088
|
forwardRef as forwardRef15,
|
|
11983
12089
|
useContext as useContext38,
|
|
11984
|
-
useEffect as
|
|
12090
|
+
useEffect as useEffect20,
|
|
11985
12091
|
useImperativeHandle as useImperativeHandle10,
|
|
11986
|
-
useLayoutEffect as
|
|
12092
|
+
useLayoutEffect as useLayoutEffect13,
|
|
11987
12093
|
useMemo as useMemo39,
|
|
11988
12094
|
useRef as useRef28
|
|
11989
12095
|
} from "react";
|
|
@@ -12158,7 +12264,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12158
12264
|
mediaVolume: 1
|
|
12159
12265
|
});
|
|
12160
12266
|
warnAboutTooHighVolume(volume);
|
|
12161
|
-
|
|
12267
|
+
useEffect20(() => {
|
|
12162
12268
|
if (!props2.src) {
|
|
12163
12269
|
throw new Error("No src passed");
|
|
12164
12270
|
}
|
|
@@ -12202,7 +12308,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12202
12308
|
return videoRef.current;
|
|
12203
12309
|
}, []);
|
|
12204
12310
|
useEmitVideoFrame({ ref: videoRef, onVideoFrame });
|
|
12205
|
-
|
|
12311
|
+
useEffect20(() => {
|
|
12206
12312
|
if (!window.remotion_videoEnabled) {
|
|
12207
12313
|
return;
|
|
12208
12314
|
}
|
|
@@ -12292,7 +12398,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
12292
12398
|
]);
|
|
12293
12399
|
const { src } = props2;
|
|
12294
12400
|
if (environment.isRendering) {
|
|
12295
|
-
|
|
12401
|
+
useLayoutEffect13(() => {
|
|
12296
12402
|
if (window.process?.env?.NODE_ENV === "test") {
|
|
12297
12403
|
return;
|
|
12298
12404
|
}
|
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.487",
|
|
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.487",
|
|
39
39
|
"eslint": "9.19.0",
|
|
40
40
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
41
41
|
},
|