diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css index ed25d8f690..b92c6aef75 100644 --- a/apps/client/src/widgets/type_widgets/file/Video.css +++ b/apps/client/src/widgets/type_widgets/file/Video.css @@ -15,5 +15,13 @@ left: 0; right: 0; padding: 1em; + display: flex; + flex-direction: column; + gap: 0.5em; + } + + .video-trackbar { + width: 100%; + cursor: pointer; } } diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx index 929ebb831e..866d649708 100644 --- a/apps/client/src/widgets/type_widgets/file/Video.tsx +++ b/apps/client/src/widgets/type_widgets/file/Video.tsx @@ -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(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 (