From 88d84fae1e949e06c34ad38e181421591a612988 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 18:48:54 +0200
Subject: [PATCH 01/40] refactor(video_player): extract to separate file

---
 apps/client/src/widgets/type_widgets/File.tsx     | 12 +-----------
 .../src/widgets/type_widgets/file/Video.css       |  3 +++
 .../src/widgets/type_widgets/file/Video.tsx       | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/file/Video.css
 create mode 100644 apps/client/src/widgets/type_widgets/file/Video.tsx

diff --git a/apps/client/src/widgets/type_widgets/File.tsx b/apps/client/src/widgets/type_widgets/File.tsx
index 0d5b038608..a13d765ed7 100644
--- a/apps/client/src/widgets/type_widgets/File.tsx
+++ b/apps/client/src/widgets/type_widgets/File.tsx
@@ -6,6 +6,7 @@ import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
 import PdfPreview from "./file/Pdf";
+import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
@@ -42,17 +43,6 @@ function TextPreview({ content }: { content: string }) {
     );
 }
 
-function VideoPreview({ note }: { note: FNote }) {
-    return (
-        <video
-            class="video-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            datatype={note?.mime}
-            controls
-        />
-    );
-}
-
 function AudioPreview({ note }: { note: FNote }) {
     return (
         <audio
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
new file mode 100644
index 0000000000..b5c8b44097
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -0,0 +1,3 @@
+.note-detail-file > .video-preview {
+
+}
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
new file mode 100644
index 0000000000..a61779f262
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -0,0 +1,15 @@
+import "./Video.css";
+
+import FNote from "../../../entities/fnote";
+import { getUrlForDownload } from "../../../services/open";
+
+export default function VideoPreview({ note }: { note: FNote }) {
+    return (
+        <video
+            class="video-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            datatype={note?.mime}
+            controls
+        />
+    );
+}

From 6b2ae8fd127c47f63f8fa7941b09f2da5073b8d5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 18:49:36 +0200
Subject: [PATCH 02/40] feat(video_player): black background

---
 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 b5c8b44097..3b56326203 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -1,3 +1,3 @@
 .note-detail-file > .video-preview {
-
+    background-color: black;
 }

From 4c73f31aca7123fbf6084e144b5c567d8dd6198b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 18:54:53 +0200
Subject: [PATCH 03/40] feat(video_player): start adding custom controls
 (play/pause)

---
 apps/client/src/widgets/type_widgets/File.css |  5 ++--
 .../src/widgets/type_widgets/file/Video.css   | 20 ++++++++++++++--
 .../src/widgets/type_widgets/file/Video.tsx   | 24 ++++++++++++++-----
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/File.css b/apps/client/src/widgets/type_widgets/File.css
index d7f7035c04..54114fe231 100644
--- a/apps/client/src/widgets/type_widgets/File.css
+++ b/apps/client/src/widgets/type_widgets/File.css
@@ -24,8 +24,7 @@
     margin: 10px;
 }
 
-.note-detail-file > .pdf-preview,
-.note-detail-file > .video-preview {
+.note-detail-file > .pdf-preview {
     width: 100%;
     height: 100%;
     flex-grow: 100;
@@ -38,4 +37,4 @@
     right: 15px;
     width: calc(100% - 30px);
     transform: translateY(-50%);
-}
\ 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 3b56326203..ed25d8f690 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -1,3 +1,19 @@
-.note-detail-file > .video-preview {
-    background-color: black;
+.note-detail-file > .video-preview-wrapper {
+    width: 100%;
+    height: 100%;
+
+    .video-preview {
+        background-color: black;
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    .video-preview-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 1em;
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index a61779f262..b50935d26b 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,15 +1,27 @@
 import "./Video.css";
 
+import { useRef } from "preact/hooks";
+
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
+import ActionButton from "../../react/ActionButton";
 
 export default function VideoPreview({ note }: { note: FNote }) {
+    const videoRef = useRef<HTMLVideoElement>(null);
+
     return (
-        <video
-            class="video-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            datatype={note?.mime}
-            controls
-        />
+        <div className="video-preview-wrapper">
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+            />
+
+            <div className="video-preview-controls">
+                <ActionButton icon="bx bx-play" text="Play" onClick={() => videoRef.current?.play()} />
+                <ActionButton icon="bx bx-pause" text="Pause" onClick={() => videoRef.current?.pause()} />
+            </div>
+        </div>
     );
 }

From 0e0ad2ed733f352072c8b9e73ae0e953836b4d42 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 18:56:20 +0200
Subject: [PATCH 04/40] feat(video_player): single play/pause button

---
 .../src/widgets/type_widgets/file/Video.tsx   | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index b50935d26b..929ebb831e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,6 +1,6 @@
 import "./Video.css";
 
-import { useRef } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
@@ -8,6 +8,18 @@ import ActionButton from "../../react/ActionButton";
 
 export default function VideoPreview({ note }: { note: FNote }) {
     const videoRef = useRef<HTMLVideoElement>(null);
+    const [playing, setPlaying] = useState(false);
+
+    const togglePlayback = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    };
 
     return (
         <div className="video-preview-wrapper">
@@ -16,11 +28,16 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 class="video-preview"
                 src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
                 datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
             />
 
             <div className="video-preview-controls">
-                <ActionButton icon="bx bx-play" text="Play" onClick={() => videoRef.current?.play()} />
-                <ActionButton icon="bx bx-pause" text="Pause" onClick={() => videoRef.current?.pause()} />
+                <ActionButton
+                    icon={playing ? "bx bx-pause" : "bx bx-play"}
+                    text={playing ? "Pause" : "Play"}
+                    onClick={togglePlayback}
+                />
             </div>
         </div>
     );

From 8b0a45e4fd1d1dc8b2b10a12e993f30c57875f2c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 18:57:58 +0200
Subject: [PATCH 05/40] feat(video_player): add a trackbar for seeking the
 video

---
 .../src/widgets/type_widgets/file/Video.css   |  8 +++++
 .../src/widgets/type_widgets/file/Video.tsx   | 34 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 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 ed25d8f690..b92c6aef75 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -15,5 +15,13 @@
         left: 0;
         right: 0;
         padding: 1em;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+    }
+
+    .video-trackbar {
+        width: 100%;
+        cursor: pointer;
     }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 929ebb831e..866d649708 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,6 +1,6 @@
 import "./Video.css";
 
-import { useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
@@ -9,6 +9,8 @@ import ActionButton from "../../react/ActionButton";
 export default function VideoPreview({ note }: { note: FNote }) {
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
 
     const togglePlayback = () => {
         const video = videoRef.current;
@@ -21,6 +23,27 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     };
 
+    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 className="video-preview-wrapper">
             <video
@@ -33,6 +56,15 @@ export default function VideoPreview({ note }: { note: FNote }) {
             />
 
             <div className="video-preview-controls">
+                <input
+                    type="range"
+                    class="video-trackbar"
+                    min={0}
+                    max={duration || 0}
+                    step={0.1}
+                    value={currentTime}
+                    onInput={onSeek}
+                />
                 <ActionButton
                     icon={playing ? "bx bx-pause" : "bx bx-play"}
                     text={playing ? "Pause" : "Play"}

From 08a0326cb074a315e349a7282f18477043f26e45 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:05:59 +0200
Subject: [PATCH 06/40] feat(video_player): add elapsed/remaining time

---
 .../src/widgets/type_widgets/file/Video.css   | 15 +++++++++-
 .../src/widgets/type_widgets/file/Video.tsx   | 28 +++++++++++++------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index b92c6aef75..e71ea2b63b 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -20,8 +20,21 @@
         gap: 0.5em;
     }
 
+    .video-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
     .video-trackbar {
-        width: 100%;
+        flex: 1;
         cursor: pointer;
     }
+
+    .video-time {
+        font-size: 0.85em;
+        font-variant-numeric: tabular-nums;
+        color: white;
+        white-space: nowrap;
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 866d649708..b77c17d2b3 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -6,6 +6,12 @@ import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
 
+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 default function VideoPreview({ note }: { note: FNote }) {
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
@@ -56,15 +62,19 @@ export default function VideoPreview({ note }: { note: FNote }) {
             />
 
             <div className="video-preview-controls">
-                <input
-                    type="range"
-                    class="video-trackbar"
-                    min={0}
-                    max={duration || 0}
-                    step={0.1}
-                    value={currentTime}
-                    onInput={onSeek}
-                />
+                <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>
                 <ActionButton
                     icon={playing ? "bx bx-pause" : "bx bx-play"}
                     text={playing ? "Pause" : "Play"}

From 540b0e0b83bc515d4d9a33fcf32d8c6740a953f4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:11:08 +0200
Subject: [PATCH 07/40] feat(video_player): volume changer

---
 .../src/widgets/type_widgets/file/Video.css   | 17 +++++++
 .../src/widgets/type_widgets/file/Video.tsx   | 49 +++++++++++++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index e71ea2b63b..a879014f8e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -37,4 +37,21 @@
         color: white;
         white-space: nowrap;
     }
+
+    .video-buttons-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .video-volume-row {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+    }
+
+    .video-volume-slider {
+        width: 80px;
+        cursor: pointer;
+    }
 }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index b77c17d2b3..dfdb33adac 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -17,6 +17,8 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
 
     const togglePlayback = () => {
         const video = videoRef.current;
@@ -50,6 +52,25 @@ export default function VideoPreview({ note }: { note: FNote }) {
         video.currentTime = parseFloat((e.target as HTMLInputElement).value);
     };
 
+    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 className="video-preview-wrapper">
             <video
@@ -75,11 +96,29 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     />
                     <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
                 </div>
-                <ActionButton
-                    icon={playing ? "bx bx-pause" : "bx bx-play"}
-                    text={playing ? "Pause" : "Play"}
-                    onClick={togglePlayback}
-                />
+                <div class="video-buttons-row">
+                    <ActionButton
+                        icon={playing ? "bx bx-pause" : "bx bx-play"}
+                        text={playing ? "Pause" : "Play"}
+                        onClick={togglePlayback}
+                    />
+                    <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 ? "Unmute" : "Mute"}
+                            onClick={toggleMute}
+                        />
+                        <input
+                            type="range"
+                            class="video-volume-slider"
+                            min={0}
+                            max={1}
+                            step={0.05}
+                            value={muted ? 0 : volume}
+                            onInput={onVolumeChange}
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     );

From 4303f3687e580fc403bf4b459b5c159564ca95ed Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:12:52 +0200
Subject: [PATCH 08/40] refactor(video_player): extract seek bar & volume
 control

---
 .../src/widgets/type_widgets/file/Video.tsx   | 117 ++++++++++--------
 1 file changed, 66 insertions(+), 51 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index dfdb33adac..3a7e87ef6a 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,5 +1,6 @@
 import "./Video.css";
 
+import { RefObject } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
@@ -15,10 +16,6 @@ function formatTime(seconds: number): string {
 export default function VideoPreview({ note }: { note: FNote }) {
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const [volume, setVolume] = useState(1);
-    const [muted, setMuted] = useState(false);
 
     const togglePlayback = () => {
         const video = videoRef.current;
@@ -31,6 +28,36 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     };
 
+    return (
+        <div className="video-preview-wrapper">
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+            />
+
+            <div className="video-preview-controls">
+                <SeekBar videoRef={videoRef} />
+                <div class="video-buttons-row">
+                    <ActionButton
+                        icon={playing ? "bx bx-pause" : "bx bx-play"}
+                        text={playing ? "Pause" : "Play"}
+                        onClick={togglePlayback}
+                    />
+                    <VolumeControl videoRef={videoRef} />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
@@ -52,6 +79,27 @@ export default function VideoPreview({ note }: { note: FNote }) {
         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(1);
+    const [muted, setMuted] = useState(false);
+
     const onVolumeChange = (e: Event) => {
         const video = videoRef.current;
         if (!video) return;
@@ -72,54 +120,21 @@ export default function VideoPreview({ note }: { note: FNote }) {
     };
 
     return (
-        <div className="video-preview-wrapper">
-            <video
-                ref={videoRef}
-                class="video-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                datatype={note?.mime}
-                onPlay={() => setPlaying(true)}
-                onPause={() => setPlaying(false)}
+        <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 ? "Unmute" : "Mute"}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="video-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
             />
-
-            <div className="video-preview-controls">
-                <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>
-                <div class="video-buttons-row">
-                    <ActionButton
-                        icon={playing ? "bx bx-pause" : "bx bx-play"}
-                        text={playing ? "Pause" : "Play"}
-                        onClick={togglePlayback}
-                    />
-                    <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 ? "Unmute" : "Mute"}
-                            onClick={toggleMute}
-                        />
-                        <input
-                            type="range"
-                            class="video-volume-slider"
-                            min={0}
-                            max={1}
-                            step={0.05}
-                            value={muted ? 0 : volume}
-                            onInput={onVolumeChange}
-                        />
-                    </div>
-                </div>
-            </div>
         </div>
     );
 }

From 951fdaec700dced6172e6d2324a7b357380acad4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:17:51 +0200
Subject: [PATCH 09/40] chore(video_player): change button alignment

---
 .../src/widgets/type_widgets/file/Video.css    | 18 +++++++++++++++---
 .../src/widgets/type_widgets/file/Video.tsx    | 17 +++++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index a879014f8e..1ecb5db8ed 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -14,7 +14,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        padding: 1em;
+        padding: 1.25em;
         display: flex;
         flex-direction: column;
         gap: 0.5em;
@@ -40,8 +40,20 @@
 
     .video-buttons-row {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
+
+        > * {
+            flex: 1;
+        }
+
+        .center {
+            display: flex;
+            justify-content: center;
+        }
+
+        .right {
+            display: flex;
+            justify-content: flex-end;
+        }
     }
 
     .video-volume-row {
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 3a7e87ef6a..db388050c6 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -42,12 +42,17 @@ export default function VideoPreview({ note }: { note: FNote }) {
             <div className="video-preview-controls">
                 <SeekBar videoRef={videoRef} />
                 <div class="video-buttons-row">
-                    <ActionButton
-                        icon={playing ? "bx bx-pause" : "bx bx-play"}
-                        text={playing ? "Pause" : "Play"}
-                        onClick={togglePlayback}
-                    />
-                    <VolumeControl videoRef={videoRef} />
+                    <div className="left" />
+                    <div className="center">
+                        <ActionButton
+                            icon={playing ? "bx bx-pause" : "bx bx-play"}
+                            text={playing ? "Pause" : "Play"}
+                            onClick={togglePlayback}
+                        />
+                    </div>
+                    <div className="right">
+                        <VolumeControl videoRef={videoRef} />
+                    </div>
                 </div>
             </div>
         </div>

From db763ba229fcff13cca026c4205e0a2f8a54a7e3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:20:49 +0200
Subject: [PATCH 10/40] feat(video_player): improve style of bottom bar

---
 .../src/widgets/type_widgets/file/Video.css   | 41 +++++++++++--------
 .../src/widgets/type_widgets/file/Video.tsx   |  1 +
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 1ecb5db8ed..88b405ed7f 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -18,6 +18,29 @@
         display: flex;
         flex-direction: column;
         gap: 0.5em;
+        background: rgba(0, 0, 0, 0.5);
+
+        .video-buttons-row {
+            display: flex;
+
+            > * {
+                flex: 1;
+            }
+
+            .center {
+                display: flex;
+                justify-content: center;
+            }
+
+            .right {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .play-button {
+                --icon-button-size: 48px;
+            }
+        }
     }
 
     .video-seekbar-row {
@@ -38,24 +61,6 @@
         white-space: nowrap;
     }
 
-    .video-buttons-row {
-        display: flex;
-
-        > * {
-            flex: 1;
-        }
-
-        .center {
-            display: flex;
-            justify-content: center;
-        }
-
-        .right {
-            display: flex;
-            justify-content: flex-end;
-        }
-    }
-
     .video-volume-row {
         display: flex;
         align-items: center;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index db388050c6..b2f7804262 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -45,6 +45,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="left" />
                     <div className="center">
                         <ActionButton
+                            className="play-button"
                             icon={playing ? "bx bx-pause" : "bx bx-play"}
                             text={playing ? "Pause" : "Play"}
                             onClick={togglePlayback}

From 1258d32820273103f934aa5337159cfbe4f7b0a4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:22:29 +0200
Subject: [PATCH 11/40] feat(video_player): add skip left/right buttons

---
 .../src/widgets/type_widgets/file/Video.css      |  2 ++
 .../src/widgets/type_widgets/file/Video.tsx      | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 88b405ed7f..39cf2562cf 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -25,6 +25,8 @@
 
             > * {
                 flex: 1;
+                align-items: center;
+                gap: 0.5em;
             }
 
             .center {
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index b2f7804262..0b8b6ce0b4 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -28,6 +28,12 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     };
 
+    const skip = (seconds: number) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
+    };
+
     return (
         <div className="video-preview-wrapper">
             <video
@@ -44,12 +50,22 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 <div class="video-buttons-row">
                     <div className="left" />
                     <div className="center">
+                        <ActionButton
+                            icon="bx bx-rewind"
+                            text="Back 10s"
+                            onClick={() => skip(-10)}
+                        />
                         <ActionButton
                             className="play-button"
                             icon={playing ? "bx bx-pause" : "bx bx-play"}
                             text={playing ? "Pause" : "Play"}
                             onClick={togglePlayback}
                         />
+                        <ActionButton
+                            icon="bx bx-fast-forward"
+                            text="Forward 30s"
+                            onClick={() => skip(30)}
+                        />
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />

From 2ce4d512e7bee0047dde133edc08cf5e47507c6b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:23:45 +0200
Subject: [PATCH 12/40] feat(video_player): add full screen button

---
 .../src/widgets/type_widgets/file/Video.tsx   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 0b8b6ce0b4..373881e147 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -14,8 +14,10 @@ function formatTime(seconds: number): string {
 }
 
 export default function VideoPreview({ note }: { note: FNote }) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
 
     const togglePlayback = () => {
         const video = videoRef.current;
@@ -34,8 +36,25 @@ export default function VideoPreview({ note }: { note: FNote }) {
         video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
     };
 
+    const toggleFullscreen = () => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) return;
+
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            wrapper.requestFullscreen();
+        }
+    };
+
+    useEffect(() => {
+        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, []);
+
     return (
-        <div className="video-preview-wrapper">
+        <div ref={wrapperRef} className="video-preview-wrapper">
             <video
                 ref={videoRef}
                 class="video-preview"
@@ -69,6 +88,11 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
+                        <ActionButton
+                            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
+                            text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                            onClick={toggleFullscreen}
+                        />
                     </div>
                 </div>
             </div>

From 2132c2ab386bbd0962e1d8a54aaaff70f714f45a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:29:00 +0200
Subject: [PATCH 13/40] refactor(video_player): extract full screen to separate
 component

---
 .../src/widgets/type_widgets/file/Video.tsx   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 373881e147..e158183dd5 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -17,8 +17,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-
     const togglePlayback = () => {
         const video = videoRef.current;
         if (!video) return;
@@ -36,22 +34,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
         video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
     };
 
-    const toggleFullscreen = () => {
-        const wrapper = wrapperRef.current;
-        if (!wrapper) return;
-
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        } else {
-            wrapper.requestFullscreen();
-        }
-    };
-
-    useEffect(() => {
-        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
-        document.addEventListener("fullscreenchange", onFullscreenChange);
-        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
-    }, []);
 
     return (
         <div ref={wrapperRef} className="video-preview-wrapper">
@@ -88,11 +70,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
-                        <ActionButton
-                            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
-                            text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-                            onClick={toggleFullscreen}
-                        />
+                        <FullscreenButton targetRef={wrapperRef} />
                     </div>
                 </div>
             </div>
@@ -184,3 +162,32 @@ function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
         </div>
     );
 }
+
+function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    useEffect(() => {
+        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, []);
+
+    const toggleFullscreen = () => {
+        const target = targetRef.current;
+        if (!target) return;
+
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            target.requestFullscreen();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
+            text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+            onClick={toggleFullscreen}
+        />
+    );
+}

From 7ba7b98f5fe91ba3f13a877afff08222ca43a82e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:38:15 +0200
Subject: [PATCH 14/40] feat(video_player): add playback speed indicator

---
 .../src/widgets/type_widgets/file/Video.css   | 22 +++++++++-
 .../src/widgets/type_widgets/file/Video.tsx   | 43 ++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 39cf2562cf..657f398187 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -27,10 +27,10 @@
                 flex: 1;
                 align-items: center;
                 gap: 0.5em;
+                display: flex;
             }
 
             .center {
-                display: flex;
                 justify-content: center;
             }
 
@@ -73,4 +73,24 @@
         width: 80px;
         cursor: pointer;
     }
+
+    .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;
+            color: white;
+            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 e158183dd5..bb6c48d9b7 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -6,6 +6,8 @@ import { useEffect, useRef, useState } from "preact/hooks";
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import Icon from "../../react/Icon";
 
 function formatTime(seconds: number): string {
     const mins = Math.floor(seconds / 60);
@@ -49,7 +51,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
             <div className="video-preview-controls">
                 <SeekBar videoRef={videoRef} />
                 <div class="video-buttons-row">
-                    <div className="left" />
+                    <div className="left">
+                        <PlaybackSpeed videoRef={videoRef} />
+                    </div>
                     <div className="center">
                         <ActionButton
                             icon="bx bx-rewind"
@@ -163,6 +167,43 @@ function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
     );
 }
 
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [speed, setSpeed] = useState(1);
+
+    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="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 FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
     const [isFullscreen, setIsFullscreen] = useState(false);
 

From 42a05f411b6c2659b266e0ccaaad7b0628c3828f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:42:45 +0200
Subject: [PATCH 15/40] feat(video_player): basic toggle of the controls

---
 .../src/widgets/type_widgets/file/Video.css   | 11 +++++
 .../src/widgets/type_widgets/file/Video.tsx   | 41 +++++++++++++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index 657f398187..eaa932c5a8 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -9,6 +9,15 @@
         height: 100%;
     }
 
+    &.controls-hidden {
+        cursor: pointer;
+
+        .video-preview-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
     .video-preview-controls {
         position: absolute;
         bottom: 0;
@@ -19,6 +28,8 @@
         flex-direction: column;
         gap: 0.5em;
         background: rgba(0, 0, 0, 0.5);
+        opacity: 1;
+        transition: opacity 300ms ease;
 
         .video-buttons-row {
             display: flex;
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index bb6c48d9b7..b795699086 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,7 +1,7 @@
 import "./Video.css";
 
 import { RefObject } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import { getUrlForDownload } from "../../../services/open";
@@ -19,6 +19,42 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const showControlsTemporarily = useCallback(() => {
+        setControlsVisible(true);
+        clearTimeout(hideTimerRef.current);
+        if (videoRef.current && !videoRef.current.paused) {
+            hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
+        }
+    }, []);
+
+    // Auto-hide when playback starts, show when paused.
+    useEffect(() => {
+        if (playing) {
+            hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
+        } else {
+            clearTimeout(hideTimerRef.current);
+            setControlsVisible(true);
+        }
+        return () => clearTimeout(hideTimerRef.current);
+    }, [playing]);
+
+    const onWrapperClick = useCallback((e: MouseEvent) => {
+        // Don't toggle if clicking on controls themselves.
+        const target = e.target as HTMLElement;
+        if (target.closest(".video-preview-controls")) return;
+        setControlsVisible((prev) => {
+            const next = !prev;
+            clearTimeout(hideTimerRef.current);
+            if (next && playing) {
+                hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
+            }
+            return next;
+        });
+    }, [playing]);
+
     const togglePlayback = () => {
         const video = videoRef.current;
         if (!video) return;
@@ -36,9 +72,8 @@ export default function VideoPreview({ note }: { note: FNote }) {
         video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
     };
 
-
     return (
-        <div ref={wrapperRef} className="video-preview-wrapper">
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={showControlsTemporarily}>
             <video
                 ref={videoRef}
                 class="video-preview"

From bccfa7956c57ab8d707d3a2a3e675c2cf34eef2a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:45:42 +0200
Subject: [PATCH 16/40] refactor(video_player): extract more buttons into
 separate components

---
 .../src/widgets/type_widgets/file/Video.tsx   | 70 ++++++++++---------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index b795699086..a950f6ab42 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -55,23 +55,6 @@ export default function VideoPreview({ note }: { note: FNote }) {
         });
     }, [playing]);
 
-    const togglePlayback = () => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        if (video.paused) {
-            video.play();
-        } else {
-            video.pause();
-        }
-    };
-
-    const skip = (seconds: number) => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
-    };
-
     return (
         <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={showControlsTemporarily}>
             <video
@@ -90,22 +73,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                         <PlaybackSpeed videoRef={videoRef} />
                     </div>
                     <div className="center">
-                        <ActionButton
-                            icon="bx bx-rewind"
-                            text="Back 10s"
-                            onClick={() => skip(-10)}
-                        />
-                        <ActionButton
-                            className="play-button"
-                            icon={playing ? "bx bx-pause" : "bx bx-play"}
-                            text={playing ? "Pause" : "Play"}
-                            onClick={togglePlayback}
-                        />
-                        <ActionButton
-                            icon="bx bx-fast-forward"
-                            text="Forward 30s"
-                            onClick={() => skip(30)}
-                        />
+                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text="Back 10s" />
+                        <PlayPauseButton videoRef={videoRef} playing={playing} />
+                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text="Forward 30s" />
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
@@ -117,6 +87,40 @@ export default function VideoPreview({ note }: { note: FNote }) {
     );
 }
 
+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 ? "Pause" : "Play"}
+            onClick={togglePlayback}
+        />
+    );
+}
+
+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} />
+    );
+}
+
 function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(0);

