Merge pull request #1313 from remotion-dev/new-preload-apis

packages/cli/src/editor/components/NewComposition/RemInput.tsx

@@ -50,9 +50,13 @@ const RemInputForwardRef: React.ForwardRefRenderFunction<
 		};
 	}, [isFocused, isHovered, props.style]);
 
-	useImperativeHandle(ref, () => {
-		return inputRef.current as HTMLInputElement;
-	});
+	useImperativeHandle(
+		ref,
+		() => {
+			return inputRef.current as HTMLInputElement;
+		},
+		[]
+	);
 
 	useEffect(() => {
 		if (!inputRef.current) {

packages/cli/src/editor/components/Notifications/NotificationCenter.tsx

@@ -46,11 +46,15 @@ export const NotificationCenter: React.FC = () => {
 		});
 	}, []);
 
-	useImperativeHandle(notificationCenter, () => {
-		return {
-			addNotification,
-		};
-	});
+	useImperativeHandle(
+		notificationCenter,
+		() => {
+			return {
+				addNotification,
+			};
+		},
+		[addNotification]
+	);
 
 	return (
 		<div style={container}>

packages/cli/src/editor/components/Timeline/Timeline.tsx

@@ -60,22 +60,26 @@ export const Timeline: React.FC = () => {
 		});
 	}, [sequences, videoConfig]);
 
-	useImperativeHandle(timelineRef, () => {
-		return {
-			expandAll: () => {
-				dispatch({
-					type: 'expand-all',
-					allHashes: timeline.map((t) => t.hash),
-				});
-			},
-			collapseAll: () => {
-				dispatch({
-					type: 'collapse-all',
-					allHashes: timeline.map((t) => t.hash),
-				});
-			},
-		};
-	});
+	useImperativeHandle(
+		timelineRef,
+		() => {
+			return {
+				expandAll: () => {
+					dispatch({
+						type: 'expand-all',
+						allHashes: timeline.map((t) => t.hash),
+					});
+				},
+				collapseAll: () => {
+					dispatch({
+						type: 'collapse-all',
+						allHashes: timeline.map((t) => t.hash),
+					});
+				},
+			};
+		},
+		[timeline]
+	);
 
 	const withoutHidden = useMemo(() => {
 		return timeline.filter((t) => !isTrackHidden(t, timeline, state));

packages/cli/src/editor/components/Timeline/TimelineSlider.tsx

@@ -45,22 +45,26 @@ export const TimelineSlider: React.FC = () => {
 		};
 	}, [timelinePosition, get]);
 
-	useImperativeHandle(redrawTimelineSliderFast, () => {
-		return {
-			draw: (frame, width?: number) => {
-				const {current} = ref;
-				if (!current) {
-					throw new Error('unexpectedly did not have ref to timelineslider');
-				}
+	useImperativeHandle(
+		redrawTimelineSliderFast,
+		() => {
+			return {
+				draw: (frame, width?: number) => {
+					const {current} = ref;
+					if (!current) {
+						throw new Error('unexpectedly did not have ref to timelineslider');
+					}
 
-				current.style.transform = `translateX(${getXPositionOfItemInTimelineImperatively(
-					frame,
-					getCurrentDuration(),
-					width ?? (sliderAreaRef.current?.clientWidth as number) ?? 0
-				)}px)`;
-			},
-		};
-	});
+					current.style.transform = `translateX(${getXPositionOfItemInTimelineImperatively(
+						frame,
+						getCurrentDuration(),
+						width ?? (sliderAreaRef.current?.clientWidth as number) ?? 0
+					)}px)`;
+				},
+			};
+		},
+		[]
+	);
 
 	useEffect(() => {
 		const currentRef = ref.current;

packages/cli/src/editor/components/TimelineInOutToggle.tsx

@@ -263,19 +263,23 @@ export const TimelineInOutPointToggle: React.FC = () => {
 		}
 	}, [onInOutClear, inFrame, videoConfig]);
 
