semi-working timecode input

1 files changed, 24 insertions, 0 deletions

diff --git a/components/timeinput.tsx b/components/timeinput.tsx
new file mode 100644
index 0000000..7232494
--- /dev/null
+++ b/components/timeinput.tsx
@@ -0,0 +1,24 @@
+import TextField from '@material-ui/core/TextField';
+import { TimedVideoPlayer } from '../pages/present';
+
+export default function TimecodeInput(props: {
+	value: number;
+	update: (newValue: number) => void;
+	player: TimedVideoPlayer;
+	label: string;
+}) {
+	return <TextField
+		variant='filled'
+		label={props.label}
+		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);
+		}}
+	/>;
+}