From 6306c5afbe7e5d8782288943d9f1c25bf88b89d8 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 25 Sep 2024 17:37:11 +0800
Subject: [PATCH] MediaAttachmentGrid: calc only when not loaded

* This is a workaround, the best solution is we do
  the calculation correctly.
---
 src/timelines/MediaAttachmentGrid.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index 546340a..86cbd5c 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -64,28 +64,29 @@ const MediaAttachmentGrid: Component<{
     >
       <For each={props.attachments}>
         {(item, index) => {
+          const [loaded, setLoaded] = createSignal(false)
           const width = item.meta?.small?.width;
           const height = item.meta?.small?.height;
           const aspectRatio = item.meta?.small?.aspect;
           const maxHeight = vh35();
           const realHeight = height && height > maxHeight ? maxHeight : height;
           const realWidth =
-            height && height > maxHeight
-              ? maxHeight * (aspectRatio ?? 1)
+            width && height && height > maxHeight
+              ? maxHeight / (aspectRatio ?? 1)
               : width;
-          const style = {
+          const style = () => loaded() ? undefined : {
             width: realWidth ? `${realWidth}px` : undefined,
             height: realHeight ? `${realHeight}px` : undefined,
-            "aspect-ratio": aspectRatio?.toString(),
           };
           switch (item.type) {
             case "image":
               return (
                 <img
                   src={item.previewUrl}
-                  style={style}
+                  style={style()}
                   alt={item.description || undefined}
                   onClick={[openViewerFor, index()]}
+                  onLoad={[setLoaded, true]}
                   loading="lazy"
                 ></img>
               );
@@ -93,8 +94,10 @@ const MediaAttachmentGrid: Component<{
               return (
                 <video
                   src={item.url || undefined}
-                  style={style}
+                  style={style()}
+                  onLoadedMetadata={[setLoaded, true]}
                   autoplay={false}
+                  controls
                 />
               );
             case "gifv":