MediaAttachmentGrid: reduce closure creation

src/timelines/MediaAttachmentGrid.tsx

@@ -2,6 +2,7 @@ import type { mastodon } from "masto";
 import {
   type Component,
   For,
+  Index,
   createMemo,
   createRenderEffect,
   createSignal,
@@ -103,6 +104,31 @@ const MediaAttachmentGrid: Component<{
     };
   });
 
+  const itemStyle = (item: mastodon.v1.MediaAttachment) => {
+    const { width, height } = constraintedSize(
+      item.meta?.small || { width: 1, height: 1 },
+      { width: 2, height: 2 },
+      itemMaxSize(),
+    );
+
+    // I don't know why mastodon does not return this
+    // and the condition for it to return this.
+    // Anyway, It is useless now.
+    // My hope is the FastAverageColor, but
+    // we may need better tool to manage the performance impact
+    // before using this. See #37.
+    // TODO: use fast average color to extract accent color
+    const accentColor = item.meta?.colors?.accent;
+
+    return Object.assign(
+      {
+        width: `${width}px`,
+        height: `${height}px`,
+      },
+      accentColor ? { "--media-color-accent": accentColor } : {},
+    );
+  };
+
   css`
     .attachments {
       column-count: ${columnCount().toString()};
@@ -118,74 +144,48 @@ const MediaAttachmentGrid: Component<{
         }
       }}
     >
-      <For each={props.attachments}>
+      <Index each={props.attachments}>
         {(item, index) => {
-          // I don't know why mastodon does not return this
+          switch (item().type) {
-          // and the condition for it to return this.
-          // Anyway, It is useless now.
-          // My hope is the FastAverageColor, but
-          // we may need better tool to manage the performance impact
-          // before using this. See #37.
-          // TODO: use fast average color to extract accent color
-          const accentColor = item.meta?.colors?.accent;
-          const { width, height } = item.meta?.small || {};
-
-          const size = () => {
-            return constraintedSize(
-              item.meta?.small || { width: 1, height: 1 },
-              { width: 2, height: 2 },
-              itemMaxSize(),
-            );
-          };
-
-          const style = () => {
-            return Object.assign(
-              {
-                width: `${size().width}px`,
-                height: `${size().height}px`,
-              },
-              accentColor ? { "--media-color-accent": accentColor } : {},
-            );
-          };
-
-          switch (item.type) {
             case "image":
               return (
                 <img
-                  src={item.previewUrl}
+                  data-sort={index}
-                  width={width}
+                  src={item().previewUrl}
-                  height={height}
+                  width={item().meta?.small?.width}
-                  alt={item.description || undefined}
+                  height={item().meta?.small?.height}
-                  onClick={[openViewerFor, index()]}
+                  alt={item().description || undefined}
+                  onClick={[openViewerFor, index]}
                   loading="lazy"
-                  style={style()}
+                  style={itemStyle(item())}
                 ></img>
               );
             case "video":
               return (
                 <video
-                  src={item.url || undefined}
+                  data-sort={index}
+                  src={item().url || undefined}
                   autoplay={settings().autoPlayVideos}
                   playsinline={settings().autoPlayVideos ? true : undefined}
                   controls
-                  poster={item.previewUrl}
+                  poster={item().previewUrl}
-                  width={width}
+                  width={item().meta?.small?.width}
-                  height={height}
+                  height={item().meta?.small?.height}
-                  style={style()}
+                  style={itemStyle(item())}
                 />
               );
             case "gifv":
               return (
                 <video
-                  src={item.url || undefined}
+                  src={item().url || undefined}
                   autoplay={settings().autoPlayGIFs}
                   controls
                   playsinline /* or safari on iOS will play in full-screen */
                   loop
-                  poster={item.previewUrl}
+                  poster={item().previewUrl}
-                  width={width}
+                  width={item().meta?.small?.width}
-                  height={height}
+                  height={item().meta?.small?.height}
-                  style={style()}
+                  style={itemStyle(item())}
                 />
               );
 
@@ -194,7 +194,7 @@ const MediaAttachmentGrid: Component<{
               return <div></div>;
           }
         }}
-      </For>
+      </Index>
     </section>
   );
 };