more slide settings

2 files changed, 60 insertions, 14 deletions

diff --git a/components/slideprops.tsx b/components/slideprops.tsx
index aa118e8..747a1b2 100644
--- a/components/slideprops.tsx
+++ b/components/slideprops.tsx
@@ -1,22 +1,47 @@
 import { State } from '@hookstate/core';
 
+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 { TimedVideoPlayer } from '../pages/present';
-import { anySlide, loopSlide } from '../timeline';
+import { anySlide, delaySlide, loopSlide, slide, speedChangeSlide } from '../timeline';
+
+function SlideTimestamp(props: {
+	slide: State<anySlide>;
+	global: State<globalState>;
+	player: TimedVideoPlayer;
+}) {
+	return <TimecodeInput
+		label='Timestamp'
+		value={props.slide.frame.get()}
+		update={(newValue: number) => {
+			props.slide.frame.set(newValue);
+			props.global.update.refreshLiveTimeline.value();
+		}}
+		player={props.player}
+	/>;
+}
 
 export default function SlideProperties(props: {
 	slide: State<anySlide>;
 	global: State<globalState>;
 	player: TimedVideoPlayer;
 }) {
-	if (props.slide.value.type == 'default') return null;
+	function updateProp<slideType extends anySlide>(key: keyof slideType) {
+		return (newValue: any) => { // TODO: better typing here
+			props.slide[key as keyof State<anySlide>].set(newValue);
+			props.global.update.refreshLiveTimeline.value();
+		};
+	}
 
 	return <div className='section'>
 		<span className='title'>Properties</span>
 		{{
+			'default': <>
+				<SlideTimestamp {...props} />
+			</>,
 			'loop': <>
 				<TextField
 					label='Duration'
@@ -25,32 +50,51 @@ export default function SlideProperties(props: {
 					value={(props.slide as State<loopSlide>).frame.get()
 						- (props.slide as State<loopSlide>).beginFrame.get()}
 				/>
+				<div className='spacer' />
 				<TimecodeInput
 					label='Start timestamp'
 					value={(props.slide as State<loopSlide>).beginFrame.get()}
-					update={newValue => {
-						(props.slide as State<loopSlide>).frame.set(newValue);
-						props.global.update.refreshLiveTimeline.value();
-					}}
+					update={updateProp<loopSlide>('beginFrame')}
 					player={props.player}
 				/>
 				<TimecodeInput
 					label='End timestamp'
 					value={(props.slide as State<loopSlide>).frame.get()}
-					update={newValue => {
-						(props.slide as State<loopSlide>).frame.set(newValue);
-						props.global.update.refreshLiveTimeline.value();
-					}}
+					update={updateProp<loopSlide>('frame')}
 					player={props.player}
 				/>
-				<TextField label='End timestamp' variant='filled' />
 			</>,
 			'delay': <>
-				<TextField label='Delay duration' variant='filled' />
+				<SlideTimestamp {...props} />
+				<div className='spacer' />
+				<TextField
+					variant='filled'
+					label='Delay duration'
+					type='number'
+					InputProps={{ endAdornment: <InputAdornment position='end' children='seconds' /> }}
+					InputLabelProps={{ shrink: true }}
+					value={(props.slide as State<delaySlide>).delay.get() / 1000}
+					onChange={event => updateProp<delaySlide>('delay')(Number(event.target.value) * 1000)}
+				/>
 			</>,
 			'speedChange': <>
-				<TextField label='New speed' variant='filled' />
-				<TextField label='Factor' variant='filled' />
+				<SlideTimestamp {...props} />
+				<div className='spacer' />
+				<TextField
+					variant='filled'
+					label='New speed'
+					type='number'
+					InputLabelProps={{ shrink: true }}
+					InputProps={{ endAdornment: <InputAdornment position='end' children='fps' /> }}
+					value={(props.slide as State<delaySlide>).delay.get()}
+					onChange={event => updateProp<delaySlide>('delay')(Number(event.target.value))}
+				/>
+				<div className='spacer' />
+				<TextField
+					variant='filled'
+					type='number'
+					label='Factor'
+				/>
 			</>,
 		}[props.slide.value.type]}
 	</div>;
diff --git a/components/timeinput.tsx b/components/timeinput.tsx
index 7232494..f1f3233 100644
--- a/components/timeinput.tsx
+++ b/components/timeinput.tsx
@@ -6,8 +6,10 @@ export default function TimecodeInput(props: {
 	update: (newValue: number) => void;
 	player: TimedVideoPlayer;
 	label: string;
+	className?: string;
 }) {
 	return <TextField
+		className={'time-input ' + (props.className || '')}
 		variant='filled'
 		label={props.label}
 		value={props.player.frameToTimestampString(props.value, false)}