From 599303b35eed452965f21fb32b854b83d73636c6 Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Thu, 13 Jan 2022 16:51:21 -0600
Subject: [PATCH] fix: fix buggy height between image loads

---
 web/src/components/HistoryViewer.jsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/components/HistoryViewer.jsx b/web/src/components/HistoryViewer.jsx
index 94a6cebd6..cbfb94500 100644
--- a/web/src/components/HistoryViewer.jsx
+++ b/web/src/components/HistoryViewer.jsx
@@ -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
       >