administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-11 17:47:37 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

image picker fixes

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-27 12:51:31 -05:00
parent 85f89cac0c
commit 8a6cd05af1
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/public/locales/en/components/dialog.json
View File

@ -112,6 +112,7 @@
},
"imagePicker": {
"selectImage": "Select a tracked object's thumbnail",
"unknownLabel": "Saved Trigger Image",
"search": {
"placeholder": "Search by label or sub label..."
},

2
web/public/locales/en/views/settings.json
View File

@ -883,7 +883,7 @@
"desc": "Semantic Search must be enabled to use Triggers."
},
"management": {
"title": "Trigger Management",
"title": "Triggers",
"desc": "Manage triggers for {{camera}}. Use the thumbnail type to trigger on similar thumbnails to your selected tracked object, and the description type to trigger on similar descriptions to text you specify."
},
"addTrigger": "Add Trigger",

19
web/src/components/overlay/ImagePicker.tsx
View File

@ -34,7 +34,7 @@ export default function ImagePicker({
direct = false,
className,
}: ImagePickerProps) {
const { t } = useTranslation(["components/dialog"]);
const { t } = useTranslation(["components/dialog", "views/settings"]);
const [open, setOpen] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const [searchTerm, setSearchTerm] = useState("");
@ -160,8 +160,8 @@ export default function ImagePicker({
) : (
<div className="hover:cursor-pointer">
<div className="my-3 flex w-full flex-row items-center justify-between gap-2">
<div className="flex flex-row items-center gap-2">
<div className="relative h-8 w-8">
<div className="flex flex-row items-center gap-4">
<div className="relative size-16">
<img
src={
selectedImage
@ -169,7 +169,7 @@ export default function ImagePicker({
: `${apiHost}clips/triggers/${camera}/${selectedImageId}.webp`
}
alt={selectedImage?.label || "Selected image"}
className="h-8 w-8 rounded object-cover"
className="size-16 rounded object-cover"
onLoad={() => handleImageLoad(selectedImageId || "")}
loading="lazy"
/>
@ -180,7 +180,7 @@ export default function ImagePicker({
)}
</div>
<div className="text-sm smart-capitalize">
{selectedImage?.label || selectedImageId}
{selectedImage?.label || t("imagePicker.unknownLabel")}
{selectedImage?.sub_label
? ` (${selectedImage.sub_label})`
: ""}
@ -204,13 +204,18 @@ export default function ImagePicker({
<DialogContent
className={cn(
"scrollbar-container overflow-y-auto",
isDesktop && "max-h-[75dvh] sm:max-w-xl md:max-w-3xl",
isDesktop && "max-h-[75dvh] sm:max-w-xl md:max-w-[70%]",
isMobile && "px-4",
className,
)}
>
<div className="mb-3 flex flex-row items-center justify-between">
<div className="mb-3 flex flex-col items-start justify-start">
<Heading as="h4">{t("imagePicker.selectImage")}</Heading>
<div className="text-sm text-muted-foreground">
{t("triggers.dialog.form.content.imageDesc", {
ns: "views/settings",
})}
</div>
<span tabIndex={0} className="sr-only" />
</div>
{renderSearchInput()}