forked from Github/frigate
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
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user