add camera image and stream details on successful test

web/src/components/settings/Step1NameCamera.tsx

@@ -21,7 +21,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { useTranslation } from "react-i18next";
 import { useState, useCallback, useMemo } from "react";
-import { LuEye, LuEyeOff } from "react-icons/lu";
+import { LuCircleCheck, LuEye, LuEyeOff } from "react-icons/lu";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import axios from "axios";
 import { toast } from "sonner";
@@ -40,12 +40,15 @@ type Step1NameCameraProps = {
   wizardData: Partial<WizardFormData>;
   onUpdate: (data: Partial<WizardFormData>) => void;
   onCancel: () => void;
+  onNext?: () => void;
+  canProceed?: boolean;
 };
 
 export default function Step1NameCamera({
   wizardData,
   onUpdate,
   onCancel,
+  onNext,
 }: Step1NameCameraProps) {
   const { t } = useTranslation(["views/settings"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -147,18 +150,44 @@ export default function Step1NameCamera({
     setIsTesting(true);
     setTestResult(null);
 
-    await axios
+    // First get probe data for metadata
-      .get("ffprobe", {
+    const probePromise = axios.get("ffprobe", {
       params: { paths: streamUrl, detailed: true },
       timeout: 10000,
-      })
+    });
-      .then((response) => {
+
+    // Then get snapshot for preview
+    const snapshotPromise = axios.get("ffprobe/snapshot", {
+      params: { url: streamUrl },
+      responseType: "blob",
+      timeout: 10000,
+    });
+
+    try {
+      // First get probe data for metadata
+      const probeResponse = await probePromise;
+      let probeData = null;
       if (
-          response.data &&
+        probeResponse.data &&
-          response.data.length > 0 &&
+        probeResponse.data.length > 0 &&
-          response.data[0].return_code === 0
+        probeResponse.data[0].return_code === 0
       ) {
-          const probeData = response.data[0];
+        probeData = probeResponse.data[0];
+      }
+
+      // Then get snapshot for preview (only if probe succeeded)
+      let snapshotBlob = null;
+      if (probeData) {
+        try {
+          const snapshotResponse = await snapshotPromise;
+          snapshotBlob = snapshotResponse.data;
+        } catch (snapshotError) {
+          // Snapshot is optional, don't fail if it doesn't work
+          toast.warning(t("cameraWizard.step1.warnings.noSnapshot"));
+        }
+      }
+
+      if (probeData) {
         const ffprobeData = probeData.stdout;
         const streams = ffprobeData.streams || [];
 
@@ -187,8 +216,19 @@ export default function Step1NameCamera({
             parseFloat(videoStream.r_frame_rate.split("/")[1])
           : undefined;
 
+        // Convert snapshot blob to base64 if available
+        let snapshotBase64 = undefined;
+        if (snapshotBlob) {
+          snapshotBase64 = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result as string);
+            reader.readAsDataURL(snapshotBlob);
+          });
+        }
+
         const testResult: TestResult = {
           success: true,
+          snapshot: snapshotBase64,
           resolution,
           videoCodec: videoStream?.codec_name,
           audioCodec: audioStream?.codec_name,
@@ -197,47 +237,33 @@ export default function Step1NameCamera({
 
         setTestResult(testResult);
         toast.success(t("cameraWizard.step1.testSuccess"));
-
-          // Auto-populate stream if successful
-          const streamId = `stream_${Date.now()}`;
-          onUpdate({
-            ...data,
-            streams: [
-              {
-                id: streamId,
-                url: streamUrl,
-                roles: ["detect"],
-                resolution: testResult.resolution,
-                testResult,
-              },
-            ],
-          });
       } else {
-          const error = response.data?.[0]?.stderr || "Unknown error";
+        const error = probeData?.stderr || "Unknown error";
         setTestResult({
           success: false,
           error: error,
         });
         toast.error(t("cameraWizard.step1.testFailed", { error }));
       }
-      })
+    } catch (error) {
-      .catch((error) => {
+      const axiosError = error as {
+        response?: { data?: { message?: string; detail?: string } };
+        message?: string;
+      };
       const errorMessage =
-          error.response?.data?.message ||
+        axiosError.response?.data?.message ||
-          error.response?.data?.detail ||
+        axiosError.response?.data?.detail ||
+        axiosError.message ||
         "Connection failed";
       setTestResult({
         success: false,
         error: errorMessage,
       });
-        toast.error(
+      toast.error(t("cameraWizard.step1.testFailed", { error: errorMessage }));
-          t("cameraWizard.step1.testFailed", { error: errorMessage }),
+    } finally {
-        );
-      })
-      .finally(() => {
       setIsTesting(false);
-      });
+    }
-  }, [form, generateStreamUrl, onUpdate, t]);
+  }, [form, generateStreamUrl, t]);
 
   const onSubmit = (data: z.infer<typeof step1FormData>) => {
     onUpdate(data);
@@ -245,6 +271,8 @@ export default function Step1NameCamera({
 
   return (
     <div className="space-y-6">
+      {!testResult?.success && (
+        <>
           <div className="text-sm text-muted-foreground">
             {t("cameraWizard.step1.description")}
           </div>
@@ -260,7 +288,9 @@ export default function Step1NameCamera({
                     <FormControl>
                       <Input
                         className="h-8"
-                    placeholder={t("cameraWizard.step1.cameraNamePlaceholder")}
+                        placeholder={t(
+                          "cameraWizard.step1.cameraNamePlaceholder",
+                        )}
                         {...field}
                       />
                     </FormControl>
@@ -337,7 +367,9 @@ export default function Step1NameCamera({
                     name="username"
                     render={({ field }) => (
                       <FormItem>
-                    <FormLabel>{t("cameraWizard.step1.username")}</FormLabel>
+                        <FormLabel>
+                          {t("cameraWizard.step1.username")}
+                        </FormLabel>
                         <FormControl>
                           <Input
                             className="h-8"
@@ -357,7 +389,9 @@ export default function Step1NameCamera({
                     name="password"
                     render={({ field }) => (
                       <FormItem>
-                    <FormLabel>{t("cameraWizard.step1.password")}</FormLabel>
+                        <FormLabel>
+                          {t("cameraWizard.step1.password")}
+                        </FormLabel>
                         <FormControl>
                           <div className="relative">
                             <Input
@@ -376,9 +410,9 @@ export default function Step1NameCamera({
                               onClick={() => setShowPassword(!showPassword)}
                             >
                               {showPassword ? (
-                            <LuEyeOff className="h-4 w-4" />
+                                <LuEyeOff className="size-4" />
                               ) : (
-                            <LuEye className="h-4 w-4" />
+                                <LuEye className="size-4" />
                               )}
                             </Button>
                           </div>
@@ -409,41 +443,110 @@ export default function Step1NameCamera({
                   )}
                 />
               )}
+            </form>
+          </Form>
+        </>
+      )}
 
-          {testResult && (
+      {testResult?.success && (
-            <div className="mt-4">
+        <div className="p-4">
-              <div
+          <div className="mb-3 flex flex-row items-center gap-2 text-sm font-medium text-success">
-                className={`text-sm font-medium ${testResult.success ? "text-success" : "text-danger"}`}
+            <LuCircleCheck />
-              >
+            {t("cameraWizard.step1.testSuccess")}
-                {testResult.success
-                  ? t("cameraWizard.step1.testSuccess")
-                  : t("cameraWizard.step1.testFailed")}
           </div>
-              {testResult.success ? (
+
-                <div className="mt-2 space-y-1 text-xs text-muted-foreground">
+          <div className="space-y-3">
+            {testResult.snapshot && (
+              <div className="flex justify-center">
+                <img
+                  src={testResult.snapshot}
+                  alt="Camera snapshot"
+                  className="max-h-[50dvh] max-w-full rounded-lg object-contain"
+                />
+              </div>
+            )}
+
+            <div className="text-sm font-semibold text-primary-variant">
+              {t("cameraWizard.step1.streamDetails")}
+            </div>
+            <div className="text-sm">
               {testResult.resolution && (
-                    <div>Resolution: {testResult.resolution}</div>
+                <div>
+                  <span className="text-secondary-foreground">
+                    {t("cameraWizard.step1.testResultLabels.resolution")}:
+                  </span>{" "}
+                  <span className="text-primary">{testResult.resolution}</span>
+                </div>
               )}
               {testResult.videoCodec && (
-                    <div>Video: {testResult.videoCodec}</div>
+                <div>
+                  <span className="text-secondary-foreground">
+                    {t("cameraWizard.step1.testResultLabels.video")}:
+                  </span>{" "}
+                  <span className="text-primary">{testResult.videoCodec}</span>
+                </div>
               )}
               {testResult.audioCodec && (
-                    <div>Audio: {testResult.audioCodec}</div>
+                <div>
-                  )}
+                  <span className="text-secondary-foreground">
-                  {testResult.fps && <div>FPS: {testResult.fps}</div>}
+                    {t("cameraWizard.step1.testResultLabels.audio")}:
-                </div>
+                  </span>{" "}
-              ) : (
+                  <span className="text-primary">{testResult.audioCodec}</span>
-                <div className="mt-2 text-xs text-danger">
-                  {testResult.error}
                 </div>
               )}
+              {testResult.fps && (
+                <div>
+                  <span className="text-secondary-foreground">
+                    {t("cameraWizard.step1.testResultLabels.fps")}:
+                  </span>{" "}
+                  <span className="text-primary">{testResult.fps}</span>
+                </div>
+              )}
+            </div>
+          </div>
         </div>
       )}
 
       <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
-            <Button type="button" onClick={onCancel} className="sm:flex-1">
+        <Button
-              {t("button.cancel", { ns: "common" })}
+          type="button"
+          onClick={testResult?.success ? () => setTestResult(null) : onCancel}
+          className="sm:flex-1"
+        >
+          {testResult?.success
+            ? t("button.back", { ns: "common" })
+            : t("button.cancel", { ns: "common" })}
         </Button>
+        {testResult?.success ? (
+          <Button
+            type="button"
+            onClick={() => {
+              // Auto-populate stream and proceed to next step
+              const data = form.getValues();
+              const streamUrl = generateStreamUrl(data);
+
+              const streamId = `stream_${Date.now()}`;
+              onUpdate({
+                ...data,
+                streams: [
+                  {
+                    id: streamId,
+                    url: streamUrl,
+                    roles: ["detect"],
+                    resolution: testResult.resolution,
+                    testResult: testResult || undefined,
+                  },
+                ],
+              });
+
+              onNext?.();
+            }}
+            variant="select"
+            className="flex items-center justify-center gap-2 sm:flex-1"
+          >
+            {t("button.continue", { ns: "common" })}
+          </Button>
+        ) : (
           <Button
             type="button"
             onClick={testConnection}
@@ -454,9 +557,8 @@ export default function Step1NameCamera({
             {isTesting && <ActivityIndicator className="size-4" />}
             {t("cameraWizard.step1.testConnection")}
           </Button>
+        )}
       </div>
-        </form>
-      </Form>
     </div>
   );
 }