@remotion/media 4.0.514 → 4.0.515
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/dist/esm/index.mjs +161 -160
- package/dist/get-shared-input.d.ts +2 -2
- package/dist/media-player.d.ts +2 -1
- package/package.json +4 -4
package/dist/esm/index.mjs
CHANGED
|
@@ -40,7 +40,7 @@ var __callDispose = (stack, error, hasError) => {
|
|
|
40
40
|
import { useMemo as useMemo3, useState as useState3 } from "react";
|
|
41
41
|
import {
|
|
42
42
|
Freeze,
|
|
43
|
-
Internals as
|
|
43
|
+
Internals as Internals19,
|
|
44
44
|
Interactive,
|
|
45
45
|
Sequence,
|
|
46
46
|
useRemotionEnvironment as useRemotionEnvironment2,
|
|
@@ -78,7 +78,7 @@ var getLoopDisplay = ({
|
|
|
78
78
|
// src/audio/audio-for-preview.tsx
|
|
79
79
|
import { useContext as useContext2, useEffect, useMemo, useRef, useState } from "react";
|
|
80
80
|
import {
|
|
81
|
-
Internals as
|
|
81
|
+
Internals as Internals9,
|
|
82
82
|
Audio as RemotionAudio,
|
|
83
83
|
useBufferState,
|
|
84
84
|
useCurrentFrame,
|
|
@@ -137,7 +137,7 @@ var calculateEndTime = ({
|
|
|
137
137
|
};
|
|
138
138
|
|
|
139
139
|
// src/media-player.ts
|
|
140
|
-
import { Internals as
|
|
140
|
+
import { Internals as Internals7 } from "remotion";
|
|
141
141
|
|
|
142
142
|
// src/audio-iterator-manager.ts
|
|
143
143
|
import {
|
|
@@ -406,8 +406,8 @@ async function* makeLoopingIterator({
|
|
|
406
406
|
return;
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
|
-
if (!yieldedInPass) {
|
|
410
|
-
|
|
409
|
+
if (!yieldedInPass && passStartInSeconds === loopStartInSeconds) {
|
|
410
|
+
return;
|
|
411
411
|
}
|
|
412
412
|
passBaseTimestamp += segmentEndInSeconds - passStartInSeconds;
|
|
413
413
|
passStartInSeconds = loopStartInSeconds;
|
|
@@ -585,7 +585,7 @@ var audioIteratorManager = ({
|
|
|
585
585
|
onDone();
|
|
586
586
|
return;
|
|
587
587
|
}
|
|
588
|
-
onScheduled(result.value.sourceDurationInSeconds);
|
|
588
|
+
onScheduled(result.value.sourceDurationInSeconds, result.value.timelineTimestamp);
|
|
589
589
|
notifyNodeScheduled();
|
|
590
590
|
onAudioChunk({
|
|
591
591
|
buffer: result.value,
|
|
@@ -667,7 +667,7 @@ var audioIteratorManager = ({
|
|
|
667
667
|
});
|
|
668
668
|
audioIteratorsCreated++;
|
|
669
669
|
audioBufferIterator = iterator;
|
|
670
|
-
let
|
|
670
|
+
let bufferedUntil = startFromSecond;
|
|
671
671
|
let hasUnblockedPlayback = false;
|
|
672
672
|
const unblockPlayback = () => {
|
|
673
673
|
if (hasUnblockedPlayback) {
|
|
@@ -682,8 +682,9 @@ var audioIteratorManager = ({
|
|
|
682
682
|
getTargetTime,
|
|
683
683
|
playbackRate,
|
|
684
684
|
scheduleAudioNode,
|
|
685
|
-
onScheduled: (sourceDurationInSeconds) => {
|
|
686
|
-
|
|
685
|
+
onScheduled: (sourceDurationInSeconds, timelineTimestamp) => {
|
|
686
|
+
bufferedUntil = Math.max(bufferedUntil, timelineTimestamp + sourceDurationInSeconds);
|
|
687
|
+
const bufferedDuration = bufferedUntil - startFromSecond;
|
|
687
688
|
if (hasEnoughAudioToStartPlayback(bufferedDuration)) {
|
|
688
689
|
unblockPlayback();
|
|
689
690
|
}
|
|
@@ -752,7 +753,8 @@ var audioIteratorManager = ({
|
|
|
752
753
|
return;
|
|
753
754
|
}
|
|
754
755
|
const currentIteratorTimestamp = audioBufferIterator.guessNextTimestamp();
|
|
755
|
-
|
|
756
|
+
const iteratorHasAdvancedThroughSilence = loop && currentAnchor !== null && unloopedNewTime >= currentAnchor.unloopedStartInSeconds && currentIteratorTimestamp >= timeToCheck;
|
|
757
|
+
if (iteratorHasAdvancedThroughSilence || currentIteratorTimestamp < timeToCheck && Math.abs(currentIteratorTimestamp - timeToCheck) < 1) {
|
|
756
758
|
processNext();
|
|
757
759
|
return;
|
|
758
760
|
}
|
|
@@ -843,6 +845,10 @@ var drawPreviewOverlay = ({
|
|
|
843
845
|
}
|
|
844
846
|
};
|
|
845
847
|
|
|
848
|
+
// src/get-shared-input.ts
|
|
849
|
+
import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
|
|
850
|
+
import { Internals as Internals5 } from "remotion";
|
|
851
|
+
|
|
846
852
|
// src/get-duration-or-compute.ts
|
|
847
853
|
var getDurationOrCompute = async (input) => {
|
|
848
854
|
return await input.getDurationFromMetadata(undefined, {
|
|
@@ -850,9 +856,6 @@ var getDurationOrCompute = async (input) => {
|
|
|
850
856
|
}) ?? input.computeDuration(undefined, { skipLiveWait: true });
|
|
851
857
|
};
|
|
852
858
|
|
|
853
|
-
// src/get-shared-input.ts
|
|
854
|
-
import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
|
|
855
|
-
|
|
856
859
|
// src/max-cache-size.ts
|
|
857
860
|
import { cancelRender, Internals as Internals4 } from "remotion";
|
|
858
861
|
var getUncachedMaxCacheSize = (logLevel) => {
|
|
@@ -967,16 +970,16 @@ var resolveRequestInit = ({
|
|
|
967
970
|
};
|
|
968
971
|
|
|
969
972
|
// src/get-shared-input.ts
|
|
970
|
-
var sharedInputs = {};
|
|
971
973
|
var getSharedInputCacheKey = ({
|
|
972
974
|
src,
|
|
973
975
|
credentials,
|
|
974
976
|
requestInit
|
|
975
|
-
}) =>
|
|
977
|
+
}) => Internals5.getMediabunnyInputResourceKey({
|
|
976
978
|
src,
|
|
977
|
-
credentials ?? null,
|
|
978
|
-
getMediaRequestInitFingerprint(requestInit)
|
|
979
|
-
|
|
979
|
+
credentials: credentials ?? null,
|
|
980
|
+
requestInitFingerprint: getMediaRequestInitFingerprint(requestInit),
|
|
981
|
+
revision: null
|
|
982
|
+
});
|
|
980
983
|
var acquireSharedInput = ({
|
|
981
984
|
src,
|
|
982
985
|
credentials,
|
|
@@ -989,35 +992,28 @@ var acquireSharedInput = ({
|
|
|
989
992
|
credentials,
|
|
990
993
|
requestInit: normalizedRequestInit
|
|
991
994
|
});
|
|
992
|
-
const existing = sharedInputs[cacheKey];
|
|
993
|
-
if (existing) {
|
|
994
|
-
existing.refCount++;
|
|
995
|
-
return { input: existing.input, cacheKey };
|
|
996
|
-
}
|
|
997
995
|
const resolvedRequestInit = resolveRequestInit({
|
|
998
996
|
credentials,
|
|
999
997
|
requestInit: normalizedRequestInit
|
|
1000
998
|
});
|
|
1001
|
-
const
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
999
|
+
const lease = Internals5.globalMediaResourceManager.acquire({
|
|
1000
|
+
key: cacheKey,
|
|
1001
|
+
create: () => {
|
|
1002
|
+
const input = new Input({
|
|
1003
|
+
source: new UrlSource(src, {
|
|
1004
|
+
maxCacheSize: getMaxSourceCacheSize(logLevel),
|
|
1005
|
+
...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
|
|
1006
|
+
}),
|
|
1007
|
+
formats: ALL_FORMATS
|
|
1008
|
+
});
|
|
1009
|
+
return { resource: input, dispose: () => input.dispose() };
|
|
1010
|
+
}
|
|
1007
1011
|
});
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
if (!entry) {
|
|
1014
|
-
return;
|
|
1015
|
-
}
|
|
1016
|
-
entry.refCount--;
|
|
1017
|
-
if (entry.refCount <= 0) {
|
|
1018
|
-
delete sharedInputs[cacheKey];
|
|
1019
|
-
entry.input.dispose();
|
|
1020
|
-
}
|
|
1012
|
+
return {
|
|
1013
|
+
input: lease.resource,
|
|
1014
|
+
getDuration: () => lease.getOrCreateValue(Internals5.MEDIABUNNY_DURATION_VALUE_KEY, () => getDurationOrCompute(lease.resource)),
|
|
1015
|
+
release: lease.release
|
|
1016
|
+
};
|
|
1021
1017
|
};
|
|
1022
1018
|
|
|
1023
1019
|
// src/helpers/resolve-audio-track.ts
|
|
@@ -1141,7 +1137,7 @@ class PremountAwareDelayPlayback {
|
|
|
1141
1137
|
|
|
1142
1138
|
// src/video-iterator-manager.ts
|
|
1143
1139
|
import { CanvasSink } from "mediabunny";
|
|
1144
|
-
import { Internals as
|
|
1140
|
+
import { Internals as Internals6 } from "remotion";
|
|
1145
1141
|
|
|
1146
1142
|
// src/helpers/round-to-4-digits.ts
|
|
1147
1143
|
var roundTo4Digits = (timestamp) => {
|
|
@@ -1551,7 +1547,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
|
|
|
1551
1547
|
};
|
|
1552
1548
|
|
|
1553
1549
|
// src/video-iterator-manager.ts
|
|
1554
|
-
var { runEffectChain } =
|
|
1550
|
+
var { runEffectChain } = Internals6;
|
|
1555
1551
|
var isSequentialMediaTimeAdvance = ({
|
|
1556
1552
|
previousTime,
|
|
1557
1553
|
newTime,
|
|
@@ -1630,7 +1626,7 @@ var videoIteratorManager = async ({
|
|
|
1630
1626
|
if (callback) {
|
|
1631
1627
|
callback(frame.canvas);
|
|
1632
1628
|
}
|
|
1633
|
-
|
|
1629
|
+
Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
|
|
1634
1630
|
};
|
|
1635
1631
|
const redrawCurrentFrame = async () => {
|
|
1636
1632
|
if (!lastDrawnFrame) {
|
|
@@ -1642,7 +1638,7 @@ var videoIteratorManager = async ({
|
|
|
1642
1638
|
if (callback) {
|
|
1643
1639
|
callback(lastDrawnFrame.canvas);
|
|
1644
1640
|
}
|
|
1645
|
-
|
|
1641
|
+
Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
|
|
1646
1642
|
};
|
|
1647
1643
|
const startVideoIterator = async (timeToSeek, nonce) => {
|
|
1648
1644
|
let __stack = [];
|
|
@@ -1659,6 +1655,9 @@ var videoIteratorManager = async ({
|
|
|
1659
1655
|
return;
|
|
1660
1656
|
}
|
|
1661
1657
|
if (nonce.isStale()) {
|
|
1658
|
+
if (!videoFrameIterator.isDestroyed() && iterator.initialFrame) {
|
|
1659
|
+
await drawFrame(iterator.initialFrame);
|
|
1660
|
+
}
|
|
1662
1661
|
return;
|
|
1663
1662
|
}
|
|
1664
1663
|
if (videoFrameIterator.isDestroyed()) {
|
|
@@ -1817,14 +1816,15 @@ class MediaPlayer {
|
|
|
1817
1816
|
this.onVideoFrameCallback = onVideoFrameCallback;
|
|
1818
1817
|
this.playing = playing;
|
|
1819
1818
|
this.sequenceOffset = sequenceOffset;
|
|
1820
|
-
const { input,
|
|
1819
|
+
const { input, getDuration, release } = acquireSharedInput({
|
|
1821
1820
|
src: this.src,
|
|
1822
1821
|
credentials,
|
|
1823
1822
|
requestInit,
|
|
1824
1823
|
logLevel
|
|
1825
1824
|
});
|
|
1826
1825
|
this.input = input;
|
|
1827
|
-
this.
|
|
1826
|
+
this.getDuration = getDuration;
|
|
1827
|
+
this.releaseInput = release;
|
|
1828
1828
|
this.tagType = tagType;
|
|
1829
1829
|
this.getEffects = getEffects;
|
|
1830
1830
|
this.getEffectChainState = getEffectChainState;
|
|
@@ -1841,7 +1841,8 @@ class MediaPlayer {
|
|
|
1841
1841
|
}
|
|
1842
1842
|
}
|
|
1843
1843
|
input;
|
|
1844
|
-
|
|
1844
|
+
getDuration;
|
|
1845
|
+
releaseInput;
|
|
1845
1846
|
disposed = false;
|
|
1846
1847
|
isDisposalError() {
|
|
1847
1848
|
return this.disposed || this.input.disposed === true;
|
|
@@ -1892,11 +1893,11 @@ class MediaPlayer {
|
|
|
1892
1893
|
if (isNetworkError(err)) {
|
|
1893
1894
|
throw error;
|
|
1894
1895
|
}
|
|
1895
|
-
|
|
1896
|
+
Internals7.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
|
|
1896
1897
|
return { type: "unknown-container-format" };
|
|
1897
1898
|
}
|
|
1898
1899
|
const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
|
|
1899
|
-
|
|
1900
|
+
this.getDuration(),
|
|
1900
1901
|
this.input.getPrimaryVideoTrack(),
|
|
1901
1902
|
this.input.getAudioTracks()
|
|
1902
1903
|
]);
|
|
@@ -1995,16 +1996,16 @@ class MediaPlayer {
|
|
|
1995
1996
|
if (this.isDisposalError()) {
|
|
1996
1997
|
return { type: "disposed" };
|
|
1997
1998
|
}
|
|
1998
|
-
|
|
1999
|
+
Internals7.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
|
|
1999
2000
|
}
|
|
2000
2001
|
return { type: "success", durationInSeconds };
|
|
2001
2002
|
} catch (error) {
|
|
2002
2003
|
const err = error;
|
|
2003
2004
|
if (isNetworkError(err)) {
|
|
2004
|
-
|
|
2005
|
+
Internals7.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
|
|
2005
2006
|
return { type: "network-error" };
|
|
2006
2007
|
}
|
|
2007
|
-
|
|
2008
|
+
Internals7.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
|
|
2008
2009
|
throw error;
|
|
2009
2010
|
}
|
|
2010
2011
|
} catch (_catch) {
|
|
@@ -2188,7 +2189,7 @@ class MediaPlayer {
|
|
|
2188
2189
|
this.nonceManager.createAsyncOperation();
|
|
2189
2190
|
this.videoIteratorManager?.destroy();
|
|
2190
2191
|
this.audioIteratorManager?.destroyIterator();
|
|
2191
|
-
|
|
2192
|
+
this.releaseInput();
|
|
2192
2193
|
}
|
|
2193
2194
|
getTargetTime = (mediaTimestamp, currentTime) => {
|
|
2194
2195
|
if (!this.sharedAudioContext) {
|
|
@@ -2302,7 +2303,7 @@ var callOnErrorAndResolve = ({
|
|
|
2302
2303
|
|
|
2303
2304
|
// src/use-common-effects.ts
|
|
2304
2305
|
import { useContext, useLayoutEffect } from "react";
|
|
2305
|
-
import { Internals as
|
|
2306
|
+
import { Internals as Internals8 } from "remotion";
|
|
2306
2307
|
var useCommonEffects = ({
|
|
2307
2308
|
mediaPlayerRef,
|
|
2308
2309
|
mediaPlayerReady,
|
|
@@ -2326,7 +2327,7 @@ var useCommonEffects = ({
|
|
|
2326
2327
|
logLevel,
|
|
2327
2328
|
label
|
|
2328
2329
|
}) => {
|
|
2329
|
-
const sharedAudioContext = useContext(
|
|
2330
|
+
const sharedAudioContext = useContext(Internals8.SharedAudioContext);
|
|
2330
2331
|
useLayoutEffect(() => {
|
|
2331
2332
|
const mediaPlayer = mediaPlayerRef.current;
|
|
2332
2333
|
if (!mediaPlayer)
|
|
@@ -2444,7 +2445,7 @@ var useCommonEffects = ({
|
|
|
2444
2445
|
if (!mediaPlayer || !mediaPlayerReady)
|
|
2445
2446
|
return;
|
|
2446
2447
|
mediaPlayer.seekTo(currentTime).catch(() => {});
|
|
2447
|
-
|
|
2448
|
+
Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[${label}] Updating target time to ${currentTime.toFixed(3)}s`);
|
|
2448
2449
|
}, [currentTime, logLevel, mediaPlayerReady, label, mediaPlayerRef]);
|
|
2449
2450
|
};
|
|
2450
2451
|
|
|
@@ -2461,7 +2462,7 @@ var {
|
|
|
2461
2462
|
warnAboutTooHighVolume,
|
|
2462
2463
|
usePreload,
|
|
2463
2464
|
SequenceContext
|
|
2464
|
-
} =
|
|
2465
|
+
} = Internals9;
|
|
2465
2466
|
var AudioForPreviewAssertedShowing = ({
|
|
2466
2467
|
src,
|
|
2467
2468
|
playbackRate,
|
|
@@ -2494,7 +2495,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2494
2495
|
const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
|
|
2495
2496
|
const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
|
|
2496
2497
|
const [playing] = Timeline.usePlayingState();
|
|
2497
|
-
const { playbackRate: globalPlaybackRate } =
|
|
2498
|
+
const { playbackRate: globalPlaybackRate } = Internals9.usePlaybackRate();
|
|
2498
2499
|
const sharedAudioContext = useContext2(SharedAudioContext);
|
|
2499
2500
|
const buffer = useBufferState();
|
|
2500
2501
|
const [playerMuted] = usePlayerMutedState();
|
|
@@ -2520,12 +2521,12 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2520
2521
|
const isPremounting = Boolean(parentSequence?.premounting);
|
|
2521
2522
|
const isPostmounting = Boolean(parentSequence?.postmounting);
|
|
2522
2523
|
const sequenceOffset = (parentSequence?.absoluteFrom ?? 0) / videoConfig.fps;
|
|
2523
|
-
const bufferingContext = useContext2(
|
|
2524
|
+
const bufferingContext = useContext2(Internals9.BufferingContextReact);
|
|
2524
2525
|
if (!bufferingContext) {
|
|
2525
2526
|
throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
|
|
2526
2527
|
}
|
|
2527
2528
|
const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
|
|
2528
|
-
const isPlayerBuffering =
|
|
2529
|
+
const isPlayerBuffering = Internals9.useIsPlayerBuffering(bufferingContext);
|
|
2529
2530
|
const initialPlaying = useRef(playing && !isPlayerBuffering);
|
|
2530
2531
|
const initialIsPremounting = useRef(isPremounting);
|
|
2531
2532
|
const initialIsPostmounting = useRef(isPostmounting);
|
|
@@ -2621,7 +2622,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2621
2622
|
if (action === "fail") {
|
|
2622
2623
|
throw errorToUse;
|
|
2623
2624
|
} else {
|
|
2624
|
-
|
|
2625
|
+
Internals9.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
2625
2626
|
setShouldFallbackToNativeAudio(true);
|
|
2626
2627
|
}
|
|
2627
2628
|
};
|
|
@@ -2647,7 +2648,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2647
2648
|
if (result.type === "success") {
|
|
2648
2649
|
setMediaPlayerReady(true);
|
|
2649
2650
|
setMediaDurationInSeconds(result.durationInSeconds);
|
|
2650
|
-
|
|
2651
|
+
Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
|
|
2651
2652
|
}
|
|
2652
2653
|
}).catch((error) => {
|
|
2653
2654
|
const [action, errorToUse] = callOnErrorAndResolve({
|
|
@@ -2660,7 +2661,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2660
2661
|
if (action === "fail") {
|
|
2661
2662
|
throw errorToUse;
|
|
2662
2663
|
} else {
|
|
2663
|
-
|
|
2664
|
+
Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
|
|
2664
2665
|
setShouldFallbackToNativeAudio(true);
|
|
2665
2666
|
}
|
|
2666
2667
|
});
|
|
@@ -2675,12 +2676,12 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2675
2676
|
if (action === "fail") {
|
|
2676
2677
|
throw errorToUse;
|
|
2677
2678
|
}
|
|
2678
|
-
|
|
2679
|
+
Internals9.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
|
|
2679
2680
|
setShouldFallbackToNativeAudio(true);
|
|
2680
2681
|
}
|
|
2681
2682
|
return () => {
|
|
2682
2683
|
if (mediaPlayerRef.current) {
|
|
2683
|
-
|
|
2684
|
+
Internals9.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
|
|
2684
2685
|
mediaPlayerRef.current.dispose();
|
|
2685
2686
|
mediaPlayerRef.current = null;
|
|
2686
2687
|
}
|
|
@@ -2748,7 +2749,7 @@ var AudioForPreview = ({
|
|
|
2748
2749
|
style
|
|
2749
2750
|
}) => {
|
|
2750
2751
|
const preloadedSrc = usePreload(src);
|
|
2751
|
-
const defaultLogLevel =
|
|
2752
|
+
const defaultLogLevel = Internals9.useLogLevel();
|
|
2752
2753
|
const frame = useCurrentFrame();
|
|
2753
2754
|
const videoConfig = useVideoConfig();
|
|
2754
2755
|
const currentTime = frame / videoConfig.fps;
|
|
@@ -2809,7 +2810,7 @@ import { useContext as useContext3, useLayoutEffect as useLayoutEffect2, useMemo
|
|
|
2809
2810
|
import {
|
|
2810
2811
|
cancelRender as cancelRender2,
|
|
2811
2812
|
Html5Audio,
|
|
2812
|
-
Internals as
|
|
2813
|
+
Internals as Internals18,
|
|
2813
2814
|
random,
|
|
2814
2815
|
useCurrentFrame as useCurrentFrame2,
|
|
2815
2816
|
useDelayRender,
|
|
@@ -2818,10 +2819,10 @@ import {
|
|
|
2818
2819
|
|
|
2819
2820
|
// src/caches.ts
|
|
2820
2821
|
import React2 from "react";
|
|
2821
|
-
import { Internals as
|
|
2822
|
+
import { Internals as Internals16 } from "remotion";
|
|
2822
2823
|
|
|
2823
2824
|
// src/audio-extraction/audio-manager.ts
|
|
2824
|
-
import { Internals as
|
|
2825
|
+
import { Internals as Internals11 } from "remotion";
|
|
2825
2826
|
|
|
2826
2827
|
// src/serialized-queue.ts
|
|
2827
2828
|
var makeSerializedQueue = () => {
|
|
@@ -2838,7 +2839,7 @@ var makeSerializedQueue = () => {
|
|
|
2838
2839
|
};
|
|
2839
2840
|
|
|
2840
2841
|
// src/audio-extraction/audio-iterator.ts
|
|
2841
|
-
import { Internals as
|
|
2842
|
+
import { Internals as Internals10 } from "remotion";
|
|
2842
2843
|
|
|
2843
2844
|
// src/audio-extraction/audio-cache.ts
|
|
2844
2845
|
var BYTES_PER_SAMPLE = {
|
|
@@ -2938,7 +2939,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
|
|
|
2938
2939
|
return;
|
|
2939
2940
|
}
|
|
2940
2941
|
warned[src] = true;
|
|
2941
|
-
|
|
2942
|
+
Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
|
|
2942
2943
|
};
|
|
2943
2944
|
var makeAudioIterator2 = ({
|
|
2944
2945
|
audioSampleSink,
|
|
@@ -3006,7 +3007,7 @@ var makeAudioIterator2 = ({
|
|
|
3006
3007
|
if (openTimestamps.length > 0) {
|
|
3007
3008
|
const first = openTimestamps[0];
|
|
3008
3009
|
const last = openTimestamps[openTimestamps.length - 1];
|
|
3009
|
-
|
|
3010
|
+
Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
|
|
3010
3011
|
}
|
|
3011
3012
|
};
|
|
3012
3013
|
const getCacheStats = () => {
|
|
@@ -3106,7 +3107,7 @@ var makeAudioManager = ({
|
|
|
3106
3107
|
if (seenKeys.has(key)) {
|
|
3107
3108
|
iterator.prepareForDeletion();
|
|
3108
3109
|
iterators.splice(iterators.indexOf(iterator), 1);
|
|
3109
|
-
|
|
3110
|
+
Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
|
|
3110
3111
|
}
|
|
3111
3112
|
seenKeys.add(key);
|
|
3112
3113
|
}
|
|
@@ -3130,7 +3131,7 @@ var makeAudioManager = ({
|
|
|
3130
3131
|
attempts++;
|
|
3131
3132
|
}
|
|
3132
3133
|
if ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts >= maxAttempts) {
|
|
3133
|
-
|
|
3134
|
+
Internals11.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
|
|
3134
3135
|
}
|
|
3135
3136
|
for (const iterator of iterators) {
|
|
3136
3137
|
if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
|
|
@@ -3216,7 +3217,7 @@ var makeAudioManager = ({
|
|
|
3216
3217
|
};
|
|
3217
3218
|
|
|
3218
3219
|
// src/get-sink.ts
|
|
3219
|
-
import { Internals as
|
|
3220
|
+
import { Internals as Internals13 } from "remotion";
|
|
3220
3221
|
|
|
3221
3222
|
// src/video-extraction/get-frames-since-keyframe.ts
|
|
3222
3223
|
import {
|
|
@@ -3229,7 +3230,7 @@ import {
|
|
|
3229
3230
|
VideoSampleSink,
|
|
3230
3231
|
WEBM
|
|
3231
3232
|
} from "mediabunny";
|
|
3232
|
-
import { Internals as
|
|
3233
|
+
import { Internals as Internals12 } from "remotion";
|
|
3233
3234
|
|
|
3234
3235
|
// src/browser-can-use-webgl2.ts
|
|
3235
3236
|
var browserCanUseWebGl2 = null;
|
|
@@ -3325,7 +3326,7 @@ var makeSinks = (src, logLevel, credentials, requestInit) => {
|
|
|
3325
3326
|
});
|
|
3326
3327
|
const hasAlpha = startPacket?.sideData.alpha;
|
|
3327
3328
|
if (hasAlpha && !canBrowserUseWebGl2()) {
|
|
3328
|
-
|
|
3329
|
+
Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
|
|
3329
3330
|
}
|
|
3330
3331
|
return {
|
|
3331
3332
|
sampleSink
|
|
@@ -3418,7 +3419,7 @@ var makeSinkManager = () => {
|
|
|
3418
3419
|
});
|
|
3419
3420
|
let promise = sinkPromises[cacheKey];
|
|
3420
3421
|
if (!promise) {
|
|
3421
|
-
|
|
3422
|
+
Internals13.Log.verbose({
|
|
3422
3423
|
logLevel,
|
|
3423
3424
|
tag: "@remotion/media"
|
|
3424
3425
|
}, `Sink for ${src} was not found, creating new sink`);
|
|
@@ -3453,7 +3454,7 @@ var makeSinkManager = () => {
|
|
|
3453
3454
|
};
|
|
3454
3455
|
|
|
3455
3456
|
// src/video-extraction/keyframe-manager.ts
|
|
3456
|
-
import { Internals as
|
|
3457
|
+
import { Internals as Internals15 } from "remotion";
|
|
3457
3458
|
|
|
3458
3459
|
// src/render-timestamp-range.ts
|
|
3459
3460
|
var renderTimestampRange = (timestamps) => {
|
|
@@ -3467,7 +3468,7 @@ var renderTimestampRange = (timestamps) => {
|
|
|
3467
3468
|
};
|
|
3468
3469
|
|
|
3469
3470
|
// src/video-extraction/keyframe-bank.ts
|
|
3470
|
-
import { Internals as
|
|
3471
|
+
import { Internals as Internals14 } from "remotion";
|
|
3471
3472
|
|
|
3472
3473
|
// src/video-extraction/get-allocation-size.ts
|
|
3473
3474
|
var BYTES_PER_PIXEL_FOR_OPAQUE_FRAME = 3;
|
|
@@ -3548,7 +3549,7 @@ var makeKeyframeBank = async ({
|
|
|
3548
3549
|
}
|
|
3549
3550
|
}
|
|
3550
3551
|
if (deletedTimestamps.length > 0) {
|
|
3551
|
-
|
|
3552
|
+
Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
|
|
3552
3553
|
}
|
|
3553
3554
|
};
|
|
3554
3555
|
const hasDecodedEnoughForTimestamp = (timestamp) => {
|
|
@@ -3577,7 +3578,7 @@ var makeKeyframeBank = async ({
|
|
|
3577
3578
|
frameTimestamps.push(frame.timestamp);
|
|
3578
3579
|
allocationSize += getAllocationSize(frame);
|
|
3579
3580
|
lastUsed = Date.now();
|
|
3580
|
-
|
|
3581
|
+
Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
|
|
3581
3582
|
};
|
|
3582
3583
|
const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel, fps) => {
|
|
3583
3584
|
while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
|
|
@@ -3632,7 +3633,7 @@ var makeKeyframeBank = async ({
|
|
|
3632
3633
|
throw new Error("No first frame found");
|
|
3633
3634
|
}
|
|
3634
3635
|
const startTimestampInSeconds = firstFrame.value.timestamp;
|
|
3635
|
-
|
|
3636
|
+
Internals14.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
|
|
3636
3637
|
addFrame(firstFrame.value, parentLogLevel);
|
|
3637
3638
|
const getRangeOfTimestamps = () => {
|
|
3638
3639
|
if (frameTimestamps.length === 0) {
|
|
@@ -3649,7 +3650,7 @@ var makeKeyframeBank = async ({
|
|
|
3649
3650
|
const prepareForDeletion = (logLevel, reason) => {
|
|
3650
3651
|
const range = getRangeOfTimestamps();
|
|
3651
3652
|
if (range) {
|
|
3652
|
-
|
|
3653
|
+
Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
|
|
3653
3654
|
}
|
|
3654
3655
|
let framesDeleted = 0;
|
|
3655
3656
|
for (const frameTimestamp of frameTimestamps.slice()) {
|
|
@@ -3747,10 +3748,10 @@ var makeKeyframeManager = ({
|
|
|
3747
3748
|
if (size === 0) {
|
|
3748
3749
|
continue;
|
|
3749
3750
|
}
|
|
3750
|
-
|
|
3751
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
|
|
3751
3752
|
}
|
|
3752
3753
|
}
|
|
3753
|
-
|
|
3754
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
|
|
3754
3755
|
};
|
|
3755
3756
|
const getCacheStats = () => {
|
|
3756
3757
|
let count = 0;
|
|
@@ -3800,7 +3801,7 @@ var makeKeyframeManager = ({
|
|
|
3800
3801
|
const { framesDeleted } = bank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
|
|
3801
3802
|
sources[src].splice(index, 1);
|
|
3802
3803
|
if (range) {
|
|
3803
|
-
|
|
3804
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${src} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
|
|
3804
3805
|
}
|
|
3805
3806
|
return { finish: false };
|
|
3806
3807
|
};
|
|
@@ -3813,12 +3814,12 @@ var makeKeyframeManager = ({
|
|
|
3813
3814
|
if (finish) {
|
|
3814
3815
|
break;
|
|
3815
3816
|
}
|
|
3816
|
-
|
|
3817
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
|
|
3817
3818
|
cacheStats = getTotalCacheStats();
|
|
3818
3819
|
attempts++;
|
|
3819
3820
|
}
|
|
3820
3821
|
if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
|
|
3821
|
-
|
|
3822
|
+
Internals15.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
|
|
3822
3823
|
}
|
|
3823
3824
|
};
|
|
3824
3825
|
const clearKeyframeBanksBeforeTime = ({
|
|
@@ -3847,7 +3848,7 @@ var makeKeyframeManager = ({
|
|
|
3847
3848
|
}
|
|
3848
3849
|
if (range.lastTimestamp < threshold) {
|
|
3849
3850
|
bank.prepareForDeletion(logLevel, "cleared before threshold " + threshold);
|
|
3850
|
-
|
|
3851
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
|
|
3851
3852
|
const bankIndex = banks.indexOf(bank);
|
|
3852
3853
|
delete sources[src][bankIndex];
|
|
3853
3854
|
} else {
|
|
@@ -3869,7 +3870,7 @@ var makeKeyframeManager = ({
|
|
|
3869
3870
|
const existingBanks = sources[src] ?? [];
|
|
3870
3871
|
const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
|
|
3871
3872
|
if (!existingBank) {
|
|
3872
|
-
|
|
3873
|
+
Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
|
|
3873
3874
|
const newKeyframeBank = await makeKeyframeBank({
|
|
3874
3875
|
videoSampleSink,
|
|
3875
3876
|
logLevel,
|
|
@@ -3882,10 +3883,10 @@ var makeKeyframeManager = ({
|
|
|
3882
3883
|
return newKeyframeBank;
|
|
3883
3884
|
}
|
|
3884
3885
|
if (existingBank.canSatisfyTimestamp(timestamp)) {
|
|
3885
|
-
|
|
3886
|
+
Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
|
|
3886
3887
|
return existingBank;
|
|
3887
3888
|
}
|
|
3888
|
-
|
|
3889
|
+
Internals15.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
|
|
3889
3890
|
existingBank.prepareForDeletion(logLevel, "already existed but evicted");
|
|
3890
3891
|
sources[src] = sources[src].filter((bank) => bank !== existingBank);
|
|
3891
3892
|
const replacementKeybank = await makeKeyframeBank({
|
|
@@ -4031,7 +4032,7 @@ var makeMediaCache = () => {
|
|
|
4031
4032
|
};
|
|
4032
4033
|
var globalMediaCache = makeMediaCache();
|
|
4033
4034
|
var useRenderMediaCache = (logLevel) => {
|
|
4034
|
-
const renderResourceManager = React2.useContext(
|
|
4035
|
+
const renderResourceManager = React2.useContext(Internals16.RenderResourceManagerContext);
|
|
4035
4036
|
if (renderResourceManager === null) {
|
|
4036
4037
|
return globalMediaCache;
|
|
4037
4038
|
}
|
|
@@ -4047,7 +4048,7 @@ var useRenderMediaCache = (logLevel) => {
|
|
|
4047
4048
|
});
|
|
4048
4049
|
};
|
|
4049
4050
|
var useMaxMediaCacheSize = (logLevel) => {
|
|
4050
|
-
const context = React2.useContext(
|
|
4051
|
+
const context = React2.useContext(Internals16.MaxMediaCacheSizeContext);
|
|
4051
4052
|
if (context === null) {
|
|
4052
4053
|
return getMaxVideoCacheSize(logLevel);
|
|
4053
4054
|
}
|
|
@@ -4455,7 +4456,7 @@ var extractAudio = (params) => {
|
|
|
4455
4456
|
};
|
|
4456
4457
|
|
|
4457
4458
|
// src/video-extraction/extract-frame.ts
|
|
4458
|
-
import { Internals as
|
|
4459
|
+
import { Internals as Internals17 } from "remotion";
|
|
4459
4460
|
var extractFrameInternal = async ({
|
|
4460
4461
|
src,
|
|
4461
4462
|
timeInSeconds: unloopedTimeInSeconds,
|
|
@@ -4545,7 +4546,7 @@ var extractFrameInternal = async ({
|
|
|
4545
4546
|
durationInSeconds: await sink.getDuration()
|
|
4546
4547
|
};
|
|
4547
4548
|
} catch (err) {
|
|
4548
|
-
|
|
4549
|
+
Internals17.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
|
|
4549
4550
|
return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
|
|
4550
4551
|
}
|
|
4551
4552
|
};
|
|
@@ -4984,13 +4985,13 @@ var AudioForRendering = ({
|
|
|
4984
4985
|
credentials,
|
|
4985
4986
|
requestInit
|
|
4986
4987
|
}) => {
|
|
4987
|
-
const defaultLogLevel =
|
|
4988
|
+
const defaultLogLevel = Internals18.useLogLevel();
|
|
4988
4989
|
const logLevel = overriddenLogLevel ?? defaultLogLevel;
|
|
4989
4990
|
const frame = useCurrentFrame2();
|
|
4990
|
-
const absoluteFrame =
|
|
4991
|
-
const videoConfig =
|
|
4992
|
-
const { registerRenderAsset, unregisterRenderAsset } = useContext3(
|
|
4993
|
-
const startsAt =
|
|
4991
|
+
const absoluteFrame = Internals18.useTimelinePosition();
|
|
4992
|
+
const videoConfig = Internals18.useUnsafeVideoConfig();
|
|
4993
|
+
const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals18.RenderAssetManager);
|
|
4994
|
+
const startsAt = Internals18.useMediaStartsAt();
|
|
4994
4995
|
const environment = useRemotionEnvironment();
|
|
4995
4996
|
if (!videoConfig) {
|
|
4996
4997
|
throw new Error("No video config found");
|
|
@@ -5002,7 +5003,7 @@ var AudioForRendering = ({
|
|
|
5002
5003
|
const { delayRender, continueRender } = useDelayRender();
|
|
5003
5004
|
const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
|
|
5004
5005
|
const [initialRequestInit] = useState2(requestInit);
|
|
5005
|
-
const sequenceContext = useContext3(
|
|
5006
|
+
const sequenceContext = useContext3(Internals18.SequenceContext);
|
|
5006
5007
|
const id = useMemo2(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
|
|
5007
5008
|
src,
|
|
5008
5009
|
sequenceContext?.cumulatedFrom,
|
|
@@ -5011,7 +5012,7 @@ var AudioForRendering = ({
|
|
|
5011
5012
|
]);
|
|
5012
5013
|
const maxCacheSize = useMaxMediaCacheSize(logLevel);
|
|
5013
5014
|
const mediaCache = useRenderMediaCache(logLevel);
|
|
5014
|
-
const audioEnabled =
|
|
5015
|
+
const audioEnabled = Internals18.useAudioEnabled();
|
|
5015
5016
|
useLayoutEffect2(() => {
|
|
5016
5017
|
const timestamp = frame / fps;
|
|
5017
5018
|
const durationInSeconds = 1 / fps;
|
|
@@ -5067,7 +5068,7 @@ var AudioForRendering = ({
|
|
|
5067
5068
|
if (action === "fail") {
|
|
5068
5069
|
cancelRender2(errorToUse);
|
|
5069
5070
|
}
|
|
5070
|
-
|
|
5071
|
+
Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
5071
5072
|
setReplaceWithHtml5Audio(true);
|
|
5072
5073
|
};
|
|
5073
5074
|
if (result.type === "unknown-container-format") {
|
|
@@ -5097,12 +5098,12 @@ var AudioForRendering = ({
|
|
|
5097
5098
|
frame,
|
|
5098
5099
|
startsAt
|
|
5099
5100
|
});
|
|
5100
|
-
const volume =
|
|
5101
|
+
const volume = Internals18.evaluateVolume({
|
|
5101
5102
|
volume: volumeProp,
|
|
5102
5103
|
frame: volumePropsFrame,
|
|
5103
5104
|
mediaVolume: 1
|
|
5104
5105
|
});
|
|
5105
|
-
|
|
5106
|
+
Internals18.warnAboutTooHighVolume(volume);
|
|
5106
5107
|
if (audio && volume > 0) {
|
|
5107
5108
|
applyVolume(audio.data, volume);
|
|
5108
5109
|
registerRenderAsset({
|
|
@@ -5185,7 +5186,7 @@ var AudioForRendering = ({
|
|
|
5185
5186
|
|
|
5186
5187
|
// src/audio/audio.tsx
|
|
5187
5188
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
5188
|
-
var { validateMediaProps } =
|
|
5189
|
+
var { validateMediaProps } = Internals19;
|
|
5189
5190
|
var audioSchema = {
|
|
5190
5191
|
src: {
|
|
5191
5192
|
type: "asset",
|
|
@@ -5193,8 +5194,8 @@ var audioSchema = {
|
|
|
5193
5194
|
description: "Source",
|
|
5194
5195
|
keyframable: false
|
|
5195
5196
|
},
|
|
5196
|
-
...
|
|
5197
|
-
...
|
|
5197
|
+
...Internals19.baseSchema,
|
|
5198
|
+
...Internals19.premountSchema,
|
|
5198
5199
|
volume: {
|
|
5199
5200
|
type: "number",
|
|
5200
5201
|
min: 0,
|
|
@@ -5231,12 +5232,12 @@ var AudioInner = (props) => {
|
|
|
5231
5232
|
...otherProps
|
|
5232
5233
|
} = props;
|
|
5233
5234
|
const environment = useRemotionEnvironment2();
|
|
5234
|
-
const sourceStack = controls ?
|
|
5235
|
-
const [mediaVolume] =
|
|
5236
|
-
const mediaStartsAt =
|
|
5235
|
+
const sourceStack = controls ? Internals19.getStackForControls(controls) : null;
|
|
5236
|
+
const [mediaVolume] = Internals19.useMediaVolumeState();
|
|
5237
|
+
const mediaStartsAt = Internals19.useMediaStartsAt();
|
|
5237
5238
|
const videoConfig = useVideoConfig2();
|
|
5238
5239
|
const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
|
|
5239
|
-
const basicInfo =
|
|
5240
|
+
const basicInfo = Internals19.useBasicMediaInTimeline({
|
|
5240
5241
|
src: props.src,
|
|
5241
5242
|
volume: props.volume,
|
|
5242
5243
|
playbackRate: props.playbackRate ?? 1,
|
|
@@ -5280,7 +5281,7 @@ var AudioInner = (props) => {
|
|
|
5280
5281
|
postmountingActive,
|
|
5281
5282
|
premountingActive,
|
|
5282
5283
|
premountingStyle
|
|
5283
|
-
} =
|
|
5284
|
+
} = Internals19.usePremounting({
|
|
5284
5285
|
from: from ?? 0,
|
|
5285
5286
|
durationInFrames: basicInfo.duration,
|
|
5286
5287
|
premountFor: premountFor ?? null,
|
|
@@ -5341,7 +5342,7 @@ var Audio = Interactive.withSchema({
|
|
|
5341
5342
|
import React6, { useMemo as useMemo6, useState as useState6 } from "react";
|
|
5342
5343
|
import {
|
|
5343
5344
|
Freeze as Freeze2,
|
|
5344
|
-
Internals as
|
|
5345
|
+
Internals as Internals24,
|
|
5345
5346
|
Interactive as Interactive2,
|
|
5346
5347
|
Sequence as Sequence2,
|
|
5347
5348
|
useRemotionEnvironment as useRemotionEnvironment4,
|
|
@@ -5349,7 +5350,7 @@ import {
|
|
|
5349
5350
|
} from "remotion";
|
|
5350
5351
|
|
|
5351
5352
|
// src/video/get-video-sequence-duration.ts
|
|
5352
|
-
import { Internals as
|
|
5353
|
+
import { Internals as Internals20 } from "remotion";
|
|
5353
5354
|
var getVideoSequenceDuration = ({
|
|
5354
5355
|
durationInFrames,
|
|
5355
5356
|
loop,
|
|
@@ -5360,7 +5361,7 @@ var getVideoSequenceDuration = ({
|
|
|
5360
5361
|
if (loop || trimAfter === undefined) {
|
|
5361
5362
|
return durationInFrames;
|
|
5362
5363
|
}
|
|
5363
|
-
const trimmedDuration =
|
|
5364
|
+
const trimmedDuration = Internals20.calculateMediaDuration({
|
|
5364
5365
|
trimAfter,
|
|
5365
5366
|
trimBefore,
|
|
5366
5367
|
playbackRate,
|
|
@@ -5381,7 +5382,7 @@ import {
|
|
|
5381
5382
|
} from "react";
|
|
5382
5383
|
import {
|
|
5383
5384
|
Html5Video,
|
|
5384
|
-
Internals as
|
|
5385
|
+
Internals as Internals22,
|
|
5385
5386
|
useBufferState as useBufferState2,
|
|
5386
5387
|
useCurrentFrame as useCurrentFrame3,
|
|
5387
5388
|
useVideoConfig as useVideoConfig3
|
|
@@ -5424,7 +5425,7 @@ var getCachedVideoFrame = (src) => {
|
|
|
5424
5425
|
};
|
|
5425
5426
|
|
|
5426
5427
|
// src/video/warn-object-fit-css.ts
|
|
5427
|
-
import { Internals as
|
|
5428
|
+
import { Internals as Internals21 } from "remotion";
|
|
5428
5429
|
var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
|
|
5429
5430
|
var warnedStyle = false;
|
|
5430
5431
|
var warnedClassName = false;
|
|
@@ -5435,11 +5436,11 @@ var warnAboutObjectFitInStyleOrClassName = ({
|
|
|
5435
5436
|
}) => {
|
|
5436
5437
|
if (!warnedStyle && style?.objectFit) {
|
|
5437
5438
|
warnedStyle = true;
|
|
5438
|
-
|
|
5439
|
+
Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
|
|
5439
5440
|
}
|
|
5440
5441
|
if (!warnedClassName && className && OBJECT_FIT_CLASS_PATTERN.test(className)) {
|
|
5441
5442
|
warnedClassName = true;
|
|
5442
|
-
|
|
5443
|
+
Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
|
|
5443
5444
|
}
|
|
5444
5445
|
};
|
|
5445
5446
|
|
|
@@ -5457,7 +5458,7 @@ var {
|
|
|
5457
5458
|
usePreload: usePreload2,
|
|
5458
5459
|
SequenceContext: SequenceContext2,
|
|
5459
5460
|
useEffectChainState
|
|
5460
|
-
} =
|
|
5461
|
+
} = Internals22;
|
|
5461
5462
|
var VideoForPreviewAssertedShowing = ({
|
|
5462
5463
|
src: unpreloadedSrc,
|
|
5463
5464
|
style,
|
|
@@ -5500,7 +5501,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5500
5501
|
const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
|
|
5501
5502
|
const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
|
|
5502
5503
|
const [playing] = Timeline2.usePlayingState();
|
|
5503
|
-
const { playbackRate: globalPlaybackRate } =
|
|
5504
|
+
const { playbackRate: globalPlaybackRate } = Internals22.usePlaybackRate();
|
|
5504
5505
|
const sharedAudioContext = useContext4(SharedAudioContext2);
|
|
5505
5506
|
const buffer = useBufferState2();
|
|
5506
5507
|
const canvasRefCallback = useCallback((canvas) => {
|
|
@@ -5537,12 +5538,12 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5537
5538
|
const currentTimeRef = useRef2(currentTime);
|
|
5538
5539
|
currentTimeRef.current = currentTime;
|
|
5539
5540
|
const preloadedSrc = usePreload2(src);
|
|
5540
|
-
const buffering = useContext4(
|
|
5541
|
+
const buffering = useContext4(Internals22.BufferingContextReact);
|
|
5541
5542
|
if (!buffering) {
|
|
5542
5543
|
throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
|
|
5543
5544
|
}
|
|
5544
5545
|
const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
|
|
5545
|
-
const isPlayerBuffering =
|
|
5546
|
+
const isPlayerBuffering = Internals22.useIsPlayerBuffering(buffering);
|
|
5546
5547
|
const initialPlaying = useRef2(playing && !isPlayerBuffering);
|
|
5547
5548
|
const initialIsPremounting = useRef2(isPremounting);
|
|
5548
5549
|
const initialIsPostmounting = useRef2(isPostmounting);
|
|
@@ -5639,7 +5640,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5639
5640
|
if (action === "fail") {
|
|
5640
5641
|
throw errorToUse;
|
|
5641
5642
|
}
|
|
5642
|
-
|
|
5643
|
+
Internals22.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
5643
5644
|
setShouldFallbackToNativeVideo(true);
|
|
5644
5645
|
};
|
|
5645
5646
|
if (result.type === "unknown-container-format") {
|
|
@@ -5681,7 +5682,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5681
5682
|
if (action === "fail") {
|
|
5682
5683
|
throw errorToUse;
|
|
5683
5684
|
}
|
|
5684
|
-
|
|
5685
|
+
Internals22.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
|
|
5685
5686
|
setShouldFallbackToNativeVideo(true);
|
|
5686
5687
|
});
|
|
5687
5688
|
} catch (error) {
|
|
@@ -5695,12 +5696,12 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5695
5696
|
if (action === "fail") {
|
|
5696
5697
|
throw errorToUse;
|
|
5697
5698
|
}
|
|
5698
|
-
|
|
5699
|
+
Internals22.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
|
|
5699
5700
|
setShouldFallbackToNativeVideo(true);
|
|
5700
5701
|
}
|
|
5701
5702
|
return () => {
|
|
5702
5703
|
if (mediaPlayerRef.current) {
|
|
5703
|
-
|
|
5704
|
+
Internals22.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
|
|
5704
5705
|
mediaPlayerRef.current.dispose();
|
|
5705
5706
|
mediaPlayerRef.current = null;
|
|
5706
5707
|
}
|
|
@@ -5724,7 +5725,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5724
5725
|
]);
|
|
5725
5726
|
warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
|
|
5726
5727
|
const classNameValue = useMemo4(() => {
|
|
5727
|
-
return [
|
|
5728
|
+
return [Internals22.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals22.truthy).join(" ");
|
|
5728
5729
|
}, [className]);
|
|
5729
5730
|
useCommonEffects({
|
|
5730
5731
|
mediaPlayerRef,
|
|
@@ -5848,7 +5849,7 @@ import {
|
|
|
5848
5849
|
useState as useState5
|
|
5849
5850
|
} from "react";
|
|
5850
5851
|
import {
|
|
5851
|
-
Internals as
|
|
5852
|
+
Internals as Internals23,
|
|
5852
5853
|
Loop,
|
|
5853
5854
|
random as random2,
|
|
5854
5855
|
useCurrentFrame as useCurrentFrame4,
|
|
@@ -5889,11 +5890,11 @@ var VideoForRendering = ({
|
|
|
5889
5890
|
throw new TypeError("No `src` was passed to <Video>.");
|
|
5890
5891
|
}
|
|
5891
5892
|
const frame = useCurrentFrame4();
|
|
5892
|
-
const absoluteFrame =
|
|
5893
|
+
const absoluteFrame = Internals23.useTimelinePosition();
|
|
5893
5894
|
const { fps } = useVideoConfig4();
|
|
5894
|
-
const { registerRenderAsset, unregisterRenderAsset } = useContext5(
|
|
5895
|
-
const startsAt =
|
|
5896
|
-
const sequenceContext = useContext5(
|
|
5895
|
+
const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals23.RenderAssetManager);
|
|
5896
|
+
const startsAt = Internals23.useMediaStartsAt();
|
|
5897
|
+
const sequenceContext = useContext5(Internals23.SequenceContext);
|
|
5897
5898
|
const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
|
|
5898
5899
|
src,
|
|
5899
5900
|
sequenceContext?.cumulatedFrom,
|
|
@@ -5905,11 +5906,11 @@ var VideoForRendering = ({
|
|
|
5905
5906
|
const canvasRef = useRef3(null);
|
|
5906
5907
|
const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
|
|
5907
5908
|
const [initialRequestInit] = useState5(requestInit);
|
|
5908
|
-
const audioEnabled =
|
|
5909
|
-
const videoEnabled =
|
|
5909
|
+
const audioEnabled = Internals23.useAudioEnabled();
|
|
5910
|
+
const videoEnabled = Internals23.useVideoEnabled();
|
|
5910
5911
|
const maxCacheSize = useMaxMediaCacheSize(logLevel);
|
|
5911
5912
|
const mediaCache = useRenderMediaCache(logLevel);
|
|
5912
|
-
const effectChainState =
|
|
5913
|
+
const effectChainState = Internals23.useEffectChainState();
|
|
5913
5914
|
const [error, setError] = useState5(null);
|
|
5914
5915
|
if (error) {
|
|
5915
5916
|
throw error;
|
|
@@ -5981,7 +5982,7 @@ var VideoForRendering = ({
|
|
|
5981
5982
|
return;
|
|
5982
5983
|
}
|
|
5983
5984
|
if (window.remotion_isMainTab) {
|
|
5984
|
-
|
|
5985
|
+
Internals23.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
5985
5986
|
}
|
|
5986
5987
|
setReplaceWithOffthreadVideo({
|
|
5987
5988
|
durationInSeconds: mediaDurationInSeconds
|
|
@@ -6025,7 +6026,7 @@ var VideoForRendering = ({
|
|
|
6025
6026
|
context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
|
|
6026
6027
|
context.drawImage(imageBitmap, 0, 0);
|
|
6027
6028
|
if (effects.length > 0) {
|
|
6028
|
-
const completed = await
|
|
6029
|
+
const completed = await Internals23.runEffectChain({
|
|
6029
6030
|
state: effectChainState.get(imageBitmap.width, imageBitmap.height),
|
|
6030
6031
|
source: context.canvas,
|
|
6031
6032
|
effects,
|
|
@@ -6056,12 +6057,12 @@ var VideoForRendering = ({
|
|
|
6056
6057
|
frame,
|
|
6057
6058
|
startsAt
|
|
6058
6059
|
});
|
|
6059
|
-
const volume =
|
|
6060
|
+
const volume = Internals23.evaluateVolume({
|
|
6060
6061
|
volume: volumeProp,
|
|
6061
6062
|
frame: volumePropsFrame,
|
|
6062
6063
|
mediaVolume: 1
|
|
6063
6064
|
});
|
|
6064
|
-
|
|
6065
|
+
Internals23.warnAboutTooHighVolume(volume);
|
|
6065
6066
|
if (audio && volume > 0) {
|
|
6066
6067
|
applyVolume(audio.data, volume);
|
|
6067
6068
|
registerRenderAsset({
|
|
@@ -6126,7 +6127,7 @@ var VideoForRendering = ({
|
|
|
6126
6127
|
]);
|
|
6127
6128
|
warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
|
|
6128
6129
|
const classNameValue = useMemo5(() => {
|
|
6129
|
-
return [
|
|
6130
|
+
return [Internals23.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals23.truthy).join(" ");
|
|
6130
6131
|
}, [className]);
|
|
6131
6132
|
const styleWithObjectFit = useMemo5(() => {
|
|
6132
6133
|
return {
|
|
@@ -6135,7 +6136,7 @@ var VideoForRendering = ({
|
|
|
6135
6136
|
};
|
|
6136
6137
|
}, [objectFitProp, style]);
|
|
6137
6138
|
if (replaceWithOffthreadVideo) {
|
|
6138
|
-
const fallback = /* @__PURE__ */ jsx5(
|
|
6139
|
+
const fallback = /* @__PURE__ */ jsx5(Internals23.InnerOffthreadVideo, {
|
|
6139
6140
|
...props,
|
|
6140
6141
|
src,
|
|
6141
6142
|
playbackRate: playbackRate ?? 1,
|
|
@@ -6177,7 +6178,7 @@ var VideoForRendering = ({
|
|
|
6177
6178
|
}
|
|
6178
6179
|
return /* @__PURE__ */ jsx5(Loop, {
|
|
6179
6180
|
layout: "none",
|
|
6180
|
-
durationInFrames:
|
|
6181
|
+
durationInFrames: Internals23.calculateMediaDuration({
|
|
6181
6182
|
trimAfter: trimAfterValue,
|
|
6182
6183
|
mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
|
|
6183
6184
|
playbackRate,
|
|
@@ -6206,7 +6207,7 @@ var {
|
|
|
6206
6207
|
resolveTrimProps,
|
|
6207
6208
|
validateMediaProps: validateMediaProps2,
|
|
6208
6209
|
useCropStyle
|
|
6209
|
-
} =
|
|
6210
|
+
} = Internals24;
|
|
6210
6211
|
var videoSchema = {
|
|
6211
6212
|
src: {
|
|
6212
6213
|
type: "asset",
|
|
@@ -6214,8 +6215,8 @@ var videoSchema = {
|
|
|
6214
6215
|
description: "Source",
|
|
6215
6216
|
keyframable: false
|
|
6216
6217
|
},
|
|
6217
|
-
...
|
|
6218
|
-
...
|
|
6218
|
+
...Internals24.baseSchema,
|
|
6219
|
+
...Internals24.premountSchema,
|
|
6219
6220
|
volume: {
|
|
6220
6221
|
type: "number",
|
|
6221
6222
|
min: 0,
|
|
@@ -6236,7 +6237,7 @@ var videoSchema = {
|
|
|
6236
6237
|
},
|
|
6237
6238
|
muted: { type: "boolean", default: false, description: "Muted" },
|
|
6238
6239
|
loop: { type: "boolean", default: false, description: "Loop" },
|
|
6239
|
-
...
|
|
6240
|
+
...Internals24.transformSchema,
|
|
6240
6241
|
...Interactive2.backgroundSchema,
|
|
6241
6242
|
...Interactive2.borderSchema,
|
|
6242
6243
|
...Interactive2.borderRadiusSchema,
|
|
@@ -6399,10 +6400,10 @@ var VideoInner = ({
|
|
|
6399
6400
|
cropBottom,
|
|
6400
6401
|
...props
|
|
6401
6402
|
}) => {
|
|
6402
|
-
const sourceStack = controls ?
|
|
6403
|
-
const fallbackLogLevel =
|
|
6404
|
-
const [mediaVolume] =
|
|
6405
|
-
const mediaStartsAt =
|
|
6403
|
+
const sourceStack = controls ? Internals24.getStackForControls(controls) ?? undefined : undefined;
|
|
6404
|
+
const fallbackLogLevel = Internals24.useLogLevel();
|
|
6405
|
+
const [mediaVolume] = Internals24.useMediaVolumeState();
|
|
6406
|
+
const mediaStartsAt = Internals24.useMediaStartsAt();
|
|
6406
6407
|
const videoConfig = useVideoConfig5();
|
|
6407
6408
|
const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
|
|
6408
6409
|
const videoSequenceDuration = getVideoSequenceDuration({
|
|
@@ -6412,7 +6413,7 @@ var VideoInner = ({
|
|
|
6412
6413
|
trimAfter,
|
|
6413
6414
|
trimBefore
|
|
6414
6415
|
});
|
|
6415
|
-
const basicInfo =
|
|
6416
|
+
const basicInfo = Internals24.useBasicMediaInTimeline({
|
|
6416
6417
|
src,
|
|
6417
6418
|
volume,
|
|
6418
6419
|
playbackRate: playbackRate ?? 1,
|
|
@@ -6448,11 +6449,11 @@ var VideoInner = ({
|
|
|
6448
6449
|
type: "video",
|
|
6449
6450
|
data: basicInfo
|
|
6450
6451
|
}), [basicInfo]);
|
|
6451
|
-
const memoizedEffects =
|
|
6452
|
+
const memoizedEffects = Internals24.useMemoizedEffects({
|
|
6452
6453
|
effects: effects ?? [],
|
|
6453
6454
|
overrideId: controls?.overrideId ?? null
|
|
6454
6455
|
});
|
|
6455
|
-
const memoizedEffectDefinitions =
|
|
6456
|
+
const memoizedEffectDefinitions = Internals24.useMemoizedEffectDefinitions(effects ?? []);
|
|
6456
6457
|
const refForOutline = React6.useRef(null);
|
|
6457
6458
|
const {
|
|
6458
6459
|
effectivePostmountFor,
|
|
@@ -6462,7 +6463,7 @@ var VideoInner = ({
|
|
|
6462
6463
|
postmountingActive,
|
|
6463
6464
|
premountingActive,
|
|
6464
6465
|
premountingStyle
|
|
6465
|
-
} =
|
|
6466
|
+
} = Internals24.usePremounting({
|
|
6466
6467
|
from: from ?? 0,
|
|
6467
6468
|
durationInFrames: videoSequenceDuration ?? Infinity,
|
|
6468
6469
|
premountFor: premountFor ?? null,
|
|
@@ -7,6 +7,6 @@ export declare const acquireSharedInput: ({ src, credentials, requestInit, logLe
|
|
|
7
7
|
logLevel: "error" | "info" | "trace" | "verbose" | "warn";
|
|
8
8
|
}) => {
|
|
9
9
|
input: Input<import("mediabunny").Source>;
|
|
10
|
-
|
|
10
|
+
getDuration: () => Promise<number>;
|
|
11
|
+
release: () => void;
|
|
11
12
|
};
|
|
12
|
-
export declare const releaseSharedInput: (cacheKey: string) => void;
|
package/dist/media-player.d.ts
CHANGED
|
@@ -74,7 +74,8 @@ export declare class MediaPlayer {
|
|
|
74
74
|
getEffectChainState: (width: number, height: number) => EffectChainState | null;
|
|
75
75
|
});
|
|
76
76
|
private input;
|
|
77
|
-
private
|
|
77
|
+
private getDuration;
|
|
78
|
+
private releaseInput;
|
|
78
79
|
private disposed;
|
|
79
80
|
private isDisposalError;
|
|
80
81
|
initialize(startTimeUnresolved: number, initialMuted: boolean): Promise<MediaPlayerInitResult>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/media",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.515",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/esm/index.mjs",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"mediabunny": "1.55.1",
|
|
26
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.515",
|
|
27
27
|
"zod": "4.4.3"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"react-dom": ">=16.8.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
35
|
-
"@remotion/player": "4.0.
|
|
34
|
+
"@remotion/eslint-config-internal": "4.0.515",
|
|
35
|
+
"@remotion/player": "4.0.515",
|
|
36
36
|
"@vitest/browser-webdriverio": "4.0.9",
|
|
37
37
|
"eslint": "9.19.0",
|
|
38
38
|
"react": "19.2.3",
|