From 23890e64e9cb220ee2a1ab5270e7e0f681151bfb Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 18:51:20 +0200
Subject: [PATCH 01/21] refactor(audio): extract to separate file

---
 apps/client/src/widgets/type_widgets/File.tsx       | 13 +------------
 apps/client/src/widgets/type_widgets/file/Audio.tsx | 12 ++++++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/file/Audio.tsx

diff --git a/apps/client/src/widgets/type_widgets/File.tsx b/apps/client/src/widgets/type_widgets/File.tsx
index a13d765ed7..f36ecce854 100644
--- a/apps/client/src/widgets/type_widgets/File.tsx
+++ b/apps/client/src/widgets/type_widgets/File.tsx
@@ -1,10 +1,9 @@
 import "./File.css";
 
-import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
-import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
+import AudioPreview from "./file/Audio";
 import PdfPreview from "./file/Pdf";
 import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";
@@ -43,16 +42,6 @@ function TextPreview({ content }: { content: string }) {
     );
 }
 
-function AudioPreview({ note }: { note: FNote }) {
-    return (
-        <audio
-            class="audio-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            controls
-        />
-    );
-}
-
 function NoPreview() {
     return (
         <Alert className="file-preview-not-available" type="info">
diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
new file mode 100644
index 0000000000..45b4693a97
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -0,0 +1,12 @@
+import FNote from "../../../entities/fnote";
+import { getUrlForDownload } from "../../../services/open";
+
+export default function AudioPreview({ note }: { note: FNote }) {
+    return (
+        <audio
+            class="audio-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            controls
+        />
+    );
+}
\ No newline at end of file

From a5a345728c40754a73c7d7765814224297057a09 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 18:56:43 +0200
Subject: [PATCH 02/21] feat(audio): reintroduce play button

---
 .../src/widgets/type_widgets/file/Audio.tsx   | 25 ++++++++++++++----
 .../widgets/type_widgets/file/MediaPlayer.tsx | 26 +++++++++++++++++++
 .../src/widgets/type_widgets/file/Video.tsx   | 25 ++----------------
 3 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 45b4693a97..45c2482215 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -1,12 +1,27 @@
+import { useRef, useState } from "preact/hooks";
+
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
+import { PlayPauseButton } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
+    const [playing, setPlaying] = useState(false);
+    const audioRef = useRef<HTMLAudioElement>(null);
+
     return (
-        <audio
-            class="audio-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            controls
-        />
+        <div className="audio-preview-wrapper">
+            <audio
+                class="audio-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                ref={audioRef}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+            />
+            <div className="video-preview-controls">
+                <div className="center">
+                    <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                </div>
+            </div>
+        </div>
     );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
new file mode 100644
index 0000000000..54d76f16c6
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -0,0 +1,26 @@
+import { RefObject } from "preact";
+
+import { t } from "../../../services/i18n";
+import ActionButton from "../../react/ActionButton";
+
+export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, playing: boolean }) {
+    const togglePlayback = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        if (media.paused) {
+            media.play();
+        } else {
+            media.pause();
+        }
+    };
+
+    return (
+        <ActionButton
+            className="play-button"
+            icon={playing ? "bx bx-pause" : "bx bx-play"}
+            text={playing ? t("video.pause") : t("video.play")}
+            onClick={togglePlayback}
+        />
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 8197192e66..7c22649d3e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,6 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
+import { PlayPauseButton } from "./MediaPlayer";
 
 function formatTime(seconds: number): string {
     const mins = Math.floor(seconds / 60);
@@ -128,7 +129,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
-                        <PlayPauseButton videoRef={videoRef} playing={playing} />
+                        <PlayPauseButton mediaRef={videoRef} playing={playing} />
                         <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
                         <LoopButton videoRef={videoRef} />
                     </div>
@@ -174,28 +175,6 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {
-    const togglePlayback = () => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        if (video.paused) {
-            video.play();
-        } else {
-            video.pause();
-        }
-    };
-
-    return (
-        <ActionButton
-            className="play-button"
-            icon={playing ? "bx bx-pause" : "bx bx-play"}
-            text={playing ? t("video.pause") : t("video.play")}
-            onClick={togglePlayback}
-        />
-    );
-}
-
 function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTMLVideoElement>, seconds: number, icon: string, text: string }) {
     const skip = () => {
         const video = videoRef.current;

From 92f0144b48d8ca99eb3cd283a83de4d4d46e21c8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:03:09 +0200
Subject: [PATCH 03/21] feat(audio): reintroduce seek bar

---
 .../src/widgets/type_widgets/file/Audio.tsx   | 12 +++--
 .../widgets/type_widgets/file/MediaPlayer.tsx | 49 +++++++++++++++++
 .../src/widgets/type_widgets/file/Video.tsx   | 52 +------------------
 3 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 45c2482215..60db5cf169 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
-import { PlayPauseButton } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
@@ -18,10 +18,14 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 onPause={() => setPlaying(false)}
             />
             <div className="video-preview-controls">
-                <div className="center">
-                    <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                <SeekBar mediaRef={audioRef} />
+
+                <div class="video-buttons-row">
+                    <div className="center">
+                        <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                    </div>
                 </div>
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 54d76f16c6..7105027a85 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -1,8 +1,57 @@
 import { RefObject } from "preact";
+import { useEffect, useState } from "preact/hooks";
 
 import { t } from "../../../services/i18n";
 import ActionButton from "../../react/ActionButton";
 
+export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        const onTimeUpdate = () => setCurrentTime(media.currentTime);
+        const onDurationChange = () => setDuration(media.duration);
+
+        media.addEventListener("timeupdate", onTimeUpdate);
+        media.addEventListener("durationchange", onDurationChange);
+        return () => {
+            media.removeEventListener("timeupdate", onTimeUpdate);
+            media.removeEventListener("durationchange", onDurationChange);
+        };
+    }, []);
+
+    const onSeek = (e: Event) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.currentTime = parseFloat((e.target as HTMLInputElement).value);
+    };
+
+    return (
+        <div class="video-seekbar-row">
+            <span class="video-time">{formatTime(currentTime)}</span>
+            <input
+                type="range"
+                class="video-trackbar"
+                min={0}
+                max={duration || 0}
+                step={0.1}
+                value={currentTime}
+                onInput={onSeek}
+            />
+            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+        </div>
+    );
+}
+
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
 export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, playing: boolean }) {
     const togglePlayback = () => {
         const media = mediaRef.current;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 7c22649d3e..f89aa0c90d 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,13 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { PlayPauseButton } from "./MediaPlayer";
-
-function formatTime(seconds: number): string {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-}
+import { PlayPauseButton, SeekBar } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
@@ -120,7 +114,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
             />
 
             <div className="video-preview-controls">
-                <SeekBar videoRef={videoRef} />
+                <SeekBar mediaRef={videoRef} />
                 <div class="video-buttons-row">
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
@@ -187,48 +181,6 @@ function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTM
     );
 }
 
