Experiment show inline desc for videos in timelines

Reason: a video takes more time & effort to watch, so a quick desc would be helpful

src/components/media.jsx

@@ -1,4 +1,5 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
+import { Fragment } from 'preact';
 import {
   useCallback,
   useLayoutEffect,
@@ -251,7 +252,11 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
     ></video>
   `;
 
+    const showInlineDesc = !showOriginal && !isGIF && !!description;
+    const Container = showInlineDesc ? 'figure' : Fragment;
+
     return (
+      <Container>
         <Parent
           class={`media media-${isGIF ? 'gif' : 'video'} ${
             autoGIFAnimate ? 'media-contain' : ''
@@ -335,6 +340,16 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
             </>
           )}
         </Parent>
+        {showInlineDesc && (
+          <figcaption
+            onClick={() => {
+              location.hash = to;
+            }}
+          >
+            {description}
+          </figcaption>
+        )}
+      </Container>
     );
   } else if (type === 'audio') {
     const formattedDuration = formatDuration(original.duration);

src/components/status.css

@@ -654,6 +654,31 @@
   width: auto !important;
   max-width: 100%;
   display: block;
+
+  figure {
+    margin: 0;
+    padding: 0;
+
+    figcaption {
+      margin: -2px 0 0;
+      padding: 0 4px;
+      font-size: 90%;
+      color: var(--text-insignificant-color);
+      overflow: hidden;
+      white-space: normal;
+      display: -webkit-box;
+      display: box;
+      -webkit-box-orient: vertical;
+      box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      line-height: 1.2;
+    }
+  }
+
+  &:hover figure figcaption {
+    color: var(--text-color);
+  }
 }
 .status .media-container.media-eq1 .media {
   display: inline-block;