aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/slideprops.tsx72
-rw-r--r--components/timeinput.tsx2
-rw-r--r--pages/editor.tsx2
-rw-r--r--styles/colors.css29
-rw-r--r--styles/editor.css5
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; }