timecode input sort of working now :tada:

3 files changed, 31 insertions, 12 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);
+		}}
 	/>;
 }
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 29420ce..67595f3 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -57,7 +57,12 @@ import { mdiCursorDefault } from '@mdi/js';
 import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
 
 var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {};
-var slideAPIs: { [key: string]: any; }[] = [];
+export interface slideAPIprops {
+	frame: number;
+	begin: number;
+	y: number;
+}
+var slideAPIs: { [key: string]: SpringRef<slideAPIprops>; }[] = [];
 
 var player = new TimedVideoPlayer();
 var project = new Project();
@@ -276,7 +281,7 @@ function TimelineKeyframe(props: {
 
 	var [firstRender, setFirstRender] = useState(true);
 
-	var [spring, api] = useSpring(() => ({
+	var [spring, api] = useSpring<slideAPIprops>(() => ({
 		frame: props.slide.frame,
 		begin: (props.slide as loopSlide).beginFrame || 0,
 		y: 44,
@@ -1215,6 +1220,8 @@ function SlideSettings() {
 				slide={selection[0]}
 				global={global}
 				player={player}
+				api={slideAPIs[selection[0].id.value]}
+				select={select}
 			/>}
 			<div className='section'>
 				<span className='title'>Click through behavior</span>
@@ -1266,7 +1273,8 @@ function Tools() {
 
 	return <div className='tools'>
 		<div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}>
-			<span className='framerate numbers posabs l0 t0'>@{project?.video?.framerate}fps</span>
+			{typeof project?.video?.framerate !== 'undefined'
+				&& <span className='framerate numbers posabs l0 t0'>@{project?.video?.framerate}fps</span>}
 			<h2 className='timecode numbers posabs r0 t0'>
 				{player.frameToTimestampString(frame.get(), false)}
 			</h2>