From fabc07be42d00bb71a53c676fcd652b8fda5bd5e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:47:25 +0200
Subject: [PATCH 17/40] refactor(video_player): extract hiding visibility to
 hook

---
 .../src/widgets/type_widgets/file/Video.tsx   | 80 ++++++++++---------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index a950f6ab42..5eac6ca68e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -15,48 +15,16 @@ function formatTime(seconds: number): string {
     return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
 
+const AUTO_HIDE_DELAY = 3000;
+
 export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
-    const [controlsVisible, setControlsVisible] = useState(true);
-    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-    const showControlsTemporarily = useCallback(() => {
-        setControlsVisible(true);
-        clearTimeout(hideTimerRef.current);
-        if (videoRef.current && !videoRef.current.paused) {
-            hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
-        }
-    }, []);
-
-    // Auto-hide when playback starts, show when paused.
-    useEffect(() => {
-        if (playing) {
-            hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
-        } else {
-            clearTimeout(hideTimerRef.current);
-            setControlsVisible(true);
-        }
-        return () => clearTimeout(hideTimerRef.current);
-    }, [playing]);
-
-    const onWrapperClick = useCallback((e: MouseEvent) => {
-        // Don't toggle if clicking on controls themselves.
-        const target = e.target as HTMLElement;
-        if (target.closest(".video-preview-controls")) return;
-        setControlsVisible((prev) => {
-            const next = !prev;
-            clearTimeout(hideTimerRef.current);
-            if (next && playing) {
-                hideTimerRef.current = setTimeout(() => setControlsVisible(false), 3000);
-            }
-            return next;
-        });
-    }, [playing]);
+    const { visible: controlsVisible, onMouseMove, onClick: onWrapperClick } = useAutoHideControls(videoRef, playing);
 
     return (
-        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={showControlsTemporarily}>
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={onMouseMove}>
             <video
                 ref={videoRef}
                 class="video-preview"
@@ -87,6 +55,46 @@ export default function VideoPreview({ note }: { note: FNote }) {
     );
 }
 
+function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
+    const [visible, setVisible] = useState(true);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const scheduleHide = useCallback(() => {
+        clearTimeout(hideTimerRef.current);
+        if (videoRef.current && !videoRef.current.paused) {
+            hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
+        }
+    }, []);
+
+    const onMouseMove = useCallback(() => {
+        setVisible(true);
+        scheduleHide();
+    }, [scheduleHide]);
+
+    const onClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        setVisible((prev) => {
+            const next = !prev;
+            clearTimeout(hideTimerRef.current);
+            if (next) scheduleHide();
+            return next;
+        });
+    }, [scheduleHide]);
+
+    // Auto-hide when playback starts, show when paused.
+    useEffect(() => {
+        if (playing) {
+            scheduleHide();
+        } else {
+            clearTimeout(hideTimerRef.current);
+            setVisible(true);
+        }
+        return () => clearTimeout(hideTimerRef.current);
+    }, [playing, scheduleHide]);
+
+    return { visible, onMouseMove, onClick };
+}
+
 function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {
     const togglePlayback = () => {
         const video = videoRef.current;

From f6d61eefcc092c3e8bb80ed40d2f6d8e8641e0b1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:48:21 +0200
Subject: [PATCH 18/40] feat(video_player): don't hide controls if not playing

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 5eac6ca68e..1e755dd389 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -72,6 +72,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     }, [scheduleHide]);
 
     const onClick = useCallback((e: MouseEvent) => {
+        if (!playing) return;
         if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
         setVisible((prev) => {
             const next = !prev;
@@ -79,7 +80,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
             if (next) scheduleHide();
             return next;
         });
-    }, [scheduleHide]);
+    }, [playing, scheduleHide]);
 
     // Auto-hide when playback starts, show when paused.
     useEffect(() => {

From e019271e7422666d9c9ab25c5130772090443557 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:50:31 +0200
Subject: [PATCH 19/40] feat(video_player): hide immediately on play

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 1e755dd389..eb283effe9 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -82,10 +82,10 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
         });
     }, [playing, scheduleHide]);
 