-function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        const onTimeUpdate = () => setCurrentTime(video.currentTime);
-        const onDurationChange = () => setDuration(video.duration);
-
-        video.addEventListener("timeupdate", onTimeUpdate);
-        video.addEventListener("durationchange", onDurationChange);
-        return () => {
-            video.removeEventListener("timeupdate", onTimeUpdate);
-            video.removeEventListener("durationchange", onDurationChange);
-        };
-    }, []);
-
-    const onSeek = (e: Event) => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.currentTime = parseFloat((e.target as HTMLInputElement).value);
-    };
-
-    return (
-        <div class="video-seekbar-row">
-            <span class="video-time">{formatTime(currentTime)}</span>
-            <input
-                type="range"
-                class="video-trackbar"
-                min={0}
-                max={duration || 0}
-                step={0.1}
-                value={currentTime}
-                onInput={onSeek}
-            />
-            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
-        </div>
-    );
-}
-
 function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [volume, setVolume] = useState(() => videoRef.current?.volume ?? 1);
     const [muted, setMuted] = useState(() => videoRef.current?.muted ?? false);

From 68a122fcf5e73e812815f12ae35442ec2844d511 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:06:53 +0200
Subject: [PATCH 04/21] chore(audio): reintroduce some styles

---
 .../src/widgets/type_widgets/file/Audio.tsx   |  4 +-
 .../widgets/type_widgets/file/MediaPlayer.css | 58 +++++++++++++++
 .../widgets/type_widgets/file/MediaPlayer.tsx | 12 ++--
 .../src/widgets/type_widgets/file/Video.css   | 70 ++-----------------
 .../src/widgets/type_widgets/file/Video.tsx   |  4 +-
 5 files changed, 76 insertions(+), 72 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/file/MediaPlayer.css

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 60db5cf169..623b4efbfc 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -17,10 +17,10 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
             />
-            <div className="video-preview-controls">
+            <div className="media-preview-controls">
                 <SeekBar mediaRef={audioRef} />
 
-                <div class="video-buttons-row">
+                <div class="media-buttons-row">
                     <div className="center">
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
                     </div>
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
new file mode 100644
index 0000000000..9e7c5dbdc6
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -0,0 +1,58 @@
+.media-preview-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1.25em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+
+    .media-buttons-row {
+        display: flex;
+
+        > * {
+            flex: 1;
+            align-items: center;
+            gap: 0.5em;
+            display: flex;
+        }
+
+        .spacer {
+            width: var(--icon-button-size, 32px);
+            height: var(--icon-button-size, 32px);
+        }
+
+        .center {
+            justify-content: center;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .play-button {
+            --icon-button-size: 48px;
+        }
+    }
+
+    .media-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+
+        .media-time {
+            font-size: 0.85em;
+            font-variant-numeric: tabular-nums;
+            white-space: nowrap;
+        }
+
+        .media-trackbar {
+            flex: 1;
+            cursor: pointer;
+        }
+    }
+}
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 7105027a85..efdcfb8948 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -1,3 +1,5 @@
+import "./MediaPlayer.css";
+
 import { RefObject } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
@@ -30,18 +32,18 @@ export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | H
     };
 
     return (
-        <div class="video-seekbar-row">
-            <span class="video-time">{formatTime(currentTime)}</span>
+        <div class="media-seekbar-row">
+            <span class="media-time">{formatTime(currentTime)}</span>
             <input
                 type="range"
-                class="video-trackbar"
+                class="media-trackbar"
                 min={0}
                 max={duration || 0}
                 step={0.1}
                 value={currentTime}
                 onInput={onSeek}
             />
-            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+            <span class="media-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
         </div>
     );
 }
@@ -72,4 +74,4 @@ export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTM
             onClick={togglePlayback}
         />
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 5386672f7d..7d2516cab0 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -19,69 +19,6 @@
         }
     }
 
-    .video-preview-controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 1.25em;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5em;
-        background: rgba(0, 0, 0, 0.5);
-        color: white;
-        --icon-button-hover-color: white;
-        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
-        opacity: 1;
-        transition: opacity 300ms ease;
-
-        .video-buttons-row {
-            display: flex;
-
-            > * {
-                flex: 1;
-                align-items: center;
-                gap: 0.5em;
-                display: flex;
-            }
-
-            .spacer {
-                width: var(--icon-button-size, 32px);
-                height: var(--icon-button-size, 32px);
-            }
-
-            .center {
-                justify-content: center;
-            }
-
-            .right {
-                display: flex;
-                justify-content: flex-end;
-            }
-
-            .play-button {
-                --icon-button-size: 48px;
-            }
-        }
-    }
-
-    .video-seekbar-row {
-        display: flex;
-        align-items: center;
-        gap: 0.5em;
-    }
-
-    .video-trackbar {
-        flex: 1;
-        cursor: pointer;
-    }
-
-    .video-time {
-        font-size: 0.85em;
-        font-variant-numeric: tabular-nums;
-        white-space: nowrap;
-    }
-
     .video-volume-row {
         display: flex;
         align-items: center;
@@ -93,6 +30,13 @@
         cursor: pointer;
     }
 
