From e96b8facff70059d430cd288b19e825006978b9a Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <cbegelan@gmail.com>
Date: Sun, 22 Aug 2021 18:15:06 +0200
Subject: [PATCH] centered image if no clips avail

---
 web/src/routes/Event.jsx | 43 ++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index 2fb721abe..761e515dd 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -82,12 +82,11 @@ export default function Event({ eventId, close }) {
           />
         ) : null}
       </div>
-
-      {data.has_clip ? (
-        <Fragment>
-          <div className="outer-max-width m-auto">
-            <div className="aspect-ratio-box w-full relative">
-              <div className="absolute w-full top-10 left-0">
+      <div className="outer-max-width m-auto">
+        <div className="aspect-ratio-box w-full relative">
+          <div className="absolute w-full top-10 left-0">
+            {data.has_clip ? (
+              <Fragment>
                 <VideoPlayer
                   options={{
                     sources: [
@@ -103,23 +102,23 @@ export default function Event({ eventId, close }) {
                   seekOptions={{ forward: 10, back: 5 }}
                   onReady={(player) => {}}
                 />
-              </div>
-            </div>
+              </Fragment>
+            ) : (
+              <Fragment>
+                <Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
+                <img
+                  src={
+                    data.has_snapshot
+                      ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+                      : `data:image/jpeg;base64,${data.thumbnail}`
+                  }
+                  alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
+                />
+              </Fragment>
+            )}
           </div>
-        </Fragment>
-      ) : (
-        <Fragment>
-          <Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
-          <img
-            src={
-              data.has_snapshot
-                ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
-                : `data:image/jpeg;base64,${data.thumbnail}`
-            }
-            alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
-          />
-        </Fragment>
-      )}
+        </div>
+      </div>
     </div>
   );
 }