From 634ab5b5c00a05e1cf8621e1d8d1f4dbaadaa96c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 21:26:24 +0200
Subject: [PATCH] chore(media): address requested changes

---
 apps/client/src/widgets/react/NoItems.css                 | 1 +
 apps/client/src/widgets/type_widgets/file/Audio.tsx       | 4 ++--
 apps/client/src/widgets/type_widgets/file/MediaPlayer.css | 4 ++--
 apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx | 2 +-
 apps/client/src/widgets/type_widgets/file/Video.css       | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/react/NoItems.css b/apps/client/src/widgets/react/NoItems.css
index f3cc6c6553..2bf1d4e067 100644
--- a/apps/client/src/widgets/react/NoItems.css
+++ b/apps/client/src/widgets/react/NoItems.css
@@ -8,6 +8,7 @@
     color: var(--muted-text-color);
     height: 100%;
     text-align: center;
+    white-space: pre-line;
 
     .tn-icon {
         font-size: 4em;
diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 08b831a498..051c5c15e1 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -21,7 +21,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
             audio.pause();
         }
     }, []);
-    const onKeyDown = useKeyboardShortcuts(audioRef, wrapperRef, togglePlayback);
+    const onKeyDown = useKeyboardShortcuts(audioRef, togglePlayback);
 
     useEffect(() => setError(false), [note.noteId]);
     const onError = useCallback(() => setError(true), []);
@@ -68,7 +68,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
     );
 }
 
-function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void) {
+function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, togglePlayback: () => void) {
     return useCallback((e: KeyboardEvent) => {
         const audio = audioRef.current;
         if (!audio) return;
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index 7307d43b8b..d7e58a26eb 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -1,8 +1,8 @@
-.media-preview-controls {    
+.media-preview-controls {
     padding: 1.25em;
     display: flex;
     flex-direction: column;
-    gap: 0.5em;    
+    gap: 0.5em;
 
     .media-buttons-row {
         display: flex;
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index e0fb57c265..5518bcd263 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -74,7 +74,7 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
     const [volume, setVolume] = useState(() => mediaRef.current?.volume ?? 1);
     const [muted, setMuted] = useState(() => mediaRef.current?.muted ?? false);
 
-    // Sync state when the video element changes volume externally.
+    // Sync state when the media element changes volume externally.
     useEffect(() => {
         const media = mediaRef.current;
         if (!media) return;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 0fc6bcdd08..4b46b1059d 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -15,7 +15,7 @@
 
         .media-preview-controls {
             opacity: 0;
-            pointer-events: none;            
+            pointer-events: none;
         }
     }