+    .media-preview-controls {
+        --icon-button-hover-color: white;
+        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transition: opacity 300ms ease;
+    }
+
     .speed-dropdown {
         position: relative;
 
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index f89aa0c90d..2b9a5fb473 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -113,9 +113,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 onError={onError}
             />
 
-            <div className="video-preview-controls">
+            <div className="media-preview-controls">
                 <SeekBar mediaRef={videoRef} />
-                <div class="video-buttons-row">
+                <div class="media-buttons-row">
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
                         <RotateButton videoRef={videoRef} />

From d2afcbb98df21ffd37bd20ed7b695080d307a50e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:10:18 +0200
Subject: [PATCH 05/21] feat(audio): introduce volume slider

---
 .../src/widgets/type_widgets/file/Audio.tsx   |  8 ++-
 .../widgets/type_widgets/file/MediaPlayer.css | 11 ++++
 .../widgets/type_widgets/file/MediaPlayer.tsx | 59 +++++++++++++++++
 .../src/widgets/type_widgets/file/Video.css   | 11 ----
 .../src/widgets/type_widgets/file/Video.tsx   | 63 +------------------
 5 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 623b4efbfc..99de10caf2 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
-import { PlayPauseButton, SeekBar } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar, VolumeControl } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
@@ -21,9 +21,15 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 <SeekBar mediaRef={audioRef} />
 
                 <div class="media-buttons-row">
+                    <div className="left" />
+
                     <div className="center">
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
                     </div>
+
+                    <div className="right">
+                        <VolumeControl mediaRef={audioRef} />
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index 9e7c5dbdc6..f387b41ebd 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -55,4 +55,15 @@
             cursor: pointer;
         }
     }
+
+    .media-volume-row {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+
+        .media-volume-slider {
+            width: 80px;
+            cursor: pointer;
+        }
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index efdcfb8948..376984ca5c 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -75,3 +75,62 @@ export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTM
         />
     );
 }
+
+export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    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.
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        setVolume(media.volume);
+        setMuted(media.muted);
+
+        const onVolumeChange = () => {
+            setVolume(media.volume);
+            setMuted(media.muted);
+        };
+        media.addEventListener("volumechange", onVolumeChange);
+        return () => media.removeEventListener("volumechange", onVolumeChange);
+    }, []);
+
+    const onVolumeChange = (e: Event) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        const val = parseFloat((e.target as HTMLInputElement).value);
+        media.volume = val;
+        setVolume(val);
+        if (val > 0 && media.muted) {
+            media.muted = false;
+            setMuted(false);
+        }
+    };
+
+    const toggleMute = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.muted = !media.muted;
+        setMuted(media.muted);
+    };
+
+    return (
+        <div class="media-volume-row">
+            <ActionButton
+                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
+                text={muted ? t("video.unmute") : t("video.mute")}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="media-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
+            />
+        </div>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 7d2516cab0..9224c02752 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -19,17 +19,6 @@
         }
     }
 
-    .video-volume-row {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-    }
-
-    .video-volume-slider {
-        width: 80px;
-        cursor: pointer;
-    }
-
     .media-preview-controls {
         --icon-button-hover-color: white;
         --icon-button-hover-background: rgba(255, 255, 255, 0.2);
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 2b9a5fb473..f6a22e3d4c 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,7 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { PlayPauseButton, SeekBar } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
@@ -128,7 +128,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                         <LoopButton videoRef={videoRef} />
                     </div>
                     <div className="right">
-                        <VolumeControl videoRef={videoRef} />
+                        <VolumeControl mediaRef={videoRef} />
                         <ZoomToFitButton videoRef={videoRef} />
                         <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
@@ -181,65 +181,6 @@ function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTM
     );
 }
 
