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

feat(video_player): add a trackbar for seeking the video

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

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

@ -15,5 +15,13 @@
left: 0;
right: 0;
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
}
.video-trackbar {
width: 100%;
cursor: pointer;
}
}

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

@ -1,6 +1,6 @@
import "./Video.css";
import { useRef, useState } from "preact/hooks";
import { useEffect, useRef, useState } from "preact/hooks";
import FNote from "../../../entities/fnote";
import { getUrlForDownload } from "../../../services/open";
@ -9,6 +9,8 @@ import ActionButton from "../../react/ActionButton";
export default function VideoPreview({ note }: { note: FNote }) {
const videoRef = useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const togglePlayback = () => {
const video = videoRef.current;
@ -21,6 +23,27 @@ export default function VideoPreview({ note }: { note: FNote }) {
}
};
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const onTimeUpdate = () => setCurrentTime(video.currentTime);
const onDurationChange = () => setDuration(video.duration);
video.addEventListener("timeupdate", onTimeUpdate);
video.addEventListener("durationchange", onDurationChange);
return () => {
video.removeEventListener("timeupdate", onTimeUpdate);
video.removeEventListener("durationchange", onDurationChange);
};
}, []);
const onSeek = (e: Event) => {
const video = videoRef.current;
if (!video) return;
video.currentTime = parseFloat((e.target as HTMLInputElement).value);
};
return (
<div className="video-preview-wrapper">
<video
@ -33,6 +56,15 @@ export default function VideoPreview({ note }: { note: FNote }) {
/>
<div className="video-preview-controls">
<input
type="range"
class="video-trackbar"
min={0}
max={duration || 0}
step={0.1}
value={currentTime}
onInput={onSeek}
/>
<ActionButton
icon={playing ? "bx bx-pause" : "bx bx-play"}
text={playing ? "Pause" : "Play"}