administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-12 16:16:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add stream details to overlay like stats in liveplayer

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-12 18:16:56 -05:00
parent e9119f899f
commit ad3676f645
1 changed files with 57 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
web/src/components/settings/Step1NameCamera.tsx
View File

@ -510,61 +510,29 @@ export default function Step1NameCamera({
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
{testResult.snapshot && ( {testResult.snapshot ? (
<div className="flex justify-center"> <div className="relative flex justify-center">
<img <img
src={testResult.snapshot} src={testResult.snapshot}
alt="Camera snapshot" alt="Camera snapshot"
className="max-h-[50dvh] max-w-full rounded-lg object-contain" className="max-h-[50dvh] max-w-full rounded-lg object-contain"
/> />
<div className="absolute bottom-2 right-2 rounded-md bg-black/70 p-3 text-sm backdrop-blur-sm">
<div className="space-y-1">
<StreamDetails testResult={testResult} />
</div>
</div>
</div> </div>
) : (
<Card className="p-4">
<CardTitle className="mb-2 text-sm">
{t("cameraWizard.step1.streamDetails")}
</CardTitle>
<CardContent className="p-0 text-sm">
<StreamDetails testResult={testResult} />
</CardContent>
</Card>
)} )}
<Card className="p-4">
<CardTitle className="mb-2 text-sm">
{t("cameraWizard.step1.streamDetails")}
</CardTitle>
<CardContent className="p-0 text-sm">
{testResult.resolution && (
<div>
<span className="text-secondary-foreground">
{t("cameraWizard.testResultLabels.resolution")}:
</span>{" "}
<span className="text-primary">
{testResult.resolution}
</span>
</div>
)}
{testResult.videoCodec && (
<div>
<span className="text-secondary-foreground">
{t("cameraWizard.testResultLabels.video")}:
</span>{" "}
<span className="text-primary">
{testResult.videoCodec}
</span>
</div>
)}
{testResult.audioCodec && (
<div>
<span className="text-secondary-foreground">
{t("cameraWizard.testResultLabels.audio")}:
</span>{" "}
<span className="text-primary">
{testResult.audioCodec}
</span>
</div>
)}
{testResult.fps && (
<div>
<span className="text-secondary-foreground">
{t("cameraWizard.testResultLabels.fps")}:
</span>{" "}
<span className="text-primary">{testResult.fps}</span>
</div>
)}
</CardContent>
</Card>
</div> </div>
</div> </div>
)} )}
@ -604,3 +572,44 @@ export default function Step1NameCamera({
</div> </div>
); );
} }
function StreamDetails({ testResult }: { testResult: TestResult }) {
const { t } = useTranslation(["views/settings"]);
return (
<>
{testResult.resolution && (
<div>
<span className="text-white/70">
{t("cameraWizard.testResultLabels.resolution")}:
</span>{" "}
<span className="text-white">{testResult.resolution}</span>
</div>
)}
{testResult.fps && (
<div>
<span className="text-white/70">
{t("cameraWizard.testResultLabels.fps")}:
</span>{" "}
<span className="text-white">{testResult.fps}</span>
</div>
)}
{testResult.videoCodec && (
<div>
<span className="text-white/70">
{t("cameraWizard.testResultLabels.video")}:
</span>{" "}
<span className="text-white">{testResult.videoCodec}</span>
</div>
)}
{testResult.audioCodec && (
<div>
<span className="text-white/70">
{t("cameraWizard.testResultLabels.audio")}:
</span>{" "}
<span className="text-white">{testResult.audioCodec}</span>
</div>
)}
</>
);
}