Merge pull request #4567 from remotion-dev/rotate-webcodecs

`@remotion/webcodecs`: Support rotation
remotion-dev · Dec 2, 2024 · 54ebbc3 · 54ebbc3
2 parents 2a78259 + bf78344
commit 54ebbc3
Show file tree

Hide file tree

Showing 74 changed files with 1,771 additions and 306 deletions.
diff --git a/packages/convert/app/components/ContainerOverview.tsx b/packages/convert/app/components/ContainerOverview.tsx
@@ -22,6 +22,7 @@ export const ContainerOverview: React.FC<{
 	readonly size: number | null;
 	readonly fps: number | null | undefined;
 	readonly container: ParseMediaContainer | null;
+	readonly isHdr: boolean | undefined;
 }> = ({
 	container,
 	dimensions,
@@ -30,6 +31,7 @@ export const ContainerOverview: React.FC<{
 	audioCodec,
 	size,
 	fps,
+	isHdr,
 }) => {
 	return (
 		<Table>
@@ -94,7 +96,7 @@ export const ContainerOverview: React.FC<{
 						{fps === undefined ? (
 							<Skeleton className="h-3 w-[100px] inline-block" />
 						) : fps ? (
-							<>{fps} FPS</>
+							<>{fps.toFixed(2)} FPS</>
 						) : (
 							'N/A'
 						)}
@@ -126,6 +128,20 @@ export const ContainerOverview: React.FC<{
 						)}
 					</TableCell>
 				</TableRow>
+				<TableRow>
+					<TableCell className="font-brand" colSpan={3}>
+						HDR
+					</TableCell>
+					<TableCell className="text-right">
+						{isHdr === undefined ? (
+							<Skeleton className="h-3 w-[100px] inline-block" />
+						) : isHdr ? (
+							'Yes'
+						) : (
+							'No'
+						)}
+					</TableCell>
+				</TableRow>
 			</TableBody>
 		</Table>
 	);

diff --git a/packages/convert/app/components/ConvertForm.tsx b/packages/convert/app/components/ConvertForm.tsx
@@ -7,13 +7,11 @@ import {
 	getAvailableContainers,
 } from '@remotion/webcodecs';
 import React from 'react';
-import {isReencoding} from '~/lib/is-reencoding';
 import {renderHumanReadableContainer} from '~/lib/render-codec-label';
 import {AudioCodecSelection} from './AudioCodecSelection';
 import {SupportedConfigs} from './get-supported-configs';
 import {SelectionSkeleton} from './SelectionSkeleton';
 import {AudioTrackLabel, VideoTrackLabel} from './TrackSelectionLabels';
-import {Checkbox} from './ui/checkbox';
 import {Label} from './ui/label';
 import {
 	Select,
@@ -30,37 +28,24 @@ export const ConvertForm: React.FC<{
 	readonly setContainer: React.Dispatch<
 		React.SetStateAction<ConvertMediaContainer>
 	>;
-	readonly flipHorizontal: boolean;
-	readonly setFlipHorizontal: React.Dispatch<React.SetStateAction<boolean>>;
-	readonly flipVertical: boolean;
-	readonly setFlipVertical: React.Dispatch<React.SetStateAction<boolean>>;
 	readonly supportedConfigs: SupportedConfigs | null;
-	readonly videoConfigIndex: Record<number, number>;
-	readonly audioConfigIndex: Record<number, number>;
+	readonly videoConfigIndexSelection: Record<number, number>;
+	readonly audioConfigIndexSelection: Record<number, number>;
 	readonly setAudioConfigIndex: (trackId: number, i: number) => void;
 	readonly setVideoConfigIndex: (trackId: number, i: number) => void;
 	readonly currentAudioCodec: MediaParserAudioCodec | null;
 	readonly currentVideoCodec: MediaParserVideoCodec | null;
 }> = ({
 	container,
 	setContainer,
-	flipHorizontal,
-	flipVertical,
-	setFlipHorizontal,
-	setFlipVertical,
 	supportedConfigs,
-	audioConfigIndex,
+	audioConfigIndexSelection,
 	setAudioConfigIndex,
-	videoConfigIndex,
+	videoConfigIndexSelection,
 	setVideoConfigIndex,
 	currentAudioCodec,
 	currentVideoCodec,
 }) => {
-	const [showAdvanced, setShowAdvanced] = React.useState(false);
-
-	const canPixelManipulate =
-		supportedConfigs && isReencoding({supportedConfigs, videoConfigIndex});
-
 	return (
 		<div className="gap-4 grid">
 			<div>
@@ -94,7 +79,7 @@ export const ConvertForm: React.FC<{
 								totalVideoTracks={supportedConfigs.videoTrackOptions.length}
 							/>
 							<VideoCodecSelection
-								index={videoConfigIndex[track.trackId] ?? 0}
+								index={videoConfigIndexSelection[track.trackId] ?? 0}
 								setIndex={(i) => {
 									setVideoConfigIndex(track.trackId, i);
 								}}
@@ -116,7 +101,7 @@ export const ConvertForm: React.FC<{
 								totalAudioTracks={supportedConfigs.audioTrackOptions.length}
 							/>
 							<AudioCodecSelection
-								index={audioConfigIndex[track.trackId] ?? 0}
+								index={audioConfigIndexSelection[track.trackId] ?? 0}
 								setIndex={(i) => {
 									setAudioConfigIndex(track.trackId, i);
 								}}
@@ -129,52 +114,6 @@ export const ConvertForm: React.FC<{
 			) : (
 				<SelectionSkeleton />
 			)}
-			{canPixelManipulate && showAdvanced ? (
-				<>
-					<div className="flex flex-row">
-						<Checkbox
-							checked={flipHorizontal}
-							id="flipHorizontal"
-							onCheckedChange={() => setFlipHorizontal((e) => !e)}
-						/>
-						<div className="w-2" />
-						<div className="grid gap-1.5 leading-none">
-							<label
-								htmlFor="flipHorizontal"
-								className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-							>
-								Flip video horizontally
-							</label>
-						</div>
-					</div>
-					<div className="flex flex-row">
-						<Checkbox
-							checked={flipVertical}
-							id="flipVertical"
-							onCheckedChange={() => setFlipVertical((e) => !e)}
-						/>
-						<div className="w-2" />
-						<div className="grid gap-1.5 leading-none">
-							<label
-								htmlFor="flipVertical"
-								className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-							>
-								Flip video vertically
-							</label>
-						</div>
-					</div>
-				</>
-			) : canPixelManipulate ? (
-				<div className="flex flex-row justify-center text-muted-foreground">
-					<button
-						type="button"
-						className="font-brand"
-						onClick={() => setShowAdvanced(true)}
-					>
-						Advanced settings
-					</button>
-				</div>
-			) : null}
 		</div>
 	);
 };
diff --git a/packages/convert/app/components/ConvertProgress.tsx b/packages/convert/app/components/ConvertProgress.tsx
@@ -25,8 +25,10 @@ export const ConvertProgress: React.FC<{
 						<VideoThumbnail
 							ref={convertProgressRef}
 							smallThumbOnMobile={false}
+							rotation={0}
+							mirrorHorizontal={false}
+							mirrorVertical={false}
 						/>
-						<div className="border-b-2 border-black" />
 					</>
 				) : null}
 				<div className="h-5 overflow-hidden">