From 301a1b228801afc265b0ac4d15f6ca03ce06bce4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 21 Mar 2026 09:50:34 +0200
Subject: [PATCH] feat(video): basic integration into note list

---
 apps/client/src/services/content_renderer.ts      | 12 +++++++-----
 .../src/widgets/type_widgets/file/Video.tsx       | 15 +++++++++++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts
index ec29f094b5..bb1e08c1ca 100644
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -212,12 +212,14 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
 
         $content.append($audioPreview);
     } else if (type === "video") {
-        const $videoPreview = $("<video controls></video>")
-            .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
-            .attr("type", entity.mime)
-            .css("width", "100%");
+        const url = openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`);
+        const mime = entity.mime;
 
-        $content.append($videoPreview);
+        const $viewer = $(`<div style="height: 100%">`);
+        const VideoPreviewContent = (await import("../widgets/type_widgets/file/Video")).VideoPreviewContent;
+        render(h(VideoPreviewContent, { url, mime }), $viewer.get(0)!);
+
+        $content.append($viewer);
     }
 
     if (entityType === "notes" && "noteId" in entity) {
diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx
index 5bf1e260e9..1bd43a9784 100644
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -13,13 +13,20 @@ import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, Volume
 const AUTO_HIDE_DELAY = 3000;
 
 export default function VideoPreview({ note }: { note: FNote }) {
+    return <VideoPreviewContent
+        url={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+        mime={note.mime}
+    />;
+}
+
+export function VideoPreviewContent({ url, mime }: { url: string, mime: string }) {
     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]);
+    useEffect(() => setError(false), [ url ]);
     const onError = useCallback(() => setError(true), []);
 
     const togglePlayback = useCallback(() => {
@@ -40,7 +47,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: mime.replace("/", "-") })} />;
     }
 
     return (
@@ -48,8 +55,8 @@ export default function VideoPreview({ note }: { note: FNote }) {
             <video
                 ref={videoRef}
                 class="video-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                datatype={note?.mime}
+                src={url}
+                datatype={mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
                 onError={onError}