timecode input sort of working now :tada:

2 files changed, 20 insertions, 9 deletions

diff --git a/components/slideprops.tsx b/components/slideprops.tsx
index 747a1b2..ca357b3 100644
--- a/components/slideprops.tsx
+++ b/components/slideprops.tsx
@@ -1,34 +1,38 @@
 import { State } from '@hookstate/core';
+import { Downgraded } from '@hookstate/core';
+import { SpringRef } from 'react-spring';
 
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
 
 import TimecodeInput from '../components/timeinput';
-import { globalState } from '../pages/editor';
+import { globalState, slideAPIprops } from '../pages/editor';
 import { TimedVideoPlayer } from '../pages/present';
-import { anySlide, delaySlide, loopSlide, slide, speedChangeSlide } from '../timeline';
+import { anySlide, delaySlide, loopSlide } from '../timeline';
 
-function SlideTimestamp(props: {
+interface SlidePropertiesPropsType {
 	slide: State<anySlide>;
 	global: State<globalState>;
 	player: TimedVideoPlayer;
-}) {
+	api: SpringRef<slideAPIprops>;
+	select: (slides: anySlide[]) => void;
+}
+
+function SlideTimestamp(props: SlidePropertiesPropsType) {
 	return <TimecodeInput
 		label='Timestamp'
 		value={props.slide.frame.get()}
 		update={(newValue: number) => {
 			props.slide.frame.set(newValue);
+			props.api.start({ frame: newValue });
+			props.select([props.slide.attach(Downgraded).value]);
 			props.global.update.refreshLiveTimeline.value();
 		}}
 		player={props.player}
 	/>;
 }
 
-export default function SlideProperties(props: {
-	slide: State<anySlide>;
-	global: State<globalState>;
-	player: TimedVideoPlayer;
-}) {
+export default function SlideProperties(props: SlidePropertiesPropsType) {
 	function updateProp<slideType extends anySlide>(key: keyof slideType) {
 		return (newValue: any) => { // TODO: better typing here
 			props.slide[key as keyof State<anySlide>].set(newValue);
diff --git a/components/timeinput.tsx b/components/timeinput.tsx
index f1f3233..86f3060 100644
--- a/components/timeinput.tsx
+++ b/components/timeinput.tsx
@@ -22,5 +22,12 @@ export default function TimecodeInput(props: {
 			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);
+		}}
 	/>;
 }