-    // Auto-hide when playback starts, show when paused.
+    // Hide immediately when playback starts, show when paused.
     useEffect(() => {
         if (playing) {
-            scheduleHide();
+            setVisible(false);
         } else {
             clearTimeout(hideTimerRef.current);
             setVisible(true);

From 89297b92f834f96c54c25cb19a345ae252c20fae Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:53:24 +0200
Subject: [PATCH 20/40] feat(video_player): click toggles play/pause instead of
 controls

---
 .../src/widgets/type_widgets/file/Video.tsx   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index eb283effe9..ab6b36baf9 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -21,10 +21,21 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
-    const { visible: controlsVisible, onMouseMove, onClick: onWrapperClick } = useAutoHideControls(videoRef, playing);
+    const { visible: controlsVisible, onMouseMove } = useAutoHideControls(videoRef, playing);
+
+    const onVideoClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    }, []);
 
     return (
-        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onWrapperClick} onMouseMove={onMouseMove}>
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onVideoClick} onMouseMove={onMouseMove}>
             <video
                 ref={videoRef}
                 class="video-preview"
@@ -71,17 +82,6 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
         scheduleHide();
     }, [scheduleHide]);
 
-    const onClick = useCallback((e: MouseEvent) => {
-        if (!playing) return;
-        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
-        setVisible((prev) => {
-            const next = !prev;
-            clearTimeout(hideTimerRef.current);
-            if (next) scheduleHide();
-            return next;
-        });
-    }, [playing, scheduleHide]);
-
     // Hide immediately when playback starts, show when paused.
     useEffect(() => {
         if (playing) {
@@ -93,7 +93,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
         return () => clearTimeout(hideTimerRef.current);
     }, [playing, scheduleHide]);
 
-    return { visible, onMouseMove, onClick };
+    return { visible, onMouseMove };
 }
 
 function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {

From 4bb662c5fbec648d357508c9134ee0a40954663c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 19:56:19 +0200
Subject: [PATCH 21/40] feat(video_player): button to toggle PIP

---
 .../src/widgets/type_widgets/file/Video.tsx   | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index ab6b36baf9..1ec8bcb9fa 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -58,6 +58,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
+                        <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
                     </div>
                 </div>
@@ -252,6 +253,49 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
     );
 }
 
