From 208d09b8d9d296eed7e62e8a0c71e2c542b99e14 Mon Sep 17 00:00:00 2001
From: Cesaryuan <35998162+cesaryuan@users.noreply.github.com>
Date: Mon, 7 Oct 2024 20:25:58 +0800
Subject: [PATCH] fix: media preview bug when zero size, close #764 (#765)

* fix: media preview bug when zero size, close #764

* fix: consider NaN case

* fix: add props.style

* chore: style

---------

Co-authored-by: Innei <i@innei.in>
---
 .../src/components/ui/media/preview-media.tsx    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
index e62175375..aba31c868 100644
--- a/apps/renderer/src/components/ui/media/preview-media.tsx
+++ b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -290,6 +290,8 @@ const FallbackableImage: FC<
     }
   }, [currentSrc, currentState, fallbackUrl, src])
 
+  const height = Number.parseInt(props.height as string)
+  const width = Number.parseInt(props.width as string)
   return (
     <div className={cn("center flex size-full flex-col", containerClassName)}>
       {isLoading && !isAllError && (
@@ -317,11 +319,15 @@ const FallbackableImage: FC<
             blurhash && !isLoading ? "duration-500 ease-in-out animate-in fade-in-0" : "",
             props.className,
           )}
-          style={{
-            maxHeight: `min(100%, ${Number.parseInt(props.height as string)}px)`,
-            maxWidth: `min(100%, ${Number.parseInt(props.width as string)}px)`,
-            ...props.style,
-          }}
+          style={
+            Number.isNaN(height) || Number.isNaN(width) || height === 0 || width === 0
+              ? props.style
+              : {
+                  maxHeight: `min(100%, ${height}px)`,
+                  maxWidth: `min(100%, ${width}px)`,
+                  ...props.style,
+                }
+          }
         />
       )}
       {isAllError && (