mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-12 16:16:42 +03:00
add camera image and stream details on successful test
This commit is contained in:
Josh Hawkins
parent
617d2a239e
commit
be896789c7
@ -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
|
||||
.get("ffprobe", {
|
||||
// First get probe data for metadata
|
||||
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 &&
|
||||
response.data.length > 0 &&
|
||||
response.data[0].return_code === 0
|
||||
probeResponse.data &&
|
||||
probeResponse.data.length > 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 ||
|
||||
error.response?.data?.detail ||
|
||||
axiosError.response?.data?.message ||
|
||||
axiosError.response?.data?.detail ||
|
||||
axiosError.message ||
|
||||
"Connection failed";
|
||||
setTestResult({
|
||||
success: false,
|
||||
error: errorMessage,
|
||||
});
|
||||
toast.error(
|
||||
t("cameraWizard.step1.testFailed", { error: errorMessage }),
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
toast.error(t("cameraWizard.step1.testFailed", { error: errorMessage }));
|
||||
} 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 && (
|
||||
<div className="mt-4">
|
||||
<div
|
||||
className={`text-sm font-medium ${testResult.success ? "text-success" : "text-danger"}`}
|
||||
>
|
||||
{testResult.success
|
||||
? t("cameraWizard.step1.testSuccess")
|
||||
: t("cameraWizard.step1.testFailed")}
|
||||
{testResult?.success && (
|
||||
<div className="p-4">
|
||||
<div className="mb-3 flex flex-row items-center gap-2 text-sm font-medium text-success">
|
||||
<LuCircleCheck />
|
||||
{t("cameraWizard.step1.testSuccess")}
|
||||
</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>
|
||||
)}
|
||||
{testResult.fps && <div>FPS: {testResult.fps}</div>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 text-xs text-danger">
|
||||
{testResult.error}
|
||||
<div>
|
||||
<span className="text-secondary-foreground">
|
||||
{t("cameraWizard.step1.testResultLabels.audio")}:
|
||||
</span>{" "}
|
||||
<span className="text-primary">{testResult.audioCodec}</span>
|
||||
</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">
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
<Button
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user