From 372a12900218e149fb276b7f78991d7947d0b7b5 Mon Sep 17 00:00:00 2001
From: gdaunton <gdaunton@hubspot.com>
Date: Thu, 3 Oct 2024 13:44:49 -0400
Subject: [PATCH 1/3] Fix crossOrigin prop not being passed to VideoForPreview.

---
 packages/core/src/video/Video.tsx           | 2 --
 packages/core/src/video/VideoForPreview.tsx | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/core/src/video/Video.tsx b/packages/core/src/video/Video.tsx
index 36fe5d6ff86..e7aa0a62f3b 100644
--- a/packages/core/src/video/Video.tsx
+++ b/packages/core/src/video/Video.tsx
@@ -34,7 +34,6 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 		_remotionInternalNativeLoopPassed,
 		showInTimeline,
 		onAutoPlayError,
-		crossOrigin,
 		...otherProps
 	} = props;
 	const {loop, _remotionDebugSeeking, ...propsOtherThanLoop} = props;
@@ -144,7 +143,6 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 			_remotionDebugSeeking={_remotionDebugSeeking ?? false}
 			showInTimeline={showInTimeline ?? true}
 			onAutoPlayError={onAutoPlayError ?? undefined}
-			crossOrigin={crossOrigin}
 		/>
 	);
 };
diff --git a/packages/core/src/video/VideoForPreview.tsx b/packages/core/src/video/VideoForPreview.tsx
index 181c094b89b..b372b5c948d 100644
--- a/packages/core/src/video/VideoForPreview.tsx
+++ b/packages/core/src/video/VideoForPreview.tsx
@@ -36,7 +36,7 @@ type VideoForPreviewProps = RemotionVideoProps & {
 	readonly _remotionDebugSeeking: boolean;
 	readonly showInTimeline: boolean;
 	readonly onVideoFrame: null | OnVideoFrame;
-	readonly crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
+	readonly crossOrigin?: '' | 'anonymous' | 'use-credentials';
 };
 
 const VideoForDevelopmentRefForwardingFunction: React.ForwardRefRenderFunction<

From 9881f40d423039c1b25b2336fe2ff7f0bbc71b22 Mon Sep 17 00:00:00 2001
From: gdaunton <gdaunton@hubspot.com>
Date: Thu, 3 Oct 2024 14:20:35 -0400
Subject: [PATCH 2/3] Clean up prop destructuring

