From 147c9fbce19da9e5f4da27dc4b3a502fc7645bab Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 20 Nov 2024 21:51:29 +0800
Subject: [PATCH] MediaAttachmentGrid: fix layout on WebKit

---
 src/timelines/MediaAttachmentGrid.css |  19 ++--
 src/timelines/MediaAttachmentGrid.tsx | 129 ++++++++++++++------------
 2 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/src/timelines/MediaAttachmentGrid.css b/src/timelines/MediaAttachmentGrid.css
index a26085c..880151a 100644
--- a/src/timelines/MediaAttachmentGrid.css
+++ b/src/timelines/MediaAttachmentGrid.css
@@ -6,7 +6,7 @@
   gap: 4px;
   contain: layout style;
 
-  >.cell {
+  > :where(img, video, .sensitive-placeholder) {
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
@@ -24,16 +24,13 @@
       border-color: var(--media-color-accent, var(--tutu-color-surface-d));
     }
 
-    & > :where(img, video, .sensitive-placeholder) {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
+    object-fit: contain;
+  }
 
-    & > .sensitive-placeholder {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  >.sensitive-placeholder {
+    display: inline-flex;
+    display: inline flex;
+    align-items: center;
+    justify-content: center;
   }
 }
\ No newline at end of file
diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx
index 948bb7b..8fd14e3 100644
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@@ -161,65 +161,78 @@ const MediaAttachmentGrid: Component<{
       <Index each={props.attachments}>
         {(item, index) => {
           const itemType = () => item().type;
+
+          const style = createMemo(() => itemStyle(item()));
           return (
-            <div
-              class="cell"
-              role="presentation"
-              style={itemStyle(item())}
-              data-sort={index}
-              data-media-type={item().type}
-            >
-              <Switch>
-                <Match when={props.sensitive && !isReveal(index)}>
-                  <div class="sensitive-placeholder">
-                    <IconButton
-                      color="inherit"
-                      size="large"
-                      onClick={[addReveal, index]}
-                      aria-label="Reveal this media"
-                    >
-                      <Preview />
-                    </IconButton>
-                  </div>
-                </Match>
-                <Match when={itemType() === "image"}>
-                  <img
-                    src={item().previewUrl}
-                    width={item().meta?.small?.width}
-                    height={item().meta?.small?.height}
-                    alt={item().description || undefined}
-                    onClick={[openViewerFor, index]}
-                    loading="lazy"
-                  ></img>
-                </Match>
-                <Match when={itemType() === "video"}>
-                  <video
-                    src={item().url || undefined}
-                    autoplay={!props.sensitive && settings().autoPlayVideos}
-                    playsinline={settings().autoPlayVideos ? true : undefined}
-                    controls
-                    poster={item().previewUrl}
-                    width={item().meta?.small?.width}
-                    height={item().meta?.small?.height}
-                  />
-                </Match>
-                <Match when={itemType() === "gifv"}>
-                  <video
-                    src={item().url || undefined}
-                    autoplay={!props.sensitive && settings().autoPlayGIFs}
-                    controls
-                    playsinline /* or safari on iOS will play in full-screen */
-                    loop
-                    poster={item().previewUrl}
-                    width={item().meta?.small?.width}
-                    height={item().meta?.small?.height}
-                  />
-                </Match>
-                <Match when={itemType() === "audio"}>
-                  <audio src={item().url || undefined} controls></audio>
-                </Match>
-              </Switch>
-            </div>
+            <Switch>
+              <Match when={props.sensitive && !isReveal(index)}>
+                <div
+                  class="sensitive-placeholder"
+                  style={style()}
+                  data-sort={index}
+                  data-media-type={item().type}
+                >
+                  <IconButton
+                    color="inherit"
+                    size="large"
+                    onClick={[addReveal, index]}
+                    aria-label="Reveal this media"
+                  >
+                    <Preview />
+                  </IconButton>
+                </div>
+              </Match>
+              <Match when={itemType() === "image"}>
+                <img
+                  src={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  alt={item().description || undefined}
+                  onClick={[openViewerFor, index]}
+                  loading="lazy"
+                  style={style()}
+                  data-sort={index}
+                  data-media-type={item().type}
+                ></img>
+              </Match>
+              <Match when={itemType() === "video"}>
+                <video
+                  src={item().url || undefined}
+                  autoplay={!props.sensitive && settings().autoPlayVideos}
+                  playsinline={settings().autoPlayVideos ? true : undefined}
+                  controls
+                  poster={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  style={style()}
+                  data-sort={index}
+                  data-media-type={item().type}
+                />
+              </Match>
+              <Match when={itemType() === "gifv"}>
+                <video
+                  src={item().url || undefined}
+                  autoplay={!props.sensitive && settings().autoPlayGIFs}
+                  controls
+                  playsinline /* or safari on iOS will play in full-screen */
+                  loop
+                  poster={item().previewUrl}
+                  width={item().meta?.small?.width}
+                  height={item().meta?.small?.height}
+                  style={style()}
+                  data-sort={index}
+                  data-media-type={item().type}
+                />
+              </Match>
+              <Match when={itemType() === "audio"}>
+                <audio
+                  src={item().url || undefined}
+                  controls
+                  data-sort={index}
+                  data-media-type={item().type}
+                ></audio>
+              </Match>
+            </Switch>
           );
         }}
       </Index>