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

feat(video_player): single play/pause button

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

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

@ -1,6 +1,6 @@
import "./Video.css";
import { useRef } from "preact/hooks";
import { useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import { getUrlForDownload } from "../../../services/open";
@ -8,6 +8,18 @@ import ActionButton from "../../react/ActionButton";
export default function VideoPreview({ note }: { note: FNote }) {
const videoRef = useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = useState(false);
const togglePlayback = () => {
const video = videoRef.current;
if (!video) return;
if (video.paused) {
video.play();
} else {
video.pause();
}
};
return (
<div className="video-preview-wrapper">
@ -16,11 +28,16 @@ export default function VideoPreview({ note }: { note: FNote }) {
class="video-preview"
src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
datatype={note?.mime}
onPlay={() => setPlaying(true)}
onPause={() => setPlaying(false)}
/>
<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()} />
<ActionButton
icon={playing ? "bx bx-pause" : "bx bx-play"}
text={playing ? "Pause" : "Play"}
onClick={togglePlayback}
/>
</div>
</div>
);