remove old placeholder algorithm

- TootPreviewCard and MediaAttachmentGrid
- the placeholder thing is now offloaded to the
  browser

src/timelines/MediaAttachmentGrid.tsx

@@ -81,58 +81,52 @@ 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 =
-            width && height && height > maxHeight
-              ? maxHeight * (aspectRatio ?? 1)
-              : width;
-          const style = () =>
-            loaded()
-              ? undefined
-              : {
-                  width: realWidth ? `${realWidth}px` : undefined,
-                  height: realHeight ? `${realHeight}px` : undefined,
-                };
+          // 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;
           switch (item.type) {
             case "image":
               return (
                 <img
                   src={item.previewUrl}
-                  style={style()}
+                  width={item.meta?.small?.width}
+                  height={item.meta?.small?.height}
                   alt={item.description || undefined}
                   onClick={[openViewerFor, index()]}
-                  onLoad={[setLoaded, true]}
                   loading="lazy"
+                  style={
+                    accentColor ? { "--media-color-accent": accentColor } : {}
+                  }
                 ></img>
               );
             case "video":
               return (
                 <video
                   src={item.url || undefined}
-                  style={style()}
-                  onLoadedMetadata={[setLoaded, true]}
                   autoplay={settings().autoPlayVideos}
                   playsinline={settings().autoPlayVideos ? true : undefined}
                   controls
                   poster={item.previewUrl}
+                  width={item.meta?.small?.width}
+                  height={item.meta?.small?.height}
                 />
               );
             case "gifv":
               return (
                 <video
                   src={item.url || undefined}
-                  style={style()}
-                  onLoadedMetadata={[setLoaded, true]}
                   autoplay={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}
                 />
               );
 

src/timelines/RegularToot.tsx

@@ -7,6 +7,7 @@ import {
   createRenderEffect,
   createSignal,
   createEffect,
+  type Accessor,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
@@ -306,6 +307,8 @@ export function TootPreviewCard(props: {
           crossOrigin="anonymous"
           src={props.src.image!}
           onLoad={onImgLoad}
+          width={props.src.width || undefined}
+          height={props.src.height || undefined}
           loading="lazy"
         />
       </Show>

src/timelines/toot.module.css

@@ -125,6 +125,7 @@
 
   >img {
     max-width: 100%;
+    height: auto;
   }
 
   &:hover,
@@ -232,18 +233,21 @@
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
+    width: auto;
+    height: auto;
     object-fit: contain;
     max-width: 100%;
     background-color: var(--tutu-color-surface-d);
     border-radius: 2px;
-    border: 1px solid transparent;
-    transition: border-color 220ms var(--tutu-anim-curve-std),
-      box-shadow 220ms var(--tutu-anim-curve-std);
+    border: 1px solid var(--tutu-color-on-surface-d);
+    transition: outline-width 60ms var(--tutu-anim-curve-std), z-index 60ms var(--tutu-anim-curve-std);
 
     &:hover,
     &:focus-visible {
-      border: 1px solid var(--tutu-color-surface-dd);
-      box-shadow: var(--tutu-shadow-e1);
+      /* TODO: the goal is to use the media's accent color as the outline */
+      /* but our infra is not prepared for this. The average color thing is slow */
+      /* and we need further managing to control its performance impact. */
+      outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
     }
   }
 }