feat(audio): add an icon placeholder

apps/client/src/widgets/type_widgets/file/Audio.tsx

@@ -3,6 +3,7 @@ import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hoo
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
+import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
 import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
@@ -39,6 +40,9 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 onPause={() => setPlaying(false)}
                 onError={onError}
             />
+            <div className="audio-preview-icon-wrapper">
+                <Icon icon="bx bx-music" className="audio-preview-icon" />
+            </div>
             <div className="media-preview-controls">
                 <SeekBar mediaRef={audioRef} />
 

apps/client/src/widgets/type_widgets/file/MediaPlayer.css

@@ -1,8 +1,4 @@
-.media-preview-controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+.media-preview-controls {    
     padding: 1.25em;
     display: flex;
     flex-direction: column;
@@ -90,4 +86,15 @@
 .audio-preview-wrapper {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .audio-preview-icon-wrapper {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 8em;
+        opacity: 0.6;
+    }
 }

apps/client/src/widgets/type_widgets/file/Video.css

@@ -24,5 +24,9 @@
         --icon-button-hover-background: rgba(255, 255, 255, 0.2);
         opacity: 1;
         transition: opacity 300ms ease;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
     }
 }