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