-	useImperativeHandle(inOutHandles, () => {
-		return {
-			clearMarks: onInOutClear,
-			inMarkClick: onInMark,
-			outMarkClick: onOutMark,
-			setMarks: ([newInFrame, newOutFrame]) => {
-				setInAndOutFrames({
-					inFrame: newInFrame,
-					outFrame: newOutFrame,
-				});
-			},
-		};
-	});
+	useImperativeHandle(
+		inOutHandles,
+		() => {
+			return {
+				clearMarks: onInOutClear,
+				inMarkClick: onInMark,
+				outMarkClick: onOutMark,
+				setMarks: ([newInFrame, newOutFrame]) => {
+					setInAndOutFrames({
+						inFrame: newInFrame,
+						outFrame: newOutFrame,
+					});
+				},
+			};
+		},
+		[onInMark, onInOutClear, onOutMark, setInAndOutFrames]
+	);
 
 	if (!videoConfig) {
 		return null;

packages/core/ensure-correct-version.js

@@ -12,7 +12,7 @@ export const VERSION = '${version}';
 
 fs.writeFileSync(path.resolve(process.cwd(), 'src/version.ts'), src);
 
-cp.execSync('npx tsc');
+cp.execSync('pnpm exec tsc');
 
 const distFile = fs.readFileSync('dist/version.js', 'utf-8');
 

packages/core/src/Img.tsx

@@ -7,19 +7,26 @@ import React, {
 } from 'react';
 import {continueRender, delayRender} from './delay-render';
 import {getRemotionEnvironment} from './get-environment';
+import {usePreload} from './prefetch';
 
 const ImgRefForwarding: React.ForwardRefRenderFunction<
 	HTMLImageElement,
 	React.DetailedHTMLProps<
 		React.ImgHTMLAttributes<HTMLImageElement>,
 		HTMLImageElement
 	>
-> = ({onError, ...props}, ref) => {
+> = ({onError, src, ...props}, ref) => {
 	const imageRef = useRef<HTMLImageElement>(null);
 
-	useImperativeHandle(ref, () => {
-		return imageRef.current as HTMLImageElement;
-	});
+	useImperativeHandle(
+		ref,
+		() => {
+			return imageRef.current as HTMLImageElement;
+		},
+		[]
+	);
+
+	const actualSrc = usePreload(src as string);
 
 	const didGetError = useCallback(
 		(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
@@ -45,7 +52,7 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
 				return;
 			}
 
-			const newHandle = delayRender('Loading <Img> with src=' + props.src);
+			const newHandle = delayRender('Loading <Img> with src=' + src);
 			const {current} = imageRef;
 
 			const didLoad = () => {
@@ -63,10 +70,12 @@ const ImgRefForwarding: React.ForwardRefRenderFunction<
 				current?.removeEventListener('load', didLoad);
 				continueRender(newHandle);
 			};
-		}, [props.src]);
+		}, [src]);
 	}
 
-	return <img {...props} ref={imageRef} onError={didGetError} />;
+	return (
+		<img {...props} ref={imageRef} src={actualSrc} onError={didGetError} />
+	);
 };
 
 export const Img = forwardRef(ImgRefForwarding);

packages/core/src/RemotionRoot.tsx

