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

refactor: TimelineBlocks

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

60
web/src/components/Timeline/TimelineBlocks.tsx
View File

@ -1,47 +1,29 @@
import { h } from 'preact'; import { h } from 'preact';
import { TimelineEventBlock } from './Timeline'; import { useMemo } from 'preact/hooks';
import { findLargestYOffsetInBlocks, getTimelineWidthFromBlocks } from '../../utils/Timeline/timelineEventUtils';
import { convertRemToPixels } from '../../utils/windowUtils';
import { TimelineBlockView } from './TimelineBlockView'; import { TimelineBlockView } from './TimelineBlockView';
import { TimelineEventBlock } from './TimelineEventBlock';
interface TimelineBlocksProps { interface TimelineBlocksProps {
timeline: TimelineEventBlock[]; timeline: TimelineEventBlock[];
firstBlockOffset: number; firstBlockOffset: number;
onEventClick: (block: TimelineEventBlock) => void; onEventClick: (block: TimelineEventBlock) => void;
} }
export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: TimelineBlocksProps) => { export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: TimelineBlocksProps) => {
const convertRemToPixels = (rem) => { const timelineEventBlocks = useMemo(() => {
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); if (timeline.length > 0 && firstBlockOffset) {
}; const largestYOffsetInBlocks = findLargestYOffsetInBlocks(timeline);
const timelineContainerHeight = largestYOffsetInBlocks + convertRemToPixels(1);
const getMaxYOffset = () => { const timelineContainerWidth = getTimelineWidthFromBlocks(timeline, firstBlockOffset);
return timeline.reduce((accumulation, current) => { const timelineBlockOffset = (timelineContainerHeight - largestYOffsetInBlocks) / 2;
if (current.yOffset > accumulation) {
accumulation = current.yOffset;
}
return accumulation;
}, 0);
};
const getTimelineContainerHeight = () => {
return getMaxYOffset() + convertRemToPixels(1);
};
const calculateTimelineContainerWidth = () => {
if (timeline.length > 0) {
const startTimeEpoch = timeline[0].startTime.getTime();
const endTimeEpoch = new Date().getTime();
return Math.round(Math.abs(endTimeEpoch - startTimeEpoch) / 1000) + firstBlockOffset * 2;
}
};
const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
if (timeline.length > 0) {
return ( return (
<div <div
className='relative' className='relative'
style={{ style={{
height: `${getTimelineContainerHeight()}px`, height: `${timelineContainerHeight}px`,
width: `${calculateTimelineContainerWidth()}px`, width: `${timelineContainerWidth}px`,
background: "url('/marker.png')", background: "url('/marker.png')",
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundSize: '30px', backgroundSize: '30px',
@ -49,17 +31,17 @@ export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: Tim
}} }}
> >
{timeline.map((block) => { {timeline.map((block) => {
return ( const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
<TimelineBlockView const updatedBlock: TimelineEventBlock = {
block={{
...block, ...block,
yOffset: block.yOffset + (getTimelineContainerHeight() - getMaxYOffset()) / 2, yOffset: block.yOffset + timelineBlockOffset,
}} };
onClick={onClickHandler} return <TimelineBlockView block={updatedBlock} onClick={onClickHandler} />;
/>
);
})} })}
</div> </div>
); );
} }
}, [timeline, onEventClick, firstBlockOffset]);
return timelineEventBlocks;
}; };