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] 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) {