administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 09:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: refactor

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-16 12:13:07 -06:00
parent 212287fc60
commit 058febfb2a
3 changed files with 12 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/HistoryViewer/HistoryViewer.tsx
View File

@ -3,17 +3,14 @@ import { useEffect, useState } from 'preact/hooks';
import { useEvents } from '../../api'; import { useEvents } from '../../api';
import { useSearchString } from '../../hooks/useSearchString'; import { useSearchString } from '../../hooks/useSearchString';
import { HistoryHeader } from './HistoryHeader'; import { HistoryHeader } from './HistoryHeader';
import Timeline, { TimelineChangeEvent, TimelineEvent, TimelineEventBlock } from '../Timeline/Timeline'; import Timeline from '../Timeline/Timeline';
import { HistoryVideo } from './HistoryVideo'; import { HistoryVideo } from './HistoryVideo';
import { TimelineEvent } from '../Timeline/TimelineEvent';
const getLast24Hours = (): number => { import { TimelineChangeEvent } from '../Timeline/TimelineChangeEvent';
const currentTimeEpoch = new Date().getTime(); import { getNowYesterdayInLong } from '../../utils/dateUtil';
const twentyFourHoursAgoEpoch = new Date(currentTimeEpoch - 24 * 60 * 60 * 1000).getTime();
return twentyFourHoursAgoEpoch / 1000;
};
export default function HistoryViewer({ camera }) { export default function HistoryViewer({ camera }) {
const { searchString } = useSearchString(500, `camera=${camera}&after=${getLast24Hours()}`); const { searchString } = useSearchString(500, `camera=${camera}&after=${getNowYesterdayInLong()}`);
const { data: events } = useEvents(searchString); const { data: events } = useEvents(searchString);
const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined); const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined);

39
web/src/components/Timeline/Timeline.tsx
View File

@ -2,41 +2,16 @@ import { Fragment, h } from 'preact';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { longToDate } from '../../utils/dateUtil'; import { longToDate } from '../../utils/dateUtil';
import { TimelineBlocks } from './TimelineBlocks'; import { TimelineBlocks } from './TimelineBlocks';
import { TimelineChangeEvent } from './TimelineChangeEvent';
import { DisabledControls, TimelineControls } from './TimelineControls'; import { DisabledControls, TimelineControls } from './TimelineControls';
import { TimelineEvent } from './TimelineEvent';
export interface TimelineEvent { import { TimelineEventBlock } from './TimelineEventBlock';
start_time: number;
end_time: number;
startTime: Date;
endTime: Date;
id: string;
label: 'car' | 'person' | 'dog';
}
export interface TimelineEventBlock extends TimelineEvent {
index: number;
yOffset: number;
width: number;
positionX: number;
seconds: number;
}
export interface TimelineChangeEvent {
timelineEvent: TimelineEvent;
markerTime: Date;
seekComplete: boolean;
}
interface TimelineProps { interface TimelineProps {
events: TimelineEvent[]; events: TimelineEvent[];
onChange: (event: TimelineChangeEvent) => void; onChange: (event: TimelineChangeEvent) => void;
} }
interface ScrollPermission {
allowed: boolean;
resetAfterSeeked: boolean;
}
export default function Timeline({ events, onChange }: TimelineProps) { export default function Timeline({ events, onChange }: TimelineProps) {
const timelineContainerRef = useRef<HTMLDivElement>(undefined); const timelineContainerRef = useRef<HTMLDivElement>(undefined);
@ -49,7 +24,7 @@ export default function Timeline({ events, onChange }: TimelineProps) {
const [timelineOffset, setTimelineOffset] = useState<number | undefined>(undefined); const [timelineOffset, setTimelineOffset] = useState<number | undefined>(undefined);
const [markerTime, setMarkerTime] = useState<Date | undefined>(undefined); const [markerTime, setMarkerTime] = useState<Date | undefined>(undefined);
const [currentEvent, setCurrentEvent] = useState<TimelineEventBlock | undefined>(undefined); const [currentEvent, setCurrentEvent] = useState<TimelineEventBlock | undefined>(undefined);
const [scrollTimeout, setScrollTimeout] = useState<number | undefined>(undefined); const [scrollTimeout, setScrollTimeout] = useState<any | undefined>(undefined);
const [scrollPermission, setScrollPermission] = useState<ScrollPermission>({ const [scrollPermission, setScrollPermission] = useState<ScrollPermission>({
allowed: true, allowed: true,
resetAfterSeeked: false, resetAfterSeeked: false,
@ -134,12 +109,12 @@ export default function Timeline({ events, onChange }: TimelineProps) {
rowMap.push([current]); rowMap.push([current]);
return rowMap; return rowMap;
}, [] as TimelineEventBlock[][]) }, [] as TimelineEventBlock[][])
.flatMap((r, rowPosition) => { .flatMap((rows, rowPosition) => {
r.forEach((eventBlock) => { rows.forEach((eventBlock) => {
const OFFSET_DISTANCE_IN_PIXELS = 10; const OFFSET_DISTANCE_IN_PIXELS = 10;
eventBlock.yOffset = OFFSET_DISTANCE_IN_PIXELS * rowPosition; eventBlock.yOffset = OFFSET_DISTANCE_IN_PIXELS * rowPosition;
}); });
return r; return rows;
}) })
.sort((a, b) => a.startTime.getTime() - b.startTime.getTime()); .sort((a, b) => a.startTime.getTime() - b.startTime.getTime());
}; };

1
web/src/utils/dateUtil.js
View File

@ -1 +0,0 @@
export const longToDate = (long) => new Date(long * 1000);