---
 packages/core/src/video/Video.tsx           | 58 +++++++++++++--------
 packages/core/src/video/VideoForPreview.tsx |  2 +-
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/video/Video.tsx b/packages/core/src/video/Video.tsx
index e7aa0a62f3b..618b529da8d 100644
--- a/packages/core/src/video/Video.tsx
+++ b/packages/core/src/video/Video.tsx
@@ -25,18 +25,6 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 			readonly stack?: string;
 		}
 > = (props, ref) => {
-	const {
-		startFrom,
-		endAt,
-		name,
-		pauseWhenBuffering,
-		stack,
-		_remotionInternalNativeLoopPassed,
-		showInTimeline,
-		onAutoPlayError,
-		...otherProps
-	} = props;
-	const {loop, _remotionDebugSeeking, ...propsOtherThanLoop} = props;
 	const {fps} = useVideoConfig();
 	const environment = getRemotionEnvironment();
 
@@ -69,7 +57,15 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 		durations[getAbsoluteSrc(preloadedSrc)] ??
 		durations[getAbsoluteSrc(props.src)];
 
-	if (loop && durationFetched !== undefined) {
+	if (props.loop && durationFetched !== undefined) {
+		const {
+			startFrom,
+			endAt,
+			name,
+			loop: __omitLoop,
+			_remotionDebugSeeking: __omitRemotionDebugSeeking,
+			...loopedVideoProps
+		} = props;
 		const mediaDuration = durationFetched * fps;
 
 		return (
@@ -84,7 +80,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 				name={name}
 			>
 				<Video
-					{...propsOtherThanLoop}
+					{...loopedVideoProps}
 					ref={ref}
 					_remotionInternalNativeLoopPassed
 				/>
@@ -92,7 +88,11 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 		);
 	}
 
-	if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+	if (
+		typeof props.startFrom !== 'undefined' ||
+		typeof props.endAt !== 'undefined'
+	) {
+		const {startFrom, endAt, name, ...sequencedVideoProps} = props;
 		validateStartFromProps(startFrom, endAt);
 
 		const startFromFrameNo = startFrom ?? 0;
@@ -105,11 +105,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 				durationInFrames={endAtFrameNo}
 				name={name}
 			>
-				<Video
-					pauseWhenBuffering={pauseWhenBuffering ?? false}
-					{...otherProps}
-					ref={ref}
-				/>
+				<Video {...sequencedVideoProps} ref={ref} />
 			</Sequence>
 		);
 	}
@@ -117,20 +113,36 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 	validateMediaProps(props, 'Video');
 
 	if (environment.isRendering) {
+		const {
+			startFrom: __omitStartFrom,
+			endAt: __omitEndAt,
+			pauseWhenBuffering: __omitPauseWhenBuffering,
+			...renderedVideoProps
+		} = props;
 		return (
 			<VideoForRendering
 				onDuration={onDuration}
 				onVideoFrame={onVideoFrame ?? null}
-				{...otherProps}
+				{...renderedVideoProps}
 				ref={ref}
 			/>
 		);
 	}
 
+	const {
+		crossOrigin,
+		pauseWhenBuffering,
+		showInTimeline,
+		stack,
+		_remotionInternalNativeLoopPassed,
+		_remotionDebugSeeking,
+		...videoForPreviewProps
+	} = props;
+
 	return (
 		<VideoForPreview
 			onlyWarnForMediaSeekingError={false}
-			{...otherProps}
+			{...videoForPreviewProps}
 			ref={ref}
 			onVideoFrame={null}
 			// Proposal: Make this default to true in v5
@@ -142,7 +154,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 			}
 			_remotionDebugSeeking={_remotionDebugSeeking ?? false}
 			showInTimeline={showInTimeline ?? true}
-			onAutoPlayError={onAutoPlayError ?? undefined}
+			crossOrigin={crossOrigin ?? undefined}
 		/>
 	);
 };
diff --git a/packages/core/src/video/VideoForPreview.tsx b/packages/core/src/video/VideoForPreview.tsx
index b372b5c948d..181c094b89b 100644
--- a/packages/core/src/video/VideoForPreview.tsx
+++ b/packages/core/src/video/VideoForPreview.tsx
@@ -36,7 +36,7 @@ type VideoForPreviewProps = RemotionVideoProps & {
 	readonly _remotionDebugSeeking: boolean;
 	readonly showInTimeline: boolean;
 	readonly onVideoFrame: null | OnVideoFrame;
-	readonly crossOrigin?: '' | 'anonymous' | 'use-credentials';
+	readonly crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
 };
 
 const VideoForDevelopmentRefForwardingFunction: React.ForwardRefRenderFunction<

From 800155a49fede92f3037377130529ceea6f919ab Mon Sep 17 00:00:00 2001
From: gdaunton <gdaunton@hubspot.com>
Date: Fri, 4 Oct 2024 09:40:07 -0400
Subject: [PATCH 3/3] Revert "Clean up prop destructuring"

This reverts commit 9881f40d423039c1b25b2336fe2ff7f0bbc71b22.
---
 packages/core/src/video/Video.tsx           | 58 ++++++++-------------
 packages/core/src/video/VideoForPreview.tsx |  2 +-
 2 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/video/Video.tsx b/packages/core/src/video/Video.tsx
