Fix Android show stupid box for the ⏵ ascii character

Replace with actual icon

src/components/icon.jsx

@@ -64,6 +64,7 @@ const ICONS = {
   sparkles: 'mingcute:sparkles-line',
   exit: 'mingcute:exit-line',
   translate: 'mingcute:translate-line',
+  play: 'mingcute:play-fill',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/components/media.jsx

@@ -1,6 +1,7 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { useRef } from 'preact/hooks';
 
+import Icon from './icon';
 import { formatDuration } from './status';
 
 /*
@@ -165,13 +166,18 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
             muted
           />
         ) : (
-          <img
-            src={previewUrl}
-            alt={description}
-            width={width}
-            height={height}
-            loading="lazy"
-          />
+          <>
+            <img
+              src={previewUrl}
+              alt={description}
+              width={width}
+              height={height}
+              loading="lazy"
+            />
+            <div class="media-play">
+              <Icon icon="play" size="xxl" />
+            </div>
+          </>
         )}
       </div>
     );

src/components/status.css

@@ -445,14 +445,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
   position: relative;
   background-clip: padding-box;
 }
-.status :is(.media-video, .media-audio)[data-formatted-duration]:before {
+.status :is(.media-video, .media-audio)[data-formatted-duration] .media-play {
   pointer-events: none;
-  content: '⏵';
   width: 70px;
   height: 70px;
-  font-size: 50px;
   position: absolute;
-  text-indent: 3px;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -465,7 +462,9 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 70px;
   transition: all 0.2s ease-in-out;
 }
-.status :is(.media-video, .media-audio)[data-formatted-duration]:hover:before {
+.status
+  :is(.media-video, .media-audio)[data-formatted-duration]:hover
+  .media-play {
   color: var(--text-color);
   background-color: var(--bg-blur-color);
 }