+function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [active, setActive] = useState(false);
+    // The standard PiP API is only supported in Chromium-based browsers.
+    // Firefox uses its own proprietary PiP implementation.
+    const supported = "requestPictureInPicture" in HTMLVideoElement.prototype;
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !supported) return;
+
+        const onEnter = () => setActive(true);
+        const onLeave = () => setActive(false);
+
+        video.addEventListener("enterpictureinpicture", onEnter);
+        video.addEventListener("leavepictureinpicture", onLeave);
+        return () => {
+            video.removeEventListener("enterpictureinpicture", onEnter);
+            video.removeEventListener("leavepictureinpicture", onLeave);
+        };
+    }, [supported]);
+
+    if (!supported) return null;
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else {
+            video.requestPictureInPicture();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={active ? "bx bx-exit" : "bx bx-window-open"}
+            text={active ? "Exit picture-in-picture" : "Picture-in-picture"}
+            onClick={toggle}
+        />
+    );
+}
+
 function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
     const [isFullscreen, setIsFullscreen] = useState(false);
 

From 7107fec1a462df3b8113e81b8979758c539312a4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:03:58 +0200
Subject: [PATCH 22/40] feat(video_player): add rotate button

---
 .../src/widgets/type_widgets/file/Video.tsx   | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 1ec8bcb9fa..f160afb806 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -50,6 +50,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 <div class="video-buttons-row">
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
                     </div>
                     <div className="center">
                         <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text="Back 10s" />