-function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [volume, setVolume] = useState(() => videoRef.current?.volume ?? 1);
-    const [muted, setMuted] = useState(() => videoRef.current?.muted ?? false);
-
-    // Sync state when the video element changes volume externally.
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        setVolume(video.volume);
-        setMuted(video.muted);
-
-        const onVolumeChange = () => {
-            setVolume(video.volume);
-            setMuted(video.muted);
-        };
-        video.addEventListener("volumechange", onVolumeChange);
-        return () => video.removeEventListener("volumechange", onVolumeChange);
-    }, []);
-
-    const onVolumeChange = (e: Event) => {
-        const video = videoRef.current;
-        if (!video) return;
-        const val = parseFloat((e.target as HTMLInputElement).value);
-        video.volume = val;
-        setVolume(val);
-        if (val > 0 && video.muted) {
-            video.muted = false;
-            setMuted(false);
-        }
-    };
-
-    const toggleMute = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.muted = !video.muted;
-        setMuted(video.muted);
-    };
-
-    return (
-        <div class="video-volume-row">
-            <ActionButton
-                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
-                text={muted ? t("video.unmute") : t("video.mute")}
-                onClick={toggleMute}
-            />
-            <input
-                type="range"
-                class="video-volume-slider"
-                min={0}
-                max={1}
-                step={0.05}
-                value={muted ? 0 : volume}
-                onInput={onVolumeChange}
-            />
-        </div>
-    );
-}
-
 const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
 
 function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {

From 6b974c2ac7bf235612e8cce7078eb990631186ac Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:12:09 +0200
Subject: [PATCH 06/21] feat(audio): introduce skip buttons

---
 .../src/widgets/type_widgets/file/Audio.tsx    |  5 ++++-
 .../widgets/type_widgets/file/MediaPlayer.tsx  | 12 ++++++++++++
 .../src/widgets/type_widgets/file/Video.tsx    | 18 +++---------------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 99de10caf2..ffd83b5e51 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -1,8 +1,9 @@
 import { useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
-import { PlayPauseButton, SeekBar, VolumeControl } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
@@ -24,7 +25,9 @@ export default function AudioPreview({ note }: { note: FNote }) {
                     <div className="left" />
 
                     <div className="center">
+                        <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                        <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
                     </div>
 
                     <div className="right">
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 376984ca5c..6049a53ee6 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -134,3 +134,15 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         </div>
     );
 }
+
+export function SkipButton({ mediaRef, seconds, icon, text }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, seconds: number, icon: string, text: string }) {
+    const skip = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.currentTime = Math.max(0, Math.min(media.duration, media.currentTime + seconds));
+    };
+
+    return (
+        <ActionButton icon={icon} text={text} onClick={skip} />
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index f6a22e3d4c..c22725f70e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,7 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { PlayPauseButton, SeekBar, VolumeControl } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
@@ -122,9 +122,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="center">
                         <div className="spacer" />
-                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
                         <PlayPauseButton mediaRef={videoRef} playing={playing} />
-                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
                         <LoopButton videoRef={videoRef} />
                     </div>
                     <div className="right">
@@ -169,18 +169,6 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTMLVideoElement>, seconds: number, icon: string, text: string }) {
-    const skip = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
-    };
-
-    return (
-        <ActionButton icon={icon} text={text} onClick={skip} />
-    );
-}
-
 const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
 
 function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {

From e86d84c4633bd9f0ca1a064b54396318c2846679 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:14:52 +0200
Subject: [PATCH 07/21] feat(audio): introduce loop button

---
 .../src/widgets/type_widgets/file/Audio.tsx   |  4 ++-
 .../widgets/type_widgets/file/MediaPlayer.tsx | 30 ++++++++++++++++
 .../src/widgets/type_widgets/file/Video.tsx   | 34 ++-----------------
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index ffd83b5e51..32b67ac1b3 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -3,7 +3,7 @@ import { useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
-import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
@@ -25,9 +25,11 @@ export default function AudioPreview({ note }: { note: FNote }) {
                     <div className="left" />
 
                     <div className="center">
+                        <div className="spacer" />
                         <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
                         <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <LoopButton mediaRef={audioRef} />
                     </div>
 
                     <div className="right">
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 6049a53ee6..6985773214 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -146,3 +146,33 @@ export function SkipButton({ mediaRef, seconds, icon, text }: { mediaRef: RefObj
         <ActionButton icon={icon} text={text} onClick={skip} />
     );
 }
+
+export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [loop, setLoop] = useState(() => mediaRef.current?.loop ?? false);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+        setLoop(media.loop);
+
+        const observer = new MutationObserver(() => setLoop(media.loop));
+        observer.observe(media, { attributes: true, attributeFilter: ["loop"] });
+        return () => observer.disconnect();
+    }, []);
+
+    const toggle = () => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.loop = !media.loop;
+        setLoop(media.loop);
+    };
+
+    return (
+        <ActionButton
+            className={loop ? "active" : ""}
+            icon="bx bx-repeat"
+            text={loop ? t("video.disable-loop") : t("video.loop")}
+            onClick={toggle}
+        />
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index c22725f70e..41654140fc 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,7 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
@@ -125,7 +125,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                         <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
                         <PlayPauseButton mediaRef={videoRef} playing={playing} />
                         <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
-                        <LoopButton videoRef={videoRef} />
+                        <LoopButton mediaRef={videoRef} />
                     </div>
                     <div className="right">
                         <VolumeControl mediaRef={videoRef} />
@@ -217,36 +217,6 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
     );
 }
 
-function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
-
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-        setLoop(video.loop);
-
-        const observer = new MutationObserver(() => setLoop(video.loop));
-        observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
-        return () => observer.disconnect();
-    }, []);
-
-    const toggle = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.loop = !video.loop;
-        setLoop(video.loop);
-    };
-
-    return (
-        <ActionButton
-            className={loop ? "active" : ""}
-            icon="bx bx-repeat"
-            text={loop ? t("video.disable-loop") : t("video.loop")}
-            onClick={toggle}
-        />
-    );
-}
-
 function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [rotation, setRotation] = useState(0);
 

From 365d0f0aac22ffd248d18a8939d63085cb6b01b6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:17:14 +0200
Subject: [PATCH 08/21] feat(audio): introduce playback speed

---
 .../src/widgets/type_widgets/file/Audio.tsx   |  6 ++-
 .../widgets/type_widgets/file/MediaPlayer.css | 19 +++++++
 .../widgets/type_widgets/file/MediaPlayer.tsx | 50 ++++++++++++++++++
 .../src/widgets/type_widgets/file/Video.css   | 19 -------
 .../src/widgets/type_widgets/file/Video.tsx   | 52 +------------------
 5 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 32b67ac1b3..3d48479977 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -3,7 +3,7 @@ import { useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
-import { LoopButton, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
@@ -22,7 +22,9 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 <SeekBar mediaRef={audioRef} />
 
                 <div class="media-buttons-row">
-                    <div className="left" />
+                    <div className="left">
+                        <PlaybackSpeed mediaRef={audioRef} />
+                    </div>
 
                     <div className="center">
                         <div className="spacer" />
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index f387b41ebd..1f1bdad0f0 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -66,4 +66,23 @@
             cursor: pointer;
         }
     }
