mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +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 PreviewThumbnailPlayer from "../player/PreviewThumbnailPlayer";
|
||||
import { Card } from "../ui/card";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import ActivityIndicator from "../ui/activity-indicator";
|
||||
@ -21,8 +20,10 @@ type HistoryCardProps = {
|
||||
};
|
||||
|
||||
export default function HistoryCard({
|
||||
// @ts-ignore
|
||||
relevantPreview,
|
||||
timeline,
|
||||
// @ts-ignore
|
||||
isMobile,
|
||||
onClick,
|
||||
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]"
|
||||
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="pl-1 pt-1">
|
||||
|
||||
@ -208,7 +208,7 @@ export function EventReviewTimeline({
|
||||
return (
|
||||
<div
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -6,12 +6,9 @@ export const useSegmentUtils = (
|
||||
events: ReviewSegment[],
|
||||
severityType: string
|
||||
) => {
|
||||
const getSegmentStart = useCallback(
|
||||
(time: number): number => {
|
||||
return Math.floor(time / segmentDuration) * segmentDuration;
|
||||
},
|
||||
[segmentDuration]
|
||||
);
|
||||
const getSegmentStart = useCallback((time: number): number => {
|
||||
return Math.floor(time / (segmentDuration)) * (segmentDuration);
|
||||
}, [segmentDuration]);
|
||||
|
||||
const getSegmentEnd = useCallback(
|
||||
(time: number | undefined): number => {
|
||||
@ -70,18 +67,15 @@ export const useSegmentUtils = (
|
||||
[events, getSegmentStart, getSegmentEnd, mapSeverityToNumber]
|
||||
);
|
||||
|
||||
const getReviewed = useCallback(
|
||||
(time: number): boolean => {
|
||||
return events.some((event) => {
|
||||
const segmentStart = getSegmentStart(event.start_time);
|
||||
const segmentEnd = getSegmentEnd(event.end_time);
|
||||
return (
|
||||
time >= segmentStart && time < segmentEnd && event.has_been_reviewed
|
||||
);
|
||||
});
|
||||
},
|
||||
[events, getSegmentStart, getSegmentEnd]
|
||||
);
|
||||
const getReviewed = useCallback((time: number): boolean => {
|
||||
return events.some((event) => {
|
||||
const segmentStart = getSegmentStart(event.start_time);
|
||||
const segmentEnd = getSegmentEnd(event.end_time);
|
||||
return (
|
||||
time >= segmentStart && time < segmentEnd && event.has_been_reviewed
|
||||
);
|
||||
});
|
||||
}, [events, getSegmentStart, getSegmentEnd]);
|
||||
|
||||
const shouldShowRoundedCorners = useCallback(
|
||||
(segmentTime: number): { roundTop: boolean; roundBottom: boolean } => {
|
||||
@ -156,12 +150,5 @@ export const useSegmentUtils = (
|
||||
[events, getSegmentStart, getSegmentEnd, segmentDuration, severityType]
|
||||
);
|
||||
|
||||
return {
|
||||
getSegmentStart,
|
||||
getSegmentEnd,
|
||||
getSeverity,
|
||||
displaySeverityType,
|
||||
getReviewed,
|
||||
shouldShowRoundedCorners,
|
||||
};
|
||||
return { getSegmentStart, getSegmentEnd, getSeverity, displaySeverityType, getReviewed, shouldShowRoundedCorners };
|
||||
};
|
||||
@ -1,359 +1,15 @@
|
||||
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;
|
||||
import DesktopEventView from "@/views/events/DesktopEventView";
|
||||
import MobileEventView from "@/views/events/MobileEventView";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export default function Events() {
|
||||
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 isMobile = useMemo(() => {
|
||||
return window.innerWidth < 768;
|
||||
}, []);
|
||||
|
||||
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 />;
|
||||
if (isMobile) {
|
||||
return <MobileEventView />;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
return <DesktopEventView />;
|
||||
}
|
||||
|
||||
@ -117,7 +117,6 @@ function UIPlayground() {
|
||||
useMemo(() => {
|
||||
const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
|
||||
setMockEvents(initialEvents);
|
||||
console.log(initialEvents);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import {
|
||||
LuConstruction,
|
||||
LuFileUp,
|
||||
LuFilm,
|
||||
LuFlag,
|
||||
LuVideo,
|
||||
} from "react-icons/lu";
|
||||
@ -21,18 +20,12 @@ export const navbarLinks = [
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: LuFilm,
|
||||
title: "History",
|
||||
url: "/history",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: LuFileUp,
|
||||
title: "Export",
|
||||
url: "/export",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 4,
|
||||
icon: LuConstruction,
|
||||
title: "UI 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