@@ -253,6 +254,39 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
     );
 }
 
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [rotation, setRotation] = useState(0);
+
+    const rotate = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = (rotation + 90) % 360;
+        setRotation(next);
+
+        const isSideways = next === 90 || next === 270;
+        if (isSideways) {
+            // Scale down so the rotated video fits within its container.
+            const container = video.parentElement;
+            if (container) {
+                const ratio = container.clientWidth / container.clientHeight;
+                video.style.transform = `rotate(${next}deg) scale(${1 / ratio})`;
+            } else {
+                video.style.transform = `rotate(${next}deg)`;
+            }
+        } else {
+            video.style.transform = next === 0 ? "" : `rotate(${next}deg)`;
+        }
+    };
+
+    return (
+        <ActionButton
+            icon="bx bx-rotate-right"
+            text="Rotate"
+            onClick={rotate}
+        />
+    );
+}
+
 function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [active, setActive] = useState(false);
     // The standard PiP API is only supported in Chromium-based browsers.

From 8af35da2795cffe3e3ee1c559b95bc72351ecb56 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:05:40 +0200
Subject: [PATCH 23/40] feat(video_player): add loop button

---
 .../src/widgets/type_widgets/file/Video.tsx   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index f160afb806..00df647138 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -51,6 +51,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
                         <RotateButton videoRef={videoRef} />
