blob: 747a1b22d5e3c9bd5ec47b054da830473507dcb6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
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, 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;
}) {
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'
variant='filled'
type='number'
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={updateProp<loopSlide>('beginFrame')}
player={props.player}
/>
<TimecodeInput
label='End timestamp'
value={(props.slide as State<loopSlide>).frame.get()}
update={updateProp<loopSlide>('frame')}
player={props.player}
/>
</>,
'delay': <>
<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': <>
<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>;
}
|