diff --git a/web/src/components/Timeline.jsx b/web/src/components/Timeline.jsx index 99bfcdb01..788d19900 100644 --- a/web/src/components/Timeline.jsx +++ b/web/src/components/Timeline.jsx @@ -6,34 +6,32 @@ import { Next } from '../icons/Next'; import { Play } from '../icons/Play'; import { Previous } from '../icons/Previous'; import { TextTab } from './Tabs'; -import { longToDate } from '../utils/dateUtil' +import { longToDate } from '../utils/dateUtil'; -export default function Timeline({ camera, onChange }) { +export default function Timeline({ events, onChange }) { const timelineContainerRef = useRef(undefined); - const { searchString } = useSearchString(25, `camera=${camera}`); - const { data: events, status } = useEvents(searchString); const [timeline, setTimeline] = useState([]); const [timelineOffset, setTimelineOffset] = useState(); const [markerTime, setMarkerTime] = useState(); const [currentEvent, setCurrentEvent] = useState(); const [scrollTimeout, setScrollTimeout] = useState(); const [scrollActive, setScrollActive] = useState(true); - + useEffect(() => { - if (status === FetchStatus.LOADED && timelineOffset) { - const filteredEvents = [...events].reverse().filter(e => e.end_time !== undefined) + if (events && timelineOffset) { + const filteredEvents = [...events].reverse().filter((e) => e.end_time !== undefined); const firstEvent = events[events.length - 1]; if (firstEvent) { - setMarkerTime(longToDate(firstEvent.start_time)) - } - + setMarkerTime(longToDate(firstEvent.start_time)); + } + const firstEventTime = longToDate(firstEvent.start_time); const eventsMap = filteredEvents.map((e, i) => { - const startTime = longToDate(e.start_time) + const startTime = longToDate(e.start_time); const endTime = e.end_time ? longToDate(e.end_time) : new Date(); const seconds = Math.round(Math.abs(endTime - startTime) / 1000); - const positionX = Math.round((Math.abs(startTime - firstEventTime) / 1000) + timelineOffset); + const positionX = Math.round(Math.abs(startTime - firstEventTime) / 1000 + timelineOffset); return { ...e, startTime, @@ -41,146 +39,153 @@ export default function Timeline({ camera, onChange }) { seconds, width: seconds, positionX, - } - }) + }; + }); - const recentEvent = eventsMap[eventsMap.length - 1] + const recentEvent = eventsMap[eventsMap.length - 1]; const event = { ...recentEvent, id: recentEvent.id, index: eventsMap.length - 1, startTime: recentEvent.start_time, - endTime: recentEvent.end_time - } - setCurrentEvent(event) - setTimeline(eventsMap) + endTime: recentEvent.end_time, + }; + setCurrentEvent(event); + setTimeline(eventsMap); } - }, [events, timelineOffset]) + }, [events, timelineOffset]); const checkMarkerForEvent = (markerTime) => { if (!scrollActive) { - setScrollActive(true) - return + setScrollActive(true); + return; } if (timeline) { - const foundIndex = timeline.findIndex((event => event.startTime <= markerTime && markerTime <= event.endTime)) + const foundIndex = timeline.findIndex((event) => event.startTime <= markerTime && markerTime <= event.endTime); if (foundIndex > -1) { - const found = timeline[foundIndex] + const found = timeline[foundIndex]; setCurrentEvent({ ...found, id: found.id, index: foundIndex, startTime: found.start_time, - endTime: found.end_time - }) + endTime: found.end_time, + }); } - } - } + }; - const handleScroll = event => { - clearTimeout(scrollTimeout) + const handleScroll = (event) => { + clearTimeout(scrollTimeout); - const scrollPosition = event.target.scrollLeft - const startTime = longToDate(timeline[0].start_time) - const markerTime = new Date((startTime.getTime()) + (scrollPosition * 1000)); - setMarkerTime(markerTime) + const scrollPosition = event.target.scrollLeft; + const startTime = longToDate(timeline[0].start_time); + const markerTime = new Date(startTime.getTime() + scrollPosition * 1000); + setMarkerTime(markerTime); - setScrollTimeout(setTimeout(() => { - checkMarkerForEvent(markerTime) - }, 250)) - } - - useEffect(() => { - if (timelineContainerRef) { - const timelineContainerWidth = timelineContainerRef.current.offsetWidth - const offset = Math.round(timelineContainerWidth / 2) - setTimelineOffset(offset); - } - }, [timelineContainerRef]) + setScrollTimeout( + setTimeout(() => { + checkMarkerForEvent(markerTime); + }, 250) + ); + }; useEffect(() => { - onChange && onChange(currentEvent) - }, [currentEvent]) + if (timelineContainerRef) { + const timelineContainerWidth = timelineContainerRef.current.offsetWidth; + const offset = Math.round(timelineContainerWidth / 2); + setTimelineOffset(offset); + } + }, [timelineContainerRef]); + + useEffect(() => { + onChange && onChange(currentEvent); + }, [currentEvent]); const RenderTimeline = useCallback(() => { if (timeline && timeline.length > 0) { - const lastEvent = timeline[timeline.length - 1] + const lastEvent = timeline[timeline.length - 1]; const timelineLength = timelineOffset + lastEvent.positionX + lastEvent.width; return ( -
- { - timeline.map((e) => { - return ( -
+ {timeline.map((e) => { + return ( +
- ) - }) - } + width: `${e.seconds}px`, + }} + >
+ ); + })}
- ) + ); } - }, [timeline]) + }, [timeline]); - const setNextCurrentEvent = function(offset) { - setScrollActive(false) - setCurrentEvent(currentEvent => { + const setNextCurrentEvent = function (offset) { + setScrollActive(false); + setCurrentEvent((currentEvent) => { const index = currentEvent.index + offset; const nextEvent = timeline[index]; - const positionX = nextEvent.positionX - timelineOffset - timelineContainerRef.current.scrollLeft = positionX + const positionX = nextEvent.positionX - timelineOffset; + timelineContainerRef.current.scrollLeft = positionX; return { ...nextEvent, id: nextEvent.id, index, startTime: nextEvent.start_time, - endTime: nextEvent.end_time - } - }) - } - - const handlePrevious = function() { + endTime: nextEvent.end_time, + }; + }); + }; + + const handlePrevious = function () { setNextCurrentEvent(-1); - } + }; const handleNext = function () { setNextCurrentEvent(1); - } + }; return ( -
-
-
- {markerTime && ({markerTime.toLocaleTimeString()})} -
+
+
+
+ {markerTime && {markerTime.toLocaleTimeString()}} +
-
+
-
+
} /> - }/> + } /> } />
- ) + ); } - - diff --git a/web/src/routes/Camera_V2.jsx b/web/src/routes/Camera_V2.jsx index 90a27a9ce..5a355de68 100644 --- a/web/src/routes/Camera_V2.jsx +++ b/web/src/routes/Camera_V2.jsx @@ -6,27 +6,31 @@ import Link from '../components/Link'; import Switch from '../components/Switch'; import { usePersistence } from '../context'; import { useCallback, useMemo, useState } from 'preact/hooks'; -import { useApiHost, useConfig } from '../api'; +import { useApiHost, useConfig, useEvents } from '../api'; import { Tabs, TextTab } from '../components/Tabs'; import Timeline from '../components/Timeline'; import { LiveChip } from '../components/LiveChip'; import { HistoryHeader } from './HistoryHeader'; -import { longToDate } from '../utils/dateUtil' +import { longToDate } from '../utils/dateUtil'; +import { useSearchString } from '../hooks/useSearchString'; const emptyObject = Object.freeze({}); export default function Camera({ camera }) { const apiHost = useApiHost(); + const { data: config } = useConfig(); + const { searchString } = useSearchString(25, `camera=${camera}`); + const { data: events } = useEvents(searchString); const [hideBanner, setHideBanner] = useState(false); - const [playerType, setPlayerType] = useState("live"); + const [playerType, setPlayerType] = useState('live'); const cameraConfig = config?.cameras[camera]; - const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height)) + const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height)); const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject); - const [currentEvent, setCurrentEvent] = useState(undefined) + const [currentEvent, setCurrentEvent] = useState(undefined); const handleSetOption = useCallback( (id, value) => { @@ -81,76 +85,90 @@ export default function Camera({ camera }) { /> Mask & Zone creator
- ) + ); - const RenderPlayer = useCallback(() => { - if (playerType === "live") { - return ( - - ) - } else if (playerType === "debug") { + const RenderPlayer = useCallback(() => { + if (playerType === 'live') { + return ; + } else if (playerType === 'debug') { return (
{/* {optionContent} */}
); - } else if (playerType === "history") { - return currentEvent && ( - - ) + } else if (playerType === 'history') { + return ( + currentEvent && ( + + ) + ); } }, [playerType, currentEvent]); const handleVideoTouch = () => { setHideBanner(true); - } + }; const handleTabChange = (index) => { if (index === 0) { - setPlayerType("history") - } - else if (index === 1) { - setPlayerType("live") + setPlayerType('history'); + } else if (index === 1) { + setPlayerType('live'); } else if (index === 2) { - setPlayerType("debug"); + setPlayerType('debug'); } - } + }; const handleTimelineChange = (event) => { setCurrentEvent(event); - } + }; return ( -
-
-
+
+
+
- { (playerType === "live" || playerType === "debug") && ( + {(playerType === 'live' || playerType === 'debug') && ( - {camera} + + {camera} + - ) } + )}
-
-
- { currentEvent && } +
+
+ {currentEvent && ( + + )}
- {playerType === "history" && } + {playerType === 'history' && }
-
+