+                        <LoopButton videoRef={videoRef} />
                     </div>
                     <div className="center">
                         <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text="Back 10s" />
@@ -254,6 +255,26 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
     );
 }
 
+function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [loop, setLoop] = useState(false);
+
+    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 ? "Disable loop" : "Loop"}
+            onClick={toggle}
+        />
+    );
+}
+
 function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [rotation, setRotation] = useState(0);
 

From fc6e9d89d95dc6c90f6c16bf957c4fdf91119616 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:07:45 +0200
Subject: [PATCH 24/40] fix(video_player): volume can get out of sync with
 external control

---
 .../src/widgets/type_widgets/file/Video.tsx   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 00df647138..a250df1f8e 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -176,8 +176,24 @@ function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
 }
 
 function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [volume, setVolume] = useState(1);
-    const [muted, setMuted] = useState(false);
+    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;

From 5a16bafbbffee3b59017ece8b4c8d68658bfde5a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:08:17 +0200
Subject: [PATCH 25/40] fix(video_player): playback speed can get out of sync
 with external control

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index a250df1f8e..2ab4c76e50 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -237,7 +237,18 @@ function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
 const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
 
 function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [speed, setSpeed] = useState(1);
+    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;

From 2cb54d702173b91386f3be11c99401bfeab452fa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:09:33 +0200
Subject: [PATCH 26/40] fix(video_player): loop can get out of sync with
 external control

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 2ab4c76e50..ce45f059d6 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -283,7 +283,17 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
 }
 
 function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [loop, setLoop] = useState(false);
+    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;

From 755872277b31dccf3ad4cde5ba31b49620f6c36b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:10:40 +0200
Subject: [PATCH 27/40] feat(video_player): space to toggle play/pause

---
 .../src/widgets/type_widgets/file/Video.tsx     | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index ce45f059d6..1a5fa3a5dd 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -23,8 +23,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const [playing, setPlaying] = useState(false);
     const { visible: controlsVisible, onMouseMove } = useAutoHideControls(videoRef, playing);
 
-    const onVideoClick = useCallback((e: MouseEvent) => {
-        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+    const togglePlayback = useCallback(() => {
         const video = videoRef.current;
         if (!video) return;
         if (video.paused) {
@@ -34,8 +33,20 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     }, []);
 
+    const onVideoClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        togglePlayback();
+    }, [togglePlayback]);
+
+    const onKeyDown = useCallback((e: KeyboardEvent) => {
+        if (e.key === " ") {
+            e.preventDefault();
+            togglePlayback();
+        }
+    }, [togglePlayback]);
+
     return (
-        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} onClick={onVideoClick} onMouseMove={onMouseMove}>
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
             <video
                 ref={videoRef}
                 class="video-preview"

From 41220eebd5dce3d3b9882d9f9855b6e756668628 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:11:56 +0200
Subject: [PATCH 28/40] feat(video_player): arrow keys to seek

---
 .../src/widgets/type_widgets/file/Video.tsx   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 1a5fa3a5dd..21c220f9f2 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -39,9 +39,22 @@ export default function VideoPreview({ note }: { note: FNote }) {
     }, [togglePlayback]);
 
     const onKeyDown = useCallback((e: KeyboardEvent) => {
-        if (e.key === " ") {
-            e.preventDefault();
-            togglePlayback();
+        const video = videoRef.current;
+        if (!video) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
+                break;
         }
     }, [togglePlayback]);
 

