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