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