From 471a46a0302df0ed661741840e0d9cbcd2754e84 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:14:11 +0200
Subject: [PATCH 29/40] feat(video_player): flash controls when pressing
 shortcuts

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 21c220f9f2..a74e874dc6 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -21,7 +21,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
-    const { visible: controlsVisible, onMouseMove } = useAutoHideControls(videoRef, playing);
+    const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
 
     const togglePlayback = useCallback(() => {
         const video = videoRef.current;
@@ -46,17 +46,20 @@ export default function VideoPreview({ note }: { note: FNote }) {
             case " ":
                 e.preventDefault();
                 togglePlayback();
+                flashControls();
                 break;
             case "ArrowLeft":
                 e.preventDefault();
                 video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
+                flashControls();
                 break;
             case "ArrowRight":
                 e.preventDefault();
                 video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
+                flashControls();
                 break;
         }
-    }, [togglePlayback]);
+    }, [togglePlayback, flashControls]);
 
     return (
         <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
@@ -120,7 +123,7 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
         return () => clearTimeout(hideTimerRef.current);
     }, [playing, scheduleHide]);
 
-    return { visible, onMouseMove };
+    return { visible, onMouseMove, flash: onMouseMove };
 }
 
 function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {

From 87229600d2f981dc5737f4239273fb7d12d5e74c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:15:10 +0200
Subject: [PATCH 30/40] feat(video_player): keyboard shortcut to toggle
 full-screen

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index a74e874dc6..6972f57484 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -58,6 +58,15 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
                 flashControls();
                 break;
+            case "f":
+            case "F":
+                e.preventDefault();
+                if (document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else {
+                    wrapperRef.current?.requestFullscreen();
+                }
+                break;
         }
     }, [togglePlayback, flashControls]);
 

From 12f817c896e88ce2d13b5e3f4e73133d251c8687 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:16:04 +0200
Subject: [PATCH 31/40] feat(video_player): add keyboard shortcut to toggle
 mute

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 6972f57484..ce98690d30 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -67,6 +67,12 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     wrapperRef.current?.requestFullscreen();
                 }
                 break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                video.muted = !video.muted;
+                flashControls();
+                break;
         }
     }, [togglePlayback, flashControls]);
 

From 6631a4a806f7b2d79f3edafa36a98f6f43dec9f9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:16:53 +0200
Subject: [PATCH 32/40] feat(video_player): add shortcuts to just to
 beginning/end

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index ce98690d30..d797a855be 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -73,6 +73,16 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 video.muted = !video.muted;
                 flashControls();
                 break;
+            case "Home":
+                e.preventDefault();
+                video.currentTime = 0;
+                flashControls();
+                break;
+            case "End":
+                e.preventDefault();
+                video.currentTime = video.duration;
+                flashControls();
+                break;
         }
     }, [togglePlayback, flashControls]);
 

From d81dec94a9c0a008754b80b4c70003c279dcd658 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:18:16 +0200
Subject: [PATCH 33/40] feat(video_player): add keyboard shortcuts for toggling
 volume

---
 apps/client/src/widgets/type_widgets/file/Video.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index d797a855be..511fd6c25c 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -73,6 +73,16 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 video.muted = !video.muted;
                 flashControls();
                 break;
+            case "ArrowUp":
+                e.preventDefault();
+                video.volume = Math.min(1, video.volume + 0.05);
+                flashControls();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                video.volume = Math.max(0, video.volume - 0.05);
+                flashControls();
+                break;
             case "Home":
                 e.preventDefault();
                 video.currentTime = 0;

From 7eb452ed8bf4e79c032120f4c8611a64554ee971 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:22:03 +0200
Subject: [PATCH 34/40] refactor(video_player): use translations

---
 .../src/translations/en/translation.json      | 16 ++++++++++++++++
 .../src/widgets/type_widgets/file/Video.tsx   | 19 ++++++++++---------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 2e228a9825..cbaf7a3767 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1036,6 +1036,22 @@
     "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": {
+    "play": "Play",
+    "pause": "Pause",
+    "back-10s": "Back 10s",
+    "forward-30s": "Forward 30s",
+    "mute": "Mute",
+    "unmute": "Unmute",
+    "playback-speed": "Playback speed",
+    "loop": "Loop",
+    "disable-loop": "Disable loop",
+    "rotate": "Rotate",
+    "picture-in-picture": "Picture-in-picture",
+    "exit-picture-in-picture": "Exit picture-in-picture",
+    "fullscreen": "Fullscreen",
+    "exit-fullscreen": "Exit fullscreen"
+  },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
     "start_session_button": "Start protected session",
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 511fd6c25c..d6f2448235 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -4,6 +4,7 @@ import { RefObject } from "preact";
 import { 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";
@@ -116,9 +117,9 @@ export default function VideoPreview({ note }: { note: FNote }) {
                         <LoopButton videoRef={videoRef} />
                     </div>
                     <div className="center">
-                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text="Back 10s" />
+                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
                         <PlayPauseButton videoRef={videoRef} playing={playing} />
-                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text="Forward 30s" />
+                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
@@ -177,7 +178,7 @@ function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoE
         <ActionButton
             className="play-button"
             icon={playing ? "bx bx-pause" : "bx bx-play"}
-            text={playing ? "Pause" : "Play"}
+            text={playing ? t("video.pause") : t("video.play")}
             onClick={togglePlayback}
         />
     );
@@ -280,7 +281,7 @@ function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
         <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 ? "Unmute" : "Mute"}
+                text={muted ? t("video.unmute") : t("video.mute")}
                 onClick={toggleMute}
             />
             <input
@@ -328,7 +329,7 @@ function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> })
                 <Icon icon="bx bx-tachometer" />
                 <span class="video-speed-label">{speed}x</span>
             </>}
