semi-working timecode input

3 files changed, 57 insertions, 3 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);
+		}}
+	/>;
+}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 47a6fb1..9460605 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -16,6 +16,7 @@ import {
 import KeybindSelector from '../components/keybindselector';
 import PlaySkipIconAni from '../components/play-skip';
 import Selection from '../components/selection';
+import TimecodeInput from '../components/timeinput';
 import timeline, {
 	anySlide,
 	clickThroughBehaviours,
@@ -1217,12 +1218,39 @@ function SlideProperties(props: {
 	type: slideTypes;
 }) {
 	if (props.type == 'default') return null;
+
+	var slide = useHookstate(global).selection.slides[0];
+
+	var [test, setTest] = useState(0);
+
 	return <div className='section'>
 		<span className='title'>Properties</span>
 		{{
 			'loop': <>
-				<TextField label='Duration' variant='filled' />
-				<TextField label='Start timestamp' variant='filled' />
+				<TextField
+					label='Duration'
+					variant='filled'
+					type='number'
+					value={(slide as State<loopSlide>).frame.get() - (slide as State<loopSlide>).beginFrame.get()}
+				/>
+				<TimecodeInput
+					label='Start timestamp'
+					value={(slide as State<loopSlide>).beginFrame.get()}
+					update={newValue => {
+						(slide as State<loopSlide>).frame.set(newValue);
+						global.update.refreshLiveTimeline.value();
+					}}
+					player={player}
+				/>
+				<TimecodeInput
+					label='End timestamp'
+					value={(slide as State<loopSlide>).frame.get()}
+					update={newValue => {
+						(slide as State<loopSlide>).frame.set(newValue);
+						global.update.refreshLiveTimeline.value();
+					}}
+					player={player}
+				/>
 				<TextField label='End timestamp' variant='filled' />
 			</>,
 			'delay': <>
@@ -1276,6 +1304,7 @@ function SlideSettings() {
 						onChange={e => {
 							if (selection.slides.value.length != 1) return;
 							selection.slides[0].clickThroughBehaviour.set(e.target.value as clickThroughBehaviours);
+							global.update.refreshLiveTimeline.value();
 						}}
 						IconComponent={ArrowDropDownRoundedIcon}
 						value={clickThroughBehaviour}
diff --git a/styles/globals.css b/styles/globals.css
index 3cefd6a..cc44d7b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -45,7 +45,8 @@ h1, h2, h3 {
 	transition-property: width;
 	transition-duration: 100ms;
 	white-space: nowrap;
-	overflow: hidden;
+	overflow-x: clip;
+	overflow-y: visible;
 	text-overflow: ellipsis;
 
 	width: calc(100% - 48px);