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 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 { data: events } = useEvents(searchString);
const [timelineEvents, setTimelineEvents] = useState();
@ -38,17 +39,11 @@ export default function HistoryViewer({ camera }) {
};
const handleTimelineChange = (event) => {
console.log({ event });
if (event !== undefined) {
setCurrentEvent(event);
setCurrentEventIndex(event.index);
}
};
const handleVideoTouch = () => {
setHideBanner(true);
};
const handlePlay = function () {
videoRef.current.play();
};
@ -58,11 +53,11 @@ export default function HistoryViewer({ camera }) {
};
const handlePrevious = function () {
setCurrentEventIndex((index) => index - 1);
setCurrentEventIndex(currentEvent.index - 1);
};
const handleNext = function () {
setCurrentEventIndex((index) => index + 1);
setCurrentEventIndex(currentEvent.index + 1);
};
return (
@ -80,7 +75,6 @@ export default function HistoryViewer({ camera }) {
ref={videoRef}
onTimeUpdate={handleTimeUpdate}
onPause={handlePaused}
onClick={handleVideoTouch}
poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`}
preload='none'
playsInline

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

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