audio codec drop warning

remotion-dev · Nov 10, 2024 · 975668c · 975668c
1 parent c95fca8
commit 975668c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/packages/convert/app/components/AudioCodecDropWarning.tsx b/packages/convert/app/components/AudioCodecDropWarning.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const AudioCodecDropWarning: React.FC = () => {
+	return (
+		<div className="text-sm mt-2 text-muted-foreground">
+			Your browser doesn't support encoding audio and the audio track cannot be
+			copied into the new container.
+		</div>
+	);
+};
diff --git a/packages/convert/app/components/AudioCodecSelection.tsx b/packages/convert/app/components/AudioCodecSelection.tsx
@@ -1,6 +1,7 @@
 import {MediaParserAudioCodec} from '@remotion/media-parser';
 import {AudioOperation} from '@remotion/webcodecs';
 import React from 'react';
+import {AudioCodecDropWarning} from './AudioCodecDropWarning';
 import {AudioOperationOption} from './AudioOperationOption';
 import {
 	Select,
@@ -21,28 +22,37 @@ export const AudioCodecSelection: React.FC<{
 		throw new Error('No current audio codec, should not render this component');
 	}
 
+	const disabled = audioTrackOptions.length < 2;
+
 	return (
-		<Select value={String(index)} onValueChange={(v) => setIndex(Number(v))}>
-			<SelectTrigger id="audioCodec">
-				<SelectValue placeholder="Select a audio codec" />
-			</SelectTrigger>
-			<SelectContent>
-				{audioTrackOptions.map((operation, i) => {
-					return (
-						<SelectGroup key={i}>
-							<SelectItem
-								// eslint-disable-next-line react/jsx-key
-								value={String(i)}
-							>
-								<AudioOperationOption
-									currentAudioCodec={currentAudioCodec}
-									operation={operation}
-								/>
-							</SelectItem>
-						</SelectGroup>
-					);
-				})}
-			</SelectContent>
-		</Select>
+		<>
+			<Select
+				disabled={disabled}
+				value={String(index)}
+				onValueChange={(v) => setIndex(Number(v))}
+			>
+				<SelectTrigger id="audioCodec">
+					<SelectValue placeholder="Select a audio codec" />
+				</SelectTrigger>
+				<SelectContent>
+					{audioTrackOptions.map((operation, i) => {
+						return (
+							<SelectGroup key={i}>
+								<SelectItem
+									// eslint-disable-next-line react/jsx-key
+									value={String(i)}
+								>
+									<AudioOperationOption
+										currentAudioCodec={currentAudioCodec}
+										operation={operation}
+									/>
+								</SelectItem>
+							</SelectGroup>
+						);
+					})}
+				</SelectContent>
+			</Select>
+			{disabled ? <AudioCodecDropWarning /> : null}
+		</>
 	);
 };
diff --git a/packages/convert/app/components/VideoCodecSelection.tsx b/packages/convert/app/components/VideoCodecSelection.tsx
@@ -18,7 +18,11 @@ export const VideoCodecSelection: React.FC<{
 	readonly currentVideoCodec: MediaParserVideoCodec | null;
 }> = ({videoOperations, index, setIndex, currentVideoCodec}) => {
 	return (
-		<Select value={String(index)} onValueChange={(v) => setIndex(Number(v))}>
+		<Select
+			disabled={videoOperations.length < 2}
+			value={String(index)}
+			onValueChange={(v) => setIndex(Number(v))}
+		>
 			<SelectTrigger id="videoCodec">
 				<SelectValue placeholder="Select a video codec" />
 			</SelectTrigger>