also seek video when pressing ','/'.' in editor

2 files changed, 10 insertions, 10 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index c6d895a..8a35e2e 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -727,18 +727,18 @@ function TimelineEditor() {
 		});
 	}, []);
 
-	useMousetrap(['.'], () => { // TODO: dry
+	function addToTimelineFrame(delta: number) {
 		if (!global.ready.timeline.value) return;
-		var frame = Math.min(project?.video?.framecount, global.timeline.frame.value + 1);
+		var frame = Math.max(0, global.timeline.frame.value + delta);
 		global.timeline.frame.set(frame);
 		scrubberSpring.start({ frame });
-	});
-	useMousetrap([','], () => {
-		if (!global.ready.timeline.value) return;
-		var frame = Math.max(0, global.timeline.frame.value - 1);
-		global.timeline.frame.set(frame);
-		scrubberSpring.start({ frame });
-	});
+		if (player.player) {
+			var time = player.frameToTimestamp(frame);
+			if (isFinite(time)) player.player.currentTime = time;
+		}
+	}
+	useMousetrap(['.'], () => addToTimelineFrame(1));
+	useMousetrap([','], () => addToTimelineFrame(-1));
 
 	useEffect(() => {
 		player.addEventListener('TimedVideoPlayerSlide', (event: CustomEvent) => {
diff --git a/pages/present.tsx b/pages/present.tsx
index 190feb7..0468d48 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -42,7 +42,7 @@ export class TimedVideoPlayer {
 	}
 
 	frameToTimestamp(frame: number): number {
-		return frame / this.project?.video?.framerate;
+		return (frame + 1) / this.project?.video?.framerate;
 	}
 
 	registerPlayer(player: HTMLVideoElement) {