Merge pull request #4289 from remotion-dev/field-callbacks

remotion-dev · Sep 7, 2024 · 9ec263e · 9ec263e
2 parents 2d24c97 + dd7d1ce
commit 9ec263e
Show file tree

Hide file tree

Showing 25 changed files with 1,114 additions and 237 deletions.
diff --git a/packages/convert/app/components/AudioTrackOverview.tsx b/packages/convert/app/components/AudioTrackOverview.tsx
@@ -0,0 +1,35 @@
+import type {AudioTrack} from '@remotion/media-parser';
+import {Table, TableBody, TableCell, TableRow} from './ui/table';
+
+export const AudioTrackOverview: React.FC<{
+	readonly track: AudioTrack;
+}> = ({track}) => {
+	return (
+		<Table>
+			<TableBody>
+				<TableRow>
+					<TableCell colSpan={3}>Type</TableCell>
+					<TableCell className="text-right">Audio</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell colSpan={3}>Codec</TableCell>
+					<TableCell className="text-right">
+						{track.codecWithoutConfig}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell colSpan={3}>WebCodecs Codec String</TableCell>
+					<TableCell className="text-right">{track.codec}</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell colSpan={3}>Channels</TableCell>
+					<TableCell className="text-right">{track.numberOfChannels}</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell colSpan={3}>Sample Rate</TableCell>
+					<TableCell className="text-right">{track.sampleRate}</TableCell>
+				</TableRow>
+			</TableBody>
+		</Table>
+	);
+};
diff --git a/...ages/convert/app/components/DataTable.tsx → ...vert/app/components/ContainerOverview.tsx b/...ages/convert/app/components/DataTable.tsx → ...vert/app/components/ContainerOverview.tsx
@@ -3,6 +3,7 @@ import type {
 	Dimensions,
 	MediaParserAudioCodec,
 	MediaParserVideoCodec,
+	ParseMediaContainer,
 } from '@remotion/media-parser';
 import React from 'react';
 import {formatBytes} from '~/lib/format-bytes';
@@ -15,14 +16,14 @@ const formatSeconds = (seconds: number) => {
 	return `${minutes}:${secondsLeft < 10 ? '0' : ''}${Math.round(secondsLeft)} min`;
 };
 
-export const TableDemo: React.FC<{
+export const ContainerOverview: React.FC<{
 	readonly dimensions: Dimensions | null;
-	readonly container: string;
 	readonly durationInSeconds: number | null;
 	readonly videoCodec: MediaParserVideoCodec | null;
 	readonly audioCodec: MediaParserAudioCodec | null;
 	readonly size: number | null;
-	readonly fps: number | null;
+	readonly fps: number | null | undefined;
+	readonly container: ParseMediaContainer | null;
 }> = ({
 	container,
 	dimensions,
@@ -35,10 +36,6 @@ export const TableDemo: React.FC<{
 	return (
 		<Table>
 			<TableBody>
-				<TableRow>
-					<TableCell colSpan={3}>Container</TableCell>
-					<TableCell className="text-right">{container}</TableCell>
-				</TableRow>
 				<TableRow>
 					<TableCell colSpan={3}>Size</TableCell>
 					<TableCell className="text-right">
@@ -49,6 +46,16 @@ export const TableDemo: React.FC<{
 						)}
 					</TableCell>
 				</TableRow>
+				<TableRow>
+					<TableCell colSpan={3}>Container</TableCell>
+					<TableCell className="text-right">
+						{container ? (
+							<>{String(container)}</>
+						) : (
+							<Skeleton className="h-3 w-[100px] inline-block" />
+						)}
+					</TableCell>
+				</TableRow>
 				<TableRow>
 					<TableCell colSpan={3}>Duration</TableCell>
 					<TableCell className="text-right">
@@ -74,10 +81,12 @@ export const TableDemo: React.FC<{
 				<TableRow>
 					<TableCell colSpan={3}>Frame Rate</TableCell>
 					<TableCell className="text-right">
-						{fps === null ? (
+						{fps === undefined ? (
 							<Skeleton className="h-3 w-[100px] inline-block" />
-						) : (
+						) : fps ? (
 							<>{fps} FPS</>
+						) : (
+							'N/A'
 						)}
 					</TableCell>
 				</TableRow>

diff --git a/packages/convert/app/components/ConvertUi.tsx b/packages/convert/app/components/ConvertUi.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import {Button} from '@/components/ui/button';
 import {CardContent, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
@@ -13,6 +11,7 @@ import {
 } from '@/components/ui/select';
 import {convertMedia} from '@remotion/webcodecs';
 import {useCallback, useState} from 'react';
+import {Badge} from './ui/badge';
 
 export default function ConvertUI({src}: {readonly src: string}) {
 	const [abortController] = useState<AbortController>(
@@ -44,7 +43,11 @@ export default function ConvertUI({src}: {readonly src: string}) {
 		<div className="w-[380px]">
 			<CardContent className="gap-4">
 				<div className="grid w-full items-center gap-4">
-					<CardTitle>Convert video</CardTitle>
+					<div className="flex flex-row">
+						<CardTitle>Convert video</CardTitle>
+						<div className="w-2" />
+						<Badge variant={'default'}>Alpha</Badge>
+					</div>
 					<div>
 						<Label htmlFor="container">Container</Label>
 						<Select value={container} onValueChange={setContainer}>