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

feat(video_player): start adding custom controls (play/pause)

Browse Source
This commit is contained in:
Elian Doran 2026-03-10 18:54:53 +02:00
parent 6b2ae8fd12
commit 4c73f31aca
No known key found for this signature in database
3 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/type_widgets/File.css
View File

@ -24,8 +24,7 @@
margin: 10px;
}
.note-detail-file > .pdf-preview,
.note-detail-file > .video-preview {
.note-detail-file > .pdf-preview {
width: 100%;
height: 100%;
flex-grow: 100;
@ -38,4 +37,4 @@
right: 15px;
width: calc(100% - 30px);
transform: translateY(-50%);
}
}

20
apps/client/src/widgets/type_widgets/file/Video.css
View File

@ -1,3 +1,19 @@
.note-detail-file > .video-preview {
background-color: black;
.note-detail-file > .video-preview-wrapper {
width: 100%;
height: 100%;
.video-preview {
background-color: black;
position: relative;
width: 100%;
height: 100%;
}
.video-preview-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
}
}

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

@ -1,15 +1,27 @@
import "./Video.css";
import { useRef } from "preact/hooks";
import FNote from "../../../entities/fnote";
import { getUrlForDownload } from "../../../services/open";
import ActionButton from "../../react/ActionButton";
export default function VideoPreview({ note }: { note: FNote }) {
const videoRef = useRef<HTMLVideoElement>(null);
return (
<video
class="video-preview"
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
datatype={note?.mime}
controls
/>
<div className="video-preview-wrapper">
<video
ref={videoRef}
class="video-preview"
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
datatype={note?.mime}
/>
<div className="video-preview-controls">
<ActionButton icon="bx bx-play" text="Play" onClick={() => videoRef.current?.play()} />
<ActionButton icon="bx bx-pause" text="Pause" onClick={() => videoRef.current?.pause()} />
</div>
</div>
);
}