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