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

fix: bug with timeline shifting

Browse Source
This commit is contained in:
JohnMark Sill 2022-01-13 00:38:06 -06:00
parent 26c73d8e41
commit 14a12c5ad5
2 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/HistoryViewer.jsx
View File

@ -13,7 +13,8 @@ export default function HistoryViewer({ camera }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const videoRef = useRef(); const videoRef = useRef();
const beginningOfDay = new Date().setHours(0, 0, 0) / 1000; // const beginningOfDay = new Date().setHour(0, 0, 0) / 1000;
const beginningOfDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
const { searchString } = useSearchString(200, `camera=${camera}&after=${beginningOfDay}`); const { searchString } = useSearchString(200, `camera=${camera}&after=${beginningOfDay}`);
const { data: events } = useEvents(searchString); const { data: events } = useEvents(searchString);
const [timelineEvents, setTimelineEvents] = useState(); const [timelineEvents, setTimelineEvents] = useState();
@ -38,17 +39,11 @@ export default function HistoryViewer({ camera }) {
}; };
const handleTimelineChange = (event) => { const handleTimelineChange = (event) => {
console.log({ event });
if (event !== undefined) { if (event !== undefined) {
setCurrentEvent(event); setCurrentEvent(event);
setCurrentEventIndex(event.index);
} }
}; };
const handleVideoTouch = () => {
setHideBanner(true);
};
const handlePlay = function () { const handlePlay = function () {
videoRef.current.play(); videoRef.current.play();
}; };
@ -58,11 +53,11 @@ export default function HistoryViewer({ camera }) {
}; };
const handlePrevious = function () { const handlePrevious = function () {
setCurrentEventIndex((index) => index - 1); setCurrentEventIndex(currentEvent.index - 1);
}; };
const handleNext = function () { const handleNext = function () {
setCurrentEventIndex((index) => index + 1); setCurrentEventIndex(currentEvent.index + 1);
}; };
return ( return (
@ -80,7 +75,6 @@ export default function HistoryViewer({ camera }) {
ref={videoRef} ref={videoRef}
onTimeUpdate={handleTimeUpdate} onTimeUpdate={handleTimeUpdate}
onPause={handlePaused} onPause={handlePaused}
onClick={handleVideoTouch}
poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`} poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`}
preload='none' preload='none'
playsInline playsInline

15
web/src/components/Timeline.jsx
View File

@ -47,20 +47,25 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
} }
}, [events, timelineOffset]); }, [events, timelineOffset]);
const getCurrentEvent = useCallback(() => {
return currentEvent;
}, [currentEvent]);
useEffect(() => { useEffect(() => {
if (currentEvent && offset >= 0) { const cEvent = getCurrentEvent();
if (cEvent && offset >= 0) {
setScrollActive(false); setScrollActive(false);
timelineContainerRef.current.scroll({ timelineContainerRef.current.scroll({
left: currentEvent.positionX + offset - timelineOffset, left: cEvent.positionX + offset - timelineOffset,
behavior: 'smooth', behavior: 'smooth',
}); });
} else { } else {
setScrollActive(true); setScrollActive(true);
} }
}, [offset, currentEvent, timelineContainerRef]); }, [offset, timelineContainerRef]);
useEffect(() => { useEffect(() => {
if (currentIndex !== undefined && currentIndex !== currentEvent.index) { if (currentIndex !== undefined) {
const event = timeline[currentIndex]; const event = timeline[currentIndex];
setCurrentEvent({ setCurrentEvent({
...event, ...event,
@ -71,7 +76,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
}); });
timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' }); timelineContainerRef.current.scroll({ left: event.positionX - timelineOffset, behavior: 'smooth' });
} }
}, [currentIndex, timelineContainerRef, timeline, currentEvent]); }, [currentIndex, timelineContainerRef, timeline]);
const checkMarkerForEvent = (markerTime) => { const checkMarkerForEvent = (markerTime) => {
if (!scrollActive) { if (!scrollActive) {