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

refactor: TimelineBlockView

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-16 21:32:37 -06:00
parent 614687261e
commit b06ae138f7
1 changed files with 5 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/components/Timeline/TimelineBlockView.tsx
View File

@ -1,5 +1,7 @@
import { h } from 'preact';
import { TimelineEventBlock } from './Timeline';
import { useCallback } from 'preact/hooks';
import { getColorFromTimelineEvent } from '../../utils/Timeline/timelineEventUtils';
import { TimelineEventBlock } from './TimelineEventBlock';
interface TimelineBlockViewProps {
block: TimelineEventBlock;
@ -7,24 +9,12 @@ interface TimelineBlockViewProps {
}
export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
const onClickHandler = () => onClick(block);
const getColor = (eventBlock: TimelineEventBlock) => {
if (eventBlock.label === 'car') {
return 'red';
} else if (eventBlock.label === 'person') {
return 'blue';
} else if (eventBlock.label === 'dog') {
return 'green';
}
return 'gray';
};
const onClickHandler = useCallback(() => onClick(block), [block]);
return (
<div
key={block.id}
onClick={onClickHandler}
className={`absolute z-10 rounded-full bg-${getColor(block)}-400 h-2`}
className={`absolute z-10 rounded-full bg-${getColorFromTimelineEvent(block)}-400 h-2`}
style={{
top: `${block.yOffset}px`,
left: `${block.positionX}px`,