components/timeinput.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
		}}
	/>;
}