diff options
| -rw-r--r-- | pages/editor.tsx | 16 | ||||
| -rw-r--r-- | pages/present.tsx | 1 | ||||
| -rw-r--r-- | 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 { |