From 174bbdefaeb9af0b31d3ab9627ce1ee8d76bf019 Mon Sep 17 00:00:00 2001
From: TanviHanda <tanvisona2012@gmail.com>
Date: Sun, 17 May 2026 14:50:34 +0530
Subject: [PATCH] Add data-testid attributes to key UI elements

---
 src/components/AudioSpeedControl.tsx |  91 ++++++++---------
 src/components/DownloadResult.tsx    |   2 +
 src/components/ExportOverlay.tsx     |   1 +
 src/components/ExportSettings.tsx    | 143 +++++++--------------------
 src/components/FileUpload.tsx        |  50 +++++++---
 src/components/VideoEditor.tsx       |   2 +-
 6 files changed, 115 insertions(+), 174 deletions(-)

diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index a6c82102..78a622b2 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -1,4 +1,5 @@
 "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>
@@ -77,7 +97,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
             htmlFor="speed-control"
             className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2"
           >
-            <Gauge size={10} aria-hidden="true"  /> Speed
+            <Gauge size={10} /> Speed
           </label>
 
           <div className="text-right">
@@ -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,40 +136,9 @@ 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-amber-50 border border-amber-200 rounded text-sm text-amber-700 leading-relaxed flex items-start gap-2 animate-fade-in">
-          <AlertTriangle size={12} aria-hidden="true" className="shrink-0 mt-0.5" />
+        <div className="mt-3 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-700 leading-relaxed flex items-start gap-2 animate-fade-in">
+          <AlertTriangle size={12} className="shrink-0 mt-0.5" />
           <p>
             Note: If audio doesn&apos;t start within the selected range, the output will be silent.
           </p>
