fix: add data-testid attributes to key UI elements

src/components/AudioSpeedControl.tsx

@@ -1,4 +1,5 @@
-"use client";
+"use client";   
+import { useEffect } from "react";
 
 import { EditRecipe } from "@/lib/types"
 import { SPEED_STEPS } from "@/lib/constants";
@@ -11,6 +12,36 @@ interface Props {
 }
 
 export default function AudioSpeedControl({ recipe, onChange }: Props) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      if (
+        e.key.toLowerCase() === "m" &&
+        !e.ctrlKey &&
+        !e.metaKey
+      ) {
+        onChange({
+          keepAudio: !recipe.keepAudio,
+        });
+      }
+    };
+
+    document.addEventListener("keydown", handler);
+
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [recipe.keepAudio, onChange]);
+
   const speedIndex = SPEED_STEPS.indexOf(recipe.speed as (typeof SPEED_STEPS)[number]);
 
   const getSpeedDescription = (speed: number) => {
@@ -29,7 +60,6 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         <div className="flex justify-end animate-fade-in">
           <button
             type="button"
-            aria-label="Reset audio settings to default"
             onClick={() => onChange({ speed: 1, keepAudio: true })}
             className="text-sm font-heading font-semibold uppercase tracking-wider text-film-600 hover:text-film-700 hover:underline transition-all duration-150"
           >
@@ -41,7 +71,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       <button
         type="button"
         onClick={() => onChange({ keepAudio: !recipe.keepAudio })}
-        aria-label={recipe.keepAudio ? "Mute video audio (M)" : "Unmute video audio (M)"}
+        aria-label={recipe.keepAudio ? "Mute video audio" : "Unmute video audio"}
         aria-pressed={recipe.keepAudio}
         className={cn(
           "w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
@@ -50,24 +80,14 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
             ? "border-film-300 bg-film-50 text-film-700"
             : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
         )}
-        >
-        {recipe.keepAudio ? (
-        <Volume2 size={16} aria-hidden="true" />
-      ) : (
-        <VolumeX size={16} aria-hidden="true" />
-            )}
+      >
+        {recipe.keepAudio ? <Volume2 size={16} /> : <VolumeX size={16} />}
         <span className="sr-only">
           {recipe.keepAudio ? "Turn audio off" : "Turn audio on"}
         </span>
-        <span className="text-sm font-heading font-semibold flex-1 text-left">
+        <span className="text-sm font-heading font-semibold">
           {recipe.keepAudio ? "Audio on" : "Muted"}
         </span>
-        <kbd
-          aria-hidden="true"
-          className="ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded border border-current opacity-40"
-        >
-          M
-        </kbd>
       </button>
 
       <div>
@@ -99,6 +119,8 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
           onChange={(e) => onChange({ speed: SPEED_STEPS[Number(e.target.value)] })}
           aria-labelledby="speed-label"
           aria-describedby="speed-description"
+          aria-label="Video playback speed"
+          data-testid="speed-slider"
           aria-valuetext={`${recipe.speed}x speed, ${getSpeedDescription(recipe.speed)}`}
           className="w-full h-11 accent-film-600 cursor-pointer"
         />
@@ -114,37 +136,6 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
       </div>
 
-      {recipe.keepAudio && (
-        <button
-          type="button"
-          onClick={() => onChange({ normalizeAudio: !recipe.normalizeAudio })}
-          aria-label={
-            recipe.normalizeAudio
-            ? "Turn off audio normalization"
-            : "Turn on audio normalization"
-          }
-          aria-pressed={recipe.normalizeAudio}
-          aria-describedby="normalize-audio-description"
-          className={cn(
-            "w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
-            "hover:scale-[1.01] active:scale-[0.99]",
-            recipe.normalizeAudio
-              ? "border-film-300 bg-film-50 text-film-700"
-              : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)]"
-          )}
-        >
-          <Gauge size={16} aria-hidden="true" />
-          <div className="flex-1 text-left">
-            <span className="text-sm font-heading font-semibold block">
-              Normalize Audio
-            </span>
-            <span id="normalize-audio-description" className="text-[10px] text-[var(--muted)]">
-              {recipe.normalizeAudio ? "–14 LUFS (streaming standard)" : "Off"}
-            </span>
-          </div>
-        </button>
-      )}
-
       {recipe.keepAudio && (recipe.trimStart !== 0 || recipe.trimEnd !== null) && (
         <div role="note" className="mt-3 p-3 bg-[var(--accent-muted)] border border-[var(--border)] rounded text-sm text-[var(--text)] leading-relaxed flex items-start gap-2 animate-fade-in">
           <AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />

src/components/DownloadResult.tsx

@@ -138,6 +138,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          data-testid="download-button"
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
@@ -170,6 +171,8 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}
+          data-testid="reset-button"
+          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
           className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
           <RotateCcw size={14} aria-hidden="true" />

src/components/ExportOverlay.tsx

@@ -137,6 +137,8 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
                   aria-valuenow={progress}
                   aria-valuemin={0}
                   aria-valuemax={100}
+                  aria-label={isLoading? "Engine download progress": "Export progress"}
+                  data-testid="export-progress"
                   aria-label={isLoading ? "Engine download progress" : "Export progress"}
                   className="h-full bg-film-600 rounded-full transition-all duration-300"
                   style={{ width: `${progress}%` }}

src/components/ExportSettings.tsx

@@ -32,8 +32,6 @@ export default function ExportSettings({
       ? "Balanced"
       : "Small file";
 
-  const isGif = recipe.format === "gif";
-
   const estimatedSize =
     formatEstimatedSize(
       estimateExportSize(
@@ -43,30 +41,12 @@ export default function ExportSettings({
     );
 
   return (
-    <>
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <label
-            htmlFor="quality-control"
-            className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
-          >
-            <SlidersHorizontal size={10} />
-            Quality
-
-            <span
-              className="cursor-help"
-              title="CRF (Constant Rate Factor): lower = higher quality, larger file. 18 = best quality, 30 = smallest file."
-            >
-              <InfoIcon size={14} />
-            </span>
-          </label>
-
-          <span className="text-sm font-heading font-bold text-film-600">
-            {label}
-
-            <span className="font-normal text-sm text-[var(--muted)] ml-2">
-              CRF {recipe.quality}
-            </span>
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <label htmlFor="quality-control" className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2">
+          <SlidersHorizontal size={10} /> Quality
+          <span className="cursor-help" title="CRF (Constant Rate Factor): lower = higher quality, larger file. 18 = best quality, 30 = smallest file.">
+            <InfoIcon size={14} />
           </span>
         </div>
 
@@ -142,7 +122,7 @@ export default function ExportSettings({
       </div>
 
       <div>
-        <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center justify-between mb-2">
           <label
             htmlFor="stabilization-toggle"
             className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
@@ -158,7 +138,8 @@ export default function ExportSettings({
               checked={recipe.stabilization}
               onChange={(e) =>
                 onChange({
-                  stabilization: e.target.checked,
+                  stabilization:
+                    e.target.checked,
                 })
               }
               aria-label="Enable video stabilization"
@@ -174,7 +155,7 @@ export default function ExportSettings({
         <div className="flex justify-end">
           <span
             className={cn(
-              "text-xs",
+              "text-sm",
               recipe.stabilization
                 ? "text-[var(--error)] font-medium"
                 : "text-[var(--muted)]"
@@ -237,4 +218,4 @@ export default function ExportSettings({
       </div>
     </>
   );
-}
+}

src/components/FileUpload.tsx

@@ -4,25 +4,34 @@ import { useRef, useState, useEffect, useCallback } from "react";
 import { Film, FolderOpen } from "lucide-react";
 import LottiePlayer from "./LottiePlayer";
 import uploadAnim from "@/lib/lottie/upload.json";
-import { cn, formatBytes, formatDuration } from "@/lib/utils";
+import { cn, formatBytes } from "@/lib/utils";
 import { MAX_FILE_SIZE, WARNING_FILE_SIZE } from "@/lib/types";
 
 interface Props {
   onFileSelect: (file: File) => void;
   currentFile: File | null;
   fileError: string;
-  duration: number;
+}
+
+function formatDuration(seconds: number) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+
+  return `${mins.toString().padStart(2, "0")}:${secs
+    .toString()
+    .padStart(2, "0")}`;
 }
 
 export default function FileUpload({
   onFileSelect,
   currentFile,
   fileError,
-  duration,
 }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [dragging, setDragging] = useState(false);
+  const [duration, setDuration] = useState<number | null>(null);
+
   const [pageDragging, setPageDragging] = useState(false);
   const [error, setError] = useState("");
   const [warning, setWarning] = useState("");
@@ -86,6 +95,7 @@ export default function FileUpload({
   const handleFile = useCallback((file: File) => {
     setError("");
     setWarning("");
+    setDuration(null);
 
     if (!file.type.startsWith("video/")) {
       setError("Please drop a valid video file (MP4, MOV, AVI, WebM, etc.)");
@@ -114,6 +124,18 @@ export default function FileUpload({
       );
     }
 
+    // Extract metadata safely
+    const video = document.createElement("video");
+    video.preload = "metadata";
+
+    const url = URL.createObjectURL(file);
+    video.src = url;
+
+    video.onloadedmetadata = () => {
+      URL.revokeObjectURL(url);
+      setDuration(video.duration);
+    };
+
     onFileSelect(file);
   }, [onFileSelect]);
 
@@ -191,9 +213,10 @@ export default function FileUpload({
 
   // ── Drop zone (inner) ─────────────────────────────────
   const DropZone = () => (
-    <div
-      id="upload-zone"
+        <div
       role="button"
+      aria-label="Upload video file"
+      data-testid="file-upload-zone"
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
       onDragOver={(e) => {