components/slideprops.tsx


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

import { State } from '@hookstate/core';

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';

export default function SlideProperties(props: {
	slide: State<anySlide>;
	global: State<globalState>;
	player: TimedVideoPlayer;
}) {
	if (props.slide.value.type == 'default') return null;

	return <div className='section'>
		<span className='title'>Properties</span>
		{{
			'loop': <>
				<TextField
					label='Duration'
					variant='filled'
					type='number'
					value={(props.slide as State<loopSlide>).frame.get()
						- (props.slide as State<loopSlide>).beginFrame.get()}
				/>
				<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();
					}}
					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();
					}}
					player={props.player}
				/>
				<TextField label='End timestamp' variant='filled' />
			</>,
			'delay': <>
				<TextField label='Delay duration' variant='filled' />
			</>,
			'speedChange': <>
				<TextField label='New speed' variant='filled' />
				<TextField label='Factor' variant='filled' />
			</>,
		}[props.slide.value.type]}
	</div>;
}