+
+    .speed-dropdown {
+        position: relative;
+
+        .tn-icon {
+            transform: translateY(-10%);
+        }
+
+        .media-speed-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transform: translateY(15%);
+            text-align: center;
+            font-size: 0.6rem;
+            font-variant-numeric: tabular-nums;
+        }
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 6985773214..66aeffae80 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -5,6 +5,8 @@ import { useEffect, useState } from "preact/hooks";
 
 import { t } from "../../../services/i18n";
 import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import Icon from "../../react/Icon";
 
 export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
     const [currentTime, setCurrentTime] = useState(0);
@@ -176,3 +178,51 @@ export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement
         />
     );
 }
+
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
+    const [speed, setSpeed] = useState(() => mediaRef.current?.playbackRate ?? 1);
+
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media) return;
+
+        setSpeed(media.playbackRate);
+
+        const onRateChange = () => setSpeed(media.playbackRate);
+        media.addEventListener("ratechange", onRateChange);
+        return () => media.removeEventListener("ratechange", onRateChange);
+    }, []);
+
+    const selectSpeed = (rate: number) => {
+        const media = mediaRef.current;
+        if (!media) return;
+        media.playbackRate = rate;
+        setSpeed(rate);
+    };
+
+    return (
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="speed-dropdown"
+            text={<>
+                <Icon icon="bx bx-tachometer" />
+                <span class="media-speed-label">{speed}x</span>
+            </>}
+            title={t("video.playback-speed")}
+        >
+            {PLAYBACK_SPEEDS.map((rate) => (
+                <li key={rate}>
+                    <button
+                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
+                        onClick={() => selectSpeed(rate)}
+                    >
+                        {rate}x
+                    </button>
+                </li>
+            ))}
+        </Dropdown>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 9224c02752..af6d9cca53 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -25,23 +25,4 @@
         opacity: 1;
         transition: opacity 300ms ease;
     }
-
-    .speed-dropdown {
-        position: relative;
-
-        .tn-icon {
-            transform: translateY(-10%);
-        }
-
-        .video-speed-label {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            transform: translateY(15%);
-            text-align: center;
-            font-size: 0.6rem;
-            font-variant-numeric: tabular-nums;
-        }
-    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 41654140fc..efd01e11ac 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -10,7 +10,7 @@ import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { LoopButton, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
@@ -117,7 +117,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 <SeekBar mediaRef={videoRef} />
                 <div class="media-buttons-row">
                     <div className="left">
-                        <PlaybackSpeed videoRef={videoRef} />
+                        <PlaybackSpeed mediaRef={videoRef} />
                         <RotateButton videoRef={videoRef} />
                     </div>
                     <div className="center">
@@ -169,54 +169,6 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
-
-function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
-
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        setSpeed(video.playbackRate);
-
-        const onRateChange = () => setSpeed(video.playbackRate);
-        video.addEventListener("ratechange", onRateChange);
-        return () => video.removeEventListener("ratechange", onRateChange);
-    }, []);
-
-    const selectSpeed = (rate: number) => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.playbackRate = rate;
-        setSpeed(rate);
-    };
-
-    return (
-        <Dropdown
-            iconAction
-            hideToggleArrow
-            buttonClassName="speed-dropdown"
-            text={<>
-                <Icon icon="bx bx-tachometer" />
-                <span class="video-speed-label">{speed}x</span>
-            </>}
-            title={t("video.playback-speed")}
-        >
-            {PLAYBACK_SPEEDS.map((rate) => (
-                <li key={rate}>
-                    <button
-                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
-                        onClick={() => selectSpeed(rate)}
-                    >
-                        {rate}x
-                    </button>
-                </li>
-            ))}
-        </Dropdown>
-    );
-}
-
 function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [rotation, setRotation] = useState(0);
 

From 5b3fbecc0f5c8eeee587f9c11c133ea3010d1193 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:24:41 +0200
Subject: [PATCH 09/21] feat(audio): introduce keyboard shortcuts

---
 .../src/widgets/type_widgets/file/Audio.tsx   | 58 +++++++++++-
 .../widgets/type_widgets/file/MediaPlayer.css |  5 +
 .../src/widgets/type_widgets/file/Video.tsx   | 92 ++++++++++---------
 3 files changed, 108 insertions(+), 47 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 3d48479977..81f343405b 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "preact/hooks";
+import { MutableRef, useCallback, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
@@ -7,10 +7,21 @@ import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, Volume
 
 export default function AudioPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
+    const wrapperRef = useRef<HTMLDivElement>(null);
     const audioRef = useRef<HTMLAudioElement>(null);
+    const togglePlayback = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio) return;
+        if (audio.paused) {
+            audio.play();
+        } else {
+            audio.pause();
+        }
+    }, []);
+    const onKeyDown = useKeyboardShortcuts(audioRef, wrapperRef, togglePlayback);
 
     return (
-        <div className="audio-preview-wrapper">
+        <div ref={wrapperRef} className="audio-preview-wrapper" onKeyDown={onKeyDown} tabIndex={0}>
             <audio
                 class="audio-preview"
                 src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
@@ -42,3 +53,46 @@ export default function AudioPreview({ note }: { note: FNote }) {
         </div>
     );
 }
+
+function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void) {
+    return useCallback((e: KeyboardEvent) => {
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                audio.currentTime = Math.max(0, audio.currentTime - (e.ctrlKey ? 60 : 10));
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                audio.currentTime = Math.min(audio.duration, audio.currentTime + (e.ctrlKey ? 60 : 10));
+                break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                audio.muted = !audio.muted;
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                audio.volume = Math.min(1, audio.volume + 0.05);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                audio.volume = Math.max(0, audio.volume - 0.05);
+                break;
+            case "Home":
+                e.preventDefault();
+                audio.currentTime = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                audio.currentTime = audio.duration;
+                break;
+        }
+    }, [togglePlayback]);
+}
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index 1f1bdad0f0..44414ce7d4 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -86,3 +86,8 @@
         }
     }
 }
