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

chore: reduce re-renders

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-16 21:33:39 -06:00
parent 799ca8646e
commit 2879bec3da
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Fragment, h } from 'preact'; import { Fragment, h } from 'preact';
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'; import { useEffect, useMemo, 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 { TimelineChangeEvent } from './TimelineChangeEvent';
@ -145,13 +145,15 @@ export default function Timeline({ events, onChange }: TimelineProps) {
}, [timeline]); }, [timeline]);
const checkMarkerForEvent = (markerTime: Date) => { const checkMarkerForEvent = (markerTime: Date) => {
markerTime.setMilliseconds(999); // adjust milliseconds to account for drift const adjustedMarkerTime = new Date(markerTime);
adjustedMarkerTime.setSeconds(markerTime.getSeconds() + 1);
return [...timeline] return [...timeline]
.reverse() .reverse()
.find( .find(
(timelineEvent) => (timelineEvent) =>
timelineEvent.startTime.getTime() <= markerTime.getTime() && timelineEvent.startTime.getTime() <= adjustedMarkerTime.getTime() &&
timelineEvent.endTime.getTime() >= markerTime.getTime() timelineEvent.endTime.getTime() >= adjustedMarkerTime.getTime()
); );
}; };
@ -249,8 +251,8 @@ export default function Timeline({ events, onChange }: TimelineProps) {
} }
}; };
const RenderTimelineBlocks = useCallback(() => { const timelineBlocks = useMemo(() => {
if (timelineOffset > 0 && timeline.length > 0) { if (timelineOffset && timeline.length > 0) {
return <TimelineBlocks timeline={timeline} firstBlockOffset={timelineOffset} onEventClick={handleViewEvent} />; return <TimelineBlocks timeline={timeline} firstBlockOffset={timelineOffset} onEventClick={handleViewEvent} />;
} }
}, [timeline, timelineOffset]); }, [timeline, timelineOffset]);
@ -276,7 +278,7 @@ export default function Timeline({ events, onChange }: TimelineProps) {
</div> </div>
</div> </div>
<div ref={timelineContainerRef} onScroll={onTimelineScrollHandler} className='overflow-x-auto hide-scroll'> <div ref={timelineContainerRef} onScroll={onTimelineScrollHandler} className='overflow-x-auto hide-scroll'>
<RenderTimelineBlocks /> {timelineBlocks}
</div> </div>
</div> </div>
</div> </div>
@ -285,6 +287,7 @@ export default function Timeline({ events, onChange }: TimelineProps) {
onPrevious={onPreviousHandler} onPrevious={onPreviousHandler}
onPlayPause={onPlayPauseHandler} onPlayPause={onPlayPauseHandler}
onNext={onNextHandler} onNext={onNextHandler}
className='mt-2'
/> />
</Fragment> </Fragment>
); );