more slide settings

5 files changed, 79 insertions, 31 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)}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 49f3306..29420ce 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1217,7 +1217,7 @@ function SlideSettings() {
 				player={player}
 			/>}
 			<div className='section'>
-				<span className='title'>Behavior</span>
+				<span className='title'>Click through behavior</span>
 				<FormControl variant='filled'>
 					<InputLabel>Click through behaviour</InputLabel>
 					<Select
diff --git a/styles/colors.css b/styles/colors.css
index 2177bf0..7fa7a93 100644
--- a/styles/colors.css
+++ b/styles/colors.css
@@ -1,19 +1,20 @@
 :root {
-	--error: #EE6183;
-	--piss: #C482ED;
-	--blue: #454DFE;
-	--mint: #A8EEEE;
-	--gruble: #5DE9AE;
+	--error: #ee6183;
+	--piss: #c482ed;
+	--blue: #454dfe;
+	--mint: #a8eeee;
+	--gruble: #5de9ae;
 
-	--c900: #EBEEF9;
-	--c800: #AEB7DA;
-	--c700: #707BA6;
-	--c600: #4F587B;
-	--c400: #2D344F;
-	--c300: #171D33;
-	--c250: #0C1123;
-	--c200: #07071C;
-	--c100: #01010D;
+	--c900: #ebeef9;
+	--c800: #aeb7da;
+	--c700: #707ba6;
+	--c600: #4f587b;
+	--c500: #454e6f;
+	--c400: #2d344f;
+	--c300: #171d33;
+	--c250: #0c1123;
+	--c200: #07071c;
+	--c100: #01010d;
 
 	--bg: var(--c200);
 	--fg: var(--c900);
diff --git a/styles/editor.css b/styles/editor.css
index 30a48be..c4a32d6 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -531,7 +531,8 @@ header .projarea span {
 }
 
 .MuiSelect-root, .MuiInputBase-root { border-radius: 6px !important; }
-.MuiInputBase-root { background-color: var(--c600) !important; }
-.MuiSelect-root { background-color: var(--c200) !important; }
+.MuiInputBase-root { background-color: var(--c500) !important; }
+.MuiSelect-root { background-color: var(--c300) !important; }
 .MuiFormLabel-root { font-weight: 500 !important; }
+.MuiInputAdornment-root p { color: var(--c800) !important; }