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] 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"}