gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-03 21:24:24 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

feat(revisions): display video preview for revisions

Browse Source
This commit is contained in:
Elian Doran 2026-01-02 19:44:23 +02:00
parent d84150e97b
commit 29b70a12bd
No known key found for this signature in database
2 changed files with 63 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/widgets/dialogs/revisions.css
View File

@ -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%;
}
}
}
}

58
apps/client/src/widgets/dialogs/revisions.tsx
View File

@ -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>;
}