1 files changed, 30 insertions, 14 deletions

diff --git a/components/timeinput.tsx b/components/timeinput.tsx
index 86f3060..d4079f1 100644
--- a/components/timeinput.tsx
+++ b/components/timeinput.tsx
@@ -1,4 +1,5 @@
 import TextField from '@material-ui/core/TextField';
+import { useEffect, useRef } from 'react';
 import { TimedVideoPlayer } from '../pages/present';
 
 export default function TimecodeInput(props: {
@@ -8,6 +9,32 @@ export default function TimecodeInput(props: {
 	label: string;
 	className?: string;
 }) {
+	var ref = useRef(null);
+
+	function handleMod(e: KeyboardEvent | WheelEvent) {
+		var mod = 1;
+		if (e.shiftKey) mod = 10;
+		var dir = 0;
+
+		if (e instanceof KeyboardEvent) {
+			if (e.key == 'ArrowUp') dir = 1;
+			if (e.key == 'ArrowDown') dir = -1;
+		} else if (e instanceof WheelEvent) {
+			if (e.deltaY < 0) dir = 1;
+			if (e.deltaY > 0) dir = -1;
+		}
+
+		var updateVal = mod * dir;
+		if (updateVal == 0) return;
+		props.update(props.value + updateVal);
+	}
+
+	var stopScroll = (e: WheelEvent) => e.preventDefault();
+	useEffect(() => {
+		(ref.current as HTMLDivElement).addEventListener('wheel', stopScroll, { passive: false });
+		return () => (ref.current as HTMLDivElement)?.removeEventListener('wheel', stopScroll);
+	});
+
 	return <TextField
 		className={'time-input ' + (props.className || '')}
 		variant='filled'
@@ -15,19 +42,8 @@ export default function TimecodeInput(props: {
 		value={props.player.frameToTimestampString(props.value, false)}
 		spellCheck={false}
 		onChange={e => e.preventDefault()}
-		onKeyDown={e => {
-			var mod = 1;
-			if (e.shiftKey) mod = 10;
-
-			if (e.key == 'ArrowUp') props.update(props.value + mod);
-			if (e.key == 'ArrowDown') props.update(props.value - mod);
-		}}
-		onWheel={e => {
-			var mod = 1;
-			if (e.shiftKey) mod = 10;
-
-			if (e.deltaY < 0) props.update(props.value + mod);
-			if (e.deltaY > 0) props.update(props.value - mod);
-		}}
+		onKeyDown={e => handleMod(e.nativeEvent)}
+		onWheel={e => handleMod(e.nativeEvent)}
+		ref={ref}
 	/>;
 }