@remotion/media: Make media tags wrap in an invisible <Sequence> and allow from and durationInFrames props

packages/media/src/audio/audio.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {SequenceControls, SequenceSchema} from 'remotion';
-import {Internals, useRemotionEnvironment} from 'remotion';
+import {Internals, Sequence, useRemotionEnvironment} from 'remotion';
 import {AudioForPreview} from './audio-for-preview';
 import {AudioForRendering} from './audio-for-rendering';
 import type {AudioProps} from './props';
@@ -33,7 +33,15 @@ const AudioInner: React.FC<
 > = (props) => {
 	// Should only destruct `trimBefore` and `trimAfter` from props,
 	// rest gets drilled down
-	const {name, stack, showInTimeline, controls, ...otherProps} = props;
+	const {
+		name,
+		stack,
+		showInTimeline,
+		controls,
+		from,
+		durationInFrames,
+		...otherProps
+	} = props;
 	const environment = useRemotionEnvironment();
 
 	if (typeof props.src !== 'string') {
@@ -49,17 +57,24 @@ const AudioInner: React.FC<
 		'Audio',
 	);
 
-	if (environment.isRendering) {
-		return <AudioForRendering {...otherProps} />;
-	}
-
 	return (
-		<AudioForPreview
-			name={name}
-			{...otherProps}
-			stack={stack ?? null}
-			controls={controls}
-		/>
+		<Sequence
+			layout="none"
+			from={from ?? 0}
+			durationInFrames={durationInFrames ?? Infinity}
+			showInTimeline={false}
+		>
+			{environment.isRendering ? (
+				<AudioForRendering {...otherProps} />
+			) : (
+				<AudioForPreview
+					name={name}
+					{...otherProps}
+					stack={stack ?? null}
+					controls={controls}
+				/>
+			)}
+		</Sequence>
 	);
 };
 

packages/media/src/audio/props.ts

@@ -11,6 +11,14 @@ export type FallbackHtml5AudioProps = {
 
 export type AudioProps = {
 	src: string;
+	/**
+	 * When set, `<Audio>` applies timing via an inner `<Sequence layout="none">` that is hidden from the timeline (`showInTimeline={false}`) so the clip still appears once as media.
+	 */
+	from?: number;
+	/**
+	 * When set with `from`, bounds the clip in frames. Defaults to `Infinity` like `<Sequence>`.
+	 */
+	durationInFrames?: number;
 	trimBefore?: number;
 	trimAfter?: number;
 	volume?: VolumeProp;

packages/media/src/video/props.ts

@@ -75,4 +75,13 @@ export type InnerVideoProps = MandatoryVideoProps &
 
 export type VideoProps = MandatoryVideoProps &
 	Partial<OuterVideoProps> &
-	Partial<OptionalVideoProps>;
+	Partial<OptionalVideoProps> & {
+		/**
+		 * When set, `<Video>` applies timing via an inner `<Sequence layout="none">` that is hidden from the timeline (`showInTimeline={false}`) so the clip still appears once as media.
+		 */
+		from?: number;
+		/**
+		 * Bounds the clip in frames together with `from`. Defaults to `Infinity` like `<Sequence>`.
+		 */
+		durationInFrames?: number;
+	};

packages/media/src/video/video.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {SequenceControls, SequenceSchema} from 'remotion';
-import {Internals, useRemotionEnvironment} from 'remotion';
+import {Internals, Sequence, useRemotionEnvironment} from 'remotion';
 import type {InnerVideoProps, VideoProps} from './props';
 import {VideoForPreview} from './video-for-preview';
 import {VideoForRendering} from './video-for-rendering';
@@ -214,43 +214,52 @@ const VideoInner: React.FC<
 	credentials,
 	controls,
 	objectFit,
+	from,
+	durationInFrames,
 }) => {
 	const fallbackLogLevel = Internals.useLogLevel();
 	return (
-		<InnerVideo
-			audioStreamIndex={audioStreamIndex ?? 0}
-			className={className}
-			delayRenderRetries={delayRenderRetries ?? null}
-			delayRenderTimeoutInMilliseconds={
-				delayRenderTimeoutInMilliseconds ?? null
-			}
-			disallowFallbackToOffthreadVideo={
-				disallowFallbackToOffthreadVideo ?? false
-			}
-			fallbackOffthreadVideoProps={fallbackOffthreadVideoProps ?? {}}
-			logLevel={logLevel ?? fallbackLogLevel}
-			loop={loop ?? false}
-			loopVolumeCurveBehavior={loopVolumeCurveBehavior ?? 'repeat'}
-			muted={muted ?? false}
-			name={name}
-			onVideoFrame={onVideoFrame}
-			playbackRate={playbackRate ?? 1}
-			showInTimeline={showInTimeline ?? true}
-			src={src}
-			style={style ?? {}}
-			trimAfter={trimAfter}
-			trimBefore={trimBefore}
-			volume={volume ?? 1}
-			toneFrequency={toneFrequency ?? 1}
-			stack={stack}
-			debugOverlay={debugOverlay ?? false}
-			debugAudioScheduling={debugAudioScheduling ?? false}
-			headless={headless ?? false}
-			onError={onError}
-			credentials={credentials}
-			controls={controls}
-			objectFit={objectFit ?? 'contain'}
-		/>
+		<Sequence
+			layout="none"
+			from={from ?? 0}
+			durationInFrames={durationInFrames ?? Infinity}
+			showInTimeline={false}
+		>
+			<InnerVideo
+				audioStreamIndex={audioStreamIndex ?? 0}
+				className={className}
+				delayRenderRetries={delayRenderRetries ?? null}
+				delayRenderTimeoutInMilliseconds={
+					delayRenderTimeoutInMilliseconds ?? null
+				}
+				disallowFallbackToOffthreadVideo={
+					disallowFallbackToOffthreadVideo ?? false
+				}
+				fallbackOffthreadVideoProps={fallbackOffthreadVideoProps ?? {}}
+				logLevel={logLevel ?? fallbackLogLevel}
+				loop={loop ?? false}
+				loopVolumeCurveBehavior={loopVolumeCurveBehavior ?? 'repeat'}
+				muted={muted ?? false}
+				name={name}
+				onVideoFrame={onVideoFrame}
+				playbackRate={playbackRate ?? 1}
+				showInTimeline={showInTimeline ?? true}
+				src={src}
+				style={style ?? {}}
+				trimAfter={trimAfter}
+				trimBefore={trimBefore}
+				volume={volume ?? 1}
+				toneFrequency={toneFrequency ?? 1}
+				stack={stack}
+				debugOverlay={debugOverlay ?? false}
+				debugAudioScheduling={debugAudioScheduling ?? false}
+				headless={headless ?? false}
+				onError={onError}
+				credentials={credentials}
+				controls={controls}
+				objectFit={objectFit ?? 'contain'}
+			/>
+		</Sequence>
 	);
 };