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}
                 />
               );