From 38b02c287922868f64076877b8801552326f2103 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Fri, 21 May 2021 18:44:27 +0200
Subject: show frame 0 on timeline

---
 pages/editor.tsx  | 16 +++++++++-------
 pages/present.tsx |  1 +
 styles/editor.css |  4 ++--
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 56becaf..cbee73a 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -95,7 +95,7 @@ function TimelineEditor(props: {
 			);
 
 			var d = true;
-			var a = 1;
+			var a = 0;
 			var ns = [300, 150, 120, 90, 60, 30, 30, 30, 15, 15, 10, 10, 10];
 			var everyN = ns[Math.floor(frameWidth)];
 			for (var x = -offset; x < canvas.width + offset; x += frameWidth) {
@@ -127,7 +127,7 @@ function TimelineEditor(props: {
 									left: Math.round(rect[0] + frameWidth / 2),
 									top: rect[1],
 								}}
-								children={props.player.frameToTimestampString(frame)}
+								children={props.player.frameToTimestampString(frame - 1)}
 							/>,
 						);
 					}
@@ -152,19 +152,22 @@ function TimelineEditor(props: {
 		window.addEventListener('resize', onresize);
 	}, []);
 
-	var scrubberRef = useRef(null);
 	var scrubberDragRef = useRef(null);
 
 	var [scrubberPos, scrubberSpring] = useSpring(
 		() => ({
-			x: 0,
+			frame: 1,
 			config: { mass: 0.5, tension: 500, friction: 20 },
 		}),
 	);
 
 	useGesture(
 		{
-			onDrag: ({ offset: [x, _y] }) => scrubberSpring.start({ x: Math.round(getFrameAtOffset(x, timelineZoom)) }),
+			onDrag: ({ offset: [x, _y] }) => {
+				var frame = Math.max(0, Math.round(getFrameAtOffset(x, timelineZoom)) - 1);
+				setFrame(frame);
+				return scrubberSpring.start({ frame });
+			},
 		},
 		{ domTarget: scrubberDragRef, eventOptions: { passive: false } },
 	);
@@ -175,8 +178,7 @@ function TimelineEditor(props: {
 		<div className='timelineInner posabs a0'>
 			<animated.div
 				className='scrubber posabs v0'
-				style={{ '--frame': scrubberPos.x } as CSSProperties}
-				ref={scrubberRef}
+				style={{ '--frame': scrubberPos.frame } as CSSProperties}
 			>
 				<svg
 					width='20'
diff --git a/pages/present.tsx b/pages/present.tsx
index 7c618a2..b8564b4 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -37,6 +37,7 @@ export class TimedVideoPlayer {
 		timecodeString = timecodeString.replace(';', '.')
 			.replace(/(:)(\d+?)$/, '.$2')
 			+ 'f';
+		if (timecodeString == '00f') timecodeString = '0';
 		return timecodeString;
 	}
 
diff --git a/styles/editor.css b/styles/editor.css
index c861ee0..1283c31 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -169,7 +169,7 @@
 	display: inline-block;
 	border-radius: 2px 2px 0 0;
 	overflow: visible;
-	left: calc(var(--zoom) * (var(--frame) - 1) * 1px);
+	left: calc(var(--zoom) * (var(--frame)) * 1px);
 }
 
 .appGrid .timeline .keyframes .frame:nth-child(30n) .line {
@@ -211,7 +211,7 @@
 	overflow: visible;
 	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 	z-index: 999999999;
-	left: calc((var(--zoom) * (var(--frame) - 0.5)) * 1px - 1px)
+	left: calc((var(--zoom) * (var(--frame) + 0.5)) * 1px - 1px)
 }
 
 .timeline .frameOverlay {
-- 
cgit v1.2.3