From 5528701744f40bef9acab0ec5a25a354e16d39f6 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 10 Mar 2026 20:33:47 +0200
Subject: [PATCH] feat(video_player): indicate unsupported file formats

---
 apps/client/src/translations/en/translation.json    |  3 ++-
 apps/client/src/widgets/type_widgets/file/Video.tsx | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index bc1c5e77ed..56a3bdd7ee 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1050,7 +1050,8 @@
     "picture-in-picture": "Picture-in-picture",
     "exit-picture-in-picture": "Exit picture-in-picture",
     "fullscreen": "Fullscreen (F)",
-    "exit-fullscreen": "Exit fullscreen"
+    "exit-fullscreen": "Exit fullscreen",
+    "unsupported-format": "Video preview is not available for this file format."
   },
   "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 d6f2448235..01cafb715c 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -9,6 +9,7 @@ import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
 import Dropdown from "../../react/Dropdown";
 import Icon from "../../react/Icon";
+import NoItems from "../../react/NoItems";
 
 function formatTime(seconds: number): string {
     const mins = Math.floor(seconds / 60);
@@ -22,8 +23,12 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
     const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
 
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
     const togglePlayback = useCallback(() => {
         const video = videoRef.current;
         if (!video) return;
@@ -97,6 +102,10 @@ export default function VideoPreview({ note }: { note: FNote }) {
         }
     }, [togglePlayback, flashControls]);
 
+    if (error) {
+        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
+    }
+
     return (
         <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
             <video
@@ -106,6 +115,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 datatype={note?.mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
+                onError={onError}
             />
 
             <div className="video-preview-controls">