mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-05-09 15:05:26 +03:00
change layout
This commit is contained in:
Josh Hawkins
parent
2f308af2ae
commit
275ec2b291
@ -109,6 +109,7 @@ export default function SearchDetailDialog({
|
||||
const { data: config } = useSWR<FrigateConfig>("config", {
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
const apiHost = useApiHost();
|
||||
|
||||
// tabs
|
||||
|
||||
@ -118,6 +119,12 @@ export default function SearchDetailDialog({
|
||||
100,
|
||||
);
|
||||
|
||||
// tracking details state
|
||||
|
||||
const [trackingTimeIndex, setTrackingTimeIndex] = useState<
|
||||
number | undefined
|
||||
>(undefined);
|
||||
|
||||
// dialog and mobile page
|
||||
|
||||
const [isOpen, setIsOpen] = useState(search != undefined);
|
||||
@ -200,6 +207,9 @@ export default function SearchDetailDialog({
|
||||
"scrollbar-container overflow-y-auto",
|
||||
isDesktop &&
|
||||
"max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl",
|
||||
isDesktop &&
|
||||
page == "tracking_details" &&
|
||||
"lg:max-w-[75%] xl:max-w-[80%]",
|
||||
isMobile && "px-4",
|
||||
)}
|
||||
>
|
||||
@ -209,6 +219,139 @@ export default function SearchDetailDialog({
|
||||
{t("trackedObjectDetails")}
|
||||
</Description>
|
||||
</Header>
|
||||
{isDesktop ? (
|
||||
<div className="flex h-full gap-4 overflow-hidden">
|
||||
<div className="scrollbar-container flex-[3] overflow-y-auto">
|
||||
{page === "snapshot" && search.has_snapshot && (
|
||||
<ObjectSnapshotTab
|
||||
search={
|
||||
{
|
||||
...search,
|
||||
plus_id: config?.plus?.enabled
|
||||
? search.plus_id
|
||||
: "not_enabled",
|
||||
} as unknown as Event
|
||||
}
|
||||
onEventUploaded={() => {
|
||||
search.plus_id = "new_upload";
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{page === "video" && search.has_clip && (
|
||||
<VideoTab search={search} />
|
||||
)}
|
||||
{page === "tracking_details" && (
|
||||
<TrackingDetails
|
||||
event={search as unknown as Event}
|
||||
showImage={true}
|
||||
showLifecycle={false}
|
||||
timeIndex={trackingTimeIndex}
|
||||
setTimeIndex={setTrackingTimeIndex}
|
||||
/>
|
||||
)}
|
||||
{(page === "details" ||
|
||||
(!search.has_snapshot && page === "snapshot") ||
|
||||
(!search.has_clip && page === "video")) && (
|
||||
<img
|
||||
className="aspect-video select-none rounded-lg object-contain transition-opacity"
|
||||
style={
|
||||
isIOS
|
||||
? {
|
||||
WebkitUserSelect: "none",
|
||||
WebkitTouchCallout: "none",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
draggable={false}
|
||||
src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-[2] flex-col gap-4 overflow-hidden">
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex flex-row">
|
||||
<ToggleGroup
|
||||
className="*:rounded-md *:px-3 *:py-4"
|
||||
type="single"
|
||||
size="sm"
|
||||
value={pageToggle}
|
||||
onValueChange={(value: SearchTab) => {
|
||||
if (value) {
|
||||
setPageToggle(value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{Object.values(searchTabs).map((item) => (
|
||||
<ToggleGroupItem
|
||||
key={item}
|
||||
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "details" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
|
||||
value={item}
|
||||
data-nav-item={item}
|
||||
aria-label={`Select ${item}`}
|
||||
>
|
||||
{item == "details" && (
|
||||
<FaRegListAlt className="size-4" />
|
||||
)}
|
||||
{item == "snapshot" && <FaImage className="size-4" />}
|
||||
{item == "video" && <FaVideo className="size-4" />}
|
||||
{item == "tracking_details" && (
|
||||
<PiPath className="size-4" />
|
||||
)}
|
||||
<div className="smart-capitalize">
|
||||
{t(`type.${item}`)}
|
||||
</div>
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
<ScrollBar orientation="horizontal" className="h-0" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div className="scrollbar-container flex-1 overflow-y-auto">
|
||||
{page == "details" && (
|
||||
<ObjectDetailsTab
|
||||
search={search}
|
||||
config={config}
|
||||
setSearch={setSearch}
|
||||
setSimilarity={setSimilarity}
|
||||
setInputFocused={setInputFocused}
|
||||
showThumbnail={false}
|
||||
/>
|
||||
)}
|
||||
{page == "snapshot" && (
|
||||
<ObjectDetailsTab
|
||||
search={search}
|
||||
config={config}
|
||||
setSearch={setSearch}
|
||||
setSimilarity={setSimilarity}
|
||||
setInputFocused={setInputFocused}
|
||||
showThumbnail={false}
|
||||
/>
|
||||
)}
|
||||
{page == "video" && (
|
||||
<ObjectDetailsTab
|
||||
search={search}
|
||||
config={config}
|
||||
setSearch={setSearch}
|
||||
setSimilarity={setSimilarity}
|
||||
setInputFocused={setInputFocused}
|
||||
showThumbnail={false}
|
||||
/>
|
||||
)}
|
||||
{page == "tracking_details" && (
|
||||
<TrackingDetails
|
||||
className="w-full overflow-x-hidden"
|
||||
event={search as unknown as Event}
|
||||
showImage={false}
|
||||
showLifecycle={true}
|
||||
timeIndex={trackingTimeIndex}
|
||||
setTimeIndex={setTrackingTimeIndex}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ScrollArea
|
||||
className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
|
||||
>
|
||||
@ -235,8 +378,12 @@ export default function SearchDetailDialog({
|
||||
{item == "details" && <FaRegListAlt className="size-4" />}
|
||||
{item == "snapshot" && <FaImage className="size-4" />}
|
||||
{item == "video" && <FaVideo className="size-4" />}
|
||||
{item == "tracking_details" && <PiPath className="size-4" />}
|
||||
<div className="smart-capitalize">{t(`type.${item}`)}</div>
|
||||
{item == "tracking_details" && (
|
||||
<PiPath className="size-4" />
|
||||
)}
|
||||
<div className="smart-capitalize">
|
||||
{t(`type.${item}`)}
|
||||
</div>
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
@ -257,7 +404,9 @@ export default function SearchDetailDialog({
|
||||
search={
|
||||
{
|
||||
...search,
|
||||
plus_id: config?.plus?.enabled ? search.plus_id : "not_enabled",
|
||||
plus_id: config?.plus?.enabled
|
||||
? search.plus_id
|
||||
: "not_enabled",
|
||||
} as unknown as Event
|
||||
}
|
||||
onEventUploaded={() => {
|
||||
@ -270,10 +419,14 @@ export default function SearchDetailDialog({
|
||||
<TrackingDetails
|
||||
className="w-full overflow-x-hidden"
|
||||
event={search as unknown as Event}
|
||||
fullscreen={true}
|
||||
setPane={() => {}}
|
||||
showImage={true}
|
||||
showLifecycle={true}
|
||||
timeIndex={trackingTimeIndex}
|
||||
setTimeIndex={setTrackingTimeIndex}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Content>
|
||||
</Overlay>
|
||||
);
|
||||
@ -285,6 +438,7 @@ type ObjectDetailsTabProps = {
|
||||
setSearch: (search: SearchResult | undefined) => void;
|
||||
setSimilarity?: () => void;
|
||||
setInputFocused: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
showThumbnail?: boolean;
|
||||
};
|
||||
function ObjectDetailsTab({
|
||||
search,
|
||||
@ -292,6 +446,7 @@ function ObjectDetailsTab({
|
||||
setSearch,
|
||||
setSimilarity,
|
||||
setInputFocused,
|
||||
showThumbnail = true,
|
||||
}: ObjectDetailsTabProps) {
|
||||
const { t } = useTranslation(["views/explore", "views/faceLibrary"]);
|
||||
|
||||
@ -873,6 +1028,7 @@ function ObjectDetailsTab({
|
||||
<div className="text-sm">{formattedDate}</div>
|
||||
</div>
|
||||
</div>
|
||||
{showThumbnail && (
|
||||
<div className="flex w-full flex-col gap-2 pl-6">
|
||||
<img
|
||||
className="aspect-video select-none rounded-lg object-contain transition-opacity"
|
||||
@ -888,7 +1044,10 @@ function ObjectDetailsTab({
|
||||
src={`${apiHost}api/events/${search.id}/thumbnail.webp`}
|
||||
/>
|
||||
<div
|
||||
className={cn("flex w-full flex-row gap-2", isMobile && "flex-col")}
|
||||
className={cn(
|
||||
"flex w-full flex-row gap-2",
|
||||
isMobile && "flex-col",
|
||||
)}
|
||||
>
|
||||
{config?.semantic_search.enabled &&
|
||||
setSimilarity != undefined &&
|
||||
@ -933,6 +1092,7 @@ function ObjectDetailsTab({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{config?.cameras[search.camera].objects.genai.enabled &&
|
||||
|
||||
@ -5,7 +5,6 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TrackingDetailsSequence } from "@/types/timeline";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { ReviewDetailPaneType } from "@/types/review";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import { getIconForLabel } from "@/utils/iconUtil";
|
||||
@ -18,7 +17,7 @@ import {
|
||||
LuSettings,
|
||||
LuTruck,
|
||||
} from "react-icons/lu";
|
||||
import { IoMdArrowRoundBack, IoMdExit } from "react-icons/io";
|
||||
import { IoMdExit } from "react-icons/io";
|
||||
import {
|
||||
MdFaceUnlock,
|
||||
MdOutlineLocationOn,
|
||||
@ -26,7 +25,7 @@ import {
|
||||
} from "react-icons/md";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useApiHost } from "@/api";
|
||||
import { isDesktop, isIOS, isSafari } from "react-device-detect";
|
||||
import { isIOS, isSafari } from "react-device-detect";
|
||||
import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator";
|
||||
import {
|
||||
Tooltip,
|
||||
@ -63,14 +62,19 @@ type TrackingDetailsProps = {
|
||||
className?: string;
|
||||
event: Event;
|
||||
fullscreen?: boolean;
|
||||
setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
|
||||
showImage?: boolean;
|
||||
showLifecycle?: boolean;
|
||||
timeIndex?: number;
|
||||
setTimeIndex?: (index: number) => void;
|
||||
};
|
||||
|
||||
export default function TrackingDetails({
|
||||
className,
|
||||
event,
|
||||
fullscreen = false,
|
||||
setPane,
|
||||
showImage = true,
|
||||
showLifecycle = false,
|
||||
timeIndex: propTimeIndex,
|
||||
setTimeIndex: propSetTimeIndex,
|
||||
}: TrackingDetailsProps) {
|
||||
const { t } = useTranslation(["views/explore"]);
|
||||
|
||||
@ -214,7 +218,11 @@ export default function TrackingDetails({
|
||||
);
|
||||
}, [savedPathPoints, eventSequencePoints, config, event]);
|
||||
|
||||
const [timeIndex, setTimeIndex] = useState(0);
|
||||
const [localTimeIndex, setLocalTimeIndex] = useState<number>(0);
|
||||
|
||||
const timeIndex =
|
||||
propTimeIndex !== undefined ? propTimeIndex : localTimeIndex;
|
||||
const setTimeIndex = propSetTimeIndex || setLocalTimeIndex;
|
||||
|
||||
const handleSetBox = useCallback(
|
||||
(box: number[], attrBox: number[] | undefined) => {
|
||||
@ -257,15 +265,15 @@ export default function TrackingDetails({
|
||||
const [hasError, setHasError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (timeIndex) {
|
||||
const newSrc = `${apiHost}api/${event.camera}/recordings/${timeIndex + annotationOffset / 1000}/snapshot.jpg?height=500`;
|
||||
if (propTimeIndex !== undefined) {
|
||||
const newSrc = `${apiHost}api/${event.camera}/recordings/${propTimeIndex + annotationOffset / 1000}/snapshot.jpg?height=500`;
|
||||
setSrc(newSrc);
|
||||
}
|
||||
setImgLoaded(false);
|
||||
setHasError(false);
|
||||
// we know that these deps are correct
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [timeIndex, annotationOffset]);
|
||||
}, [propTimeIndex, annotationOffset]);
|
||||
|
||||
// carousels
|
||||
|
||||
@ -291,7 +299,7 @@ export default function TrackingDetails({
|
||||
setLifecycleZones([]);
|
||||
}
|
||||
},
|
||||
[eventSequence, pathPoints, handleSetBox],
|
||||
[eventSequence, pathPoints, handleSetBox, setTimeIndex],
|
||||
);
|
||||
|
||||
const formattedStart = config
|
||||
@ -329,7 +337,7 @@ export default function TrackingDetails({
|
||||
useEffect(() => {
|
||||
if (!eventSequence || eventSequence.length === 0) return;
|
||||
// If timeIndex hasn't been set to a non-zero value, prefer the first lifecycle timestamp
|
||||
if (!timeIndex) {
|
||||
if (timeIndex == null || timeIndex === 0) {
|
||||
setTimeIndex(eventSequence[0].timestamp);
|
||||
handleSetBox(
|
||||
eventSequence[0]?.data.box ?? [],
|
||||
@ -337,12 +345,12 @@ export default function TrackingDetails({
|
||||
);
|
||||
setLifecycleZones(eventSequence[0]?.data.zones);
|
||||
}
|
||||
}, [eventSequence, timeIndex, handleSetBox]);
|
||||
}, [eventSequence, timeIndex, handleSetBox, setTimeIndex]);
|
||||
|
||||
// When timeIndex changes or image finishes loading, sync the box/zones to matching lifecycle, else clear
|
||||
useEffect(() => {
|
||||
if (!eventSequence || timeIndex == null) return;
|
||||
const idx = eventSequence.findIndex((i) => i.timestamp === timeIndex);
|
||||
if (!eventSequence || propTimeIndex == null) return;
|
||||
const idx = eventSequence.findIndex((i) => i.timestamp === propTimeIndex);
|
||||
if (idx !== -1) {
|
||||
if (imgLoaded) {
|
||||
handleSetBox(
|
||||
@ -356,7 +364,7 @@ export default function TrackingDetails({
|
||||
setBoxStyle(null);
|
||||
setLifecycleZones([]);
|
||||
}
|
||||
}, [timeIndex, imgLoaded, eventSequence, handleSetBox]);
|
||||
}, [propTimeIndex, imgLoaded, eventSequence, handleSetBox]);
|
||||
|
||||
const selectedLifecycle = useMemo(() => {
|
||||
if (!eventSequence || eventSequence.length === 0) return undefined;
|
||||
@ -423,24 +431,8 @@ export default function TrackingDetails({
|
||||
return (
|
||||
<div className={className}>
|
||||
<span tabIndex={0} className="sr-only" />
|
||||
{!fullscreen && (
|
||||
<div className={cn("flex items-center gap-2")}>
|
||||
<Button
|
||||
className="mb-2 mt-3 flex items-center gap-2.5 rounded-lg md:mt-0"
|
||||
aria-label={t("label.back", { ns: "common" })}
|
||||
size="sm"
|
||||
onClick={() => setPane("overview")}
|
||||
>
|
||||
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
|
||||
{isDesktop && (
|
||||
<div className="text-primary">
|
||||
{t("button.back", { ns: "common" })}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showImage && (
|
||||
<div
|
||||
className={cn(
|
||||
"relative mx-auto flex max-h-[50dvh] flex-row justify-center",
|
||||
@ -528,7 +520,10 @@ export default function TrackingDetails({
|
||||
</div>
|
||||
)}
|
||||
{attributeBoxStyle && (
|
||||
<div className="absolute border-2" style={attributeBoxStyle} />
|
||||
<div
|
||||
className="absolute border-2"
|
||||
style={attributeBoxStyle}
|
||||
/>
|
||||
)}
|
||||
{imgRef.current?.width &&
|
||||
imgRef.current?.height &&
|
||||
@ -576,7 +571,10 @@ export default function TrackingDetails({
|
||||
</ContextMenu>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showLifecycle && (
|
||||
<>
|
||||
<div className="mt-3 flex flex-row items-center justify-between">
|
||||
<Heading as="h4">{t("trackingDetails.title")}</Heading>
|
||||
|
||||
@ -602,6 +600,7 @@ export default function TrackingDetails({
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<div className="mb-2 text-sm text-muted-foreground">
|
||||
{t("trackingDetails.scrollViewTips")}
|
||||
@ -613,7 +612,8 @@ export default function TrackingDetails({
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{config?.cameras[event.camera]?.onvif.autotracking.enabled_in_config && (
|
||||
{config?.cameras[event.camera]?.onvif.autotracking
|
||||
.enabled_in_config && (
|
||||
<div className="-mt-2 mb-2 text-sm text-danger">
|
||||
{t("trackingDetails.autoTrackingTips")}
|
||||
</div>
|
||||
@ -692,7 +692,9 @@ export default function TrackingDetails({
|
||||
<div className="space-y-2">
|
||||
{eventSequence.map((item, idx) => {
|
||||
const isActive =
|
||||
Math.abs((timeIndex ?? 0) - (item.timestamp ?? 0)) <= 0.5;
|
||||
Math.abs(
|
||||
(propTimeIndex ?? 0) - (item.timestamp ?? 0),
|
||||
) <= 0.5;
|
||||
const formattedEventTimestamp = config
|
||||
? formatUnixTimestampToDateTime(item.timestamp ?? 0, {
|
||||
timezone: config.ui.timezone,
|
||||
@ -712,23 +714,27 @@ export default function TrackingDetails({
|
||||
: "";
|
||||
|
||||
const ratio =
|
||||
Array.isArray(item.data.box) && item.data.box.length >= 4
|
||||
Array.isArray(item.data.box) &&
|
||||
item.data.box.length >= 4
|
||||
? (
|
||||
aspectRatio *
|
||||
(item.data.box[2] / item.data.box[3])
|
||||
).toFixed(2)
|
||||
: "N/A";
|
||||
const areaPx =
|
||||
Array.isArray(item.data.box) && item.data.box.length >= 4
|
||||
Array.isArray(item.data.box) &&
|
||||
item.data.box.length >= 4
|
||||
? Math.round(
|
||||
(config.cameras[event.camera]?.detect?.width ?? 0) *
|
||||
(config.cameras[event.camera]?.detect?.height ??
|
||||
(config.cameras[event.camera]?.detect?.width ??
|
||||
0) *
|
||||
(config.cameras[event.camera]?.detect
|
||||
?.height ?? 0) *
|
||||
(item.data.box[2] * item.data.box[3]),
|
||||
)
|
||||
: undefined;
|
||||
const areaPct =
|
||||
Array.isArray(item.data.box) && item.data.box.length >= 4
|
||||
Array.isArray(item.data.box) &&
|
||||
item.data.box.length >= 4
|
||||
? (item.data.box[2] * item.data.box[3]).toFixed(4)
|
||||
: undefined;
|
||||
|
||||
@ -761,6 +767,8 @@ export default function TrackingDetails({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user