|
| 1 | +import { Block } from "jsxstyle"; |
| 2 | +import { useEffect, useRef, useState } from "react"; |
| 3 | +import { getFileNameForDate } from "../src/getFileNameForDate"; |
| 4 | +import { StatusResponse } from "../src/types"; |
| 5 | + |
| 6 | +export type PlayheadSpeed = "realtime" | number; |
| 7 | + |
| 8 | +interface PlayheadProps { |
| 9 | + speed: PlayheadSpeed; |
| 10 | + status: Omit<StatusResponse, "type"> | undefined; |
| 11 | + setSpeed: (speed: PlayheadSpeed) => void; |
| 12 | + setTimestamp: (timestamp: number) => void; |
| 13 | +} |
| 14 | + |
| 15 | +const tenMinutePx = 200; |
| 16 | +const oneMinuteMs = 1000 * 60; |
| 17 | +const tenMinutesMs = 10 * oneMinuteMs; |
| 18 | +// give event processing a minute to upload latest data to S3 |
| 19 | +const windowBuffer = 11 * oneMinuteMs; |
| 20 | + |
| 21 | +export const Playhead: React.FC<PlayheadProps> = ({ setTimestamp, status }) => { |
| 22 | + const [playheadWidth, setPlayheadWidth] = useState<number>(0); |
| 23 | + const playheadContainerElementRef = useRef<HTMLDivElement>(null); |
| 24 | + const [now, setNow] = useState(new Date().valueOf()); |
| 25 | + |
| 26 | + useEffect(() => { |
| 27 | + const nowTimer = setInterval(() => { |
| 28 | + setNow(new Date().valueOf()); |
| 29 | + }, 5000); |
| 30 | + |
| 31 | + return () => clearInterval(nowTimer); |
| 32 | + }); |
| 33 | + |
| 34 | + useEffect(() => { |
| 35 | + const ref = playheadContainerElementRef.current; |
| 36 | + if (!ref) return; |
| 37 | + const resizeObserver = new ResizeObserver((things) => { |
| 38 | + for (const thing of things) { |
| 39 | + if (thing.target !== ref) continue; |
| 40 | + setPlayheadWidth(thing.contentRect.width); |
| 41 | + } |
| 42 | + }); |
| 43 | + |
| 44 | + resizeObserver.observe(ref); |
| 45 | + return () => { |
| 46 | + resizeObserver.unobserve(ref); |
| 47 | + resizeObserver.disconnect(); |
| 48 | + }; |
| 49 | + }, [playheadContainerElementRef.current]); |
| 50 | + |
| 51 | + const totalElements = Math.max(playheadWidth / tenMinutePx); |
| 52 | + const playheadElements = Array.from({ length: totalElements }).map( |
| 53 | + (_, index) => { |
| 54 | + const windowDate = new Date(now - tenMinutesMs * index - windowBuffer); |
| 55 | + windowDate.setMinutes(Math.floor(windowDate.getMinutes() / 10) * 10); |
| 56 | + windowDate.setSeconds(0); |
| 57 | + windowDate.setMilliseconds(0); |
| 58 | + const key = getFileNameForDate(windowDate); |
| 59 | + |
| 60 | + const isCurrentItem = status?.timestamp === key; |
| 61 | + |
| 62 | + const progressElement = !isCurrentItem ? null : ( |
| 63 | + <Block> |
| 64 | + {(status.currentIndex + 1).toLocaleString()} of{" "} |
| 65 | + {status.total.toLocaleString()} events |
| 66 | + </Block> |
| 67 | + ); |
| 68 | + |
| 69 | + return ( |
| 70 | + <Block |
| 71 | + component="button" |
| 72 | + key={key} |
| 73 | + position="absolute" |
| 74 | + appearance="none" |
| 75 | + WebkitAppearance="none" |
| 76 | + border="none" |
| 77 | + backgroundColor="none" |
| 78 | + hoverBackgroundColor="none" |
| 79 | + width={tenMinutePx} |
| 80 | + borderBottom={status?.timestamp === key && "5px solid #888"} |
| 81 | + top={0} |
| 82 | + bottom={0} |
| 83 | + right={tenMinutePx * index} |
| 84 | + cursor="pointer" |
| 85 | + onClick={() => setTimestamp(windowDate.valueOf())} |
| 86 | + > |
| 87 | + {windowDate.toLocaleTimeString()} |
| 88 | + {progressElement} |
| 89 | + </Block> |
| 90 | + ); |
| 91 | + } |
| 92 | + ); |
| 93 | + |
| 94 | + return ( |
| 95 | + <Block |
| 96 | + height={50} |
| 97 | + flex="0 0 auto" |
| 98 | + position="relative" |
| 99 | + props={{ ref: playheadContainerElementRef }} |
| 100 | + > |
| 101 | + {playheadElements} |
| 102 | + </Block> |
| 103 | + ); |
| 104 | +}; |
0 commit comments