mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-12-10 15:25:43 +03:00
9d85136f8f
Some checks are pending
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions
* fetch more from ffprobe * add detailed param to ffprobe endpoint * add dots variant to step indicator * add classname * tweak colors for dark mode to match figma * add step 1 form * add helper function for ffmpeg snapshot * add go2rtc stream add and ffprobe snapshot endpoints * add camera image and stream details on successful test * step 1 tweaks * step 2 and i18n * types * step 1 and 2 tweaks * add wizard to camera settings view * add data unit i18n keys * restream tweak * fix type * implement rough idea for step 3 * add api endpoint to delete stream from go2rtc * add main wizard dialog component * extract logic for friendly_name and use in wizard * add i18n and popover for brand url * add camera name to top * consolidate validation logic * prevent dialog from closing when clicking outside * center camera name on mobile * add help/docs link popovers * keep spaces in friendly name * add stream details to overlay like stats in liveplayer * add validation results pane to step 3 * ensure test is invalidated if stream is changed * only display validation results and enable save button if all streams have been tested * tweaks * normalize camera name to lower case and improve hash generation * move wizard to subfolder * tweaks * match look of camera edit form to wizard * move wizard and edit form to its own component * move enabled/disabled switch to management section * clean up * fixes * fix mobile
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type StepIndicatorProps = {
|
|
steps: string[];
|
|
currentStep: number;
|
|
variant?: "default" | "dots";
|
|
translationNameSpace?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export default function StepIndicator({
|
|
steps,
|
|
currentStep,
|
|
variant = "default",
|
|
translationNameSpace,
|
|
className,
|
|
}: StepIndicatorProps) {
|
|
const { t } = useTranslation(translationNameSpace);
|
|
|
|
if (variant == "dots") {
|
|
return (
|
|
<div className={cn("flex flex-row justify-center gap-2", className)}>
|
|
{steps.map((_, idx) => (
|
|
<div
|
|
key={idx}
|
|
className={cn(
|
|
"size-3 rounded-full border border-primary/10 transition-colors",
|
|
currentStep === idx
|
|
? "bg-selected"
|
|
: currentStep > idx
|
|
? "bg-muted-foreground"
|
|
: "bg-muted",
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Default variant (original behavior)
|
|
return (
|
|
<div className={cn("flex flex-row justify-evenly", className)}>
|
|
{steps.map((name, idx) => (
|
|
<div key={idx} className="flex flex-col items-center gap-2">
|
|
<div
|
|
className={cn(
|
|
"flex size-16 items-center justify-center rounded-full",
|
|
currentStep == idx ? "bg-selected" : "border-2 border-selected",
|
|
)}
|
|
>
|
|
{idx + 1}
|
|
</div>
|
|
<div className="w-24 text-center md:w-24">{t(name)}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|