forked from Github/frigate
Refactor history viewer to show player / timeline for full hour and use preview while scrubbing timeline (#9051)
* Move history card view to separate view and create timeline view * Get custom time scrubber working * Add back nav * Show timeline bounding boxes * Implement seeking limiter * Use browser history to allow back button to close timeline viewer * Fix mobile timeline and add more icons for detections * Play when item is initially visible
This commit is contained in:
Nicolas Mowen
committed by
Blake Blackshear
Blake Blackshear
parent
9a0dfa723a
commit
a946a8f099
145
web/src/views/history/HistoryCardView.tsx
Normal file
145
web/src/views/history/HistoryCardView.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
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 } 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,
|
||||
timelineItems: Object.values(
|
||||
timelineHour
|
||||
).flatMap((card) =>
|
||||
card.camera == timeline.camera
|
||||
? card.entries
|
||||
: []
|
||||
),
|
||||
relevantPreview: relevantPreview,
|
||||
});
|
||||
}}
|
||||
onDelete={() => onDelete(timeline)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{lastRow && !isDone && <ActivityIndicator />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
300
web/src/views/history/HistoryTimelineView.tsx
Normal file
300
web/src/views/history/HistoryTimelineView.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
|
||||
import VideoPlayer from "@/components/player/VideoPlayer";
|
||||
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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import Player from "video.js/dist/types/player";
|
||||
|
||||
type HistoryTimelineViewProps = {
|
||||
playback: TimelinePlayback;
|
||||
isMobile: boolean;
|
||||
};
|
||||
|
||||
export default function HistoryTimelineView({
|
||||
playback,
|
||||
isMobile,
|
||||
}: HistoryTimelineViewProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
const hasRelevantPreview = playback.relevantPreview != undefined;
|
||||
|
||||
const playerRef = useRef<Player | undefined>(undefined);
|
||||
const previewRef = useRef<Player | undefined>(undefined);
|
||||
|
||||
const [scrubbing, setScrubbing] = useState(false);
|
||||
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const [seeking, setSeeking] = useState(false);
|
||||
const [timeToSeek, setTimeToSeek] = useState<number | undefined>(undefined);
|
||||
|
||||
const annotationOffset = useMemo(() => {
|
||||
if (!config) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return (
|
||||
(config.cameras[playback.camera]?.detect?.annotation_offset || 0) / 1000
|
||||
);
|
||||
}, [config, playback]);
|
||||
|
||||
const timelineTime = useMemo(() => {
|
||||
if (!playback) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return playback.timelineItems.at(0)!!.timestamp;
|
||||
}, [playback]);
|
||||
const playbackTimes = useMemo(() => {
|
||||
const date = new Date(timelineTime * 1000);
|
||||
date.setMinutes(0, 0, 0);
|
||||
const startTime = date.getTime() / 1000;
|
||||
date.setHours(date.getHours() + 1);
|
||||
const endTime = date.getTime() / 1000;
|
||||
return {
|
||||
start: parseInt(startTime.toFixed(1)),
|
||||
end: parseInt(endTime.toFixed(1)),
|
||||
};
|
||||
}, [timelineTime]);
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: playbackTimes.end,
|
||||
after: playbackTimes.start,
|
||||
};
|
||||
}, [playbackTimes]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
playback ? [`${playback.camera}/recordings`, recordingParams] : null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const playbackUri = useMemo(() => {
|
||||
if (!playback) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = new Date(playbackTimes.start * 1000);
|
||||
return `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${
|
||||
playback.camera
|
||||
}/${timezone.replaceAll("/", ",")}/master.m3u8`;
|
||||
}, [playbackTimes]);
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(data: { items: number[] }) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = data.items[0];
|
||||
setFocusedItem(
|
||||
playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
);
|
||||
playerRef.current?.pause();
|
||||
|
||||
let seekSeconds = 0;
|
||||
(recordings || []).every((segment) => {
|
||||
// if the next segment is past the desired time, stop calculating
|
||||
if (segment.start_time > selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (segment.end_time < selected) {
|
||||
seekSeconds += segment.end_time - segment.start_time;
|
||||
return true;
|
||||
}
|
||||
|
||||
seekSeconds +=
|
||||
segment.end_time -
|
||||
segment.start_time -
|
||||
(segment.end_time - selected);
|
||||
return true;
|
||||
});
|
||||
playerRef.current?.currentTime(seekSeconds);
|
||||
}
|
||||
},
|
||||
[annotationOffset, recordings, playerRef]
|
||||
);
|
||||
|
||||
const onScrubTime = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
if (!hasRelevantPreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (playerRef.current?.paused() == false) {
|
||||
setScrubbing(true);
|
||||
playerRef.current?.pause();
|
||||
}
|
||||
|
||||
const seekTimestamp = data.time.getTime() / 1000;
|
||||
const seekTime = seekTimestamp - playback.relevantPreview!!.start;
|
||||
setTimeToSeek(Math.round(seekTime));
|
||||
},
|
||||
[scrubbing, playerRef]
|
||||
);
|
||||
|
||||
const onStopScrubbing = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
const playbackTime = data.time.getTime() / 1000;
|
||||
playerRef.current?.currentTime(playbackTime - playbackTimes.start);
|
||||
setScrubbing(false);
|
||||
playerRef.current?.play();
|
||||
},
|
||||
[playerRef]
|
||||
);
|
||||
|
||||
// handle seeking to next frame when seek is finished
|
||||
useEffect(() => {
|
||||
if (seeking) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (timeToSeek && timeToSeek != previewRef.current?.currentTime()) {
|
||||
setSeeking(true);
|
||||
previewRef.current?.currentTime(timeToSeek);
|
||||
}
|
||||
}, [timeToSeek, seeking]);
|
||||
|
||||
if (!config || !recordings) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<>
|
||||
<div
|
||||
className={`relative ${
|
||||
hasRelevantPreview && scrubbing ? "hidden" : "visible"
|
||||
}`}
|
||||
>
|
||||
<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.currentTime(timelineTime - playbackTimes.start);
|
||||
player.on("playing", () => {
|
||||
setFocusedItem(undefined);
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{config && focusedItem ? (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[playback.camera]}
|
||||
/>
|
||||
) : undefined}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
{hasRelevantPreview && (
|
||||
<div className={`${scrubbing ? "visible" : "hidden"}`}>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: false,
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${playback.relevantPreview?.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
previewRef.current = player;
|
||||
player.on("seeked", () => setSeeking(false));
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<div className="m-1">
|
||||
{playback != undefined && (
|
||||
<ActivityScrubber
|
||||
items={timelineItemsToScrubber(playback.timelineItems)}
|
||||
timeBars={
|
||||
hasRelevantPreview
|
||||
? [{ time: new Date(timelineTime * 1000), id: "playback" }]
|
||||
: []
|
||||
}
|
||||
options={{
|
||||
...(isMobile && {
|
||||
start: new Date(
|
||||
Math.max(playbackTimes.start, timelineTime - 300) * 1000
|
||||
),
|
||||
end: new Date(
|
||||
Math.min(playbackTimes.end, timelineTime + 300) * 1000
|
||||
),
|
||||
}),
|
||||
snap: null,
|
||||
min: new Date(playbackTimes.start * 1000),
|
||||
max: new Date(playbackTimes.end * 1000),
|
||||
timeAxis: isMobile ? { scale: "minute", step: 5 } : {},
|
||||
}}
|
||||
timechangeHandler={onScrubTime}
|
||||
timechangedHandler={onStopScrubbing}
|
||||
selectHandler={onSelectItem}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function timelineItemsToScrubber(items: Timeline[]): ScrubberItem[] {
|
||||
return items.map((item) => {
|
||||
return {
|
||||
id: item.timestamp,
|
||||
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