-            title="Playback speed"
+            title={t("video.playback-speed")}
         >
             {PLAYBACK_SPEEDS.map((rate) => (
                 <li key={rate}>
@@ -368,7 +369,7 @@ function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
         <ActionButton
             className={loop ? "active" : ""}
             icon="bx bx-repeat"
-            text={loop ? "Disable loop" : "Loop"}
+            text={loop ? t("video.disable-loop") : t("video.loop")}
             onClick={toggle}
         />
     );
@@ -401,7 +402,7 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     return (
         <ActionButton
             icon="bx bx-rotate-right"
-            text="Rotate"
+            text={t("video.rotate")}
             onClick={rotate}
         />
     );
@@ -444,7 +445,7 @@ function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoEle
     return (
         <ActionButton
             icon={active ? "bx bx-exit" : "bx bx-window-open"}
-            text={active ? "Exit picture-in-picture" : "Picture-in-picture"}
+            text={active ? t("video.exit-picture-in-picture") : t("video.picture-in-picture")}
             onClick={toggle}
         />
     );
@@ -473,7 +474,7 @@ function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> })
     return (
         <ActionButton
             icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
-            text={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+            text={isFullscreen ? t("video.exit-fullscreen") : t("video.fullscreen")}
             onClick={toggleFullscreen}
         />
     );

From 0ca665fb8597d49fe7a62e096a6240a441b2a9d5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:24:16 +0200
Subject: [PATCH 35/40] chore(video_player): mention keys

---
 apps/client/src/translations/en/translation.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index cbaf7a3767..bc1c5e77ed 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1037,19 +1037,19 @@
     "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": {
-    "play": "Play",
-    "pause": "Pause",
-    "back-10s": "Back 10s",
-    "forward-30s": "Forward 30s",
-    "mute": "Mute",
-    "unmute": "Unmute",
+    "play": "Play (Space)",
+    "pause": "Pause (Space)",
+    "back-10s": "Back 10s (Left arrow key)",
+    "forward-30s": "Forward 30s (Right arrow key, 10s)",
+    "mute": "Mute (M)",
+    "unmute": "Unmute (M)",
     "playback-speed": "Playback speed",
     "loop": "Loop",
     "disable-loop": "Disable loop",
     "rotate": "Rotate",
     "picture-in-picture": "Picture-in-picture",
     "exit-picture-in-picture": "Exit picture-in-picture",
-    "fullscreen": "Fullscreen",
+    "fullscreen": "Fullscreen (F)",
     "exit-fullscreen": "Exit fullscreen"
   },
   "protected_session": {

From 5528701744f40bef9acab0ec5a25a354e16d39f6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:33:47 +0200
Subject: [PATCH 36/40] feat(video_player): indicate unsupported file formats

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

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index bc1c5e77ed..56a3bdd7ee 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1050,7 +1050,8 @@
     "picture-in-picture": "Picture-in-picture",
     "exit-picture-in-picture": "Exit picture-in-picture",
     "fullscreen": "Fullscreen (F)",
-    "exit-fullscreen": "Exit fullscreen"
+    "exit-fullscreen": "Exit fullscreen",
+    "unsupported-format": "Video preview is not available for this file format."
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index d6f2448235..01cafb715c 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -9,6 +9,7 @@ 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";
 
 function formatTime(seconds: number): string {
     const mins = Math.floor(seconds / 60);
@@ -22,8 +23,12 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
     const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
 
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
     const togglePlayback = useCallback(() => {
         const video = videoRef.current;
         if (!video) return;
@@ -97,6 +102,10 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     }, [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
@@ -106,6 +115,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 datatype={note?.mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
+                onError={onError}
             />
 
             <div className="video-preview-controls">

From 82592ada54f50edf1e2dcf8a1f66876f096e8c60 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:36:03 +0200
Subject: [PATCH 37/40] fix(video_player): unreadable controls on light theme

---
 apps/client/src/widgets/type_widgets/file/Video.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index eaa932c5a8..0be415f84d 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -28,6 +28,9 @@
         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;
 
@@ -70,7 +73,6 @@
     .video-time {
         font-size: 0.85em;
         font-variant-numeric: tabular-nums;
-        color: white;
         white-space: nowrap;
     }
 
@@ -99,7 +101,6 @@
             right: 0;
             transform: translateY(15%);
             text-align: center;
-            color: white;
             font-size: 0.6rem;
             font-variant-numeric: tabular-nums;
         }

From 3fed2ba42e49d98aacae6cb73b430f5f25e2ed27 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:44:32 +0200
Subject: [PATCH 38/40] feat(video_player): add zoom to fit button

---
 .../src/translations/en/translation.json      |  4 +++-
 .../src/widgets/type_widgets/file/Video.tsx   | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 56a3bdd7ee..4e5338bfc9 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1051,7 +1051,9 @@
     "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": "Video preview is not available for this file format.",
+    "zoom-to-fit": "Zoom to fill",
+    "zoom-reset": "Reset zoom to fill"
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 01cafb715c..0403ff7355 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -133,6 +133,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
                         <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
                     </div>
@@ -418,6 +419,27 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     );
 }
 
+function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [fitted, setFitted] = useState(false);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = !fitted;
+        video.style.objectFit = next ? "cover" : "";
+        setFitted(next);
+    };
+
+    return (
+        <ActionButton
+            className={fitted ? "active" : ""}
+            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+            text={fitted ? t("video.zoom-reset") : t("video.zoom-to-fit")}
+            onClick={toggle}
+        />
+    );
+}
+
 function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [active, setActive] = useState(false);
     // The standard PiP API is only supported in Chromium-based browsers.

From 80493a52be4e01317030cf809a6d1000859628d7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:46:28 +0200
Subject: [PATCH 39/40] feat(video_player): move loop to center section

---
 apps/client/src/widgets/type_widgets/file/Video.css | 5 +++++
 apps/client/src/widgets/type_widgets/file/Video.tsx | 3 ++-
 2 files changed, 7 insertions(+), 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 0be415f84d..a405bd59c2 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -44,6 +44,11 @@
                 display: flex;
             }
 
+            .spacer {
+                width: var(--icon-button-size, 32px);
+                height: var(--icon-button-size, 32px);
+            }
+
             .center {
                 justify-content: center;
             }
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 0403ff7355..8197192e66 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -124,12 +124,13 @@ export default function VideoPreview({ note }: { note: FNote }) {
                     <div className="left">
                         <PlaybackSpeed videoRef={videoRef} />
                         <RotateButton videoRef={videoRef} />
-                        <LoopButton videoRef={videoRef} />
                     </div>
                     <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} />
                         <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <LoopButton videoRef={videoRef} />
                     </div>
                     <div className="right">
                         <VolumeControl videoRef={videoRef} />

From e868615fd5356d859730e7ad3eed907481cd64b5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 22:19:50 +0200
Subject: [PATCH 40/40] chore(client): address requested changes

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

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 4e5338bfc9..67f41c2c1e 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1040,7 +1040,7 @@
     "play": "Play (Space)",
     "pause": "Pause (Space)",
     "back-10s": "Back 10s (Left arrow key)",
-    "forward-30s": "Forward 30s (Right arrow key, 10s)",
+    "forward-30s": "Forward 30s",
     "mute": "Mute (M)",
     "unmute": "Unmute (M)",
     "playback-speed": "Playback speed",
diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css
index a405bd59c2..5386672f7d 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -1,10 +1,11 @@
 .note-detail-file > .video-preview-wrapper {
     width: 100%;
     height: 100%;
+    position: relative;
+    background-color: black;
 
     .video-preview {
         background-color: black;
-        position: relative;
         width: 100%;
         height: 100%;
     }