diff --git a/web/src/Player.tsx b/web/src/Player.tsx index 88fc776..4b22c25 100644 --- a/web/src/Player.tsx +++ b/web/src/Player.tsx @@ -214,6 +214,23 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na else v.pause() poke() }, [poke]) + // The seek bar: while it is dragged the ball follows the finger (the input event); the seek + // itself is on release (the browser's own change event, which a click, a drag and the arrow + // keys all end with). The ball is put where the seek went at once, so it waits there while + // the piece is made rather than going back to where the film was. + const seekBar = useRef(null) + useEffect(() => { + const el = seekBar.current + if (!el) return + const commit = () => { + const x = Number(el.value), v = video.current + if (v && Math.abs(v.currentTime - x) > 0.05) v.currentTime = x + setTime(x) + setScrub(null) + } + el.addEventListener('change', commit) + return () => el.removeEventListener('change', commit) + }) const seekBy = useCallback((d: number) => { const v = video.current if (!v) return @@ -314,10 +331,8 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
- { setScrub(Number(e.target.value)); poke() }} - onPointerUp={(e) => { if (v) v.currentTime = Number((e.target as HTMLInputElement).value); setScrub(null) }} - onKeyUp={(e) => { if (v) v.currentTime = Number((e.target as HTMLInputElement).value); setScrub(null) }} /> + { setScrub(Number(e.target.value)); poke() }} />