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

image picker tweaks

Browse Source
This commit is contained in:
Josh Hawkins 2025-06-30 09:38:19 -05:00
parent a17e202a9e
commit dcdae14fac
2 changed files with 18 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -111,9 +111,9 @@
} }
}, },
"imagePicker": { "imagePicker": {
"selectImage": "Select a tracked object's thumbnail or snapshot", "selectImage": "Select a tracked object's thumbnail",
"search": { "search": {
"placeholder": "Search by label..." "placeholder": "Search by label or sub label..."
}, },
"noImages": "No thumbnails found for this camera" "noImages": "No thumbnails found for this camera"
} }

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

@ -1,11 +1,7 @@
import { useCallback, useMemo, useRef, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import useSWR from "swr"; import useSWR from "swr";
import { import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { IoClose } from "react-icons/io5"; import { IoClose } from "react-icons/io5";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -13,6 +9,7 @@ import Heading from "@/components/ui/heading";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import { isDesktop, isMobile } from "react-device-detect";
type ImagePickerProps = { type ImagePickerProps = {
selectedImageId?: string; selectedImageId?: string;
@ -65,13 +62,13 @@ export default function ImagePicker({
return ( return (
<div ref={containerRef}> <div ref={containerRef}>
<Popover <Dialog
open={open} open={open}
onOpenChange={(open) => { onOpenChange={(open) => {
setOpen(open); setOpen(open);
}} }}
> >
<PopoverTrigger asChild> <DialogTrigger asChild>
{!selectedImageId || !selectedImage ? ( {!selectedImageId || !selectedImage ? (
<Button <Button
className="mt-2 w-full text-muted-foreground" className="mt-2 w-full text-muted-foreground"
@ -84,11 +81,7 @@ export default function ImagePicker({
<div className="my-3 flex w-full flex-row items-center justify-between gap-2"> <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="flex flex-row items-center gap-2">
<img <img
src={ src={`${apiHost}api/events/${selectedImage.id}/thumbnail.webp`}
selectedImage.has_snapshot
? `${apiHost}api/events/${selectedImage.id}/snapshot.jpg`
: `${apiHost}api/events/${selectedImage.id}/thumbnail.webp`
}
alt={selectedImage.label} alt={selectedImage.label}
className="h-8 w-8 rounded object-cover" className="h-8 w-8 rounded object-cover"
/> />
@ -110,23 +103,17 @@ export default function ImagePicker({
</div> </div>
</div> </div>
)} )}
</PopoverTrigger> </DialogTrigger>
<PopoverContent <DialogContent
align="start" className={cn(
side="top" "scrollbar-container overflow-y-auto",
container={containerRef.current} isDesktop && "max-h-[75dvh] sm:max-w-xl md:max-w-3xl",
className="flex max-h-[50dvh] w-full flex-col overflow-y-hidden md:max-h-[30dvh]" isMobile && "px-4",
)}
> >
<div className="mb-3 flex flex-row items-center justify-between"> <div className="mb-3 flex flex-row items-center justify-between">
<Heading as="h4">{t("imagePicker.selectImage")}</Heading> <Heading as="h4">{t("imagePicker.selectImage")}</Heading>
<span tabIndex={0} className="sr-only" /> <span tabIndex={0} className="sr-only" />
<IoClose
size={15}
className="hover:cursor-pointer"
onClick={() => {
setOpen(false);
}}
/>
</div> </div>
<Input <Input
type="text" type="text"
@ -153,14 +140,9 @@ export default function ImagePicker({
)} )}
> >
<img <img
src={ src={`${apiHost}api/events/${image.id}/thumbnail.webp`}
// image.has_snapshot
// ? `${apiHost}api/events/${image.id}/snapshot.jpg`
// :
`${apiHost}api/events/${image.id}/thumbnail.webp`
}
alt={image.label} alt={image.label}
className="h-32 w-32 rounded object-cover" className="rounded object-cover"
onClick={() => handleImageSelect(image.id)} onClick={() => handleImageSelect(image.id)}
/> />
</div> </div>
@ -168,8 +150,8 @@ export default function ImagePicker({
)} )}
</div> </div>
</div> </div>
</PopoverContent> </DialogContent>
</Popover> </Dialog>
</div> </div>
); );
} }