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

fix: fix buggy height between image loads

Browse Source
This commit is contained in:
JohnMark Sill 2022-01-13 16:51:21 -06:00
parent 6dfcc33eb8
commit 599303b35e
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,7 @@ export default function HistoryViewer({ camera }) {
const [currentEvent, setCurrentEvent] = useState(); const [currentEvent, setCurrentEvent] = useState();
const [currentEventIndex, setCurrentEventIndex] = useState(); const [currentEventIndex, setCurrentEventIndex] = useState();
const [timelineOffset, setTimelineOffset] = useState(0); const [timelineOffset, setTimelineOffset] = useState(0);
const [minHeight, setMinHeight] = useState();
useEffect(() => { useEffect(() => {
if (events) { if (events) {
@ -60,6 +61,12 @@ export default function HistoryViewer({ camera }) {
setCurrentEventIndex(currentEvent.index + 1); setCurrentEventIndex(currentEvent.index + 1);
}; };
const handleMetadataLoad = () => {
if (videoRef.current) {
setMinHeight(videoRef.current.clientHeight);
}
};
const RenderVideo = useCallback(() => { const RenderVideo = useCallback(() => {
return ( return (
<video <video
@ -67,7 +74,15 @@ export default function HistoryViewer({ camera }) {
onTimeUpdate={handleTimeUpdate} onTimeUpdate={handleTimeUpdate}
onPause={handlePaused} onPause={handlePaused}
poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`} poster={`${apiHost}/api/events/${currentEvent.id}/snapshot.jpg`}
preload='none' onLoadedMetadata={handleMetadataLoad}
preload='metadata'
style={
minHeight
? {
minHeight: `${minHeight}px`,
}
: {}
}
playsInline playsInline
controls controls
> >