mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-09 04:35:25 +03:00
Break apart mobile and desktop views
This commit is contained in:
Nicolas Mowen
parent
84366608d2
commit
a95f4d843f
@ -1,5 +1,4 @@
|
|||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
import PreviewThumbnailPlayer from "../player/PreviewThumbnailPlayer";
|
|
||||||
import { Card } from "../ui/card";
|
import { Card } from "../ui/card";
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
import ActivityIndicator from "../ui/activity-indicator";
|
import ActivityIndicator from "../ui/activity-indicator";
|
||||||
@ -21,8 +20,10 @@ type HistoryCardProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function HistoryCard({
|
export default function HistoryCard({
|
||||||
|
// @ts-ignore
|
||||||
relevantPreview,
|
relevantPreview,
|
||||||
timeline,
|
timeline,
|
||||||
|
// @ts-ignore
|
||||||
isMobile,
|
isMobile,
|
||||||
onClick,
|
onClick,
|
||||||
onDelete,
|
onDelete,
|
||||||
@ -38,14 +39,6 @@ export default function HistoryCard({
|
|||||||
className="cursor-pointer my-2 xs:mr-2 w-full xs:w-[48%] sm:w-[284px]"
|
className="cursor-pointer my-2 xs:mr-2 w-full xs:w-[48%] sm:w-[284px]"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<PreviewThumbnailPlayer
|
|
||||||
camera={timeline.camera}
|
|
||||||
relevantPreview={relevantPreview}
|
|
||||||
startTs={Object.values(timeline.entries)[0].timestamp}
|
|
||||||
eventId={Object.values(timeline.entries)[0].source_id}
|
|
||||||
isMobile={isMobile}
|
|
||||||
onClick={onClick}
|
|
||||||
/>
|
|
||||||
<>
|
<>
|
||||||
<div className="text-sm flex justify-between items-center">
|
<div className="text-sm flex justify-between items-center">
|
||||||
<div className="pl-1 pt-1">
|
<div className="pl-1 pt-1">
|
||||||
|
|||||||
@ -208,7 +208,7 @@ export function EventReviewTimeline({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={timelineRef}
|
ref={timelineRef}
|
||||||
className={`relative w-[120px] md:w-[100px] h-[100dvh] overflow-y-scroll no-scrollbar bg-secondary ${
|
className={`relative w-[120px] md:w-[100px] h-full overflow-y-scroll no-scrollbar bg-secondary ${
|
||||||
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
|
isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -6,12 +6,9 @@ export const useSegmentUtils = (
|
|||||||
events: ReviewSegment[],
|
events: ReviewSegment[],
|
||||||
severityType: string
|
severityType: string
|
||||||
) => {
|
) => {
|
||||||
const getSegmentStart = useCallback(
|
const getSegmentStart = useCallback((time: number): number => {
|
||||||
(time: number): number => {
|
return Math.floor(time / (segmentDuration)) * (segmentDuration);
|
||||||
return Math.floor(time / segmentDuration) * segmentDuration;
|
}, [segmentDuration]);
|
||||||
},
|
|
||||||
[segmentDuration]
|
|
||||||
);
|
|
||||||
|
|
||||||
const getSegmentEnd = useCallback(
|
const getSegmentEnd = useCallback(
|
||||||
(time: number | undefined): number => {
|
(time: number | undefined): number => {
|
||||||
@ -70,8 +67,7 @@ export const useSegmentUtils = (
|
|||||||
[events, getSegmentStart, getSegmentEnd, mapSeverityToNumber]
|
[events, getSegmentStart, getSegmentEnd, mapSeverityToNumber]
|
||||||
);
|
);
|
||||||
|
|
||||||
const getReviewed = useCallback(
|
const getReviewed = useCallback((time: number): boolean => {
|
||||||
(time: number): boolean => {
|
|
||||||
return events.some((event) => {
|
return events.some((event) => {
|
||||||
const segmentStart = getSegmentStart(event.start_time);
|
const segmentStart = getSegmentStart(event.start_time);
|
||||||
const segmentEnd = getSegmentEnd(event.end_time);
|
const segmentEnd = getSegmentEnd(event.end_time);
|
||||||
@ -79,9 +75,7 @@ export const useSegmentUtils = (
|
|||||||
time >= segmentStart && time < segmentEnd && event.has_been_reviewed
|
time >= segmentStart && time < segmentEnd && event.has_been_reviewed
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
},
|
}, [events, getSegmentStart, getSegmentEnd]);
|
||||||
[events, getSegmentStart, getSegmentEnd]
|
|
||||||
);
|
|
||||||
|
|
||||||
const shouldShowRoundedCorners = useCallback(
|
const shouldShowRoundedCorners = useCallback(
|
||||||
(segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
|
(segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
|
||||||
@ -156,12 +150,5 @@ export const useSegmentUtils = (
|
|||||||
[events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
|
[events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return { getSegmentStart, getSegmentEnd, getSeverity, displaySeverityType, getReviewed, shouldShowRoundedCorners };
|
||||||
getSegmentStart,
|
|
||||||
getSegmentEnd,
|
|
||||||
getSeverity,
|
|
||||||
displaySeverityType,
|
|
||||||
getReviewed,
|
|
||||||
shouldShowRoundedCorners,
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
@ -1,359 +1,15 @@
|
|||||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
import DesktopEventView from "@/views/events/DesktopEventView";
|
||||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
import MobileEventView from "@/views/events/MobileEventView";
|
||||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
import { useMemo } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Calendar } from "@/components/ui/calendar";
|
|
||||||
import {
|
|
||||||
Popover,
|
|
||||||
PopoverContent,
|
|
||||||
PopoverTrigger,
|
|
||||||
} from "@/components/ui/popover";
|
|
||||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
||||||
import { FrigateConfig } from "@/types/frigateConfig";
|
|
||||||
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
|
||||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
|
||||||
import axios from "axios";
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
|
|
||||||
import { MdCircle } from "react-icons/md";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import useSWRInfinite from "swr/infinite";
|
|
||||||
|
|
||||||
const API_LIMIT = 250;
|
|
||||||
|
|
||||||
export default function Events() {
|
export default function Events() {
|
||||||
const { data: config } = useSWR<FrigateConfig>("config");
|
const isMobile = useMemo(() => {
|
||||||
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
return window.innerWidth < 768;
|
||||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
|
|
||||||
// review paging
|
|
||||||
|
|
||||||
const reviewSearchParams = {};
|
|
||||||
const reviewSegmentFetcher = useCallback((key: any) => {
|
|
||||||
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
|
||||||
return axios.get(path, { params }).then((res) => res.data);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const getKey = useCallback(
|
if (isMobile) {
|
||||||
(index: number, prevData: ReviewSegment[]) => {
|
return <MobileEventView />;
|
||||||
if (index > 0) {
|
|
||||||
const lastDate = prevData[prevData.length - 1].start_time;
|
|
||||||
const pagedParams = reviewSearchParams
|
|
||||||
? { before: lastDate, limit: API_LIMIT }
|
|
||||||
: {
|
|
||||||
...reviewSearchParams,
|
|
||||||
before: lastDate,
|
|
||||||
limit: API_LIMIT,
|
|
||||||
};
|
|
||||||
return ["review", pagedParams];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const params = reviewSearchParams
|
return <DesktopEventView />;
|
||||||
? { limit: API_LIMIT }
|
|
||||||
: { ...reviewSearchParams, limit: API_LIMIT };
|
|
||||||
return ["review", params];
|
|
||||||
},
|
|
||||||
[reviewSearchParams]
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: reviewPages,
|
|
||||||
mutate: updateSegments,
|
|
||||||
size,
|
|
||||||
setSize,
|
|
||||||
isValidating,
|
|
||||||
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
|
|
||||||
|
|
||||||
const reviewItems = useMemo(() => {
|
|
||||||
const all: ReviewSegment[] = [];
|
|
||||||
const alerts: ReviewSegment[] = [];
|
|
||||||
const detections: ReviewSegment[] = [];
|
|
||||||
const motion: ReviewSegment[] = [];
|
|
||||||
|
|
||||||
reviewPages?.forEach((page) => {
|
|
||||||
page.forEach((segment) => {
|
|
||||||
all.push(segment);
|
|
||||||
|
|
||||||
switch (segment.severity) {
|
|
||||||
case "alert":
|
|
||||||
alerts.push(segment);
|
|
||||||
break;
|
|
||||||
case "detection":
|
|
||||||
detections.push(segment);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
motion.push(segment);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
all: all,
|
|
||||||
alert: alerts,
|
|
||||||
detection: detections,
|
|
||||||
significant_motion: motion,
|
|
||||||
};
|
|
||||||
}, [reviewPages]);
|
|
||||||
|
|
||||||
const isDone = useMemo(
|
|
||||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
|
||||||
[reviewPages]
|
|
||||||
);
|
|
||||||
|
|
||||||
// review interaction
|
|
||||||
|
|
||||||
const pagingObserver = useRef<IntersectionObserver | null>();
|
|
||||||
const lastReviewRef = useCallback(
|
|
||||||
(node: HTMLElement | null) => {
|
|
||||||
if (isValidating) return;
|
|
||||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
|
||||||
try {
|
|
||||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
|
||||||
if (entries[0].isIntersecting && !isDone) {
|
|
||||||
setSize(size + 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (node) pagingObserver.current.observe(node);
|
|
||||||
} catch (e) {
|
|
||||||
// no op
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[isValidating, isDone]
|
|
||||||
);
|
|
||||||
|
|
||||||
const [minimap, setMinimap] = useState<string[]>([]);
|
|
||||||
const minimapObserver = useRef<IntersectionObserver | null>();
|
|
||||||
useEffect(() => {
|
|
||||||
if (!contentRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const visibleTimestamps = new Set<string>();
|
|
||||||
minimapObserver.current = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
const start = (entry.target as HTMLElement).dataset.start;
|
|
||||||
|
|
||||||
if (!start) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
visibleTimestamps.add(start);
|
|
||||||
} else {
|
|
||||||
visibleTimestamps.delete(start);
|
|
||||||
}
|
|
||||||
|
|
||||||
setMinimap([...visibleTimestamps]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{ root: contentRef.current }
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
minimapObserver.current?.disconnect();
|
|
||||||
};
|
|
||||||
}, [contentRef]);
|
|
||||||
const minimapRef = useCallback(
|
|
||||||
(node: HTMLElement | null) => {
|
|
||||||
if (!minimapObserver.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (node) minimapObserver.current.observe(node);
|
|
||||||
} catch (e) {
|
|
||||||
// no op
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[minimapObserver.current]
|
|
||||||
);
|
|
||||||
const minimapBounds = useMemo(() => {
|
|
||||||
const data = {
|
|
||||||
start: Math.floor(Date.now() / 1000) - 35 * 60,
|
|
||||||
end: Math.floor(Date.now() / 1000) - 21 * 60,
|
|
||||||
};
|
|
||||||
const list = minimap.sort();
|
|
||||||
|
|
||||||
if (list.length > 0) {
|
|
||||||
data.end = parseFloat(list.at(-1)!!);
|
|
||||||
data.start = parseFloat(list[0]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return data;
|
|
||||||
}, [minimap]);
|
|
||||||
|
|
||||||
// review status
|
|
||||||
|
|
||||||
const setReviewed = useCallback(
|
|
||||||
async (id: string) => {
|
|
||||||
const resp = await axios.post(`review/${id}/viewed`);
|
|
||||||
|
|
||||||
if (resp.status == 200) {
|
|
||||||
updateSegments();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[updateSegments]
|
|
||||||
);
|
|
||||||
|
|
||||||
// preview videos
|
|
||||||
|
|
||||||
const previewTimes = useMemo(() => {
|
|
||||||
if (
|
|
||||||
!reviewPages ||
|
|
||||||
reviewPages.length == 0 ||
|
|
||||||
reviewPages.at(-1)!!.length == 0
|
|
||||||
) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
const startDate = new Date();
|
|
||||||
startDate.setMinutes(0, 0, 0);
|
|
||||||
|
|
||||||
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
|
||||||
endDate.setHours(0, 0, 0, 0);
|
|
||||||
return {
|
|
||||||
start: startDate.getTime() / 1000,
|
|
||||||
end: endDate.getTime() / 1000,
|
|
||||||
};
|
|
||||||
}, [reviewPages]);
|
|
||||||
const { data: allPreviews } = useSWR<Preview[]>(
|
|
||||||
previewTimes
|
|
||||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
|
||||||
: null,
|
|
||||||
{ revalidateOnFocus: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!config) {
|
|
||||||
return <ActivityIndicator />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative w-full h-full overflow-hidden">
|
|
||||||
<div className="absolute flex justify-between left-0 top-0 right-0">
|
|
||||||
<ToggleGroup
|
|
||||||
type="single"
|
|
||||||
defaultValue="alert"
|
|
||||||
size="sm"
|
|
||||||
onValueChange={(value: ReviewSeverity) => setSeverity(value)}
|
|
||||||
>
|
|
||||||
<ToggleGroupItem
|
|
||||||
className={`px-3 py-4 rounded-2xl ${
|
|
||||||
severity == "alert" ? "" : "text-gray-500"
|
|
||||||
}`}
|
|
||||||
value="alert"
|
|
||||||
aria-label="Select alerts"
|
|
||||||
>
|
|
||||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
|
|
||||||
Alerts
|
|
||||||
</ToggleGroupItem>
|
|
||||||
<ToggleGroupItem
|
|
||||||
className={`px-3 py-4 rounded-2xl ${
|
|
||||||
severity == "detection" ? "" : "text-gray-500"
|
|
||||||
}`}
|
|
||||||
value="detection"
|
|
||||||
aria-label="Select detections"
|
|
||||||
>
|
|
||||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
|
|
||||||
Detections
|
|
||||||
</ToggleGroupItem>
|
|
||||||
<ToggleGroupItem
|
|
||||||
className={`px-3 py-4 rounded-2xl ${
|
|
||||||
severity == "significant_motion" ? "" : "text-gray-500"
|
|
||||||
}`}
|
|
||||||
value="significant_motion"
|
|
||||||
aria-label="Select motion"
|
|
||||||
>
|
|
||||||
<MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
|
|
||||||
Motion
|
|
||||||
</ToggleGroupItem>
|
|
||||||
</ToggleGroup>
|
|
||||||
<div>
|
|
||||||
<Button className="mx-1" variant="secondary">
|
|
||||||
<LuVideo className=" mr-[10px]" />
|
|
||||||
All Cameras
|
|
||||||
</Button>
|
|
||||||
<ReviewCalendarButton />
|
|
||||||
<Button className="mx-1" variant="secondary">
|
|
||||||
<LuFilter className=" mr-[10px]" />
|
|
||||||
Filter
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
ref={contentRef}
|
|
||||||
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
|
|
||||||
>
|
|
||||||
{reviewItems[severity]?.map((value, segIdx) => {
|
|
||||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
|
||||||
const relevantPreview = Object.values(allPreviews || []).find(
|
|
||||||
(preview) =>
|
|
||||||
preview.camera == value.camera &&
|
|
||||||
preview.start < value.start_time &&
|
|
||||||
preview.end > value.end_time
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={value.id}
|
|
||||||
ref={lastRow ? lastReviewRef : minimapRef}
|
|
||||||
data-start={value.start_time}
|
|
||||||
>
|
|
||||||
<div className="h-[234px] aspect-video rounded-lg overflow-hidden">
|
|
||||||
<PreviewThumbnailPlayer
|
|
||||||
review={value}
|
|
||||||
relevantPreview={relevantPreview}
|
|
||||||
isMobile={false}
|
|
||||||
setReviewed={() => setReviewed(value.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{lastRow && !isDone && <ActivityIndicator />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="absolute top-12 right-0 bottom-0">
|
|
||||||
<EventReviewTimeline
|
|
||||||
segmentDuration={60} // seconds per segment
|
|
||||||
timestampSpread={15} // minutes between each major timestamp
|
|
||||||
timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects
|
|
||||||
timelineDuration={24 * 60 * 60} // in minutes, defaults to 24 hours
|
|
||||||
showMinimap // show / hide the minimap
|
|
||||||
minimapStartTime={minimapBounds.start} // start time of the minimap - the earlier time (eg 1:00pm)
|
|
||||||
minimapEndTime={minimapBounds.end} // end of the minimap - the later time (eg 3:00pm)
|
|
||||||
events={reviewItems.all} // events, including new has_been_reviewed and severity properties
|
|
||||||
severityType={severity} // choose the severity type for the middle line - all other severity types are to the right
|
|
||||||
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ReviewCalendarButton() {
|
|
||||||
const disabledDates = useMemo(() => {
|
|
||||||
const tomorrow = new Date();
|
|
||||||
tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0);
|
|
||||||
const future = new Date();
|
|
||||||
future.setFullYear(tomorrow.getFullYear() + 10);
|
|
||||||
return { from: tomorrow, to: future };
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<Button className="mx-1" variant="secondary">
|
|
||||||
<LuCalendar className=" mr-[10px]" />
|
|
||||||
{formatUnixTimestampToDateTime(Date.now() / 1000, {
|
|
||||||
strftime_fmt: "%b %-d",
|
|
||||||
})}
|
|
||||||
</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent>
|
|
||||||
<Calendar mode="single" disabled={disabledDates} />
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -117,7 +117,6 @@ function UIPlayground() {
|
|||||||
useMemo(() => {
|
useMemo(() => {
|
||||||
const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
|
const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
|
||||||
setMockEvents(initialEvents);
|
setMockEvents(initialEvents);
|
||||||
console.log(initialEvents);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
LuConstruction,
|
LuConstruction,
|
||||||
LuFileUp,
|
LuFileUp,
|
||||||
LuFilm,
|
|
||||||
LuFlag,
|
LuFlag,
|
||||||
LuVideo,
|
LuVideo,
|
||||||
} from "react-icons/lu";
|
} from "react-icons/lu";
|
||||||
@ -21,18 +20,12 @@ export const navbarLinks = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
icon: LuFilm,
|
|
||||||
title: "History",
|
|
||||||
url: "/history",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
icon: LuFileUp,
|
icon: LuFileUp,
|
||||||
title: "Export",
|
title: "Export",
|
||||||
url: "/export",
|
url: "/export",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 4,
|
||||||
icon: LuConstruction,
|
icon: LuConstruction,
|
||||||
title: "UI Playground",
|
title: "UI Playground",
|
||||||
url: "/playground",
|
url: "/playground",
|
||||||
|
|||||||
359
web/src/views/events/DesktopEventView.tsx
Normal file
359
web/src/views/events/DesktopEventView.tsx
Normal file
@ -0,0 +1,359 @@
|
|||||||
|
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||||
|
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||||
|
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
|
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||||
|
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
|
||||||
|
import { MdCircle } from "react-icons/md";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import useSWRInfinite from "swr/infinite";
|
||||||
|
|
||||||
|
const API_LIMIT = 250;
|
||||||
|
|
||||||
|
export default function DesktopEventView() {
|
||||||
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
|
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||||
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// review paging
|
||||||
|
|
||||||
|
const reviewSearchParams = {};
|
||||||
|
const reviewSegmentFetcher = useCallback((key: any) => {
|
||||||
|
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
||||||
|
return axios.get(path, { params }).then((res) => res.data);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getKey = useCallback(
|
||||||
|
(index: number, prevData: ReviewSegment[]) => {
|
||||||
|
if (index > 0) {
|
||||||
|
const lastDate = prevData[prevData.length - 1].start_time;
|
||||||
|
const pagedParams = reviewSearchParams
|
||||||
|
? { before: lastDate, limit: API_LIMIT }
|
||||||
|
: {
|
||||||
|
...reviewSearchParams,
|
||||||
|
before: lastDate,
|
||||||
|
limit: API_LIMIT,
|
||||||
|
};
|
||||||
|
return ["review", pagedParams];
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = reviewSearchParams
|
||||||
|
? { limit: API_LIMIT }
|
||||||
|
: { ...reviewSearchParams, limit: API_LIMIT };
|
||||||
|
return ["review", params];
|
||||||
|
},
|
||||||
|
[reviewSearchParams]
|
||||||
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: reviewPages,
|
||||||
|
mutate: updateSegments,
|
||||||
|
size,
|
||||||
|
setSize,
|
||||||
|
isValidating,
|
||||||
|
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
|
||||||
|
|
||||||
|
const reviewItems = useMemo(() => {
|
||||||
|
const all: ReviewSegment[] = [];
|
||||||
|
const alerts: ReviewSegment[] = [];
|
||||||
|
const detections: ReviewSegment[] = [];
|
||||||
|
const motion: ReviewSegment[] = [];
|
||||||
|
|
||||||
|
reviewPages?.forEach((page) => {
|
||||||
|
page.forEach((segment) => {
|
||||||
|
all.push(segment);
|
||||||
|
|
||||||
|
switch (segment.severity) {
|
||||||
|
case "alert":
|
||||||
|
alerts.push(segment);
|
||||||
|
break;
|
||||||
|
case "detection":
|
||||||
|
detections.push(segment);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
motion.push(segment);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
all: all,
|
||||||
|
alert: alerts,
|
||||||
|
detection: detections,
|
||||||
|
significant_motion: motion,
|
||||||
|
};
|
||||||
|
}, [reviewPages]);
|
||||||
|
|
||||||
|
const isDone = useMemo(
|
||||||
|
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||||
|
[reviewPages]
|
||||||
|
);
|
||||||
|
|
||||||
|
// review interaction
|
||||||
|
|
||||||
|
const pagingObserver = useRef<IntersectionObserver | null>();
|
||||||
|
const lastReviewRef = useCallback(
|
||||||
|
(node: HTMLElement | null) => {
|
||||||
|
if (isValidating) return;
|
||||||
|
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||||
|
try {
|
||||||
|
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting && !isDone) {
|
||||||
|
setSize(size + 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (node) pagingObserver.current.observe(node);
|
||||||
|
} catch (e) {
|
||||||
|
// no op
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isValidating, isDone]
|
||||||
|
);
|
||||||
|
|
||||||
|
const [minimap, setMinimap] = useState<string[]>([]);
|
||||||
|
const minimapObserver = useRef<IntersectionObserver | null>();
|
||||||
|
useEffect(() => {
|
||||||
|
if (!contentRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const visibleTimestamps = new Set<string>();
|
||||||
|
minimapObserver.current = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
const start = (entry.target as HTMLElement).dataset.start;
|
||||||
|
|
||||||
|
if (!start) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
visibleTimestamps.add(start);
|
||||||
|
} else {
|
||||||
|
visibleTimestamps.delete(start);
|
||||||
|
}
|
||||||
|
|
||||||
|
setMinimap([...visibleTimestamps]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ root: contentRef.current }
|
||||||
|
);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
minimapObserver.current?.disconnect();
|
||||||
|
};
|
||||||
|
}, [contentRef]);
|
||||||
|
const minimapRef = useCallback(
|
||||||
|
(node: HTMLElement | null) => {
|
||||||
|
if (!minimapObserver.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (node) minimapObserver.current.observe(node);
|
||||||
|
} catch (e) {
|
||||||
|
// no op
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[minimapObserver.current]
|
||||||
|
);
|
||||||
|
const minimapBounds = useMemo(() => {
|
||||||
|
const data = {
|
||||||
|
start: Math.floor(Date.now() / 1000) - 35 * 60,
|
||||||
|
end: Math.floor(Date.now() / 1000) - 21 * 60,
|
||||||
|
};
|
||||||
|
const list = minimap.sort();
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
data.end = parseFloat(list.at(-1)!!);
|
||||||
|
data.start = parseFloat(list[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}, [minimap]);
|
||||||
|
|
||||||
|
// review status
|
||||||
|
|
||||||
|
const setReviewed = useCallback(
|
||||||
|
async (id: string) => {
|
||||||
|
const resp = await axios.post(`review/${id}/viewed`);
|
||||||
|
|
||||||
|
if (resp.status == 200) {
|
||||||
|
updateSegments();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[updateSegments]
|
||||||
|
);
|
||||||
|
|
||||||
|
// preview videos
|
||||||
|
|
||||||
|
const previewTimes = useMemo(() => {
|
||||||
|
if (
|
||||||
|
!reviewPages ||
|
||||||
|
reviewPages.length == 0 ||
|
||||||
|
reviewPages.at(-1)!!.length == 0
|
||||||
|
) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = new Date();
|
||||||
|
startDate.setMinutes(0, 0, 0);
|
||||||
|
|
||||||
|
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
||||||
|
endDate.setHours(0, 0, 0, 0);
|
||||||
|
return {
|
||||||
|
start: startDate.getTime() / 1000,
|
||||||
|
end: endDate.getTime() / 1000,
|
||||||
|
};
|
||||||
|
}, [reviewPages]);
|
||||||
|
const { data: allPreviews } = useSWR<Preview[]>(
|
||||||
|
previewTimes
|
||||||
|
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
||||||
|
: null,
|
||||||
|
{ revalidateOnFocus: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!config) {
|
||||||
|
return <ActivityIndicator />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full h-full">
|
||||||
|
<div className="absolute flex justify-between left-0 top-0 right-0">
|
||||||
|
<ToggleGroup
|
||||||
|
type="single"
|
||||||
|
defaultValue="alert"
|
||||||
|
size="sm"
|
||||||
|
onValueChange={(value: ReviewSeverity) => setSeverity(value)}
|
||||||
|
>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "alert" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="alert"
|
||||||
|
aria-label="Select alerts"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
|
||||||
|
Alerts
|
||||||
|
</ToggleGroupItem>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "detection" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="detection"
|
||||||
|
aria-label="Select detections"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
|
||||||
|
Detections
|
||||||
|
</ToggleGroupItem>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "significant_motion" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="significant_motion"
|
||||||
|
aria-label="Select motion"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
|
||||||
|
Motion
|
||||||
|
</ToggleGroupItem>
|
||||||
|
</ToggleGroup>
|
||||||
|
<div>
|
||||||
|
<Button className="mx-1" variant="secondary">
|
||||||
|
<LuVideo className=" mr-[10px]" />
|
||||||
|
All Cameras
|
||||||
|
</Button>
|
||||||
|
<ReviewCalendarButton />
|
||||||
|
<Button className="mx-1" variant="secondary">
|
||||||
|
<LuFilter className=" mr-[10px]" />
|
||||||
|
Filter
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={contentRef}
|
||||||
|
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
{reviewItems[severity]?.map((value, segIdx) => {
|
||||||
|
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||||
|
const relevantPreview = Object.values(allPreviews || []).find(
|
||||||
|
(preview) =>
|
||||||
|
preview.camera == value.camera &&
|
||||||
|
preview.start < value.start_time &&
|
||||||
|
preview.end > value.end_time
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={value.id}
|
||||||
|
ref={lastRow ? lastReviewRef : minimapRef}
|
||||||
|
data-start={value.start_time}
|
||||||
|
>
|
||||||
|
<div className="h-[234px] aspect-video rounded-lg overflow-hidden">
|
||||||
|
<PreviewThumbnailPlayer
|
||||||
|
review={value}
|
||||||
|
relevantPreview={relevantPreview}
|
||||||
|
isMobile={false}
|
||||||
|
setReviewed={() => setReviewed(value.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{lastRow && !isDone && <ActivityIndicator />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="absolute top-12 right-0 bottom-0">
|
||||||
|
<EventReviewTimeline
|
||||||
|
segmentDuration={60}
|
||||||
|
timestampSpread={15}
|
||||||
|
timelineStart={Math.floor(Date.now() / 1000)}
|
||||||
|
timelineDuration={24 * 60 * 60}
|
||||||
|
showMinimap
|
||||||
|
minimapStartTime={minimapBounds.start}
|
||||||
|
minimapEndTime={minimapBounds.end}
|
||||||
|
events={reviewItems.all}
|
||||||
|
severityType={severity}
|
||||||
|
contentRef={contentRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ReviewCalendarButton() {
|
||||||
|
const disabledDates = useMemo(() => {
|
||||||
|
const tomorrow = new Date();
|
||||||
|
tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0);
|
||||||
|
const future = new Date();
|
||||||
|
future.setFullYear(tomorrow.getFullYear() + 10);
|
||||||
|
return { from: tomorrow, to: future };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button className="mx-1" variant="secondary">
|
||||||
|
<LuCalendar className=" mr-[10px]" />
|
||||||
|
{formatUnixTimestampToDateTime(Date.now() / 1000, {
|
||||||
|
strftime_fmt: "%b %-d",
|
||||||
|
})}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent>
|
||||||
|
<Calendar mode="single" disabled={disabledDates} />
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
234
web/src/views/events/MobileEventView.tsx
Normal file
234
web/src/views/events/MobileEventView.tsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||||
|
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||||
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
|
import { FrigateConfig } from "@/types/frigateConfig";
|
||||||
|
import { ReviewSegment, ReviewSeverity } from "@/types/review";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useCallback, useMemo, useRef, useState } from "react";
|
||||||
|
import { MdCircle } from "react-icons/md";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import useSWRInfinite from "swr/infinite";
|
||||||
|
|
||||||
|
const API_LIMIT = 250;
|
||||||
|
|
||||||
|
export default function MobileEventView() {
|
||||||
|
const { data: config } = useSWR<FrigateConfig>("config");
|
||||||
|
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||||
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
// review paging
|
||||||
|
|
||||||
|
const reviewSearchParams = {};
|
||||||
|
const reviewSegmentFetcher = useCallback((key: any) => {
|
||||||
|
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
||||||
|
return axios.get(path, { params }).then((res) => res.data);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getKey = useCallback(
|
||||||
|
(index: number, prevData: ReviewSegment[]) => {
|
||||||
|
if (index > 0) {
|
||||||
|
const lastDate = prevData[prevData.length - 1].start_time;
|
||||||
|
const pagedParams = reviewSearchParams
|
||||||
|
? { before: lastDate, limit: API_LIMIT }
|
||||||
|
: {
|
||||||
|
...reviewSearchParams,
|
||||||
|
before: lastDate,
|
||||||
|
limit: API_LIMIT,
|
||||||
|
};
|
||||||
|
return ["review", pagedParams];
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = reviewSearchParams
|
||||||
|
? { limit: API_LIMIT }
|
||||||
|
: { ...reviewSearchParams, limit: API_LIMIT };
|
||||||
|
return ["review", params];
|
||||||
|
},
|
||||||
|
[reviewSearchParams]
|
||||||
|
);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: reviewPages,
|
||||||
|
mutate: updateSegments,
|
||||||
|
size,
|
||||||
|
setSize,
|
||||||
|
isValidating,
|
||||||
|
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
|
||||||
|
|
||||||
|
const reviewItems = useMemo(() => {
|
||||||
|
const all: ReviewSegment[] = [];
|
||||||
|
const alerts: ReviewSegment[] = [];
|
||||||
|
const detections: ReviewSegment[] = [];
|
||||||
|
const motion: ReviewSegment[] = [];
|
||||||
|
|
||||||
|
reviewPages?.forEach((page) => {
|
||||||
|
page.forEach((segment) => {
|
||||||
|
all.push(segment);
|
||||||
|
|
||||||
|
switch (segment.severity) {
|
||||||
|
case "alert":
|
||||||
|
alerts.push(segment);
|
||||||
|
break;
|
||||||
|
case "detection":
|
||||||
|
detections.push(segment);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
motion.push(segment);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
all: all,
|
||||||
|
alert: alerts,
|
||||||
|
detection: detections,
|
||||||
|
significant_motion: motion,
|
||||||
|
};
|
||||||
|
}, [reviewPages]);
|
||||||
|
|
||||||
|
const isDone = useMemo(
|
||||||
|
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||||
|
[reviewPages]
|
||||||
|
);
|
||||||
|
|
||||||
|
// review interaction
|
||||||
|
|
||||||
|
const pagingObserver = useRef<IntersectionObserver | null>();
|
||||||
|
const lastReviewRef = useCallback(
|
||||||
|
(node: HTMLElement | null) => {
|
||||||
|
if (isValidating) return;
|
||||||
|
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||||
|
try {
|
||||||
|
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting && !isDone) {
|
||||||
|
setSize(size + 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (node) pagingObserver.current.observe(node);
|
||||||
|
} catch (e) {
|
||||||
|
// no op
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[isValidating, isDone]
|
||||||
|
);
|
||||||
|
|
||||||
|
// review status
|
||||||
|
|
||||||
|
const setReviewed = useCallback(
|
||||||
|
async (id: string) => {
|
||||||
|
const resp = await axios.post(`review/${id}/viewed`);
|
||||||
|
|
||||||
|
if (resp.status == 200) {
|
||||||
|
updateSegments();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[updateSegments]
|
||||||
|
);
|
||||||
|
|
||||||
|
// preview videos
|
||||||
|
|
||||||
|
const previewTimes = useMemo(() => {
|
||||||
|
if (
|
||||||
|
!reviewPages ||
|
||||||
|
reviewPages.length == 0 ||
|
||||||
|
reviewPages.at(-1)!!.length == 0
|
||||||
|
) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = new Date();
|
||||||
|
startDate.setMinutes(0, 0, 0);
|
||||||
|
|
||||||
|
const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
|
||||||
|
endDate.setHours(0, 0, 0, 0);
|
||||||
|
return {
|
||||||
|
start: startDate.getTime() / 1000,
|
||||||
|
end: endDate.getTime() / 1000,
|
||||||
|
};
|
||||||
|
}, [reviewPages]);
|
||||||
|
const { data: allPreviews } = useSWR<Preview[]>(
|
||||||
|
previewTimes
|
||||||
|
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
||||||
|
: null,
|
||||||
|
{ revalidateOnFocus: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!config) {
|
||||||
|
return <ActivityIndicator />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full">
|
||||||
|
<ToggleGroup
|
||||||
|
type="single"
|
||||||
|
defaultValue="alert"
|
||||||
|
size="sm"
|
||||||
|
onValueChange={(value: ReviewSeverity) => setSeverity(value)}
|
||||||
|
>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "alert" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="alert"
|
||||||
|
aria-label="Select alerts"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
|
||||||
|
Alerts
|
||||||
|
</ToggleGroupItem>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "detection" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="detection"
|
||||||
|
aria-label="Select detections"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
|
||||||
|
Detections
|
||||||
|
</ToggleGroupItem>
|
||||||
|
<ToggleGroupItem
|
||||||
|
className={`px-3 py-4 rounded-2xl ${
|
||||||
|
severity == "significant_motion" ? "" : "text-gray-500"
|
||||||
|
}`}
|
||||||
|
value="significant_motion"
|
||||||
|
aria-label="Select motion"
|
||||||
|
>
|
||||||
|
<MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
|
||||||
|
Motion
|
||||||
|
</ToggleGroupItem>
|
||||||
|
</ToggleGroup>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={contentRef}
|
||||||
|
className="grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto no-scrollbar"
|
||||||
|
>
|
||||||
|
{reviewItems[severity]?.map((value, segIdx) => {
|
||||||
|
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||||
|
const relevantPreview = Object.values(allPreviews || []).find(
|
||||||
|
(preview) =>
|
||||||
|
preview.camera == value.camera &&
|
||||||
|
preview.start < value.start_time &&
|
||||||
|
preview.end > value.end_time
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={value.id}
|
||||||
|
ref={lastRow ? lastReviewRef : null}
|
||||||
|
data-start={value.start_time}
|
||||||
|
>
|
||||||
|
<div className="w-full aspect-video rounded-lg overflow-hidden">
|
||||||
|
<PreviewThumbnailPlayer
|
||||||
|
review={value}
|
||||||
|
relevantPreview={relevantPreview}
|
||||||
|
isMobile={true}
|
||||||
|
setReviewed={() => setReviewed(value.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{lastRow && !isDone && <ActivityIndicator />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user