+
+.audio-preview-wrapper {
+    width: 100%;
+    height: 100%;
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index efd01e11ac..c349107d1d 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,14 +1,12 @@
 import "./Video.css";
 
 import { RefObject } from "preact";
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
-import Dropdown from "../../react/Dropdown";
-import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
 import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
@@ -39,7 +37,52 @@ export default function VideoPreview({ note }: { note: FNote }) {
         togglePlayback();
     }, [togglePlayback]);
 
-    const onKeyDown = useCallback((e: KeyboardEvent) => {
+    const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
+
+    if (error) {
+        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
+    }
+
+    return (
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onError={onError}
+            />
+
+            <div className="media-preview-controls">
+                <SeekBar mediaRef={videoRef} />
+                <div class="media-buttons-row">
+                    <div className="left">
+                        <PlaybackSpeed mediaRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
+                    </div>
+                    <div className="center">
+                        <div className="spacer" />
+                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <PlayPauseButton mediaRef={videoRef} playing={playing} />
+                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <LoopButton mediaRef={videoRef} />
+                    </div>
+                    <div className="right">
+                        <VolumeControl mediaRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
+                        <PictureInPictureButton videoRef={videoRef} />
+                        <FullscreenButton targetRef={wrapperRef} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function useKeyboardShortcuts(videoRef: MutableRef<HTMLVideoElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void, flashControls: () => void) {
+    return useCallback((e: KeyboardEvent) => {
         const video = videoRef.current;
         if (!video) return;
 
@@ -96,47 +139,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 break;
         }
     }, [togglePlayback, flashControls]);
-
-    if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
-    }
-
-    return (
-        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
-            <video
-                ref={videoRef}
-                class="video-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                datatype={note?.mime}
-                onPlay={() => setPlaying(true)}
-                onPause={() => setPlaying(false)}
-                onError={onError}
-            />
-
-            <div className="media-preview-controls">
-                <SeekBar mediaRef={videoRef} />
-                <div class="media-buttons-row">
-                    <div className="left">
-                        <PlaybackSpeed mediaRef={videoRef} />
-                        <RotateButton videoRef={videoRef} />
-                    </div>
-                    <div className="center">
-                        <div className="spacer" />
-                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
-                        <PlayPauseButton mediaRef={videoRef} playing={playing} />
-                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
-                        <LoopButton mediaRef={videoRef} />
-                    </div>
-                    <div className="right">
-                        <VolumeControl mediaRef={videoRef} />
-                        <ZoomToFitButton videoRef={videoRef} />
-                        <PictureInPictureButton videoRef={videoRef} />
-                        <FullscreenButton targetRef={wrapperRef} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
 }
 
 function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {

From 15ca3287272829058580b9af49d4fef606ad9496 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:26:17 +0200
Subject: [PATCH 10/21] feat(audio): make player full-width

---
 apps/client/src/widgets/note_wrapper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts
index 80fc42c6d2..b3f923f2a8 100644
--- a/apps/client/src/widgets/note_wrapper.ts
+++ b/apps/client/src/widgets/note_wrapper.ts
@@ -83,7 +83,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
+        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/") || note.mime.startsWith("audio/"))) {
             return true;
         }
 

From 2858f6387367378b910c0cf3e9fc7f9533912a8c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 19:30:12 +0200
Subject: [PATCH 11/21] feat(audio): report unsupported format

---
 apps/client/src/translations/en/translation.json   |  2 +-
 .../client/src/widgets/type_widgets/file/Audio.tsx | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 67f41c2c1e..7a11c1640b 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1051,7 +1051,7 @@
     "exit-picture-in-picture": "Exit picture-in-picture",
     "fullscreen": "Fullscreen (F)",
     "exit-fullscreen": "Exit fullscreen",
-    "unsupported-format": "Video preview is not available for this file format.",
+    "unsupported-format": "Media preview is not available for this file format.",
     "zoom-to-fit": "Zoom to fill",
     "zoom-reset": "Reset zoom to fill"
   },
diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 81f343405b..95e68aa2c2 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -1,14 +1,16 @@
-import { MutableRef, useCallback, useRef, useState } from "preact/hooks";
+import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
+import NoItems from "../../react/NoItems";
 import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 export default function AudioPreview({ note }: { note: FNote }) {
-    const [playing, setPlaying] = useState(false);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const audioRef = useRef<HTMLAudioElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
     const togglePlayback = useCallback(() => {
         const audio = audioRef.current;
         if (!audio) return;
@@ -20,6 +22,13 @@ export default function AudioPreview({ note }: { note: FNote }) {
     }, []);
     const onKeyDown = useKeyboardShortcuts(audioRef, wrapperRef, togglePlayback);
 
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
+    if (error) {
+        return <NoItems icon="bx bx-volume-mute" text={t("video.unsupported-format")} />;
+    }
+
     return (
         <div ref={wrapperRef} className="audio-preview-wrapper" onKeyDown={onKeyDown} tabIndex={0}>
             <audio
@@ -28,6 +37,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
                 ref={audioRef}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
+                onError={onError}
             />
             <div className="media-preview-controls">
                 <SeekBar mediaRef={audioRef} />

From 73260b91eb7bf894486194f441e7536996d33a7e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:29:34 +0200
Subject: [PATCH 12/21] feat(audio): add mime to unsupported format

---
 apps/client/src/translations/en/translation.json    | 2 +-
 apps/client/src/widgets/type_widgets/file/Audio.tsx | 2 +-
 apps/client/src/widgets/type_widgets/file/Video.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 7a11c1640b..abd12b6986 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1051,7 +1051,7 @@
     "exit-picture-in-picture": "Exit picture-in-picture",
     "fullscreen": "Fullscreen (F)",
     "exit-fullscreen": "Exit fullscreen",
-    "unsupported-format": "Media preview is not available for this file format.",
+    "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
     "zoom-to-fit": "Zoom to fill",
     "zoom-reset": "Reset zoom to fill"
   },
diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 95e68aa2c2..5c51d79bca 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -26,7 +26,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
     const onError = useCallback(() => setError(true), []);
 
     if (error) {
-        return <NoItems icon="bx bx-volume-mute" text={t("video.unsupported-format")} />;
+        return <NoItems icon="bx bx-volume-mute" text={t("video.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index c349107d1d..e9cdde4ea0 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -40,7 +40,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
+        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (

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 13/21] 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;
     }
 }

From 7777f72893775fdb06458910950a05c3bbb3456b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:36:51 +0200
Subject: [PATCH 14/21] chore(media): change translations prefix

---
 apps/client/src/translations/en/translation.json   |  2 +-
 .../client/src/widgets/type_widgets/file/Audio.tsx |  6 +++---
 .../src/widgets/type_widgets/file/MediaPlayer.tsx  |  8 ++++----
 .../client/src/widgets/type_widgets/file/Video.tsx | 14 +++++++-------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index abd12b6986..fdd6f9fb2d 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1036,7 +1036,7 @@
     "file_preview_not_available": "File preview is not available for this file format.",
     "too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
   },
-  "video": {
+  "media": {
     "play": "Play (Space)",
     "pause": "Pause (Space)",
     "back-10s": "Back 10s (Left arrow key)",
diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 676997fd63..36eda0b774 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -27,7 +27,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
     const onError = useCallback(() => setError(true), []);
 
     if (error) {
-        return <NoItems icon="bx bx-volume-mute" text={t("video.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-volume-mute" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (
@@ -53,9 +53,9 @@ export default function AudioPreview({ note }: { note: FNote }) {
 
                     <div className="center">
                         <div className="spacer" />
-                        <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
                         <PlayPauseButton mediaRef={audioRef} playing={playing} />
-                        <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={audioRef} />
                     </div>
 
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 66aeffae80..edd689d98e 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -72,7 +72,7 @@ export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTM
         <ActionButton
             className="play-button"
             icon={playing ? "bx bx-pause" : "bx bx-play"}
-            text={playing ? t("video.pause") : t("video.play")}
+            text={playing ? t("media.pause") : t("media.play")}
             onClick={togglePlayback}
         />
     );
@@ -121,7 +121,7 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         <div class="media-volume-row">
             <ActionButton
                 icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
-                text={muted ? t("video.unmute") : t("video.mute")}
+                text={muted ? t("media.unmute") : t("media.mute")}
                 onClick={toggleMute}
             />
             <input
@@ -173,7 +173,7 @@ export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement
         <ActionButton
             className={loop ? "active" : ""}
             icon="bx bx-repeat"
-            text={loop ? t("video.disable-loop") : t("video.loop")}
+            text={loop ? t("media.disable-loop") : t("media.loop")}
             onClick={toggle}
         />
     );
@@ -211,7 +211,7 @@ export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
                 <Icon icon="bx bx-tachometer" />
                 <span class="media-speed-label">{speed}x</span>
             </>}
-            title={t("video.playback-speed")}
+            title={t("media.playback-speed")}
         >
             {PLAYBACK_SPEEDS.map((rate) => (
                 <li key={rate}>
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index e9cdde4ea0..d8a2c42009 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -40,7 +40,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (
@@ -64,9 +64,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="center">
                         <div className="spacer" />
-                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
                         <PlayPauseButton mediaRef={videoRef} playing={playing} />
-                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={videoRef} />
                     </div>
                     <div className="right">
@@ -198,7 +198,7 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     return (
         <ActionButton
             icon="bx bx-rotate-right"
-            text={t("video.rotate")}
+            text={t("media.rotate")}
             onClick={rotate}
         />
     );
@@ -219,7 +219,7 @@ function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }
         <ActionButton
             className={fitted ? "active" : ""}
             icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
-            text={fitted ? t("video.zoom-reset") : t("video.zoom-to-fit")}
+            text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
             onClick={toggle}
         />
     );
@@ -262,7 +262,7 @@ function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoEle
     return (
         <ActionButton
             icon={active ? "bx bx-exit" : "bx bx-window-open"}
-            text={active ? t("video.exit-picture-in-picture") : t("video.picture-in-picture")}
+            text={active ? t("media.exit-picture-in-picture") : t("media.picture-in-picture")}
             onClick={toggle}
         />
     );
@@ -291,7 +291,7 @@ function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> })
     return (
         <ActionButton
             icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
-            text={isFullscreen ? t("video.exit-fullscreen") : t("video.fullscreen")}
+            text={isFullscreen ? t("media.exit-fullscreen") : t("media.fullscreen")}
             onClick={toggleFullscreen}
         />
     );

From 3edd8f6c5a0287ed6a3c4ad4ae5455b24ad3572f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:38:53 +0200
Subject: [PATCH 15/21] chore(media): solve linter warnings

---
 apps/client/src/widgets/type_widgets/file/Audio.tsx       | 2 +-
 apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx | 8 ++++----
 apps/client/src/widgets/type_widgets/file/Video.tsx       | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 36eda0b774..9dac014074 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -108,5 +108,5 @@ function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, wra
                 audio.currentTime = audio.duration;
                 break;
         }
-    }, [togglePlayback]);
+    }, [ audioRef, togglePlayback ]);
 }
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index edd689d98e..6d368d6270 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -25,7 +25,7 @@ export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | H
             media.removeEventListener("timeupdate", onTimeUpdate);
             media.removeEventListener("durationchange", onDurationChange);
         };
