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