@@ -8,17 +8,16 @@ import React, {
 import {SharedAudioContextProvider} from './audio/shared-audio-tags';
 import {CompositionManagerProvider} from './CompositionManager';
 import {continueRender, delayRender} from './delay-render';
-import type { TNonceContext} from './nonce';
+import type {TNonceContext} from './nonce';
 import {NonceContext} from './nonce';
+import {PrefetchProvider} from './prefetch-state';
 import {random} from './random';
 import type {
 	PlayableMediaTag,
 	SetTimelineContextValue,
-	TimelineContextValue} from './timeline-position-state';
-import {
-	SetTimelineContext,
-	TimelineContext
+	TimelineContextValue,
 } from './timeline-position-state';
+import {SetTimelineContext, TimelineContext} from './timeline-position-state';
 
 export const RemotionRoot: React.FC<{
 	children: React.ReactNode;
@@ -84,14 +83,16 @@ export const RemotionRoot: React.FC<{
 		<NonceContext.Provider value={nonceContext}>
 			<TimelineContext.Provider value={timelineContextValue}>
 				<SetTimelineContext.Provider value={setTimelineContextValue}>
-					<CompositionManagerProvider>
-						<SharedAudioContextProvider
-							// In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.
-							numberOfAudioTags={0}
-						>
-							{children}
-						</SharedAudioContextProvider>
-					</CompositionManagerProvider>
+					<PrefetchProvider>
+						<CompositionManagerProvider>
+							<SharedAudioContextProvider
+								// In the preview, which is mostly played on Desktop, we opt out of the autoplay policy fix as described in https://github.com/remotion-dev/remotion/pull/554, as it mostly applies to mobile.
+								numberOfAudioTags={0}
+							>
+								{children}
+							</SharedAudioContextProvider>
+						</CompositionManagerProvider>
+					</PrefetchProvider>
 				</SetTimelineContext.Provider>
 			</TimelineContext.Provider>
 		</NonceContext.Provider>

packages/core/src/audio/AudioForDevelopment.tsx

@@ -6,6 +6,7 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
+import {usePreload} from '../prefetch';
 import {random} from '../random';
 import {SequenceContext} from '../Sequence';
 import {useMediaInTimeline} from '../use-media-in-timeline';
@@ -42,26 +43,39 @@ const AudioForDevelopmentForwardRefFunction: React.ForwardRefRenderFunction<
 
 	const volumePropFrame = useFrameForVolumeProp();
 
-	const {volume, muted, playbackRate, shouldPreMountAudioTags, ...nativeProps} =
-		props;
+	const {
+		volume,
+		muted,
+		playbackRate,
+		shouldPreMountAudioTags,
+		src,
+		...nativeProps
+	} = props;
+
+	if (!src) {
+		throw new TypeError("No 'src' was passed to <Audio>.");
+	}
+
+	const preloadedSrc = usePreload(src);
 
 	const propsToPass = useMemo((): RemotionAudioProps => {
 		return {
 			muted: muted || mediaMuted,
+			src: preloadedSrc,
 			...nativeProps,
 		};
-	}, [mediaMuted, muted, nativeProps]);
+	}, [mediaMuted, muted, nativeProps, preloadedSrc]);
 
 	const sequenceContext = useContext(SequenceContext);
 
 	// Generate a string that's as unique as possible for this asset
 	// but at the same time deterministic. We use it to combat strict mode issues.
 	const id = useMemo(
 		() =>
-			`audio-${random(props.src ?? '')}-${sequenceContext?.relativeFrom}-${
+			`audio-${random(src ?? '')}-${sequenceContext?.relativeFrom}-${
 				sequenceContext?.cumulatedFrom
 			}-${sequenceContext?.durationInFrames}-muted:${props.muted}`,
-		[props.muted, props.src, sequenceContext]
+		[props.muted, src, sequenceContext]
 	);
 
 	const audioRef = useSharedAudio(propsToPass, id).el;
@@ -80,21 +94,25 @@ const AudioForDevelopmentForwardRefFunction: React.ForwardRefRenderFunction<
 		volume,
 		mediaVolume,
 		mediaRef: audioRef,
-		src: nativeProps.src,
+		src,
 		mediaType: 'audio',
 	});
 
 	useMediaPlayback({
 		mediaRef: audioRef,
-		src: nativeProps.src,
+		src,
 		mediaType: 'audio',
 		playbackRate: playbackRate ?? 1,
 		onlyWarnForMediaSeekingError: false,
 	});
 
-	useImperativeHandle(ref, () => {
-		return audioRef.current as HTMLAudioElement;
-	});
+	useImperativeHandle(
+		ref,
+		() => {
+			return audioRef.current as HTMLAudioElement;
+		},
+		[audioRef]
+	);
 
 	if (initialShouldPreMountAudioElements) {
 		return null;

packages/core/src/audio/AudioForRendering.tsx

@@ -47,9 +47,13 @@ const AudioForRenderingRefForwardingFunction: React.ForwardRefRenderFunction<
 		mediaVolume: 1,
 	});
 
-	useImperativeHandle(ref, () => {
-		return audioRef.current as HTMLVideoElement;
-	});
+	useImperativeHandle(
+		ref,
+		() => {
+			return audioRef.current as HTMLVideoElement;
+		},
+		[]
+	);
 
 	useEffect(() => {
 		if (!props.src) {

packages/core/src/index.ts

@@ -65,6 +65,7 @@ export * from './internals';
 export * from './interpolate';
 export {interpolateColors} from './interpolate-colors';
 export {Loop} from './loop';
+export {prefetch} from './prefetch';
 export * from './random';
 export {registerRoot} from './register-root';
 export {Sequence} from './Sequence';

packages/core/src/internals.ts

@@ -24,6 +24,7 @@ import type {RemotionEnvironment} from './get-environment';
 import {getRemotionEnvironment} from './get-environment';
 import {getPreviewDomElement} from './get-preview-dom-element';
 import {portalNode} from './portal-node';
+import {PrefetchProvider} from './prefetch-state';
 import {getRoot, waitForRoot} from './register-root';
 import {RemotionRoot} from './RemotionRoot';
 import {SequenceContext} from './Sequence';
@@ -99,6 +100,7 @@ export const Internals = {
 	CanUseRemotionHooksProvider,
 	CanUseRemotionHooks,
 	enableLegacyRemotionConfig,
+	PrefetchProvider,
 };
 
 type WebpackConfiguration = Configuration;