@@ -155,4 +146,4 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index b70bea9e..a6b5098c 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -112,6 +112,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 
@@ -139,6 +140,7 @@ 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"
         >
           <RotateCcw size={14} aria-hidden="true"  />
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index 62bbbd6f..428659d3 100644
--- a/src/components/ExportOverlay.tsx
+++ b/src/components/ExportOverlay.tsx
@@ -114,6 +114,7 @@ export default function ExportOverlay({ status, progress, onCancel }: Props) {
                   aria-valuemin={0}
                   aria-valuemax={100}
                   aria-label={isLoading? "Engine download progress": "Export progress"}
+                  data-testid="export-progress"
                   className="h-full bg-film-600 rounded-full transition-all duration-300"
                   style={{ width: `${progress}%` }}
                 />
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index ddc29a85..790c5c0e 100644
--- a/src/components/ExportSettings.tsx
+++ b/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,106 +41,39 @@ 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>
-
-        <input
-          id="quality-control"
-          type="range"
-          min={18}
-          max={30}
-          step={1}
-          value={48 - recipe.quality}
-          onChange={(e) =>
-            onChange({
-              quality: 48 - Number(
-                e.target.value
-              ),
-            })
-          }
-          aria-describedby="quality-description"
-          aria-label="Video export quality (CRF)"
-          aria-valuetext={`${label} quality, CRF value ${recipe.quality}`}
-          className="w-full accent-film-600 cursor-pointer"
-        />
-
-        <div
-          id="quality-description"
-          className="mt-1 space-y-3"
-        >
-          <div className="flex justify-between">
-            <span className="text-sm text-[var(--muted)]">
-              Smallest file
-            </span>
-
-            <span className="text-sm text-[var(--muted)]">
-              Best quality
-            </span>
-          </div>
-
-          <p className="text-xs text-[var(--muted)]">
-            Estimated size:{" "}
-            <span className="font-semibold text-[var(--text)]">
-              {estimatedSize}
-            </span>
-          </p>
-
-          {isGif && (
-            <p className="text-xs text-amber-600 font-medium">
-              ⚠ GIF files can be very large. Keep clips under 10 s for best results.
-            </p>
-          )}
-        </div>
-
-        {!isGif && (
-        <div className="flex items-center justify-between mt-4">
-          <label
-            htmlFor="sound-on-completion"
-            className="text-[10px] font-heading font-semibold uppercase tracking-wider text-[var(--muted)]"
-          >
-            Sound on completion
-          </label>
-
-          <input
-            id="sound-on-completion"
-            type="checkbox"
-            checked={recipe.soundOnCompletion}
-            onChange={(e) =>
-              onChange({ soundOnCompletion: e.target.checked })
-            }
-            aria-label="Play sound when export completes"
-            className="accent-film-600 cursor-pointer"
-          />
-        </div>
-        )}
+        </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>
+        </span>
+      </div>
+      <input
+        id="quality-control"
+        type="range"
+        min={18}
+        max={30}
+        step={1}
+        value={recipe.quality}
+        onChange={(e) => onChange({ quality: Number(e.target.value) })}
+        aria-describedby="quality-description"
+        aria-label="Video export quality (CRF)"
+        aria-valuetext={`${label} quality, CRF value ${recipe.quality}`}
+        className="w-full accent-film-600 cursor-pointer"
+      />
+      <div id="quality-description" className="flex justify-between mt-1">
+        <span className="text-sm text-[var(--muted)]">Best quality</span>
+        <span className="text-sm text-[var(--muted)]">Smallest file</span>
       </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 +89,8 @@ export default function ExportSettings({
               checked={recipe.stabilization}
               onChange={(e) =>
                 onChange({
-                  stabilization: e.target.checked,
+                  stabilization:
+                    e.target.checked,
                 })
               }
               aria-label="Enable video stabilization"
@@ -168,17 +100,12 @@ export default function ExportSettings({
           </span>
         </div>
 
-        {/* Short descriptive label explaining what the setting does */}
-        <p className="text-xs text-[var(--muted)] mb-1">
-          Reduce camera shake
-        </p>
-
         <div className="flex justify-end">
           <span
             className={cn(
-              "text-xs",
+              "text-sm",
               recipe.stabilization
-                ? "text-red-700 font-medium"
+                ? "text-red-700"
                 : "text-[var(--muted)]"
             )}
           >
@@ -186,6 +113,6 @@ export default function ExportSettings({
           </span>
         </div>
       </div>
-    </>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 6e10fd77..4f939e26 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -4,25 +4,34 @@ import { useRef, useState, useEffect} 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 [error, setError] = useState("");
   const [warning, setWarning] = useState("");
   
@@ -40,6 +49,7 @@ export default function FileUpload({
   const handleFile = (file: File) => {
     setError("");
     setWarning("");
+    setDuration(null);
 
     // Validate type
     if (!file.type.startsWith("video/")) {
@@ -72,6 +82,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);
   };
 
@@ -97,7 +119,7 @@ export default function FileUpload({
 
         <div className="flex-1 min-w-0">
           <div className="flex flex-wrap items-center gap-2 mb-0.5">
-            <p className="text-sm font-semibold text-film-700 truncate max-w-[320px] xl:max-w-[420px]">
+            <p className="text-sm font-semibold text-gray-800 truncate max-w-[320px] xl:max-w-[420px]">
               {currentFile?.name}
             </p>
             {currentFile && (
@@ -108,15 +130,12 @@ export default function FileUpload({
               </span>
             )}
           </div>
-          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 space-y-0.5">
-            <p>{formatBytes(currentFile?.size ?? 0)}</p>
-
-            <p>
-              {duration > 0
-                ? `Duration: ${formatDuration(duration)}`
-                : "Loading duration..."}
-            </p>
-          </div>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            {formatBytes(currentFile?.size ?? 0)}
+            {duration !== null
+              ? ` • ${formatDuration(duration)}`
+              : " • Loading metadata..."}
+          </p>
         </div>
       </div>
 
@@ -168,9 +187,10 @@ export default function FileUpload({
   </div>
 );
   const DropZone = () => (
-    <div
-      id="upload-zone"
+        <div
       role="button"
+      aria-label="Upload video file"
+      data-testid="file-upload-zone"
       tabIndex={0}
       onDragOver={(e) => {
         e.preventDefault();
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 69265646..47d0ac7e 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -193,7 +193,7 @@ export default function VideoEditor() {
 
           <div className="space-y-4 min-w-0">
             <div className="bg-[var(--surface)] rounded-xl p-5 border border-[var(--border)] animate-fade-in">
-              <FileUpload onFileSelect={handleFileSelect} currentFile={file} fileError={fileError} duration={duration} />
+              <FileUpload onFileSelect={handleFileSelect} currentFile={file} fileError={fileError}/>
 
               {!file && (
                 <div className="text-center text-[var(--muted)] py-6">