mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-01-21 00:06:44 +01:00
Improve desktop timeline view (#9150)
* Break apart mobile and desktop timeline views * Set aspect ratio for player correctly * more modest default width * Add timeline item card * Get video player to fit * get layout going * More work on youtube view * Get video scaling working * Better dialog sizes * Show all timelines for day * Add full day of timelines * Improve hooks * Fix previews * Separate mobile and desktop views and don't rerender * cleanup * Optimizations and improvements * make preview dates more efficient * Remove seekbar and use timeline as seekbar * Improve background and scrubbing
This commit is contained in:
Nicolas Mowen
Blake Blackshear
parent
0ee81c7526
commit
160e331035
76
web/src/components/card/TimelineItemCard.tsx
Normal file
76
web/src/components/card/TimelineItemCard.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { getTimelineItemDescription } from "@/utils/timelineUtil";
|
||||
import { Button } from "../ui/button";
|
||||
import Logo from "../Logo";
|
||||
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import VideoPlayer from "../player/VideoPlayer";
|
||||
import { Card } from "../ui/card";
|
||||
|
||||
type TimelineItemCardProps = {
|
||||
timeline: Timeline;
|
||||
relevantPreview: Preview | undefined;
|
||||
onSelect: () => void;
|
||||
};
|
||||
export default function TimelineItemCard({
|
||||
timeline,
|
||||
relevantPreview,
|
||||
onSelect,
|
||||
}: TimelineItemCardProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
return (
|
||||
<Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
|
||||
<div className="w-1/2 p-2">
|
||||
{relevantPreview && (
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
height: "114",
|
||||
width: "202",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
fluid: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${relevantPreview.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
player.pause(); // autoplay + pause is required for iOS
|
||||
player.currentTime(timeline.timestamp - relevantPreview.start);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="px-2 py-1 w-1/2">
|
||||
<div className="capitalize font-semibold text-sm">
|
||||
{getTimelineItemDescription(timeline)}
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{formatUnixTimestampToDateTime(timeline.timestamp, {
|
||||
strftime_fmt:
|
||||
config?.ui.time_format == "24hour" ? "%H:%M:%S" : "%I:%M:%S %p",
|
||||
time_style: "medium",
|
||||
date_style: "medium",
|
||||
})}
|
||||
</div>
|
||||
<Button
|
||||
className="absolute bottom-1 right-1"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
>
|
||||
<div className="w-8 h-8">
|
||||
<Logo />
|
||||
</div>
|
||||
+
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -186,8 +186,8 @@ function PreviewContent({
|
||||
|
||||
const touchEnd = new Date().getTime();
|
||||
|
||||
// consider tap less than 500 ms
|
||||
if (touchEnd - touchStart < 500) {
|
||||
// consider tap less than 300 ms
|
||||
if (touchEnd - touchStart < 300) {
|
||||
onClick();
|
||||
}
|
||||
});
|
||||
@ -214,10 +214,11 @@ function PreviewContent({
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<div className={`${getPreviewWidth(camera, config)}`}>
|
||||
<div className="w-full">
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
aspectRatio: "16:9",
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
muted: true,
|
||||
@ -263,12 +264,12 @@ function isCurrentHour(timestamp: number) {
|
||||
function getPreviewWidth(camera: string, config: FrigateConfig) {
|
||||
const detect = config.cameras[camera].detect;
|
||||
|
||||
if (detect.width / detect.height < 1.0) {
|
||||
return "w-[120px]";
|
||||
if (detect.width / detect.height < 1) {
|
||||
return "w-1/2";
|
||||
}
|
||||
|
||||
if (detect.width / detect.height < 1.4) {
|
||||
return "w-[208px]";
|
||||
if (detect.width / detect.height < 16 / 9) {
|
||||
return "w-2/3";
|
||||
}
|
||||
|
||||
return "w-full";
|
||||
|
||||
@ -76,7 +76,7 @@ const domEvents: TimelineEventsWithMissing[] = [
|
||||
type ActivityScrubberProps = {
|
||||
className?: string;
|
||||
items?: TimelineItem[];
|
||||
timeBars?: { time: DateType; id?: IdType | undefined }[];
|
||||
timeBars?: { time: DateType; id: IdType }[];
|
||||
groups?: TimelineGroup[];
|
||||
options?: TimelineOptions;
|
||||
} & TimelineEventsHandlers;
|
||||
@ -94,6 +94,9 @@ function ActivityScrubber({
|
||||
timeline: null,
|
||||
});
|
||||
const [currentTime, setCurrentTime] = useState(Date.now());
|
||||
const [_, setCustomTimes] = useState<
|
||||
{ id: IdType; time: DateType }[]
|
||||
>([]);
|
||||
|
||||
const defaultOptions: TimelineOptions = {
|
||||
width: "100%",
|
||||
@ -161,6 +164,41 @@ function ActivityScrubber({
|
||||
};
|
||||
}, [containerRef]);
|
||||
|
||||
// need to keep custom times in sync
|
||||
useEffect(() => {
|
||||
if (!timelineRef.current.timeline || timeBars == undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCustomTimes((prevTimes) => {
|
||||
if (prevTimes.length == 0 && timeBars.length == 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
prevTimes
|
||||
.filter((x) => timeBars.find((y) => x.id == y.id) == undefined)
|
||||
.forEach((time) => {
|
||||
try {
|
||||
timelineRef.current.timeline?.removeCustomTime(time.id);
|
||||
} catch {}
|
||||
});
|
||||
|
||||
timeBars.forEach((time) => {
|
||||
try {
|
||||
const existing = timelineRef.current.timeline?.getCustomTime(time.id);
|
||||
|
||||
if (existing != time.time) {
|
||||
timelineRef.current.timeline?.setCustomTime(time.time, time.id);
|
||||
}
|
||||
} catch {
|
||||
timelineRef.current.timeline?.addCustomTime(time.time, time.id);
|
||||
}
|
||||
});
|
||||
|
||||
return timeBars;
|
||||
});
|
||||
}, [timeBars, timelineRef]);
|
||||
|
||||
return (
|
||||
<div className={className || ""}>
|
||||
<div ref={containerRef} />
|
||||
|
||||
@ -19,12 +19,13 @@ import {
|
||||
import HistoryFilterPopover from "@/components/filter/HistoryFilterPopover";
|
||||
import useApiFilter from "@/hooks/use-api-filter";
|
||||
import HistoryCardView from "@/views/history/HistoryCardView";
|
||||
import HistoryTimelineView from "@/views/history/HistoryTimelineView";
|
||||
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;
|
||||
|
||||
@ -76,10 +77,25 @@ function History() {
|
||||
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[]>(
|
||||
timelinePages
|
||||
? `preview/all/start/${timelinePages?.at(0)
|
||||
?.start}/end/${timelinePages?.at(-1)?.end}`
|
||||
previewTimes
|
||||
? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
|
||||
: null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
@ -104,9 +120,9 @@ function History() {
|
||||
return window.innerWidth < 768;
|
||||
}, [playback]);
|
||||
|
||||
const timelineCards: CardsData | never[] = useMemo(() => {
|
||||
const timelineCards: CardsData = useMemo(() => {
|
||||
if (!timelinePages) {
|
||||
return [];
|
||||
return {};
|
||||
}
|
||||
|
||||
return getHourlyTimelineData(
|
||||
@ -152,7 +168,7 @@ function History() {
|
||||
}
|
||||
}, [itemsToDelete, updateHistory]);
|
||||
|
||||
if (!config || !timelineCards || timelineCards.length == 0) {
|
||||
if (!config || !timelineCards) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
@ -217,6 +233,8 @@ function History() {
|
||||
onItemSelected={(item) => setPlaybackState(item)}
|
||||
/>
|
||||
<TimelineViewer
|
||||
timelineData={timelineCards}
|
||||
allPreviews={allPreviews || []}
|
||||
playback={viewingPlayback ? playback : undefined}
|
||||
isMobile={isMobile}
|
||||
onClose={() => setPlaybackState(undefined)}
|
||||
@ -226,25 +244,37 @@ function History() {
|
||||
}
|
||||
|
||||
type TimelineViewerProps = {
|
||||
timelineData: CardsData | undefined;
|
||||
allPreviews: Preview[];
|
||||
playback: TimelinePlayback | undefined;
|
||||
isMobile: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
function TimelineViewer({ playback, isMobile, onClose }: TimelineViewerProps) {
|
||||
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">
|
||||
<HistoryTimelineView playback={playback} isMobile={isMobile} />
|
||||
{timelineData && <MobileTimelineView playback={playback} />}
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
|
||||
<DialogContent className="w-3/5 max-w-full">
|
||||
{playback && (
|
||||
<HistoryTimelineView playback={playback} isMobile={isMobile} />
|
||||
<DialogContent className="md:max-w-2xl lg:max-w-4xl xl:max-w-6xl 2xl:max-w-7xl 3xl:max-w-[1720px]">
|
||||
{timelineData && playback && (
|
||||
<DesktopTimelineView
|
||||
timelineData={timelineData}
|
||||
allPreviews={allPreviews}
|
||||
initialPlayback={playback}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
type CardsData = {
|
||||
[key: string]: {
|
||||
[key: string]: {
|
||||
[key: string]: Card;
|
||||
[day: string]: {
|
||||
[hour: string]: {
|
||||
[groupKey: string]: Card;
|
||||
};
|
||||
};
|
||||
};
|
||||
@ -58,6 +58,7 @@ interface HistoryFilter extends FilterType {
|
||||
|
||||
type TimelinePlayback = {
|
||||
camera: string;
|
||||
range: { start: number; end: number };
|
||||
timelineItems: Timeline[];
|
||||
relevantPreview: Preview | undefined;
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import strftime from 'strftime';
|
||||
import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
|
||||
import strftime from "strftime";
|
||||
import { fromUnixTime, intervalToDuration, formatDuration } from "date-fns";
|
||||
export const longToDate = (long: number): Date => new Date(long * 1000);
|
||||
export const epochToLong = (date: number): number => date / 1000;
|
||||
export const dateToLong = (date: Date): number => epochToLong(date.getTime());
|
||||
@ -276,3 +276,12 @@ const getUTCOffset = (date: Date, timezone: string): number => {
|
||||
|
||||
return (target.getTime() - utcDate.getTime()) / 60 / 1000;
|
||||
};
|
||||
|
||||
export function getRangeForTimestamp(timestamp: number) {
|
||||
const date = new Date(timestamp * 1000);
|
||||
date.setMinutes(0, 0, 0);
|
||||
const start = date.getTime() / 1000;
|
||||
date.setHours(date.getHours() + 1);
|
||||
const end = date.getTime() / 1000;
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ const GROUP_SECONDS = 60;
|
||||
export function getHourlyTimelineData(
|
||||
timelinePages: HourlyTimeline[],
|
||||
detailLevel: string
|
||||
) {
|
||||
): CardsData {
|
||||
const cards: CardsData = {};
|
||||
timelinePages.forEach((hourlyTimeline) => {
|
||||
Object.keys(hourlyTimeline["hours"])
|
||||
@ -101,3 +101,83 @@ export function getHourlyTimelineData(
|
||||
|
||||
return cards;
|
||||
}
|
||||
|
||||
export function getTimelineHoursForDay(
|
||||
camera: string,
|
||||
cards: CardsData,
|
||||
allPreviews: Preview[],
|
||||
timestamp: number
|
||||
): TimelinePlayback[] {
|
||||
const now = new Date();
|
||||
const data: TimelinePlayback[] = [];
|
||||
const startDay = new Date(timestamp * 1000);
|
||||
startDay.setHours(23, 59, 59, 999);
|
||||
const dayEnd = startDay.getTime() / 1000;
|
||||
startDay.setHours(0, 0, 0, 0);
|
||||
let start = startDay.getTime() / 1000;
|
||||
let end = 0;
|
||||
|
||||
const relevantPreviews = allPreviews.filter((preview) => {
|
||||
return (
|
||||
preview.camera == camera &&
|
||||
preview.start >= start &&
|
||||
Math.floor(preview.end - 1) <= dayEnd
|
||||
);
|
||||
});
|
||||
|
||||
const dayIdx = Object.keys(cards).find((day) => {
|
||||
if (parseInt(day) > start) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (dayIdx == undefined) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const day = cards[dayIdx];
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
startDay.setHours(startDay.getHours() + 1);
|
||||
|
||||
if (startDay > now) {
|
||||
break;
|
||||
}
|
||||
|
||||
end = startDay.getTime() / 1000;
|
||||
const hour = Object.values(day).find((cards) => {
|
||||
if (
|
||||
Object.values(cards)[0].time < start ||
|
||||
Object.values(cards)[0].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 = relevantPreviews.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 data.reverse();
|
||||
}
|
||||
|
||||
347
web/src/views/history/DesktopTimelineView.tsx
Normal file
347
web/src/views/history/DesktopTimelineView.tsx
Normal file
@ -0,0 +1,347 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import TimelineEventOverlay from "@/components/overlay/TimelineDataOverlay";
|
||||
import VideoPlayer from "@/components/player/VideoPlayer";
|
||||
import ActivityScrubber from "@/components/scrubber/ActivityScrubber";
|
||||
import ActivityIndicator from "@/components/ui/activity-indicator";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import TimelineItemCard from "@/components/card/TimelineItemCard";
|
||||
import { getTimelineHoursForDay } from "@/utils/historyUtil";
|
||||
|
||||
type DesktopTimelineViewProps = {
|
||||
timelineData: CardsData;
|
||||
allPreviews: Preview[];
|
||||
initialPlayback: TimelinePlayback;
|
||||
};
|
||||
|
||||
export default function DesktopTimelineView({
|
||||
timelineData,
|
||||
allPreviews,
|
||||
initialPlayback,
|
||||
}: DesktopTimelineViewProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
() =>
|
||||
config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
[config]
|
||||
);
|
||||
|
||||
const [selectedPlayback, setSelectedPlayback] = useState(initialPlayback);
|
||||
|
||||
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 [timelineTime, setTimelineTime] = useState(
|
||||
initialPlayback.timelineItems.length > 0
|
||||
? initialPlayback.timelineItems[0].timestamp - initialPlayback.range.start
|
||||
: 0
|
||||
);
|
||||
|
||||
const annotationOffset = useMemo(() => {
|
||||
if (!config) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return (
|
||||
(config.cameras[initialPlayback.camera]?.detect?.annotation_offset || 0) /
|
||||
1000
|
||||
);
|
||||
}, [config]);
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: selectedPlayback.range.end,
|
||||
after: selectedPlayback.range.start,
|
||||
};
|
||||
}, [selectedPlayback]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
selectedPlayback
|
||||
? [`${selectedPlayback.camera}/recordings`, recordingParams]
|
||||
: null,
|
||||
{ revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const playbackUri = useMemo(() => {
|
||||
if (!selectedPlayback) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = new Date(selectedPlayback.range.start * 1000);
|
||||
return `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${
|
||||
selectedPlayback.camera
|
||||
}/${timezone.replaceAll("/", ",")}/master.m3u8`;
|
||||
}, [selectedPlayback]);
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(timeline: Timeline | undefined) => {
|
||||
if (timeline) {
|
||||
setFocusedItem(timeline);
|
||||
const selected = timeline.timestamp;
|
||||
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);
|
||||
} else {
|
||||
setFocusedItem(undefined);
|
||||
}
|
||||
},
|
||||
[annotationOffset, recordings, 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]);
|
||||
|
||||
// handle loading main / preview playback when selected hour changes
|
||||
useEffect(() => {
|
||||
if (!playerRef.current || !previewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimelineTime(
|
||||
selectedPlayback.timelineItems.length > 0
|
||||
? selectedPlayback.timelineItems[0].timestamp
|
||||
: selectedPlayback.range.start
|
||||
);
|
||||
|
||||
playerRef.current.src({
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
});
|
||||
|
||||
if (selectedPlayback.relevantPreview) {
|
||||
previewRef.current.src({
|
||||
src: selectedPlayback.relevantPreview.src,
|
||||
type: selectedPlayback.relevantPreview.type,
|
||||
});
|
||||
}
|
||||
}, [playerRef, previewRef, selectedPlayback]);
|
||||
|
||||
const timelineStack = useMemo(
|
||||
() =>
|
||||
getTimelineHoursForDay(
|
||||
selectedPlayback.camera,
|
||||
timelineData,
|
||||
allPreviews,
|
||||
selectedPlayback.range.start + 60
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
if (!config) {
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex">
|
||||
<>
|
||||
<div className="w-2/3 bg-black flex justify-center items-center">
|
||||
<div
|
||||
className={`w-full relative ${
|
||||
selectedPlayback.relevantPreview != undefined && scrubbing
|
||||
? "hidden"
|
||||
: "visible"
|
||||
}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: true,
|
||||
sources: [
|
||||
{
|
||||
src: playbackUri,
|
||||
type: "application/vnd.apple.mpegurl",
|
||||
},
|
||||
],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: false,
|
||||
progressControl: {
|
||||
seekBar: false,
|
||||
},
|
||||
},
|
||||
}}
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
|
||||
if (selectedPlayback.timelineItems.length > 0) {
|
||||
player.currentTime(
|
||||
selectedPlayback.timelineItems[0].timestamp -
|
||||
selectedPlayback.range.start
|
||||
);
|
||||
} else {
|
||||
player.currentTime(0);
|
||||
}
|
||||
player.on("playing", () => onSelectItem(undefined));
|
||||
player.on("timeupdate", () => {
|
||||
setTimelineTime(Math.floor(player.currentTime() || 0));
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
playerRef.current = undefined;
|
||||
}}
|
||||
>
|
||||
{focusedItem && (
|
||||
<TimelineEventOverlay
|
||||
timeline={focusedItem}
|
||||
cameraConfig={config.cameras[selectedPlayback.camera]}
|
||||
/>
|
||||
)}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
{selectedPlayback.relevantPreview && (
|
||||
<div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
preload: "auto",
|
||||
autoplay: false,
|
||||
controls: false,
|
||||
muted: true,
|
||||
loadingSpinner: false,
|
||||
sources: [
|
||||
{
|
||||
src: `${selectedPlayback.relevantPreview?.src}`,
|
||||
type: "video/mp4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
seekOptions={{}}
|
||||
onReady={(player) => {
|
||||
previewRef.current = player;
|
||||
player.on("seeked", () => setSeeking(false));
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<div className="px-2 h-[608px] overflow-auto">
|
||||
{selectedPlayback.timelineItems.map((timeline) => {
|
||||
return (
|
||||
<TimelineItemCard
|
||||
key={timeline.timestamp}
|
||||
timeline={timeline}
|
||||
relevantPreview={selectedPlayback.relevantPreview}
|
||||
onSelect={() => onSelectItem(timeline)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-1 max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
|
||||
{timelineStack.map((timeline) => {
|
||||
const isSelected =
|
||||
timeline.range.start == selectedPlayback.range.start;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={timeline.range.start}
|
||||
className={`p-2 ${isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""}`}
|
||||
>
|
||||
<ActivityScrubber
|
||||
items={[]}
|
||||
timeBars={
|
||||
isSelected && selectedPlayback.relevantPreview
|
||||
? [
|
||||
{
|
||||
time: new Date(
|
||||
(timeline.range.start + timelineTime) * 1000
|
||||
),
|
||||
id: "playback",
|
||||
},
|
||||
]
|
||||
: []
|
||||
}
|
||||
options={{
|
||||
snap: null,
|
||||
min: new Date(timeline.range.start * 1000),
|
||||
max: new Date(timeline.range.end * 1000),
|
||||
zoomable: false,
|
||||
}}
|
||||
timechangeHandler={(data) => {
|
||||
if (!timeline.relevantPreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (playerRef.current?.paused() == false) {
|
||||
setScrubbing(true);
|
||||
playerRef.current?.pause();
|
||||
}
|
||||
|
||||
const seekTimestamp = data.time.getTime() / 1000;
|
||||
const seekTime =
|
||||
seekTimestamp - timeline.relevantPreview.start;
|
||||
setTimelineTime(seekTimestamp - timeline.range.start);
|
||||
setTimeToSeek(Math.round(seekTime));
|
||||
}}
|
||||
timechangedHandler={(data) => {
|
||||
const playbackTime = data.time.getTime() / 1000;
|
||||
playerRef.current?.currentTime(
|
||||
playbackTime - timeline.range.start
|
||||
);
|
||||
setScrubbing(false);
|
||||
playerRef.current?.play();
|
||||
}}
|
||||
doubleClickHandler={() => {
|
||||
setSelectedPlayback(timeline);
|
||||
}}
|
||||
selectHandler={(data) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = data.items[0];
|
||||
onSelectItem(
|
||||
selectedPlayback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,7 +2,10 @@ 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 {
|
||||
formatUnixTimestampToDateTime,
|
||||
getRangeForTimestamp,
|
||||
} from "@/utils/dateUtil";
|
||||
import { useCallback, useRef } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
@ -117,6 +120,7 @@ export default function HistoryCardView({
|
||||
onClick={() => {
|
||||
onItemSelected({
|
||||
camera: timeline.camera,
|
||||
range: getRangeForTimestamp(timeline.time),
|
||||
timelineItems: Object.values(
|
||||
timelineHour
|
||||
).flatMap((card) =>
|
||||
|
||||
@ -15,15 +15,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import Player from "video.js/dist/types/player";
|
||||
|
||||
type HistoryTimelineViewProps = {
|
||||
type MobileTimelineViewProps = {
|
||||
playback: TimelinePlayback;
|
||||
isMobile: boolean;
|
||||
};
|
||||
|
||||
export default function HistoryTimelineView({
|
||||
export default function MobileTimelineView({
|
||||
playback,
|
||||
isMobile,
|
||||
}: HistoryTimelineViewProps) {
|
||||
}: MobileTimelineViewProps) {
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const timezone = useMemo(
|
||||
@ -32,8 +30,6 @@ export default function HistoryTimelineView({
|
||||
[config]
|
||||
);
|
||||
|
||||
const hasRelevantPreview = playback.relevantPreview != undefined;
|
||||
|
||||
const playerRef = useRef<Player | undefined>(undefined);
|
||||
const previewRef = useRef<Player | undefined>(undefined);
|
||||
|
||||
@ -53,33 +49,20 @@ export default function HistoryTimelineView({
|
||||
return (
|
||||
(config.cameras[playback.camera]?.detect?.annotation_offset || 0) / 1000
|
||||
);
|
||||
}, [config, playback]);
|
||||
}, [config]);
|
||||
|
||||
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 [timelineTime, setTimelineTime] = useState(
|
||||
playback.timelineItems.length > 0
|
||||
? playback.timelineItems[0].timestamp
|
||||
: playback.range.start
|
||||
);
|
||||
|
||||
const recordingParams = useMemo(() => {
|
||||
return {
|
||||
before: playbackTimes.end,
|
||||
after: playbackTimes.start,
|
||||
before: playback.range.end,
|
||||
after: playback.range.start,
|
||||
};
|
||||
}, [playbackTimes]);
|
||||
}, [playback]);
|
||||
const { data: recordings } = useSWR<Recording[]>(
|
||||
playback ? [`${playback.camera}/recordings`, recordingParams] : null,
|
||||
{ revalidateOnFocus: false }
|
||||
@ -90,23 +73,19 @@ export default function HistoryTimelineView({
|
||||
return "";
|
||||
}
|
||||
|
||||
const date = new Date(playbackTimes.start * 1000);
|
||||
const date = new Date(playback.range.start * 1000);
|
||||
return `${apiHost}vod/${date.getFullYear()}-${
|
||||
date.getMonth() + 1
|
||||
}/${date.getDate()}/${date.getHours()}/${
|
||||
playback.camera
|
||||
}/${timezone.replaceAll("/", ",")}/master.m3u8`;
|
||||
}, [playbackTimes]);
|
||||
}, [playback]);
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(data: { items: number[] }) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = data.items[0];
|
||||
setFocusedItem(
|
||||
playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
);
|
||||
(timeline: Timeline | undefined) => {
|
||||
if (timeline) {
|
||||
setFocusedItem(timeline);
|
||||
const selected = timeline.timestamp;
|
||||
playerRef.current?.pause();
|
||||
|
||||
let seekSeconds = 0;
|
||||
@ -128,6 +107,8 @@ export default function HistoryTimelineView({
|
||||
return true;
|
||||
});
|
||||
playerRef.current?.currentTime(seekSeconds);
|
||||
} else {
|
||||
setFocusedItem(undefined);
|
||||
}
|
||||
},
|
||||
[annotationOffset, recordings, playerRef]
|
||||
@ -135,7 +116,7 @@ export default function HistoryTimelineView({
|
||||
|
||||
const onScrubTime = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
if (!hasRelevantPreview) {
|
||||
if (!playback.relevantPreview) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -145,20 +126,21 @@ export default function HistoryTimelineView({
|
||||
}
|
||||
|
||||
const seekTimestamp = data.time.getTime() / 1000;
|
||||
const seekTime = seekTimestamp - playback.relevantPreview!!.start;
|
||||
const seekTime = seekTimestamp - playback.relevantPreview.start;
|
||||
setTimelineTime(seekTimestamp);
|
||||
setTimeToSeek(Math.round(seekTime));
|
||||
},
|
||||
[scrubbing, playerRef]
|
||||
[scrubbing, playerRef, playback]
|
||||
);
|
||||
|
||||
const onStopScrubbing = useCallback(
|
||||
(data: { time: Date }) => {
|
||||
const playbackTime = data.time.getTime() / 1000;
|
||||
playerRef.current?.currentTime(playbackTime - playbackTimes.start);
|
||||
playerRef.current?.currentTime(playbackTime - playback.range.start);
|
||||
setScrubbing(false);
|
||||
playerRef.current?.play();
|
||||
},
|
||||
[playerRef]
|
||||
[playback, playerRef]
|
||||
);
|
||||
|
||||
// handle seeking to next frame when seek is finished
|
||||
@ -182,7 +164,7 @@ export default function HistoryTimelineView({
|
||||
<>
|
||||
<div
|
||||
className={`relative ${
|
||||
hasRelevantPreview && scrubbing ? "hidden" : "visible"
|
||||
playback.relevantPreview && scrubbing ? "hidden" : "visible"
|
||||
}`}
|
||||
>
|
||||
<VideoPlayer
|
||||
@ -199,9 +181,9 @@ export default function HistoryTimelineView({
|
||||
seekOptions={{ forward: 10, backward: 5 }}
|
||||
onReady={(player) => {
|
||||
playerRef.current = player;
|
||||
player.currentTime(timelineTime - playbackTimes.start);
|
||||
player.currentTime(timelineTime - playback.range.start);
|
||||
player.on("playing", () => {
|
||||
setFocusedItem(undefined);
|
||||
onSelectItem(undefined);
|
||||
});
|
||||
}}
|
||||
onDispose={() => {
|
||||
@ -216,7 +198,7 @@ export default function HistoryTimelineView({
|
||||
) : undefined}
|
||||
</VideoPlayer>
|
||||
</div>
|
||||
{hasRelevantPreview && (
|
||||
{playback.relevantPreview && (
|
||||
<div className={`${scrubbing ? "visible" : "hidden"}`}>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
@ -249,27 +231,34 @@ export default function HistoryTimelineView({
|
||||
<ActivityScrubber
|
||||
items={timelineItemsToScrubber(playback.timelineItems)}
|
||||
timeBars={
|
||||
hasRelevantPreview
|
||||
playback.relevantPreview
|
||||
? [{ 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
|
||||
),
|
||||
}),
|
||||
start: new Date(
|
||||
Math.max(playback.range.start, timelineTime - 300) * 1000
|
||||
),
|
||||
end: new Date(
|
||||
Math.min(playback.range.end, timelineTime + 300) * 1000
|
||||
),
|
||||
snap: null,
|
||||
min: new Date(playbackTimes.start * 1000),
|
||||
max: new Date(playbackTimes.end * 1000),
|
||||
timeAxis: isMobile ? { scale: "minute", step: 5 } : {},
|
||||
min: new Date(playback.range.start * 1000),
|
||||
max: new Date(playback.range.end * 1000),
|
||||
timeAxis: { scale: "minute", step: 5 },
|
||||
}}
|
||||
timechangeHandler={onScrubTime}
|
||||
timechangedHandler={onStopScrubbing}
|
||||
selectHandler={onSelectItem}
|
||||
selectHandler={(data) => {
|
||||
if (data.items.length > 0) {
|
||||
const selected = data.items[0];
|
||||
onSelectItem(
|
||||
playback.timelineItems.find(
|
||||
(timeline) => timeline.timestamp == selected
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user