index 618b529da8d..e7aa0a62f3b 100644
--- a/packages/core/src/video/Video.tsx
+++ b/packages/core/src/video/Video.tsx
@@ -25,6 +25,18 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 			readonly stack?: string;
 		}
 > = (props, ref) => {
+	const {
+		startFrom,
+		endAt,
+		name,
+		pauseWhenBuffering,
+		stack,
+		_remotionInternalNativeLoopPassed,
+		showInTimeline,
+		onAutoPlayError,
+		...otherProps
+	} = props;
+	const {loop, _remotionDebugSeeking, ...propsOtherThanLoop} = props;
 	const {fps} = useVideoConfig();
 	const environment = getRemotionEnvironment();
 
@@ -57,15 +69,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 		durations[getAbsoluteSrc(preloadedSrc)] ??
 		durations[getAbsoluteSrc(props.src)];
 
-	if (props.loop && durationFetched !== undefined) {
-		const {
-			startFrom,
-			endAt,
-			name,
-			loop: __omitLoop,
-			_remotionDebugSeeking: __omitRemotionDebugSeeking,
-			...loopedVideoProps
-		} = props;
+	if (loop && durationFetched !== undefined) {
 		const mediaDuration = durationFetched * fps;
 
 		return (
@@ -80,7 +84,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 				name={name}
 			>
 				<Video
-					{...loopedVideoProps}
+					{...propsOtherThanLoop}
 					ref={ref}
 					_remotionInternalNativeLoopPassed
 				/>
@@ -88,11 +92,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 		);
 	}
 
-	if (
-		typeof props.startFrom !== 'undefined' ||
-		typeof props.endAt !== 'undefined'
-	) {
-		const {startFrom, endAt, name, ...sequencedVideoProps} = props;
+	if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
 		validateStartFromProps(startFrom, endAt);
 
 		const startFromFrameNo = startFrom ?? 0;
@@ -105,7 +105,11 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 				durationInFrames={endAtFrameNo}
 				name={name}
 			>
-				<Video {...sequencedVideoProps} ref={ref} />
+				<Video
+					pauseWhenBuffering={pauseWhenBuffering ?? false}
+					{...otherProps}
+					ref={ref}
+				/>
 			</Sequence>
 		);
 	}
@@ -113,36 +117,20 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 	validateMediaProps(props, 'Video');
 
 	if (environment.isRendering) {
-		const {
-			startFrom: __omitStartFrom,
-			endAt: __omitEndAt,
-			pauseWhenBuffering: __omitPauseWhenBuffering,
-			...renderedVideoProps
-		} = props;
 		return (
 			<VideoForRendering
 				onDuration={onDuration}
 				onVideoFrame={onVideoFrame ?? null}
-				{...renderedVideoProps}
+				{...otherProps}
 				ref={ref}
 			/>
 		);
 	}
 
-	const {
-		crossOrigin,
-		pauseWhenBuffering,
-		showInTimeline,
-		stack,
-		_remotionInternalNativeLoopPassed,
-		_remotionDebugSeeking,
-		...videoForPreviewProps
-	} = props;
-
 	return (
 		<VideoForPreview
 			onlyWarnForMediaSeekingError={false}
-			{...videoForPreviewProps}
+			{...otherProps}
 			ref={ref}
 			onVideoFrame={null}
 			// Proposal: Make this default to true in v5
@@ -154,7 +142,7 @@ const VideoForwardingFunction: React.ForwardRefRenderFunction<
 			}
 			_remotionDebugSeeking={_remotionDebugSeeking ?? false}
 			showInTimeline={showInTimeline ?? true}
-			crossOrigin={crossOrigin ?? undefined}
+			onAutoPlayError={onAutoPlayError ?? undefined}
 		/>
 	);
 };
diff --git a/packages/core/src/video/VideoForPreview.tsx b/packages/core/src/video/VideoForPreview.tsx
index 181c094b89b..b372b5c948d 100644
--- a/packages/core/src/video/VideoForPreview.tsx
+++ b/packages/core/src/video/VideoForPreview.tsx
@@ -36,7 +36,7 @@ type VideoForPreviewProps = RemotionVideoProps & {
 	readonly _remotionDebugSeeking: boolean;
 	readonly showInTimeline: boolean;
 	readonly onVideoFrame: null | OnVideoFrame;
-	readonly crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
+	readonly crossOrigin?: '' | 'anonymous' | 'use-credentials';
 };
 
 const VideoForDevelopmentRefForwardingFunction: React.ForwardRefRenderFunction<