-    }, []);
+    }, [ mediaRef ]);
 
     const onSeek = (e: Event) => {
         const media = mediaRef.current;
@@ -96,7 +96,7 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         };
         media.addEventListener("volumechange", onVolumeChange);
         return () => media.removeEventListener("volumechange", onVolumeChange);
-    }, []);
+    }, [ mediaRef ]);
 
     const onVolumeChange = (e: Event) => {
         const media = mediaRef.current;
@@ -160,7 +160,7 @@ export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement
         const observer = new MutationObserver(() => setLoop(media.loop));
         observer.observe(media, { attributes: true, attributeFilter: ["loop"] });
         return () => observer.disconnect();
-    }, []);
+    }, [ mediaRef ]);
 
     const toggle = () => {
         const media = mediaRef.current;
@@ -193,7 +193,7 @@ export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         const onRateChange = () => setSpeed(media.playbackRate);
         media.addEventListener("ratechange", onRateChange);
         return () => media.removeEventListener("ratechange", onRateChange);
-    }, []);
+    }, [ mediaRef ]);
 
     const selectSpeed = (rate: number) => {
         const media = mediaRef.current;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index d8a2c42009..08fe5db4cb 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -138,7 +138,7 @@ function useKeyboardShortcuts(videoRef: MutableRef<HTMLVideoElement | null>, wra
                 flashControls();
                 break;
         }
-    }, [togglePlayback, flashControls]);
+    }, [ wrapperRef, videoRef, togglePlayback, flashControls ]);
 }
 
 function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
