From 29b70a12bd6733241ca5411e2a156193b003b089 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 2 Jan 2026 19:44:23 +0200
Subject: [PATCH] feat(revisions): display video preview for revisions

---
 apps/client/src/widgets/dialogs/revisions.css | 26 +++++++++
 apps/client/src/widgets/dialogs/revisions.tsx | 58 ++++++++++++-------
 2 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/revisions.css b/apps/client/src/widgets/dialogs/revisions.css
index dc94f18e7..777470e3d 100644
--- a/apps/client/src/widgets/dialogs/revisions.css
+++ b/apps/client/src/widgets/dialogs/revisions.css
@@ -69,4 +69,30 @@ body.mobile .revisions-dialog {
             padding: 0.25em 0;
         }
     }
+
+    .revision-content.type-file {
+        display: flex;
+        min-width: 0;
+        min-height: 0;
+
+        .revision-file-preview {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            flex-grow: 1;
+        }
+
+        .revision-file-preview-content {
+            flex-grow: 1;
+            min-height: 0;
+            display: flex;
+            flex-direction: column;
+
+            video {
+                height: 100%;
+            }
+        }
+    }
+
 }
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index 2f10b6233..06a1e0b9d 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -1,6 +1,7 @@
 import "./revisions.css";
 
 import type { RevisionItem,RevisionPojo } from "@triliumnext/commons";
+import clsx from "clsx";
 import { diffWords } from "diff";
 import type { CSSProperties } from "preact/compat";
 import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
@@ -213,7 +214,10 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
                     }
                 </div>)}
             </div>
-            <div className="revision-content use-tn-links selectable-text" style={{ overflow: "auto", wordBreak: "break-word" }}>
+            <div
+                className={clsx("revision-content use-tn-links selectable-text", `type-${revisionItem?.type}`)}
+                style={{ overflow: "auto", wordBreak: "break-word" }}
+            >
                 <RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/>
             </div>
         </>
@@ -359,26 +363,29 @@ function RevisionFooter({ note }: { note?: FNote }) {
 
 function FilePreview({ revisionItem, fullRevision }: { revisionItem: RevisionItem, fullRevision: RevisionPojo }) {
     return (
-        <table className="file-preview-table">
-            <tbody>
-                <tr>
-                    <th>{t("revisions.mime")}</th>
-                    <td>{revisionItem.mime}</td>
-                </tr>
-                <tr>
-                    <th>{t("revisions.file_size")}</th>
-                    <td>{revisionItem.contentLength && utils.formatSize(revisionItem.contentLength)}</td>
-                </tr>
-                <tr>
-                    <td colspan={2}>
-                        <strong>{t("revisions.preview")}</strong>
-                        <div>
-                            <FilePreviewInner revisionItem={revisionItem} fullRevision={fullRevision} />
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <div className="revision-file-preview">
+            <table className="file-preview-table">
+                <tbody>
+                    <tr>
+                        <th>{t("revisions.mime")}</th>
+                        <td>{revisionItem.mime}</td>
+                    </tr>
+                    <tr>
+                        <th>{t("revisions.file_size")}</th>
+                        <td>{revisionItem.contentLength && utils.formatSize(revisionItem.contentLength)}</td>
+                    </tr>
+                    <tr>
+                        <td colspan={2}>
+                            <strong>{t("revisions.preview")}</strong>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div class="revision-file-preview-content">
+                <FilePreviewInner revisionItem={revisionItem} fullRevision={fullRevision} />
+            </div>
+        </div>
     );
 }
 
@@ -392,6 +399,15 @@ function FilePreviewInner({ revisionItem, fullRevision }: { revisionItem: Revisi
         );
     }
 
+    if (revisionItem.mime.startsWith("video/")) {
+        return (
+            <video
+                src={`api/revisions/${revisionItem.revisionId}/download`}
+                controls
+            />
+        );
+    }
+
     if (fullRevision.content) {
         return <pre className="file-preview-content" style={CODE_STYLE}>{fullRevision.content}</pre>;
     }