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: 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 { h } from 'preact';
import { TimelineEventBlock } from './Timeline'; import { useCallback } from 'preact/hooks';
import { getColorFromTimelineEvent } from '../../utils/Timeline/timelineEventUtils';
import { TimelineEventBlock } from './TimelineEventBlock';
interface TimelineBlockViewProps { interface TimelineBlockViewProps {
block: TimelineEventBlock; block: TimelineEventBlock;
@ -7,24 +9,12 @@ interface TimelineBlockViewProps {
} }
export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => { export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
const onClickHandler = () => onClick(block); const onClickHandler = useCallback(() => onClick(block), [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';
};
return ( return (
<div <div
key={block.id} key={block.id}
onClick={onClickHandler} 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={{ style={{
top: `${block.yOffset}px`, top: `${block.yOffset}px`,
left: `${block.positionX}px`, left: `${block.positionX}px`,