@@ -150,7 +150,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
         if (videoRef.current && !videoRef.current.paused) {
             hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
         }
-    }, []);
+    }, [ videoRef]);
 
     const onMouseMove = useCallback(() => {
         setVisible(true);
@@ -244,7 +244,7 @@ function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoEle
             video.removeEventListener("enterpictureinpicture", onEnter);
             video.removeEventListener("leavepictureinpicture", onLeave);
         };
-    }, [supported]);
+    }, [ videoRef, supported ]);
 
     if (!supported) return null;
 

From f8b4c6cb1553569d8a0081d9161cf8cc544e188d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:41:37 +0200
Subject: [PATCH 16/21] fix(audio): styling on light theme

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

diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
index 85490670fa..7307d43b8b 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -2,9 +2,7 @@
     padding: 1.25em;
     display: flex;
     flex-direction: column;
-    gap: 0.5em;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
+    gap: 0.5em;    
 
     .media-buttons-row {
         display: flex;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 5bbc0ac19e..59475d4e08 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -2,7 +2,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background-color: black;
+    background-color: black;    
 
     .video-preview {
         background-color: black;
@@ -15,7 +15,7 @@
 
         .video-preview-controls {
             opacity: 0;
-            pointer-events: none;
+            pointer-events: none;            
         }
     }
 
@@ -28,5 +28,7 @@
         bottom: 0;
         left: 0;
         right: 0;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
     }
 }

From 1c628fba4caff23419b8ee1e9f373dc14139b4f7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:49:57 +0200
Subject: [PATCH 17/21] fix(video): playing button not working

---
 .../src/widgets/type_widgets/file/Audio.tsx      |  2 +-
 .../widgets/type_widgets/file/MediaPlayer.tsx    | 16 ++++------------
 .../src/widgets/type_widgets/file/Video.tsx      |  4 ++--
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Audio.tsx b/apps/client/src/widgets/type_widgets/file/Audio.tsx
index 9dac014074..08b831a498 100644
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -54,7 +54,7 @@ export default function AudioPreview({ note }: { note: FNote }) {
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton mediaRef={audioRef} playing={playing} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={audioRef} />
                     </div>
diff --git a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
index 6d368d6270..e0fb57c265 100644
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -56,18 +56,10 @@ function formatTime(seconds: number): string {
     return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
 
-export function PlayPauseButton({ mediaRef, playing }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, playing: boolean }) {
-    const togglePlayback = () => {
-        const media = mediaRef.current;
-        if (!media) return;
-
-        if (media.paused) {
-            media.play();
-        } else {
-            media.pause();
-        }
-    };
-
+export function PlayPauseButton({ playing, togglePlayback }: {    
+    playing: boolean,
+    togglePlayback: () => void
+}) {
     return (
         <ActionButton
             className="play-button"
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 08fe5db4cb..5bf1e260e9 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -33,7 +33,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     }, []);
 
     const onVideoClick = useCallback((e: MouseEvent) => {
-        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
         togglePlayback();
     }, [togglePlayback]);
 
@@ -65,7 +65,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton mediaRef={videoRef} playing={playing} />
+                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
                         <LoopButton mediaRef={videoRef} />
                     </div>

From e61b7c7cfc482a666a6560ded0218c1fbc2e3551 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 20:58:49 +0200
Subject: [PATCH 18/21] feat(audio): add background effects

---
 apps/client/src/widgets/note_wrapper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts
index b3f923f2a8..ccaa5614d9 100644
--- a/apps/client/src/widgets/note_wrapper.ts
+++ b/apps/client/src/widgets/note_wrapper.ts
@@ -108,7 +108,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
+        if (note.type === "file" && (MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime) || note.mime.startsWith("audio/"))) {
             return true;
         }
 

From ab9d50b905ed2eab85c2a5d209b8869f7ffdeef7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 21:06:08 +0200
Subject: [PATCH 19/21] feat(video): add blur for controls

---
 apps/client/src/widgets/type_widgets/file/Video.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 59475d4e08..c4b2115e76 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -29,6 +29,7 @@
         left: 0;
         right: 0;
         background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(6px);
         color: white;
     }
 }

From 906889a0357700ac214355beb1680f9152db7c6c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Mar 2026 21:07:48 +0200
Subject: [PATCH 20/21] fix(video): auto-hide no longer working

---
 apps/client/src/widgets/type_widgets/file/Video.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index c4b2115e76..0fc6bcdd08 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -13,7 +13,7 @@
     &.controls-hidden {
         cursor: pointer;
 
-        .video-preview-controls {
+        .media-preview-controls {
             opacity: 0;
             pointer-events: none;            
         }

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 21/21] 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;
         }
     }