mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-02-25 18:55:25 -06:00
Recordings viewer (#9985)
* Reduce redundant code and don't pull new items when marking as reviewed * Chunk recording times and run playback * fix overwriting existing data * Implement scrubbing * Show refresh button * Remove old history * Fix race condition * Cleanup handling * Remove console
This commit is contained in:
Nicolas Mowen
GitHub
parent
fa57a3db28
commit
f84d2db406
@ -5,7 +5,6 @@ import Wrapper from "@/components/Wrapper";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Header from "@/components/Header";
|
||||
import Live from "@/pages/Live";
|
||||
import History from "@/pages/History";
|
||||
import Export from "@/pages/Export";
|
||||
import Storage from "@/pages/Storage";
|
||||
import System from "@/pages/System";
|
||||
@ -40,7 +39,6 @@ function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<Live />} />
|
||||
<Route path="/events" element={<Events />} />
|
||||
<Route path="/history" element={<History />} />
|
||||
<Route path="/export" element={<Export />} />
|
||||
<Route path="/storage" element={<Storage />} />
|
||||
<Route path="/system" element={<System />} />
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
import useSWR from "swr";
|
||||
import { Card } from "../ui/card";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import ActivityIndicator from "../ui/activity-indicator";
|
||||
import { LuClock, LuTrash } from "react-icons/lu";
|
||||
import { HiOutlineVideoCamera } from "react-icons/hi";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import {
|
||||
getTimelineIcon,
|
||||
getTimelineItemDescription,
|
||||
} from "@/utils/timelineUtil";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
type HistoryCardProps = {
|
||||
timeline: Card;
|
||||
relevantPreview?: Preview;
|
||||
isMobile: boolean;
|
||||
onClick?: () => void;
|
||||
onDelete?: () => void;
|
||||
};
|
||||
|
||||
export default function HistoryCard({
|
||||
// @ts-ignore
|
||||
relevantPreview,
|
||||
timeline,
|
||||
// @ts-ignore
|
||||
isMobile,
|
||||
onClick,
|
||||
onDelete,
|
||||
}: HistoryCardProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="cursor-pointer my-2 xs:mr-2 w-full xs:w-[48%] sm:w-[284px]"
|
||||
onClick={onClick}
|
||||
>
|
||||
<>
|
||||
<div className="text-sm flex justify-between items-center">
|
||||
<div className="pl-1 pt-1">
|
||||
<LuClock className="h-5 w-5 mr-2 inline" />
|
||||
{formatUnixTimestampToDateTime(timeline.time, {
|
||||
strftime_fmt:
|
||||
config.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
<Button className="px-2 py-2" variant="ghost" size="xs">
|
||||
<LuTrash
|
||||
className="w-5 h-5 stroke-danger"
|
||||
onClick={(e: Event) => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (onDelete) {
|
||||
onDelete();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pl-1 capitalize text-sm flex items-center mt-1">
|
||||
<HiOutlineVideoCamera className="h-5 w-5 mr-2 inline" />
|
||||
{timeline.camera.replaceAll("_", " ")}
|
||||
</div>
|
||||
<div className="pl-1 my-2">
|
||||
<div className="text-sm font-medium">Activity:</div>
|
||||
{Object.entries(timeline.entries).map(([_, entry], idx) => {
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex text-xs capitalize my-1 items-center"
|
||||
>
|
||||
{getTimelineIcon(entry)}
|
||||
{getTimelineItemDescription(entry)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,262 +0,0 @@
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import VideoPlayer from "../player/VideoPlayer";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { useApiHost } from "@/api";
|
||||
import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
|
||||
import ActivityIndicator from "../ui/activity-indicator";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
getTimelineIcon,
|
||||
getTimelineItemDescription,
|
||||
} from "@/utils/timelineUtil";
|
||||
import { LuAlertCircle } from "react-icons/lu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "../ui/tooltip";
|
||||
import Player from "video.js/dist/types/player";
|
||||
|
||||
type TimelinePlayerCardProps = {
|
||||
timeline?: Card;
|
||||
onDismiss: () => void;
|
||||
};
|
||||
|
||||
export default function TimelinePlayerCard({
|
||||
timeline,
|
||||
onDismiss,
|
||||
}: TimelinePlayerCardProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const apiHost = useApiHost();
|
||||
const playerRef = useRef<Player | undefined>();
|
||||
|
||||
const annotationOffset = useMemo(() => {
|
||||
if (!config || !timeline) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return (
|
||||
(config.cameras[timeline.camera]?.detect?.annotation_offset || 0) / 1000
|
||||
);
|
||||
}, [config, timeline]);
|
||||
const [selectedItem, setSelectedItem] = useState<Timeline | undefined>();
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
if (!timeline) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
before: timeline.entries.at(-1)!!.timestamp + 30,
|
||||
after: timeline.entries.at(0)!!.timestamp,
|
||||
};
|
||||
}, [timeline]);
|
||||
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
timeline ? [`${timeline.camera}/recordings`, recordingParams] : null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const playbackUri = useMemo(() => {
|
||||
if (!timeline) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const end = timeline.entries.at(-1)!!.timestamp + 30;
|
||||
const start = timeline.entries.at(0)!!.timestamp;
|
||||
return `${apiHost}vod/${timeline?.camera}/start/${
|
||||
Number.isInteger(start) ? start.toFixed(1) : start
|
||||
}/end/${Number.isInteger(end) ? end.toFixed(1) : end}/master.m3u8`;
|
||||
}, [timeline]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
open={timeline != null}
|
||||
onOpenChange={(_) => {
|
||||
setSelectedItem(undefined);
|
||||
onDismiss();
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl"
|
||||
onOpenAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="capitalize">
|
||||
{`${timeline?.camera?.replaceAll(
|
||||
"_",
|
||||
" "
|
||||
)} @ ${formatUnixTimestampToDateTime(timeline?.time ?? 0, {
|
||||
strftime_fmt:
|
||||
config?.ui?.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S",
|
||||
})}`}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
{config && timeline && recordings && recordings.length > 0 && (
|
||||
<>
|
||||
<TimelineSummary
|
||||
timeline={timeline}
|
||||
annotationOffset={annotationOffset}
|
||||
recordings={recordings}
|
||||
onFrameSelected={(selected, seekTime) => {
|
||||
setSelectedItem(selected);
|
||||
playerRef.current?.pause();
|
||||
playerRef.current?.currentTime(seekTime);
|
||||
}}
|
||||
/>
|
||||
<div className="relative">
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
sources: [
|
||||
{
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
player.on("playing", () => {
|
||||
setSelectedItem(undefined);
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{selectedItem ? (
|
||||
<TimelineEventOverlay
|
||||
timeline={selectedItem}
|
||||
cameraConfig={config.cameras[timeline.camera]}
|
||||
/>
|
||||
) : undefined}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type TimelineSummaryProps = {
|
||||
timeline: Card;
|
||||
annotationOffset: number;
|
||||
recordings: Recording[];
|
||||
onFrameSelected: (timeline: Timeline, frameTime: number) => void;
|
||||
};
|
||||
|
||||
function TimelineSummary({
|
||||
timeline,
|
||||
annotationOffset,
|
||||
recordings,
|
||||
onFrameSelected,
|
||||
}: TimelineSummaryProps) {
|
||||
const [timeIndex, setTimeIndex] = useState<number>(-1);
|
||||
|
||||
// calculates the seek seconds by adding up all the seconds in the segments prior to the playback time
|
||||
const getSeekSeconds = (seekUnix: number) => {
|
||||
if (!recordings) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let seekSeconds = 0;
|
||||
recordings.every((segment) => {
|
||||
// if the next segment is past the desired time, stop calculating
|
||||
if (segment.start_time > seekUnix) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (segment.end_time < seekUnix) {
|
||||
seekSeconds += segment.end_time - segment.start_time;
|
||||
return true;
|
||||
}
|
||||
|
||||
seekSeconds +=
|
||||
segment.end_time - segment.start_time - (segment.end_time - seekUnix);
|
||||
return true;
|
||||
});
|
||||
|
||||
return seekSeconds;
|
||||
};
|
||||
|
||||
const onSelectMoment = async (index: number) => {
|
||||
setTimeIndex(index);
|
||||
onFrameSelected(
|
||||
timeline.entries[index],
|
||||
getSeekSeconds(timeline.entries[index].timestamp + annotationOffset)
|
||||
);
|
||||
};
|
||||
|
||||
if (!timeline || !recordings) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="h-12 flex justify-center">
|
||||
<div className="flex flex-row flex-nowrap justify-between overflow-auto">
|
||||
{timeline.entries.map((item, index) => (
|
||||
<TooltipProvider key={item.timestamp}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={`m-1 blue ${
|
||||
index == timeIndex ? "text-blue-500" : "text-gray-500"
|
||||
}`}
|
||||
variant="secondary"
|
||||
autoFocus={false}
|
||||
onClick={() => onSelectMoment(index)}
|
||||
>
|
||||
{getTimelineIcon(item)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{getTimelineItemDescription(item)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{timeIndex >= 0 ? (
|
||||
<div className="max-w-md self-center">
|
||||
<div className="flex justify-start">
|
||||
<div className="text-sm flex justify-between py-1 items-center">
|
||||
Bounding boxes may not align
|
||||
</div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon" variant="ghost">
|
||||
<LuAlertCircle />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Disclaimer: This data comes from the detect feed but is
|
||||
shown on the recordings.
|
||||
</p>
|
||||
<p>
|
||||
It is unlikely that the streams are perfectly in sync so the
|
||||
bounding box and the footage will not line up perfectly.
|
||||
</p>
|
||||
<p>The annotation_offset field can be used to adjust this.</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -16,7 +16,9 @@ import {
|
||||
import { Calendar } from "../ui/calendar";
|
||||
|
||||
type HistoryFilterPopoverProps = {
|
||||
// @ts-ignore
|
||||
filter: HistoryFilter | undefined;
|
||||
// @ts-ignore
|
||||
onUpdateFilter: (filter: HistoryFilter) => void;
|
||||
};
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ type PreviewPlayerProps = {
|
||||
relevantPreview?: Preview;
|
||||
autoPlayback?: boolean;
|
||||
setReviewed?: () => void;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
type Preview = {
|
||||
@ -38,6 +39,7 @@ export default function PreviewThumbnailPlayer({
|
||||
relevantPreview,
|
||||
autoPlayback = false,
|
||||
setReviewed,
|
||||
onClick,
|
||||
}: PreviewPlayerProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
@ -109,6 +111,7 @@ export default function PreviewThumbnailPlayer({
|
||||
className="relative w-full h-full cursor-pointer"
|
||||
onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
|
||||
onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{playingBack ? (
|
||||
<PreviewContent
|
||||
@ -185,6 +188,15 @@ function PreviewContent({
|
||||
setProgress,
|
||||
setReviewed,
|
||||
}: PreviewContentProps) {
|
||||
const playerStartTime = useMemo(() => {
|
||||
if (!relevantPreview) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// start with a bit of padding
|
||||
return Math.max(0, review.start_time - relevantPreview.start - 8);
|
||||
}, []);
|
||||
|
||||
// manual playback
|
||||
// safari is incapable of playing at a speed > 2x
|
||||
// so manual seeking is required on iOS
|
||||
@ -195,9 +207,11 @@ function PreviewContent({
|
||||
return;
|
||||
}
|
||||
|
||||
let counter = 0;
|
||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
||||
if (playerRef.current) {
|
||||
playerRef.current.currentTime(playerRef.current.currentTime()!! + 1);
|
||||
playerRef.current.currentTime(playerStartTime + counter);
|
||||
counter += 1;
|
||||
}
|
||||
}, 125);
|
||||
return () => clearInterval(intervalId);
|
||||
@ -233,20 +247,15 @@ function PreviewContent({
|
||||
return;
|
||||
}
|
||||
|
||||
// start with a bit of padding
|
||||
const playerStartTime = Math.max(
|
||||
0,
|
||||
review.start_time - relevantPreview.start - 8
|
||||
);
|
||||
|
||||
if (isSafari) {
|
||||
player.pause();
|
||||
setManualPlayback(true);
|
||||
} else {
|
||||
player.currentTime(playerStartTime);
|
||||
player.playbackRate(8);
|
||||
}
|
||||
|
||||
player.currentTime(playerStartTime);
|
||||
let lastPercent = 0;
|
||||
player.on("timeupdate", () => {
|
||||
if (!setProgress) {
|
||||
return;
|
||||
@ -262,11 +271,14 @@ function PreviewContent({
|
||||
if (
|
||||
setReviewed &&
|
||||
!review.has_been_reviewed &&
|
||||
lastPercent < 50 &&
|
||||
playerPercent > 50
|
||||
) {
|
||||
setReviewed();
|
||||
}
|
||||
|
||||
lastPercent = playerPercent;
|
||||
|
||||
if (playerPercent > 100) {
|
||||
playerRef.current?.pause();
|
||||
setManualPlayback(false);
|
||||
|
||||
@ -25,6 +25,7 @@ export type EventReviewTimelineProps = {
|
||||
events: ReviewSegment[];
|
||||
severityType: ReviewSeverity;
|
||||
contentRef: RefObject<HTMLDivElement>;
|
||||
onHandlebarDraggingChange?: (isDragging: boolean) => void;
|
||||
};
|
||||
|
||||
export function EventReviewTimeline({
|
||||
@ -41,6 +42,7 @@ export function EventReviewTimeline({
|
||||
events,
|
||||
severityType,
|
||||
contentRef,
|
||||
onHandlebarDraggingChange,
|
||||
}: EventReviewTimelineProps) {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [currentTimeSegment, setCurrentTimeSegment] = useState<number>(0);
|
||||
@ -152,6 +154,12 @@ export function EventReviewTimeline({
|
||||
}
|
||||
}, [currentTimeSegment, showHandlebar]);
|
||||
|
||||
useEffect(() => {
|
||||
if (onHandlebarDraggingChange) {
|
||||
onHandlebarDraggingChange(isDragging);
|
||||
}
|
||||
}, [isDragging, onHandlebarDraggingChange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (timelineRef.current && handlebarTime && showHandlebar) {
|
||||
const { scrollHeight: timelineHeight } = timelineRef.current;
|
||||
|
||||
@ -1,11 +1,213 @@
|
||||
import useOverlayState from "@/hooks/use-overlay-state";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
import DesktopEventView from "@/views/events/DesktopEventView";
|
||||
import DesktopRecordingView from "@/views/events/DesktopRecordingView";
|
||||
import MobileEventView from "@/views/events/MobileEventView";
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import axios from "axios";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import useSWR from "swr";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
|
||||
const API_LIMIT = 250;
|
||||
|
||||
export default function Events() {
|
||||
if (isMobile) {
|
||||
return <MobileEventView />;
|
||||
}
|
||||
// recordings viewer
|
||||
const [selectedReviewId, setSelectedReviewId] = useOverlayState("review");
|
||||
|
||||
return <DesktopEventView />;
|
||||
// review paging
|
||||
|
||||
const timeRange = useMemo(() => {
|
||||
return { before: Date.now() / 1000, after: getHoursAgo(24) };
|
||||
}, []);
|
||||
|
||||
const reviewSegmentFetcher = useCallback((key: any) => {
|
||||
const [path, params] = Array.isArray(key) ? key : [key, undefined];
|
||||
return axios.get(path, { params }).then((res) => res.data);
|
||||
}, []);
|
||||
|
||||
const reviewSearchParams = {};
|
||||
const getKey = useCallback(
|
||||
(index: number, prevData: ReviewSegment[]) => {
|
||||
if (index > 0) {
|
||||
const lastDate = prevData[prevData.length - 1].start_time;
|
||||
const pagedParams = reviewSearchParams
|
||||
? { before: lastDate, after: timeRange.after, limit: API_LIMIT }
|
||||
: {
|
||||
...reviewSearchParams,
|
||||
before: lastDate,
|
||||
after: timeRange.after,
|
||||
limit: API_LIMIT,
|
||||
};
|
||||
return ["review", pagedParams];
|
||||
}
|
||||
|
||||
const params = reviewSearchParams
|
||||
? { limit: API_LIMIT, before: timeRange.before, after: timeRange.after }
|
||||
: {
|
||||
...reviewSearchParams,
|
||||
limit: API_LIMIT,
|
||||
before: timeRange.before,
|
||||
after: timeRange.after,
|
||||
};
|
||||
return ["review", params];
|
||||
},
|
||||
[reviewSearchParams]
|
||||
);
|
||||
|
||||
const {
|
||||
data: reviewPages,
|
||||
mutate: updateSegments,
|
||||
size,
|
||||
setSize,
|
||||
isValidating,
|
||||
} = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher, {
|
||||
revalidateOnFocus: false,
|
||||
persistSize: true,
|
||||
});
|
||||
|
||||
const isDone = useMemo(
|
||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||
[reviewPages]
|
||||
);
|
||||
|
||||
// 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 }
|
||||
);
|
||||
|
||||
// review status
|
||||
|
||||
const markItemAsReviewed = useCallback(
|
||||
async (reviewId: string) => {
|
||||
const resp = await axios.post(`review/${reviewId}/viewed`);
|
||||
|
||||
if (resp.status == 200) {
|
||||
updateSegments(
|
||||
(data: ReviewSegment[][] | undefined) => {
|
||||
if (!data) {
|
||||
return data;
|
||||
}
|
||||
|
||||
const newData: ReviewSegment[][] = [];
|
||||
|
||||
data.forEach((page) => {
|
||||
const reviewIndex = page.findIndex((item) => item.id == reviewId);
|
||||
|
||||
if (reviewIndex == -1) {
|
||||
newData.push([...page]);
|
||||
} else {
|
||||
newData.push([
|
||||
...page.slice(0, reviewIndex),
|
||||
{ ...page[reviewIndex], has_been_reviewed: true },
|
||||
...page.slice(reviewIndex + 1),
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
return newData;
|
||||
},
|
||||
{ revalidate: false }
|
||||
);
|
||||
}
|
||||
},
|
||||
[updateSegments]
|
||||
);
|
||||
|
||||
// selected items
|
||||
|
||||
const selectedData = useMemo(() => {
|
||||
if (!selectedReviewId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (!reviewPages) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const allReviews = reviewPages.flat();
|
||||
const selectedReview = allReviews.find(
|
||||
(item) => item.id == selectedReviewId
|
||||
);
|
||||
|
||||
if (!selectedReview) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
selected: selectedReview,
|
||||
cameraSegments: allReviews.filter(
|
||||
(seg) => seg.camera == selectedReview.camera
|
||||
),
|
||||
cameraPreviews: allPreviews?.filter(
|
||||
(seg) => seg.camera == selectedReview.camera
|
||||
),
|
||||
};
|
||||
}, [selectedReviewId, reviewPages]);
|
||||
|
||||
if (selectedData) {
|
||||
return (
|
||||
<DesktopRecordingView
|
||||
reviewItems={selectedData.cameraSegments}
|
||||
selectedReview={selectedData.selected}
|
||||
relevantPreviews={selectedData.cameraPreviews}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
if (isMobile) {
|
||||
return (
|
||||
<MobileEventView
|
||||
reviewPages={reviewPages}
|
||||
relevantPreviews={allPreviews}
|
||||
reachedEnd={isDone}
|
||||
isValidating={isValidating}
|
||||
loadNextPage={() => setSize(size + 1)}
|
||||
markItemAsReviewed={markItemAsReviewed}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DesktopEventView
|
||||
reviewPages={reviewPages}
|
||||
relevantPreviews={allPreviews}
|
||||
timeRange={timeRange}
|
||||
reachedEnd={isDone}
|
||||
isValidating={isValidating}
|
||||
loadNextPage={() => setSize(size + 1)}
|
||||
markItemAsReviewed={markItemAsReviewed}
|
||||
onSelectReview={setSelectedReviewId}
|
||||
pullLatestData={updateSegments}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getHoursAgo(hours: number): number {
|
||||
const now = new Date();
|
||||
now.setHours(now.getHours() - hours);
|
||||
return now.getTime() / 1000;
|
||||
}
|
||||
|
||||
@ -1,284 +0,0 @@
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import axios from "axios";
|
||||
import { getHourlyTimelineData } from "@/utils/historyUtil";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import HistoryFilterPopover from "@/components/filter/HistoryFilterPopover";
|
||||
import useApiFilter from "@/hooks/use-api-filter";
|
||||
import HistoryCardView from "@/views/history/HistoryCardView";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { IoMdArrowBack } from "react-icons/io";
|
||||
import useOverlayState from "@/hooks/use-overlay-state";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import MobileTimelineView from "@/views/history/MobileTimelineView";
|
||||
import DesktopTimelineView from "@/views/history/DesktopTimelineView";
|
||||
|
||||
const API_LIMIT = 200;
|
||||
|
||||
function History() {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
const [historyFilter, setHistoryFilter, historySearchParams] =
|
||||
useApiFilter<HistoryFilter>();
|
||||
|
||||
const timelineFetcher = 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: HourlyTimeline) => {
|
||||
if (index > 0) {
|
||||
const lastDate = prevData.end;
|
||||
const pagedParams =
|
||||
historySearchParams == undefined
|
||||
? { before: lastDate, timezone, limit: API_LIMIT }
|
||||
: {
|
||||
...historySearchParams,
|
||||
before: lastDate,
|
||||
timezone,
|
||||
limit: API_LIMIT,
|
||||
};
|
||||
return ["timeline/hourly", pagedParams];
|
||||
}
|
||||
|
||||
const params =
|
||||
historySearchParams == undefined
|
||||
? { timezone, limit: API_LIMIT }
|
||||
: { ...historySearchParams, timezone, limit: API_LIMIT };
|
||||
return ["timeline/hourly", params];
|
||||
},
|
||||
[historySearchParams]
|
||||
);
|
||||
|
||||
const {
|
||||
data: timelinePages,
|
||||
mutate: updateHistory,
|
||||
size,
|
||||
setSize,
|
||||
isValidating,
|
||||
} = useSWRInfinite<HourlyTimeline>(getKey, timelineFetcher);
|
||||
|
||||
const previewTimes = useMemo(() => {
|
||||
if (!timelinePages) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const startDate = new Date();
|
||||
startDate.setMinutes(0, 0, 0);
|
||||
|
||||
const endDate = new Date(timelinePages.at(-1)!!.end);
|
||||
endDate.setHours(0, 0, 0, 0);
|
||||
return {
|
||||
start: startDate.getTime() / 1000,
|
||||
end: endDate.getTime() / 1000,
|
||||
};
|
||||
}, [timelinePages]);
|
||||
const { data: allPreviews } = useSWR<Preview[]>(
|
||||
previewTimes
|
||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
||||
: null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [playback, setPlayback] = useState<TimelinePlayback | undefined>();
|
||||
const [viewingPlayback, setViewingPlayback] = useOverlayState("timeline");
|
||||
const setPlaybackState = useCallback(
|
||||
(playback: TimelinePlayback | undefined) => {
|
||||
if (playback == undefined) {
|
||||
setPlayback(undefined);
|
||||
navigate(-1);
|
||||
} else {
|
||||
setPlayback(playback);
|
||||
setViewingPlayback(true);
|
||||
}
|
||||
},
|
||||
[navigate]
|
||||
);
|
||||
|
||||
const isMobile = useMemo(() => {
|
||||
return window.innerWidth < 768;
|
||||
}, [playback]);
|
||||
|
||||
const timelineCards: CardsData = useMemo(() => {
|
||||
if (!timelinePages) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return getHourlyTimelineData(
|
||||
timelinePages,
|
||||
historyFilter?.detailLevel ?? "normal"
|
||||
);
|
||||
}, [historyFilter, timelinePages]);
|
||||
|
||||
const isDone =
|
||||
(timelinePages?.[timelinePages.length - 1]?.count ?? 0) < API_LIMIT;
|
||||
|
||||
const [itemsToDelete, setItemsToDelete] = useState<string[] | null>(null);
|
||||
const onDelete = useCallback(
|
||||
async (timeline: Card) => {
|
||||
if (timeline.entries.length > 1) {
|
||||
const uniqueEvents = new Set(
|
||||
timeline.entries.map((entry) => entry.source_id)
|
||||
);
|
||||
setItemsToDelete(new Array(...uniqueEvents));
|
||||
} else {
|
||||
const response = await axios.delete(
|
||||
`events/${timeline.entries[0].source_id}`
|
||||
);
|
||||
if (response.status === 200) {
|
||||
updateHistory();
|
||||
}
|
||||
}
|
||||
},
|
||||
[updateHistory]
|
||||
);
|
||||
const onDeleteMulti = useCallback(async () => {
|
||||
if (!itemsToDelete) {
|
||||
return;
|
||||
}
|
||||
|
||||
const responses = itemsToDelete.map(async (id) => {
|
||||
return axios.delete(`events/${id}`);
|
||||
});
|
||||
|
||||
if ((await responses[0]).status == 200) {
|
||||
updateHistory();
|
||||
setItemsToDelete(null);
|
||||
}
|
||||
}, [itemsToDelete, updateHistory]);
|
||||
|
||||
if (!config || !timelineCards) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex justify-start">
|
||||
{viewingPlayback && (
|
||||
<Button
|
||||
className="mt-2"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
onClick={() => setPlaybackState(undefined)}
|
||||
>
|
||||
<IoMdArrowBack className="w-6 h-6" />
|
||||
</Button>
|
||||
)}
|
||||
<Heading as="h2">History</Heading>
|
||||
</div>
|
||||
{!playback && (
|
||||
<HistoryFilterPopover
|
||||
filter={historyFilter}
|
||||
onUpdateFilter={(filter) => setHistoryFilter(filter)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AlertDialog
|
||||
open={itemsToDelete != null}
|
||||
onOpenChange={(_) => setItemsToDelete(null)}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{`Delete ${itemsToDelete?.length} events?`}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will delete all events associated with these objects.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setItemsToDelete(null)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-danger"
|
||||
onClick={() => onDeleteMulti()}
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<HistoryCardView
|
||||
timelineCards={timelineCards}
|
||||
allPreviews={allPreviews}
|
||||
isMobile={isMobile}
|
||||
isValidating={isValidating}
|
||||
isDone={isDone}
|
||||
onNextPage={() => {
|
||||
setSize(size + 1);
|
||||
}}
|
||||
onDelete={onDelete}
|
||||
onItemSelected={(item) => setPlaybackState(item)}
|
||||
/>
|
||||
<TimelineViewer
|
||||
timelineData={timelineCards}
|
||||
allPreviews={allPreviews || []}
|
||||
playback={viewingPlayback ? playback : undefined}
|
||||
isMobile={isMobile}
|
||||
onClose={() => setPlaybackState(undefined)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type TimelineViewerProps = {
|
||||
timelineData: CardsData | undefined;
|
||||
allPreviews: Preview[];
|
||||
playback: TimelinePlayback | undefined;
|
||||
isMobile: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
function TimelineViewer({
|
||||
timelineData,
|
||||
allPreviews,
|
||||
playback,
|
||||
isMobile,
|
||||
onClose,
|
||||
}: TimelineViewerProps) {
|
||||
if (isMobile) {
|
||||
return playback != undefined ? (
|
||||
<div className="w-screen absolute left-0 top-20 bottom-0 bg-background z-50">
|
||||
{timelineData && <MobileTimelineView playback={playback} />}
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
|
||||
<DialogContent className="w-[70%] max-w-[1920px] h-[90%]">
|
||||
{timelineData && playback && (
|
||||
<DesktopTimelineView
|
||||
timelineData={timelineData}
|
||||
allPreviews={allPreviews}
|
||||
initialPlayback={playback}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default History;
|
||||
@ -1,43 +0,0 @@
|
||||
type CardsData = {
|
||||
[day: string]: {
|
||||
[hour: string]: {
|
||||
[groupKey: string]: Card;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
type Card = {
|
||||
camera: string;
|
||||
time: number;
|
||||
entries: Timeline[];
|
||||
uniqueKeys: string[];
|
||||
};
|
||||
|
||||
type Preview = {
|
||||
camera: string;
|
||||
src: string;
|
||||
type: string;
|
||||
start: number;
|
||||
end: number;
|
||||
};
|
||||
|
||||
interface HistoryFilter extends FilterType {
|
||||
cameras: string[];
|
||||
labels: string[];
|
||||
before: number | undefined;
|
||||
after: number | undefined;
|
||||
detailLevel: "normal" | "extra" | "full";
|
||||
}
|
||||
|
||||
type HistoryTimeline = {
|
||||
start: number;
|
||||
end: number;
|
||||
playbackItems: TimelinePlayback[];
|
||||
};
|
||||
|
||||
type TimelinePlayback = {
|
||||
camera: string;
|
||||
range: { start: number; end: number };
|
||||
timelineItems: Timeline[];
|
||||
relevantPreview: Preview | undefined;
|
||||
};
|
||||
7
web/src/types/preview.ts
Normal file
7
web/src/types/preview.ts
Normal file
@ -0,0 +1,7 @@
|
||||
type Preview = {
|
||||
camera: string;
|
||||
src: string;
|
||||
type: string;
|
||||
start: number;
|
||||
end: number;
|
||||
};
|
||||
@ -1,206 +0,0 @@
|
||||
import { endOfHourOrCurrentTime } from "./dateUtil";
|
||||
|
||||
// group history cards by 120 seconds of activity
|
||||
const GROUP_SECONDS = 120;
|
||||
|
||||
export function getHourlyTimelineData(
|
||||
timelinePages: HourlyTimeline[],
|
||||
detailLevel: string
|
||||
): CardsData {
|
||||
const cards: CardsData = {};
|
||||
const allHours: { [key: string]: Timeline[] } = {};
|
||||
|
||||
timelinePages.forEach((hourlyTimeline) => {
|
||||
Object.entries(hourlyTimeline.hours).forEach(([key, values]) => {
|
||||
if (key in allHours) {
|
||||
// only occurs when multiple pages contain elements in the same hour
|
||||
allHours[key] = allHours[key]
|
||||
.concat(values)
|
||||
.sort((a, b) => a.timestamp - b.timestamp);
|
||||
} else {
|
||||
allHours[key] = values;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Object.keys(allHours)
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.reverse()
|
||||
.forEach((hour) => {
|
||||
const day = new Date(parseInt(hour) * 1000);
|
||||
day.setHours(0, 0, 0, 0);
|
||||
const dayKey = (day.getTime() / 1000).toString();
|
||||
|
||||
// build a map of course to the types that are included in this hour
|
||||
// which allows us to know what items to keep depending on detail level
|
||||
const sourceToTypes: { [key: string]: string[] } = {};
|
||||
let cardTypeStart: { [camera: string]: number } = {};
|
||||
Object.values(allHours[hour]).forEach((i) => {
|
||||
if (i.timestamp > (cardTypeStart[i.camera] ?? 0) + GROUP_SECONDS) {
|
||||
cardTypeStart[i.camera] = i.timestamp;
|
||||
}
|
||||
|
||||
const groupKey = `${i.source_id}-${cardTypeStart[i.camera]}`;
|
||||
|
||||
if (groupKey in sourceToTypes) {
|
||||
sourceToTypes[groupKey].push(i.class_type);
|
||||
} else {
|
||||
sourceToTypes[groupKey] = [i.class_type];
|
||||
}
|
||||
});
|
||||
|
||||
if (!(dayKey in cards)) {
|
||||
cards[dayKey] = {};
|
||||
}
|
||||
|
||||
if (!(hour in cards[dayKey])) {
|
||||
cards[dayKey][hour] = {};
|
||||
}
|
||||
|
||||
let cardStart: { [camera: string]: number } = {};
|
||||
Object.values(allHours[hour]).forEach((i) => {
|
||||
if (i.timestamp > (cardStart[i.camera] ?? 0) + GROUP_SECONDS) {
|
||||
cardStart[i.camera] = i.timestamp;
|
||||
}
|
||||
|
||||
const time = new Date(i.timestamp * 1000);
|
||||
const groupKey = `${i.camera}-${cardStart[i.camera]}`;
|
||||
const sourceKey = `${i.source_id}-${cardStart[i.camera]}`;
|
||||
const uniqueKey = `${i.source_id}-${i.class_type}`;
|
||||
|
||||
// detail level for saving items
|
||||
// detail level determines which timeline items for each moment is returned
|
||||
// values can be normal, extra, or full
|
||||
// normal: return all items except active / attribute / gone / stationary / visible unless that is the only item.
|
||||
// extra: return all items except attribute / gone / visible unless that is the only item
|
||||
// full: return all items
|
||||
|
||||
let add = true;
|
||||
const sourceType = sourceToTypes[sourceKey];
|
||||
let hiddenItems: string[] = [];
|
||||
if (detailLevel == "normal") {
|
||||
hiddenItems = [
|
||||
"active",
|
||||
"attribute",
|
||||
"gone",
|
||||
"stationary",
|
||||
"visible",
|
||||
];
|
||||
} else if (detailLevel == "extra") {
|
||||
hiddenItems = ["attribute", "gone", "visible"];
|
||||
}
|
||||
|
||||
if (sourceType.length > 1) {
|
||||
// we have multiple timeline items for this card
|
||||
|
||||
if (
|
||||
sourceType.find((type) => hiddenItems.includes(type) == false) ==
|
||||
undefined
|
||||
) {
|
||||
// all of the attribute items for this card make it hidden, but we need to show one
|
||||
if (sourceType.indexOf(i.class_type) != 0) {
|
||||
add = false;
|
||||
}
|
||||
} else if (hiddenItems.includes(i.class_type)) {
|
||||
add = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (add) {
|
||||
if (groupKey in cards[dayKey][hour]) {
|
||||
if (
|
||||
!cards[dayKey][hour][groupKey].uniqueKeys.includes(uniqueKey) ||
|
||||
detailLevel == "full"
|
||||
) {
|
||||
cards[dayKey][hour][groupKey].entries.push(i);
|
||||
cards[dayKey][hour][groupKey].uniqueKeys.push(uniqueKey);
|
||||
}
|
||||
} else {
|
||||
cards[dayKey][hour][groupKey] = {
|
||||
camera: i.camera,
|
||||
time: time.getTime() / 1000,
|
||||
entries: [i],
|
||||
uniqueKeys: [uniqueKey],
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return cards;
|
||||
}
|
||||
|
||||
export function getTimelineHoursForDay(
|
||||
camera: string,
|
||||
cards: CardsData,
|
||||
cameraPreviews: Preview[],
|
||||
timestamp: number
|
||||
): HistoryTimeline {
|
||||
const endOfThisHour = new Date();
|
||||
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
|
||||
const data: TimelinePlayback[] = [];
|
||||
const startDay = new Date(timestamp * 1000);
|
||||
startDay.setHours(23, 59, 59, 999);
|
||||
startDay.setHours(0, 0, 0, 0);
|
||||
const startTimestamp = startDay.getTime() / 1000;
|
||||
let start = startDay.getTime() / 1000;
|
||||
let end = 0;
|
||||
|
||||
const dayIdx = Object.keys(cards).find((day) => {
|
||||
if (parseInt(day) < start) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
let day: {
|
||||
[hour: string]: {
|
||||
[groupKey: string]: Card;
|
||||
};
|
||||
} = {};
|
||||
|
||||
if (dayIdx != undefined) {
|
||||
day = cards[dayIdx];
|
||||
}
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
startDay.setHours(startDay.getHours() + 1);
|
||||
|
||||
if (startDay > endOfThisHour) {
|
||||
break;
|
||||
}
|
||||
|
||||
end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
|
||||
const hour = Object.values(day).find((cards) => {
|
||||
const card = Object.values(cards)[0];
|
||||
if (card == undefined || card.time < start || card.time > end) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
const timelineItems: Timeline[] = hour
|
||||
? Object.values(hour).flatMap((card) => {
|
||||
if (card.camera == camera) {
|
||||
return card.entries;
|
||||
}
|
||||
|
||||
return [];
|
||||
})
|
||||
: [];
|
||||
const relevantPreview = cameraPreviews.find(
|
||||
(preview) =>
|
||||
Math.round(preview.start) >= start && Math.floor(preview.end) <= end
|
||||
);
|
||||
data.push({
|
||||
camera,
|
||||
range: { start, end },
|
||||
timelineItems,
|
||||
relevantPreview,
|
||||
});
|
||||
start = startDay.getTime() / 1000;
|
||||
}
|
||||
|
||||
return { start: startTimestamp, end, playbackItems: data.reverse() };
|
||||
}
|
||||
@ -20,6 +20,7 @@ import {
|
||||
MdOutlinePictureInPictureAlt,
|
||||
} from "react-icons/md";
|
||||
import { FaBicycle } from "react-icons/fa";
|
||||
import { endOfHourOrCurrentTime } from "./dateUtil";
|
||||
|
||||
export function getTimelineIcon(timelineItem: Timeline) {
|
||||
switch (timelineItem.class_type) {
|
||||
@ -118,3 +119,31 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
|
||||
return `${label} detected`;
|
||||
}
|
||||
}
|
||||
|
||||
export function getChunkedTimeRange(timestamp: number) {
|
||||
const endOfThisHour = new Date();
|
||||
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
|
||||
const data: { start: number; end: number }[] = [];
|
||||
const startDay = new Date(timestamp * 1000);
|
||||
startDay.setHours(0, 0, 0, 0);
|
||||
const startTimestamp = startDay.getTime() / 1000;
|
||||
let start = startDay.getTime() / 1000;
|
||||
let end = 0;
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
startDay.setHours(startDay.getHours() + 1);
|
||||
|
||||
if (startDay > endOfThisHour) {
|
||||
break;
|
||||
}
|
||||
|
||||
end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
|
||||
data.push({
|
||||
start,
|
||||
end,
|
||||
});
|
||||
start = startDay.getTime() / 1000;
|
||||
}
|
||||
|
||||
return { start: startTimestamp, end, ranges: data };
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { useFrigateEvents } from "@/api/ws";
|
||||
import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
|
||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
@ -12,73 +13,39 @@ 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 { LuCalendar, LuFilter, LuRefreshCcw, 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() {
|
||||
type DesktopEventViewProps = {
|
||||
reviewPages?: ReviewSegment[][];
|
||||
relevantPreviews?: Preview[];
|
||||
timeRange: { before: number; after: number };
|
||||
reachedEnd: boolean;
|
||||
isValidating: boolean;
|
||||
loadNextPage: () => void;
|
||||
markItemAsReviewed: (reviewId: string) => void;
|
||||
onSelectReview: (reviewId: string) => void;
|
||||
pullLatestData: () => void;
|
||||
};
|
||||
export default function DesktopEventView({
|
||||
reviewPages,
|
||||
relevantPreviews,
|
||||
timeRange,
|
||||
reachedEnd,
|
||||
isValidating,
|
||||
loadNextPage,
|
||||
markItemAsReviewed,
|
||||
onSelectReview,
|
||||
pullLatestData,
|
||||
}: DesktopEventViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// review paging
|
||||
|
||||
const [after, setAfter] = useState(0);
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
now.setHours(now.getHours() - 24);
|
||||
setAfter(now.getTime() / 1000);
|
||||
|
||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
||||
const now = new Date();
|
||||
now.setHours(now.getHours() - 24);
|
||||
setAfter(now.getTime() / 1000);
|
||||
}, 60000);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [60000]);
|
||||
|
||||
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, after: after, limit: API_LIMIT }
|
||||
: {
|
||||
...reviewSearchParams,
|
||||
before: lastDate,
|
||||
after: after,
|
||||
limit: API_LIMIT,
|
||||
};
|
||||
return ["review", pagedParams];
|
||||
}
|
||||
|
||||
const params = reviewSearchParams
|
||||
? { limit: API_LIMIT, after: after }
|
||||
: { ...reviewSearchParams, limit: API_LIMIT, after: after };
|
||||
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[] = [];
|
||||
@ -111,11 +78,6 @@ export default function DesktopEventView() {
|
||||
};
|
||||
}, [reviewPages]);
|
||||
|
||||
const isDone = useMemo(
|
||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||
[reviewPages]
|
||||
);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const current = reviewItems[severity];
|
||||
|
||||
@ -135,8 +97,8 @@ export default function DesktopEventView() {
|
||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||
try {
|
||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isDone) {
|
||||
setSize(size + 1);
|
||||
if (entries[0].isIntersecting && !reachedEnd) {
|
||||
loadNextPage();
|
||||
}
|
||||
});
|
||||
if (node) pagingObserver.current.observe(node);
|
||||
@ -144,7 +106,7 @@ export default function DesktopEventView() {
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[isValidating, isDone]
|
||||
[isValidating, reachedEnd]
|
||||
);
|
||||
|
||||
const [minimap, setMinimap] = useState<string[]>([]);
|
||||
@ -209,46 +171,24 @@ export default function DesktopEventView() {
|
||||
return data;
|
||||
}, [minimap]);
|
||||
|
||||
// review status
|
||||
// new data alert
|
||||
|
||||
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 { payload: eventUpdate } = useFrigateEvents();
|
||||
const [hasUpdate, setHasUpdate] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!eventUpdate) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 event is ended and was saved, update events list
|
||||
if (
|
||||
eventUpdate.type == "end" &&
|
||||
(eventUpdate.after.has_clip || eventUpdate.after.has_snapshot)
|
||||
) {
|
||||
setHasUpdate(true);
|
||||
return;
|
||||
}
|
||||
}, [eventUpdate]);
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
@ -307,6 +247,20 @@ export default function DesktopEventView() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasUpdate && (
|
||||
<Button
|
||||
className="absolute top-14 left-[50%] -translate-x-[50%] z-30 bg-gray-400 text-white"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setHasUpdate(false);
|
||||
pullLatestData();
|
||||
}}
|
||||
>
|
||||
<LuRefreshCcw className="w-4 h-4 mr-2" />
|
||||
New Items To Review
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<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"
|
||||
@ -314,7 +268,7 @@ export default function DesktopEventView() {
|
||||
{currentItems ? (
|
||||
currentItems.map((value, segIdx) => {
|
||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||
const relevantPreview = Object.values(allPreviews || []).find(
|
||||
const relevantPreview = Object.values(relevantPreviews || []).find(
|
||||
(preview) =>
|
||||
preview.camera == value.camera &&
|
||||
preview.start < value.start_time &&
|
||||
@ -331,10 +285,11 @@ export default function DesktopEventView() {
|
||||
<PreviewThumbnailPlayer
|
||||
review={value}
|
||||
relevantPreview={relevantPreview}
|
||||
setReviewed={() => setReviewed(value.id)}
|
||||
setReviewed={() => markItemAsReviewed(value.id)}
|
||||
onClick={() => onSelectReview(value.id)}
|
||||
/>
|
||||
</div>
|
||||
{lastRow && !isDone && <ActivityIndicator />}
|
||||
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
@ -343,20 +298,18 @@ export default function DesktopEventView() {
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-12 right-0 bottom-0">
|
||||
{after != 0 && (
|
||||
<EventReviewTimeline
|
||||
segmentDuration={60}
|
||||
timestampSpread={15}
|
||||
timelineStart={Math.floor(Date.now() / 1000)}
|
||||
timelineEnd={after}
|
||||
showMinimap
|
||||
minimapStartTime={minimapBounds.start}
|
||||
minimapEndTime={minimapBounds.end}
|
||||
events={reviewItems.all}
|
||||
severityType={severity}
|
||||
contentRef={contentRef}
|
||||
/>
|
||||
)}
|
||||
<EventReviewTimeline
|
||||
segmentDuration={60}
|
||||
timestampSpread={15}
|
||||
timelineStart={timeRange.before}
|
||||
timelineEnd={timeRange.after}
|
||||
showMinimap
|
||||
minimapStartTime={minimapBounds.start}
|
||||
minimapEndTime={minimapBounds.end}
|
||||
events={reviewItems.all}
|
||||
severityType={severity}
|
||||
contentRef={contentRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
119
web/src/views/events/DesktopRecordingView.tsx
Normal file
119
web/src/views/events/DesktopRecordingView.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import DynamicVideoPlayer, {
|
||||
DynamicVideoController,
|
||||
} from "@/components/player/DynamicVideoPlayer";
|
||||
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ReviewSegment } from "@/types/review";
|
||||
import { getChunkedTimeRange } from "@/utils/timelineUtil";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { IoMdArrowRoundBack } from "react-icons/io";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
type DesktopRecordingViewProps = {
|
||||
selectedReview: ReviewSegment;
|
||||
reviewItems: ReviewSegment[];
|
||||
relevantPreviews?: Preview[];
|
||||
};
|
||||
export default function DesktopRecordingView({
|
||||
selectedReview,
|
||||
reviewItems,
|
||||
relevantPreviews,
|
||||
}: DesktopRecordingViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// timeline time
|
||||
|
||||
const timeRange = useMemo(
|
||||
() => getChunkedTimeRange(selectedReview.start_time),
|
||||
[]
|
||||
);
|
||||
const [selectedRangeIdx, setSelectedRangeIdx] = useState(
|
||||
timeRange.ranges.findIndex((chunk) => {
|
||||
return (
|
||||
chunk.start <= selectedReview.start_time &&
|
||||
chunk.end >= selectedReview.start_time
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
// move to next clip
|
||||
useEffect(() => {
|
||||
if (!controllerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRangeIdx < timeRange.ranges.length - 1) {
|
||||
controllerRef.current.onClipEndedEvent(() => {
|
||||
setSelectedRangeIdx(selectedRangeIdx + 1);
|
||||
});
|
||||
}
|
||||
}, [controllerRef, selectedRangeIdx]);
|
||||
|
||||
// scrubbing and timeline state
|
||||
|
||||
const [scrubbing, setScrubbing] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState<number>(
|
||||
selectedReview?.start_time || Date.now() / 1000
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrubbing) {
|
||||
controllerRef.current?.scrubToTimestamp(currentTime);
|
||||
}
|
||||
}, [controllerRef, currentTime, scrubbing]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scrubbing) {
|
||||
controllerRef.current?.seekToTimestamp(currentTime, true);
|
||||
}
|
||||
}, [controllerRef, scrubbing]);
|
||||
|
||||
return (
|
||||
<div ref={contentRef} className="relative w-full h-full">
|
||||
<Button
|
||||
className="absolute left-0 top-0 rounded-lg"
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowRoundBack className="w-5 h-5 mr-[10px]" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<div className="absolute left-[20%] top-8 right-[20%]">
|
||||
<DynamicVideoPlayer
|
||||
camera={selectedReview.camera}
|
||||
timeRange={timeRange.ranges[selectedRangeIdx]}
|
||||
cameraPreviews={relevantPreviews || []}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setCurrentTime(timestamp);
|
||||
});
|
||||
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
selectedReview.start_time,
|
||||
true
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 right-0 bottom-0">
|
||||
<EventReviewTimeline
|
||||
segmentDuration={30}
|
||||
timestampSpread={15}
|
||||
timelineStart={timeRange.end}
|
||||
timelineEnd={timeRange.start}
|
||||
showHandlebar
|
||||
handlebarTime={currentTime}
|
||||
setHandlebarTime={setCurrentTime}
|
||||
events={reviewItems}
|
||||
severityType={selectedReview.severity}
|
||||
contentRef={contentRef}
|
||||
onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,72 +3,32 @@ 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, useEffect, 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() {
|
||||
type MobileEventViewProps = {
|
||||
reviewPages?: ReviewSegment[][];
|
||||
relevantPreviews?: Preview[];
|
||||
reachedEnd: boolean;
|
||||
isValidating: boolean;
|
||||
loadNextPage: () => void;
|
||||
markItemAsReviewed: (reviewId: string) => void;
|
||||
};
|
||||
export default function MobileEventView({
|
||||
reviewPages,
|
||||
relevantPreviews,
|
||||
reachedEnd,
|
||||
isValidating,
|
||||
loadNextPage,
|
||||
markItemAsReviewed,
|
||||
}: MobileEventViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const [severity, setSeverity] = useState<ReviewSeverity>("alert");
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// review paging
|
||||
|
||||
const [after, setAfter] = useState(0);
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
now.setHours(now.getHours() - 24);
|
||||
setAfter(now.getTime() / 1000);
|
||||
|
||||
const intervalId: NodeJS.Timeout = setInterval(() => {
|
||||
const now = new Date();
|
||||
now.setHours(now.getHours() - 24);
|
||||
setAfter(now.getTime() / 1000);
|
||||
}, 60000);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [60000]);
|
||||
|
||||
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, after: after, limit: API_LIMIT }
|
||||
: {
|
||||
...reviewSearchParams,
|
||||
before: lastDate,
|
||||
after: after,
|
||||
limit: API_LIMIT,
|
||||
};
|
||||
return ["review", pagedParams];
|
||||
}
|
||||
|
||||
const params = reviewSearchParams
|
||||
? { limit: API_LIMIT, after: after }
|
||||
: { ...reviewSearchParams, limit: API_LIMIT, after: after };
|
||||
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[] = [];
|
||||
@ -101,11 +61,6 @@ export default function MobileEventView() {
|
||||
};
|
||||
}, [reviewPages]);
|
||||
|
||||
const isDone = useMemo(
|
||||
() => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
|
||||
[reviewPages]
|
||||
);
|
||||
|
||||
const currentItems = useMemo(() => {
|
||||
const current = reviewItems[severity];
|
||||
|
||||
@ -125,8 +80,8 @@ export default function MobileEventView() {
|
||||
if (pagingObserver.current) pagingObserver.current.disconnect();
|
||||
try {
|
||||
pagingObserver.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isDone) {
|
||||
setSize(size + 1);
|
||||
if (entries[0].isIntersecting && !reachedEnd) {
|
||||
loadNextPage();
|
||||
}
|
||||
});
|
||||
if (node) pagingObserver.current.observe(node);
|
||||
@ -134,7 +89,7 @@ export default function MobileEventView() {
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[isValidating, isDone]
|
||||
[isValidating, reachedEnd]
|
||||
);
|
||||
|
||||
const [minimap, setMinimap] = useState<string[]>([]);
|
||||
@ -199,47 +154,6 @@ export default function MobileEventView() {
|
||||
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 />;
|
||||
}
|
||||
@ -291,7 +205,7 @@ export default function MobileEventView() {
|
||||
{currentItems ? (
|
||||
currentItems.map((value, segIdx) => {
|
||||
const lastRow = segIdx == reviewItems[severity].length - 1;
|
||||
const relevantPreview = Object.values(allPreviews || []).find(
|
||||
const relevantPreview = Object.values(relevantPreviews || []).find(
|
||||
(preview) =>
|
||||
preview.camera == value.camera &&
|
||||
preview.start < value.start_time &&
|
||||
@ -309,10 +223,10 @@ export default function MobileEventView() {
|
||||
review={value}
|
||||
relevantPreview={relevantPreview}
|
||||
autoPlayback={minimapBounds.end == value.start_time}
|
||||
setReviewed={() => setReviewed(value.id)}
|
||||
setReviewed={() => markItemAsReviewed(value.id)}
|
||||
/>
|
||||
</div>
|
||||
{lastRow && !isDone && <ActivityIndicator />}
|
||||
{lastRow && !reachedEnd && <ActivityIndicator />}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
|
||||
@ -1,270 +0,0 @@
|
||||
import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import TimelineItemCard from "@/components/card/TimelineItemCard";
|
||||
import { getTimelineHoursForDay } from "@/utils/historyUtil";
|
||||
import { GraphDataPoint } from "@/types/graph";
|
||||
import TimelineGraph from "@/components/graph/TimelineGraph";
|
||||
import TimelineBar from "@/components/bar/TimelineBar";
|
||||
import DynamicVideoPlayer, {
|
||||
DynamicVideoController,
|
||||
} from "@/components/player/DynamicVideoPlayer";
|
||||
|
||||
type DesktopTimelineViewProps = {
|
||||
timelineData: CardsData;
|
||||
allPreviews: Preview[];
|
||||
initialPlayback: TimelinePlayback;
|
||||
};
|
||||
|
||||
export default function DesktopTimelineView({
|
||||
timelineData,
|
||||
allPreviews,
|
||||
initialPlayback,
|
||||
}: DesktopTimelineViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
const initialScrollRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// handle scrolling to initial timeline item
|
||||
useEffect(() => {
|
||||
if (initialScrollRef.current != null) {
|
||||
initialScrollRef.current.scrollIntoView();
|
||||
}
|
||||
}, [initialScrollRef]);
|
||||
|
||||
const cameraPreviews = useMemo(() => {
|
||||
return allPreviews.filter((preview) => {
|
||||
return preview.camera == initialPlayback.camera;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [timelineTime, setTimelineTime] = useState(0);
|
||||
const timelineStack = useMemo(
|
||||
() =>
|
||||
getTimelineHoursForDay(
|
||||
initialPlayback.camera,
|
||||
timelineData,
|
||||
cameraPreviews,
|
||||
initialPlayback.range.start + 60
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const [selectedPlaybackIdx, setSelectedPlaybackIdx] = useState(
|
||||
timelineStack.playbackItems.findIndex((playback) => {
|
||||
return (
|
||||
playback.range.start == initialPlayback.range.start &&
|
||||
playback.range.end == initialPlayback.range.end
|
||||
);
|
||||
})
|
||||
);
|
||||
const selectedPlayback = useMemo(
|
||||
() => timelineStack.playbackItems[selectedPlaybackIdx],
|
||||
[selectedPlaybackIdx]
|
||||
);
|
||||
|
||||
// handle moving to next clip
|
||||
useEffect(() => {
|
||||
if (!controllerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedPlaybackIdx > 0) {
|
||||
controllerRef.current.onClipEndedEvent(() => {
|
||||
console.log("setting to " + (selectedPlaybackIdx - 1));
|
||||
setSelectedPlaybackIdx(selectedPlaybackIdx - 1);
|
||||
});
|
||||
}
|
||||
}, [controllerRef, selectedPlaybackIdx]);
|
||||
|
||||
const { data: activity } = useSWR<RecordingActivity>(
|
||||
[
|
||||
`${initialPlayback.camera}/recording/hourly/activity`,
|
||||
{
|
||||
after: timelineStack.start,
|
||||
before: timelineStack.end,
|
||||
timezone,
|
||||
},
|
||||
],
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const timelineGraphData = useMemo(() => {
|
||||
if (!activity) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const graphData: {
|
||||
[hour: string]: { objects: number[]; motion: GraphDataPoint[] };
|
||||
} = {};
|
||||
|
||||
Object.entries(activity).forEach(([hour, data]) => {
|
||||
const objects: number[] = [];
|
||||
const motion: GraphDataPoint[] = [];
|
||||
|
||||
data.forEach((seg, idx) => {
|
||||
if (seg.hasObjects) {
|
||||
objects.push(idx);
|
||||
}
|
||||
|
||||
motion.push({
|
||||
x: new Date(seg.date * 1000),
|
||||
y: seg.count,
|
||||
});
|
||||
});
|
||||
|
||||
graphData[hour] = { objects, motion };
|
||||
});
|
||||
|
||||
return graphData;
|
||||
}, [activity]);
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col">
|
||||
<div className="flex mt-2 max-h-[60%]">
|
||||
<DynamicVideoPlayer
|
||||
className="w-2/3 bg-black flex justify-center items-center"
|
||||
camera={initialPlayback.camera}
|
||||
timeRange={selectedPlayback.range}
|
||||
cameraPreviews={cameraPreviews}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setTimelineTime(timestamp);
|
||||
});
|
||||
|
||||
if (initialPlayback.timelineItems.length > 0) {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
selectedPlayback.timelineItems[0].timestamp,
|
||||
true
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="relative h-full w-1/3">
|
||||
<div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
|
||||
{selectedPlayback.timelineItems.map((timeline) => {
|
||||
return (
|
||||
<TimelineItemCard
|
||||
key={timeline.timestamp}
|
||||
timeline={timeline}
|
||||
relevantPreview={selectedPlayback.relevantPreview}
|
||||
onSelect={() => {
|
||||
controllerRef.current?.seekToTimelineItem(timeline);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-4 w-full h-full">
|
||||
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
|
||||
{timelineStack.playbackItems.map((timeline, tIdx) => {
|
||||
const isInitiallySelected =
|
||||
initialPlayback.range.start == timeline.range.start;
|
||||
const isSelected =
|
||||
timeline.range.start == selectedPlayback.range.start;
|
||||
const graphData = timelineGraphData[timeline.range.start];
|
||||
const start = new Date(timeline.range.start * 1000);
|
||||
const end = new Date(timeline.range.end * 1000);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={isInitiallySelected ? initialScrollRef : null}
|
||||
key={timeline.range.start}
|
||||
>
|
||||
{isSelected ? (
|
||||
<div className="p-2 relative bg-secondary bg-opacity-30 rounded-md">
|
||||
<ActivityScrubber
|
||||
timeBars={
|
||||
isSelected
|
||||
? [
|
||||
{
|
||||
time: new Date(
|
||||
Math.max(timeline.range.start, timelineTime) *
|
||||
1000
|
||||
),
|
||||
id: "playback",
|
||||
},
|
||||
]
|
||||
: []
|
||||
}
|
||||
options={{
|
||||
snap: null,
|
||||
min: start,
|
||||
max: end,
|
||||
start: start,
|
||||
end: end,
|
||||
zoomable: false,
|
||||
height: "120px",
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
controllerRef.current?.scrubToTimestamp(
|
||||
data.time.getTime() / 1000
|
||||
);
|
||||
setTimelineTime(data.time.getTime() / 1000);
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
data.time.getTime() / 1000,
|
||||
true
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{isSelected && graphData && (
|
||||
<div className="absolute left-2 right-2 top-0 h-[84px]">
|
||||
<TimelineGraph
|
||||
id={timeline.range.start.toString()}
|
||||
data={[
|
||||
{
|
||||
name: "Motion",
|
||||
data: graphData.motion,
|
||||
},
|
||||
]}
|
||||
objects={graphData.objects}
|
||||
start={graphData.motion[0].x.getTime()}
|
||||
end={graphData.motion.at(-1)!!.x.getTime()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<TimelineBar
|
||||
startTime={timeline.range.start}
|
||||
graphData={graphData}
|
||||
onClick={() => {
|
||||
setSelectedPlaybackIdx(tIdx);
|
||||
|
||||
let startTs;
|
||||
if (timeline.timelineItems.length > 0) {
|
||||
startTs = selectedPlayback.timelineItems[0].timestamp;
|
||||
} else {
|
||||
startTs = timeline.range.start;
|
||||
}
|
||||
|
||||
controllerRef.current?.seekToTimestamp(startTs, true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,149 +0,0 @@
|
||||
import HistoryCard from "@/components/card/HistoryCard";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import Heading from "@/components/ui/heading";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import {
|
||||
formatUnixTimestampToDateTime,
|
||||
getRangeForTimestamp,
|
||||
} from "@/utils/dateUtil";
|
||||
import { useCallback, useRef } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
type HistoryCardViewProps = {
|
||||
timelineCards: CardsData | never[];
|
||||
allPreviews: Preview[] | undefined;
|
||||
isMobile: boolean;
|
||||
isValidating: boolean;
|
||||
isDone: boolean;
|
||||
onNextPage: () => void;
|
||||
onDelete: (card: Card) => void;
|
||||
onItemSelected: (item: TimelinePlayback) => void;
|
||||
};
|
||||
|
||||
export default function HistoryCardView({
|
||||
timelineCards,
|
||||
allPreviews,
|
||||
isMobile,
|
||||
isValidating,
|
||||
isDone,
|
||||
onNextPage,
|
||||
onDelete,
|
||||
onItemSelected,
|
||||
}: HistoryCardViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
// hooks for infinite scroll
|
||||
const observer = useRef<IntersectionObserver | null>();
|
||||
const lastTimelineRef = useCallback(
|
||||
(node: HTMLElement | null) => {
|
||||
if (isValidating) return;
|
||||
if (observer.current) observer.current.disconnect();
|
||||
try {
|
||||
observer.current = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isDone) {
|
||||
onNextPage();
|
||||
}
|
||||
});
|
||||
if (node) observer.current.observe(node);
|
||||
} catch (e) {
|
||||
// no op
|
||||
}
|
||||
},
|
||||
[isValidating, isDone]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.entries(timelineCards)
|
||||
.reverse()
|
||||
.map(([day, timelineDay], dayIdx) => {
|
||||
return (
|
||||
<div key={day}>
|
||||
<Heading
|
||||
className="sticky py-2 -top-4 left-0 bg-background w-full z-20"
|
||||
as="h3"
|
||||
>
|
||||
{formatUnixTimestampToDateTime(parseInt(day), {
|
||||
strftime_fmt: "%A %b %d",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</Heading>
|
||||
{Object.entries(timelineDay).map(
|
||||
([hour, timelineHour], hourIdx) => {
|
||||
if (Object.values(timelineHour).length == 0) {
|
||||
return <div key={hour}></div>;
|
||||
}
|
||||
|
||||
const lastRow =
|
||||
dayIdx == Object.values(timelineCards).length - 1 &&
|
||||
hourIdx == Object.values(timelineDay).length - 1;
|
||||
const previewMap: { [key: string]: Preview | undefined } = {};
|
||||
|
||||
return (
|
||||
<div key={hour} ref={lastRow ? lastTimelineRef : null}>
|
||||
<Heading as="h4">
|
||||
{formatUnixTimestampToDateTime(parseInt(hour), {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour"
|
||||
? "%H:00"
|
||||
: "%I:00 %p",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</Heading>
|
||||
|
||||
<div className="flex flex-wrap">
|
||||
{Object.entries(timelineHour)
|
||||
.reverse()
|
||||
.map(([key, timeline]) => {
|
||||
const startTs = Object.values(timeline.entries)[0]
|
||||
.timestamp;
|
||||
let relevantPreview = previewMap[timeline.camera];
|
||||
|
||||
if (relevantPreview == undefined) {
|
||||
relevantPreview = previewMap[timeline.camera] =
|
||||
Object.values(allPreviews || []).find(
|
||||
(preview) =>
|
||||
preview.camera == timeline.camera &&
|
||||
preview.start < startTs &&
|
||||
preview.end > startTs
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<HistoryCard
|
||||
key={key}
|
||||
timeline={timeline}
|
||||
isMobile={isMobile}
|
||||
relevantPreview={relevantPreview}
|
||||
onClick={() => {
|
||||
onItemSelected({
|
||||
camera: timeline.camera,
|
||||
range: getRangeForTimestamp(timeline.time),
|
||||
timelineItems: Object.values(
|
||||
timelineHour
|
||||
).flatMap((card) =>
|
||||
card.camera == timeline.camera
|
||||
? card.entries
|
||||
: []
|
||||
),
|
||||
relevantPreview: relevantPreview,
|
||||
});
|
||||
}}
|
||||
onDelete={() => onDelete(timeline)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{lastRow && !isDone && <ActivityIndicator />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
import ActivityScrubber, {
|
||||
ScrubberItem,
|
||||
} from "@/components/scrubber/ActivityScrubber";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import {
|
||||
getTimelineDetectionIcon,
|
||||
getTimelineIcon,
|
||||
} from "@/utils/timelineUtil";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import DynamicVideoPlayer, {
|
||||
DynamicVideoController,
|
||||
} from "@/components/player/DynamicVideoPlayer";
|
||||
|
||||
type MobileTimelineViewProps = {
|
||||
playback: TimelinePlayback;
|
||||
};
|
||||
|
||||
export default function MobileTimelineView({
|
||||
playback,
|
||||
}: MobileTimelineViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
|
||||
const [timelineTime, setTimelineTime] = useState(
|
||||
playback.timelineItems.length > 0
|
||||
? playback.timelineItems[0].timestamp
|
||||
: playback.range.start
|
||||
);
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: playback.range.end,
|
||||
after: playback.range.start,
|
||||
};
|
||||
}, [playback]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
playback ? [`${playback.camera}/recordings`, recordingParams] : null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
if (!config || !recordings) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<DynamicVideoPlayer
|
||||
camera={playback.camera}
|
||||
timeRange={playback.range}
|
||||
cameraPreviews={
|
||||
playback.relevantPreview ? [playback.relevantPreview] : []
|
||||
}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setTimelineTime(timestamp);
|
||||
});
|
||||
|
||||
if (playback.timelineItems.length > 0) {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
playback.timelineItems[0].timestamp,
|
||||
true
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="m-1">
|
||||
{playback != undefined && (
|
||||
<ActivityScrubber
|
||||
items={timelineItemsToScrubber(playback.timelineItems)}
|
||||
timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
|
||||
options={{
|
||||
start: new Date(playback.range.start * 1000),
|
||||
end: new Date(playback.range.end * 1000),
|
||||
snap: null,
|
||||
min: new Date(playback.range.start * 1000),
|
||||
max: new Date(playback.range.end * 1000),
|
||||
timeAxis: { scale: "minute", step: 15 },
|
||||
zoomable: false,
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
controllerRef.current?.scrubToTimestamp(
|
||||
data.time.getTime() / 1000
|
||||
);
|
||||
setTimelineTime(data.time.getTime() / 1000);
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
controllerRef.current?.seekToTimestamp(
|
||||
data.time.getTime() / 1000,
|
||||
true
|
||||
);
|
||||
}}
|
||||
selectHandler={(data) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = parseFloat(data.items[0].split("-")[0]);
|
||||
|
||||
const timeline = playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
);
|
||||
|
||||
if (timeline) {
|
||||
controllerRef.current?.seekToTimelineItem(timeline);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
|
||||
return items.map((item, idx) => {
|
||||
return {
|
||||
id: `${item.timestamp}-${idx}`,
|
||||
content: getTimelineContentElement(item),
|
||||
start: new Date(item.timestamp * 1000),
|
||||
end: new Date(item.timestamp * 1000),
|
||||
type: "box",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getTimelineContentElement(item: Timeline): HTMLElement {
|
||||
const output = document.createElement(`div-${item.timestamp}`);
|
||||
output.innerHTML = renderToStaticMarkup(
|
||||
<div className="flex items-center">
|
||||
{getTimelineDetectionIcon(item)} : {getTimelineIcon(item)}
|
||||
</div>
|
||||
);
|
||||
return output;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user