From 76a5b2a06a02bdbf129fdf9a2e5c89c1d2c80986 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Wed, 2 Oct 2024 09:58:48 +1000
Subject: [PATCH] Fix UI error when image has no files (#5325)

---
 .../components/Images/ImageDetails/Image.tsx  | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index 0a77180ce..e18571cd0 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -279,7 +279,10 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
   );
 
   const title = objectTitle(image);
-  const ImageView = isVideo(image.visual_files[0]) ? "video" : "img";
+  const ImageView =
+    image.visual_files.length > 0 && isVideo(image.visual_files[0])
+      ? "video"
+      : "img";
 
   const resolution = useMemo(() => {
     return file?.width && file?.height
@@ -362,19 +365,21 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
         {renderTabs()}
       </div>
       <div className="image-container">
-        <ImageView
-          loop={image.visual_files[0].__typename == "VideoFile"}
-          autoPlay={image.visual_files[0].__typename == "VideoFile"}
-          controls={image.visual_files[0].__typename == "VideoFile"}
-          className="m-sm-auto no-gutter image-image"
-          style={
-            image.visual_files[0].__typename == "VideoFile"
-              ? { width: "100%", height: "100%" }
-              : {}
-          }
-          alt={title}
-          src={image.paths.image ?? ""}
-        />
+        {image.visual_files.length > 0 && (
+          <ImageView
+            loop={image.visual_files[0].__typename == "VideoFile"}
+            autoPlay={image.visual_files[0].__typename == "VideoFile"}
+            controls={image.visual_files[0].__typename == "VideoFile"}
+            className="m-sm-auto no-gutter image-image"
+            style={
+              image.visual_files[0].__typename == "VideoFile"
+                ? { width: "100%", height: "100%" }
+                : {}
+            }
+            alt={title}
+            src={image.paths.image ?? ""}
+          />
+        )}
       </div>
     </div>
   );