@remotion/media 4.0.479 → 4.0.482
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
CHANGED
|
@@ -39,7 +39,7 @@ var __callDispose = (stack, error, hasError) => {
|
|
|
39
39
|
// src/audio/audio.tsx
|
|
40
40
|
import { useMemo as useMemo3, useState as useState3 } from "react";
|
|
41
41
|
import {
|
|
42
|
-
Internals as
|
|
42
|
+
Internals as Internals17,
|
|
43
43
|
Interactive,
|
|
44
44
|
Sequence,
|
|
45
45
|
useRemotionEnvironment as useRemotionEnvironment2,
|
|
@@ -2143,7 +2143,7 @@ var {
|
|
|
2143
2143
|
useUnsafeVideoConfig,
|
|
2144
2144
|
Timeline,
|
|
2145
2145
|
SharedAudioContext,
|
|
2146
|
-
|
|
2146
|
+
usePlayerMutedState,
|
|
2147
2147
|
useMediaVolumeState,
|
|
2148
2148
|
useFrameForVolumeProp,
|
|
2149
2149
|
evaluateVolume,
|
|
@@ -2185,7 +2185,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2185
2185
|
const { playbackRate: globalPlaybackRate } = Internals7.usePlaybackRate();
|
|
2186
2186
|
const sharedAudioContext = useContext2(SharedAudioContext);
|
|
2187
2187
|
const buffer = useBufferState();
|
|
2188
|
-
const [
|
|
2188
|
+
const [playerMuted] = usePlayerMutedState();
|
|
2189
2189
|
const [mediaVolume] = useMediaVolumeState();
|
|
2190
2190
|
const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
|
|
2191
2191
|
const userPreferredVolume = evaluateVolume({
|
|
@@ -2212,7 +2212,7 @@ var AudioForPreviewAssertedShowing = ({
|
|
|
2212
2212
|
if (!bufferingContext) {
|
|
2213
2213
|
throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
|
|
2214
2214
|
}
|
|
2215
|
-
const effectiveMuted = muted ||
|
|
2215
|
+
const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
|
|
2216
2216
|
const isPlayerBuffering = Internals7.useIsPlayerBuffering(bufferingContext);
|
|
2217
2217
|
const initialPlaying = useRef(playing && !isPlayerBuffering);
|
|
2218
2218
|
const initialIsPremounting = useRef(isPremounting);
|
|
@@ -2491,7 +2491,7 @@ import { useContext as useContext3, useLayoutEffect as useLayoutEffect2, useMemo
|
|
|
2491
2491
|
import {
|
|
2492
2492
|
cancelRender as cancelRender2,
|
|
2493
2493
|
Html5Audio,
|
|
2494
|
-
Internals as
|
|
2494
|
+
Internals as Internals16,
|
|
2495
2495
|
random,
|
|
2496
2496
|
useCurrentFrame as useCurrentFrame2,
|
|
2497
2497
|
useDelayRender,
|
|
@@ -3596,7 +3596,7 @@ var combineAudioDataAndClosePrevious = (audioDataArray) => {
|
|
|
3596
3596
|
};
|
|
3597
3597
|
|
|
3598
3598
|
// src/get-sink.ts
|
|
3599
|
-
import { Internals as
|
|
3599
|
+
import { Internals as Internals14 } from "remotion";
|
|
3600
3600
|
|
|
3601
3601
|
// src/video-extraction/get-frames-since-keyframe.ts
|
|
3602
3602
|
import {
|
|
@@ -3609,6 +3609,7 @@ import {
|
|
|
3609
3609
|
VideoSampleSink,
|
|
3610
3610
|
WEBM
|
|
3611
3611
|
} from "mediabunny";
|
|
3612
|
+
import { Internals as Internals13 } from "remotion";
|
|
3612
3613
|
|
|
3613
3614
|
// src/browser-can-use-webgl2.ts
|
|
3614
3615
|
var browserCanUseWebGl2 = null;
|
|
@@ -3660,7 +3661,7 @@ var getFormatOrNullOrNetworkError = async (input) => {
|
|
|
3660
3661
|
return null;
|
|
3661
3662
|
}
|
|
3662
3663
|
};
|
|
3663
|
-
var getSinks = async (src, credentials, requestInit) => {
|
|
3664
|
+
var getSinks = async (src, logLevel, credentials, requestInit) => {
|
|
3664
3665
|
const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
|
|
3665
3666
|
const input = new Input2({
|
|
3666
3667
|
formats: ALL_FORMATS2,
|
|
@@ -3699,7 +3700,7 @@ var getSinks = async (src, credentials, requestInit) => {
|
|
|
3699
3700
|
});
|
|
3700
3701
|
const hasAlpha = startPacket?.sideData.alpha;
|
|
3701
3702
|
if (hasAlpha && !canBrowserUseWebGl2()) {
|
|
3702
|
-
|
|
3703
|
+
Internals13.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
|
|
3703
3704
|
}
|
|
3704
3705
|
return {
|
|
3705
3706
|
sampleSink
|
|
@@ -3780,11 +3781,11 @@ var getSink = (src, logLevel, credentials, requestInit) => {
|
|
|
3780
3781
|
});
|
|
3781
3782
|
let promise = sinkPromises[cacheKey];
|
|
3782
3783
|
if (!promise) {
|
|
3783
|
-
|
|
3784
|
+
Internals14.Log.verbose({
|
|
3784
3785
|
logLevel,
|
|
3785
3786
|
tag: "@remotion/media"
|
|
3786
3787
|
}, `Sink for ${src} was not found, creating new sink`);
|
|
3787
|
-
promise = getSinks(src, credentials, normalizedRequestInit);
|
|
3788
|
+
promise = getSinks(src, logLevel, credentials, normalizedRequestInit);
|
|
3788
3789
|
sinkPromises[cacheKey] = promise;
|
|
3789
3790
|
}
|
|
3790
3791
|
return promise;
|
|
@@ -3922,7 +3923,7 @@ var extractAudio = (params) => {
|
|
|
3922
3923
|
};
|
|
3923
3924
|
|
|
3924
3925
|
// src/video-extraction/extract-frame.ts
|
|
3925
|
-
import { Internals as
|
|
3926
|
+
import { Internals as Internals15 } from "remotion";
|
|
3926
3927
|
var extractFrameInternal = async ({
|
|
3927
3928
|
src,
|
|
3928
3929
|
timeInSeconds: unloopedTimeInSeconds,
|
|
@@ -4005,7 +4006,7 @@ var extractFrameInternal = async ({
|
|
|
4005
4006
|
durationInSeconds: await sink.getDuration()
|
|
4006
4007
|
};
|
|
4007
4008
|
} catch (err) {
|
|
4008
|
-
|
|
4009
|
+
Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
|
|
4009
4010
|
return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
|
|
4010
4011
|
}
|
|
4011
4012
|
};
|
|
@@ -4417,13 +4418,13 @@ var AudioForRendering = ({
|
|
|
4417
4418
|
credentials,
|
|
4418
4419
|
requestInit
|
|
4419
4420
|
}) => {
|
|
4420
|
-
const defaultLogLevel =
|
|
4421
|
+
const defaultLogLevel = Internals16.useLogLevel();
|
|
4421
4422
|
const logLevel = overriddenLogLevel ?? defaultLogLevel;
|
|
4422
4423
|
const frame = useCurrentFrame2();
|
|
4423
|
-
const absoluteFrame =
|
|
4424
|
-
const videoConfig =
|
|
4425
|
-
const { registerRenderAsset, unregisterRenderAsset } = useContext3(
|
|
4426
|
-
const startsAt =
|
|
4424
|
+
const absoluteFrame = Internals16.useTimelinePosition();
|
|
4425
|
+
const videoConfig = Internals16.useUnsafeVideoConfig();
|
|
4426
|
+
const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals16.RenderAssetManager);
|
|
4427
|
+
const startsAt = Internals16.useMediaStartsAt();
|
|
4427
4428
|
const environment = useRemotionEnvironment();
|
|
4428
4429
|
if (!videoConfig) {
|
|
4429
4430
|
throw new Error("No video config found");
|
|
@@ -4435,7 +4436,7 @@ var AudioForRendering = ({
|
|
|
4435
4436
|
const { delayRender, continueRender } = useDelayRender();
|
|
4436
4437
|
const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
|
|
4437
4438
|
const [initialRequestInit] = useState2(requestInit);
|
|
4438
|
-
const sequenceContext = useContext3(
|
|
4439
|
+
const sequenceContext = useContext3(Internals16.SequenceContext);
|
|
4439
4440
|
const id = useMemo2(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
|
|
4440
4441
|
src,
|
|
4441
4442
|
sequenceContext?.cumulatedFrom,
|
|
@@ -4443,7 +4444,7 @@ var AudioForRendering = ({
|
|
|
4443
4444
|
sequenceContext?.durationInFrames
|
|
4444
4445
|
]);
|
|
4445
4446
|
const maxCacheSize = useMaxMediaCacheSize(logLevel);
|
|
4446
|
-
const audioEnabled =
|
|
4447
|
+
const audioEnabled = Internals16.useAudioEnabled();
|
|
4447
4448
|
useLayoutEffect2(() => {
|
|
4448
4449
|
const timestamp = frame / fps;
|
|
4449
4450
|
const durationInSeconds = 1 / fps;
|
|
@@ -4495,7 +4496,7 @@ var AudioForRendering = ({
|
|
|
4495
4496
|
if (action === "fail") {
|
|
4496
4497
|
cancelRender2(errorToUse);
|
|
4497
4498
|
}
|
|
4498
|
-
|
|
4499
|
+
Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
4499
4500
|
setReplaceWithHtml5Audio(true);
|
|
4500
4501
|
};
|
|
4501
4502
|
if (result.type === "unknown-container-format") {
|
|
@@ -4522,12 +4523,12 @@ var AudioForRendering = ({
|
|
|
4522
4523
|
frame,
|
|
4523
4524
|
startsAt
|
|
4524
4525
|
});
|
|
4525
|
-
const volume =
|
|
4526
|
+
const volume = Internals16.evaluateVolume({
|
|
4526
4527
|
volume: volumeProp,
|
|
4527
4528
|
frame: volumePropsFrame,
|
|
4528
4529
|
mediaVolume: 1
|
|
4529
4530
|
});
|
|
4530
|
-
|
|
4531
|
+
Internals16.warnAboutTooHighVolume(volume);
|
|
4531
4532
|
if (audio && volume > 0) {
|
|
4532
4533
|
applyVolume(audio.data, volume);
|
|
4533
4534
|
registerRenderAsset({
|
|
@@ -4606,9 +4607,9 @@ var AudioForRendering = ({
|
|
|
4606
4607
|
|
|
4607
4608
|
// src/audio/audio.tsx
|
|
4608
4609
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
4609
|
-
var { validateMediaProps } =
|
|
4610
|
+
var { validateMediaProps } = Internals17;
|
|
4610
4611
|
var audioSchema = {
|
|
4611
|
-
...
|
|
4612
|
+
...Internals17.baseSchema,
|
|
4612
4613
|
volume: {
|
|
4613
4614
|
type: "number",
|
|
4614
4615
|
min: 0,
|
|
@@ -4642,11 +4643,11 @@ var AudioInner = (props) => {
|
|
|
4642
4643
|
...otherProps
|
|
4643
4644
|
} = props;
|
|
4644
4645
|
const environment = useRemotionEnvironment2();
|
|
4645
|
-
const [mediaVolume] =
|
|
4646
|
-
const mediaStartsAt =
|
|
4646
|
+
const [mediaVolume] = Internals17.useMediaVolumeState();
|
|
4647
|
+
const mediaStartsAt = Internals17.useMediaStartsAt();
|
|
4647
4648
|
const videoConfig = useVideoConfig2();
|
|
4648
4649
|
const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
|
|
4649
|
-
const basicInfo =
|
|
4650
|
+
const basicInfo = Internals17.useBasicMediaInTimeline({
|
|
4650
4651
|
src: props.src,
|
|
4651
4652
|
volume: props.volume,
|
|
4652
4653
|
playbackRate: props.playbackRate ?? 1,
|
|
@@ -4713,16 +4714,17 @@ var AudioInner = (props) => {
|
|
|
4713
4714
|
};
|
|
4714
4715
|
var Audio = Interactive.withSchema({
|
|
4715
4716
|
Component: AudioInner,
|
|
4717
|
+
componentName: "<Audio>",
|
|
4716
4718
|
componentIdentity: "dev.remotion.media.Audio",
|
|
4717
4719
|
schema: audioSchema,
|
|
4718
4720
|
supportsEffects: false
|
|
4719
4721
|
});
|
|
4720
|
-
|
|
4722
|
+
Internals17.addSequenceStackTraces(Audio);
|
|
4721
4723
|
|
|
4722
4724
|
// src/video/video.tsx
|
|
4723
4725
|
import React6, { useMemo as useMemo6, useState as useState6 } from "react";
|
|
4724
4726
|
import {
|
|
4725
|
-
Internals as
|
|
4727
|
+
Internals as Internals21,
|
|
4726
4728
|
Interactive as Interactive2,
|
|
4727
4729
|
Sequence as Sequence2,
|
|
4728
4730
|
useRemotionEnvironment as useRemotionEnvironment4,
|
|
@@ -4741,7 +4743,7 @@ import {
|
|
|
4741
4743
|
} from "react";
|
|
4742
4744
|
import {
|
|
4743
4745
|
Html5Video,
|
|
4744
|
-
Internals as
|
|
4746
|
+
Internals as Internals19,
|
|
4745
4747
|
useBufferState as useBufferState2,
|
|
4746
4748
|
useCurrentFrame as useCurrentFrame3,
|
|
4747
4749
|
useVideoConfig as useVideoConfig3
|
|
@@ -4771,7 +4773,7 @@ var getCachedVideoFrame = (src) => {
|
|
|
4771
4773
|
};
|
|
4772
4774
|
|
|
4773
4775
|
// src/video/warn-object-fit-css.ts
|
|
4774
|
-
import { Internals as
|
|
4776
|
+
import { Internals as Internals18 } from "remotion";
|
|
4775
4777
|
var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
|
|
4776
4778
|
var warnedStyle = false;
|
|
4777
4779
|
var warnedClassName = false;
|
|
@@ -4782,11 +4784,11 @@ var warnAboutObjectFitInStyleOrClassName = ({
|
|
|
4782
4784
|
}) => {
|
|
4783
4785
|
if (!warnedStyle && style?.objectFit) {
|
|
4784
4786
|
warnedStyle = true;
|
|
4785
|
-
|
|
4787
|
+
Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
|
|
4786
4788
|
}
|
|
4787
4789
|
if (!warnedClassName && className && OBJECT_FIT_CLASS_PATTERN.test(className)) {
|
|
4788
4790
|
warnedClassName = true;
|
|
4789
|
-
|
|
4791
|
+
Internals18.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
|
|
4790
4792
|
}
|
|
4791
4793
|
};
|
|
4792
4794
|
|
|
@@ -4796,7 +4798,7 @@ var {
|
|
|
4796
4798
|
useUnsafeVideoConfig: useUnsafeVideoConfig2,
|
|
4797
4799
|
Timeline: Timeline2,
|
|
4798
4800
|
SharedAudioContext: SharedAudioContext2,
|
|
4799
|
-
|
|
4801
|
+
usePlayerMutedState: usePlayerMutedState2,
|
|
4800
4802
|
useMediaVolumeState: useMediaVolumeState2,
|
|
4801
4803
|
useFrameForVolumeProp: useFrameForVolumeProp2,
|
|
4802
4804
|
evaluateVolume: evaluateVolume2,
|
|
@@ -4804,7 +4806,7 @@ var {
|
|
|
4804
4806
|
usePreload: usePreload2,
|
|
4805
4807
|
SequenceContext: SequenceContext2,
|
|
4806
4808
|
useEffectChainState
|
|
4807
|
-
} =
|
|
4809
|
+
} = Internals19;
|
|
4808
4810
|
var VideoForPreviewAssertedShowing = ({
|
|
4809
4811
|
src: unpreloadedSrc,
|
|
4810
4812
|
style,
|
|
@@ -4847,7 +4849,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
4847
4849
|
const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
|
|
4848
4850
|
const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
|
|
4849
4851
|
const [playing] = Timeline2.usePlayingState();
|
|
4850
|
-
const { playbackRate: globalPlaybackRate } =
|
|
4852
|
+
const { playbackRate: globalPlaybackRate } = Internals19.usePlaybackRate();
|
|
4851
4853
|
const sharedAudioContext = useContext4(SharedAudioContext2);
|
|
4852
4854
|
const buffer = useBufferState2();
|
|
4853
4855
|
const canvasRefCallback = useCallback((canvas) => {
|
|
@@ -4857,7 +4859,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
4857
4859
|
const fallbackVideoRef = useCallback((video) => {
|
|
4858
4860
|
refForOutline.current = video;
|
|
4859
4861
|
}, [refForOutline]);
|
|
4860
|
-
const [
|
|
4862
|
+
const [playerMuted] = usePlayerMutedState2();
|
|
4861
4863
|
const [mediaVolume] = useMediaVolumeState2();
|
|
4862
4864
|
const volumePropFrame = useFrameForVolumeProp2(loopVolumeCurveBehavior);
|
|
4863
4865
|
const userPreferredVolume = evaluateVolume2({
|
|
@@ -4882,12 +4884,12 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
4882
4884
|
const currentTimeRef = useRef2(currentTime);
|
|
4883
4885
|
currentTimeRef.current = currentTime;
|
|
4884
4886
|
const preloadedSrc = usePreload2(src);
|
|
4885
|
-
const buffering = useContext4(
|
|
4887
|
+
const buffering = useContext4(Internals19.BufferingContextReact);
|
|
4886
4888
|
if (!buffering) {
|
|
4887
4889
|
throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
|
|
4888
4890
|
}
|
|
4889
|
-
const effectiveMuted = muted ||
|
|
4890
|
-
const isPlayerBuffering =
|
|
4891
|
+
const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
|
|
4892
|
+
const isPlayerBuffering = Internals19.useIsPlayerBuffering(buffering);
|
|
4891
4893
|
const initialPlaying = useRef2(playing && !isPlayerBuffering);
|
|
4892
4894
|
const initialIsPremounting = useRef2(isPremounting);
|
|
4893
4895
|
const initialIsPostmounting = useRef2(isPostmounting);
|
|
@@ -4998,7 +5000,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
4998
5000
|
if (action === "fail") {
|
|
4999
5001
|
throw errorToUse;
|
|
5000
5002
|
}
|
|
5001
|
-
|
|
5003
|
+
Internals19.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
5002
5004
|
setShouldFallbackToNativeVideo(true);
|
|
5003
5005
|
};
|
|
5004
5006
|
if (result.type === "unknown-container-format") {
|
|
@@ -5033,7 +5035,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5033
5035
|
if (action === "fail") {
|
|
5034
5036
|
throw errorToUse;
|
|
5035
5037
|
}
|
|
5036
|
-
|
|
5038
|
+
Internals19.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
|
|
5037
5039
|
setShouldFallbackToNativeVideo(true);
|
|
5038
5040
|
});
|
|
5039
5041
|
} catch (error) {
|
|
@@ -5047,12 +5049,12 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5047
5049
|
if (action === "fail") {
|
|
5048
5050
|
throw errorToUse;
|
|
5049
5051
|
}
|
|
5050
|
-
|
|
5052
|
+
Internals19.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
|
|
5051
5053
|
setShouldFallbackToNativeVideo(true);
|
|
5052
5054
|
}
|
|
5053
5055
|
return () => {
|
|
5054
5056
|
if (mediaPlayerRef.current) {
|
|
5055
|
-
|
|
5057
|
+
Internals19.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
|
|
5056
5058
|
mediaPlayerRef.current.dispose();
|
|
5057
5059
|
mediaPlayerRef.current = null;
|
|
5058
5060
|
}
|
|
@@ -5077,7 +5079,7 @@ var VideoForPreviewAssertedShowing = ({
|
|
|
5077
5079
|
]);
|
|
5078
5080
|
warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
|
|
5079
5081
|
const classNameValue = useMemo4(() => {
|
|
5080
|
-
return [
|
|
5082
|
+
return [Internals19.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals19.truthy).join(" ");
|
|
5081
5083
|
}, [className]);
|
|
5082
5084
|
useCommonEffects({
|
|
5083
5085
|
mediaPlayerRef,
|
|
@@ -5201,7 +5203,7 @@ import {
|
|
|
5201
5203
|
useState as useState5
|
|
5202
5204
|
} from "react";
|
|
5203
5205
|
import {
|
|
5204
|
-
Internals as
|
|
5206
|
+
Internals as Internals20,
|
|
5205
5207
|
Loop,
|
|
5206
5208
|
random as random2,
|
|
5207
5209
|
useCurrentFrame as useCurrentFrame4,
|
|
@@ -5242,11 +5244,11 @@ var VideoForRendering = ({
|
|
|
5242
5244
|
throw new TypeError("No `src` was passed to <Video>.");
|
|
5243
5245
|
}
|
|
5244
5246
|
const frame = useCurrentFrame4();
|
|
5245
|
-
const absoluteFrame =
|
|
5247
|
+
const absoluteFrame = Internals20.useTimelinePosition();
|
|
5246
5248
|
const { fps } = useVideoConfig4();
|
|
5247
|
-
const { registerRenderAsset, unregisterRenderAsset } = useContext5(
|
|
5248
|
-
const startsAt =
|
|
5249
|
-
const sequenceContext = useContext5(
|
|
5249
|
+
const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals20.RenderAssetManager);
|
|
5250
|
+
const startsAt = Internals20.useMediaStartsAt();
|
|
5251
|
+
const sequenceContext = useContext5(Internals20.SequenceContext);
|
|
5250
5252
|
const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
|
|
5251
5253
|
src,
|
|
5252
5254
|
sequenceContext?.cumulatedFrom,
|
|
@@ -5258,10 +5260,10 @@ var VideoForRendering = ({
|
|
|
5258
5260
|
const canvasRef = useRef3(null);
|
|
5259
5261
|
const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
|
|
5260
5262
|
const [initialRequestInit] = useState5(requestInit);
|
|
5261
|
-
const audioEnabled =
|
|
5262
|
-
const videoEnabled =
|
|
5263
|
+
const audioEnabled = Internals20.useAudioEnabled();
|
|
5264
|
+
const videoEnabled = Internals20.useVideoEnabled();
|
|
5263
5265
|
const maxCacheSize = useMaxMediaCacheSize(logLevel);
|
|
5264
|
-
const effectChainState =
|
|
5266
|
+
const effectChainState = Internals20.useEffectChainState();
|
|
5265
5267
|
const [error, setError] = useState5(null);
|
|
5266
5268
|
if (error) {
|
|
5267
5269
|
throw error;
|
|
@@ -5326,7 +5328,7 @@ var VideoForRendering = ({
|
|
|
5326
5328
|
return;
|
|
5327
5329
|
}
|
|
5328
5330
|
if (window.remotion_isMainTab) {
|
|
5329
|
-
|
|
5331
|
+
Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
|
|
5330
5332
|
}
|
|
5331
5333
|
setReplaceWithOffthreadVideo({
|
|
5332
5334
|
durationInSeconds: mediaDurationInSeconds
|
|
@@ -5364,7 +5366,7 @@ var VideoForRendering = ({
|
|
|
5364
5366
|
context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
|
|
5365
5367
|
context.drawImage(imageBitmap, 0, 0);
|
|
5366
5368
|
if (effects.length > 0) {
|
|
5367
|
-
const completed = await
|
|
5369
|
+
const completed = await Internals20.runEffectChain({
|
|
5368
5370
|
state: effectChainState.get(imageBitmap.width, imageBitmap.height),
|
|
5369
5371
|
source: context.canvas,
|
|
5370
5372
|
effects,
|
|
@@ -5395,12 +5397,12 @@ var VideoForRendering = ({
|
|
|
5395
5397
|
frame,
|
|
5396
5398
|
startsAt
|
|
5397
5399
|
});
|
|
5398
|
-
const volume =
|
|
5400
|
+
const volume = Internals20.evaluateVolume({
|
|
5399
5401
|
volume: volumeProp,
|
|
5400
5402
|
frame: volumePropsFrame,
|
|
5401
5403
|
mediaVolume: 1
|
|
5402
5404
|
});
|
|
5403
|
-
|
|
5405
|
+
Internals20.warnAboutTooHighVolume(volume);
|
|
5404
5406
|
if (audio && volume > 0) {
|
|
5405
5407
|
applyVolume(audio.data, volume);
|
|
5406
5408
|
registerRenderAsset({
|
|
@@ -5461,7 +5463,7 @@ var VideoForRendering = ({
|
|
|
5461
5463
|
]);
|
|
5462
5464
|
warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
|
|
5463
5465
|
const classNameValue = useMemo5(() => {
|
|
5464
|
-
return [
|
|
5466
|
+
return [Internals20.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals20.truthy).join(" ");
|
|
5465
5467
|
}, [className]);
|
|
5466
5468
|
const styleWithObjectFit = useMemo5(() => {
|
|
5467
5469
|
return {
|
|
@@ -5470,7 +5472,7 @@ var VideoForRendering = ({
|
|
|
5470
5472
|
};
|
|
5471
5473
|
}, [objectFitProp, style]);
|
|
5472
5474
|
if (replaceWithOffthreadVideo) {
|
|
5473
|
-
const fallback = /* @__PURE__ */ jsx5(
|
|
5475
|
+
const fallback = /* @__PURE__ */ jsx5(Internals20.InnerOffthreadVideo, {
|
|
5474
5476
|
...props,
|
|
5475
5477
|
src,
|
|
5476
5478
|
playbackRate: playbackRate ?? 1,
|
|
@@ -5512,7 +5514,7 @@ var VideoForRendering = ({
|
|
|
5512
5514
|
}
|
|
5513
5515
|
return /* @__PURE__ */ jsx5(Loop, {
|
|
5514
5516
|
layout: "none",
|
|
5515
|
-
durationInFrames:
|
|
5517
|
+
durationInFrames: Internals20.calculateMediaDuration({
|
|
5516
5518
|
trimAfter: trimAfterValue,
|
|
5517
5519
|
mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
|
|
5518
5520
|
playbackRate,
|
|
@@ -5536,9 +5538,9 @@ var VideoForRendering = ({
|
|
|
5536
5538
|
|
|
5537
5539
|
// src/video/video.tsx
|
|
5538
5540
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
5539
|
-
var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } =
|
|
5541
|
+
var { validateMediaTrimProps, resolveTrimProps, validateMediaProps: validateMediaProps2 } = Internals21;
|
|
5540
5542
|
var videoSchema = {
|
|
5541
|
-
...
|
|
5543
|
+
...Internals21.baseSchema,
|
|
5542
5544
|
volume: {
|
|
5543
5545
|
type: "number",
|
|
5544
5546
|
min: 0,
|
|
@@ -5558,7 +5560,7 @@ var videoSchema = {
|
|
|
5558
5560
|
keyframable: false
|
|
5559
5561
|
},
|
|
5560
5562
|
loop: { type: "boolean", default: false, description: "Loop" },
|
|
5561
|
-
...
|
|
5563
|
+
...Internals21.transformSchema
|
|
5562
5564
|
};
|
|
5563
5565
|
var InnerVideo = ({
|
|
5564
5566
|
src,
|
|
@@ -5710,12 +5712,12 @@ var VideoInner = ({
|
|
|
5710
5712
|
hidden,
|
|
5711
5713
|
...props
|
|
5712
5714
|
}) => {
|
|
5713
|
-
const fallbackLogLevel =
|
|
5714
|
-
const [mediaVolume] =
|
|
5715
|
-
const mediaStartsAt =
|
|
5715
|
+
const fallbackLogLevel = Internals21.useLogLevel();
|
|
5716
|
+
const [mediaVolume] = Internals21.useMediaVolumeState();
|
|
5717
|
+
const mediaStartsAt = Internals21.useMediaStartsAt();
|
|
5716
5718
|
const videoConfig = useVideoConfig5();
|
|
5717
5719
|
const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
|
|
5718
|
-
const basicInfo =
|
|
5720
|
+
const basicInfo = Internals21.useBasicMediaInTimeline({
|
|
5719
5721
|
src,
|
|
5720
5722
|
volume,
|
|
5721
5723
|
playbackRate: playbackRate ?? 1,
|
|
@@ -5750,11 +5752,11 @@ var VideoInner = ({
|
|
|
5750
5752
|
type: "video",
|
|
5751
5753
|
data: basicInfo
|
|
5752
5754
|
}), [basicInfo]);
|
|
5753
|
-
const memoizedEffects =
|
|
5755
|
+
const memoizedEffects = Internals21.useMemoizedEffects({
|
|
5754
5756
|
effects: effects ?? [],
|
|
5755
5757
|
overrideId: controls?.overrideId ?? null
|
|
5756
5758
|
});
|
|
5757
|
-
const memoizedEffectDefinitions =
|
|
5759
|
+
const memoizedEffectDefinitions = Internals21.useMemoizedEffectDefinitions(effects ?? []);
|
|
5758
5760
|
const refForOutline = React6.useRef(null);
|
|
5759
5761
|
if (sequenceDurationInFrames === 0) {
|
|
5760
5762
|
return null;
|
|
@@ -5812,11 +5814,12 @@ var VideoInner = ({
|
|
|
5812
5814
|
};
|
|
5813
5815
|
var Video = Interactive2.withSchema({
|
|
5814
5816
|
Component: VideoInner,
|
|
5817
|
+
componentName: "<Video>",
|
|
5815
5818
|
componentIdentity: "dev.remotion.media.Video",
|
|
5816
5819
|
schema: videoSchema,
|
|
5817
5820
|
supportsEffects: true
|
|
5818
5821
|
});
|
|
5819
|
-
|
|
5822
|
+
Internals21.addSequenceStackTraces(Video);
|
|
5820
5823
|
|
|
5821
5824
|
// src/index.ts
|
|
5822
5825
|
var experimental_Audio = Audio;
|
|
@@ -8,7 +8,7 @@ type AudioSinks = {
|
|
|
8
8
|
};
|
|
9
9
|
export type AudioSinkResult = AudioSinks | 'no-audio-track' | 'cannot-decode-audio' | 'unknown-container-format' | 'network-error';
|
|
10
10
|
export type VideoSinkResult = VideoSinks | 'no-video-track' | 'cannot-decode' | 'cannot-decode-alpha' | 'unknown-container-format' | 'network-error';
|
|
11
|
-
export declare const getSinks: (src: string, credentials: RequestCredentials | undefined, requestInit?: MediaRequestInit | undefined) => Promise<{
|
|
11
|
+
export declare const getSinks: (src: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn", credentials: RequestCredentials | undefined, requestInit?: MediaRequestInit | undefined) => Promise<{
|
|
12
12
|
getVideo: () => Promise<VideoSinkResult>;
|
|
13
13
|
getAudio: (index: number | null) => Promise<AudioSinkResult>;
|
|
14
14
|
actualMatroskaTimestamps: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/media",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.482",
|
|
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.47.0",
|
|
26
|
-
"remotion": "4.0.
|
|
26
|
+
"remotion": "4.0.482",
|
|
27
27
|
"zod": "4.3.6"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-dom": ">=16.8.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
34
|
+
"@remotion/eslint-config-internal": "4.0.482",
|
|
35
35
|
"@vitest/browser-webdriverio": "4.0.9",
|
|
36
36
|
"eslint": "9.19.0",
|
|
37
37
|
"react": "19.2.3",
|