From 9af85b767b54cd98ad45b1729eb2a198c17bb02d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:35:41 +0200
Subject: [PATCH] feat(audio): add an icon placeholder

---
 .../src/widgets/type_widgets/file/Audio.tsx     |  4 ++++
 .../widgets/type_widgets/file/MediaPlayer.css   | 17 ++++++++++++-----
 .../src/widgets/type_widgets/file/Video.css     |  4 ++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 5c51d79bca..676997fd63 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/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} />
 
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index 44414ce7d4..85490670fa 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/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;
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index af6d9cca53..5bbc0ac19e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/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;
     }
 }