gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-22 16:23:50 +01:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(video): basic integration into note list

Browse Source
This commit is contained in:
Elian Doran 2026-03-21 09:50:34 +02:00
parent 00c4933344
commit 301a1b2288
No known key found for this signature in database
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/client/src/services/content_renderer.ts
View File

@ -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) {

15
apps/client/src/widgets/type_widgets/file/Video.tsx
View File

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