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

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

@ -1,65 +1,47 @@
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) { return (
accumulation = current.yOffset; <div
} className='relative'
return accumulation; style={{
}, 0); height: `${timelineContainerHeight}px`,
}; width: `${timelineContainerWidth}px`,
background: "url('/marker.png')",
const getTimelineContainerHeight = () => { backgroundPosition: 'center',
return getMaxYOffset() + convertRemToPixels(1); backgroundSize: '30px',
}; backgroundRepeat: 'repeat',
}}
const calculateTimelineContainerWidth = () => { >
if (timeline.length > 0) { {timeline.map((block) => {
const startTimeEpoch = timeline[0].startTime.getTime(); const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
const endTimeEpoch = new Date().getTime(); const updatedBlock: TimelineEventBlock = {
return Math.round(Math.abs(endTimeEpoch - startTimeEpoch) / 1000) + firstBlockOffset * 2; ...block,
yOffset: block.yOffset + timelineBlockOffset,
};
return <TimelineBlockView block={updatedBlock} onClick={onClickHandler} />;
})}
</div>
);
} }
}; }, [timeline, onEventClick, firstBlockOffset]);
const onClickHandler = (block: TimelineEventBlock) => onEventClick(block); return timelineEventBlocks;
if (timeline.length > 0) {
return (
<div
className='relative'
style={{
height: `${getTimelineContainerHeight()}px`,
width: `${calculateTimelineContainerWidth()}px`,
background: "url('/marker.png')",
backgroundPosition: 'center',
backgroundSize: '30px',
backgroundRepeat: 'repeat',
}}
>
{timeline.map((block) => {
return (
<TimelineBlockView
block={{
...block,
yOffset: block.yOffset + (getTimelineContainerHeight() - getMaxYOffset()) / 2,
}}
onClick={onClickHandler}
/>
);
})}
</div>
);
}
}; };