blob: 9464cef928a1e7cc01682dd168ecd528cbb06d77 (
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
|
import { State } from '@hookstate/core';
import { useRef, useState } from 'react';
import { globalState, rerenderComponent } from '../pages/editor';
import { TimedVideoPlayer } from '../pages/present';
import { arrayBufferToBase64, LocalVideo } from '../project';
import Button from '@material-ui/core/Button';
import Switch from '@material-ui/core/Switch';
import { UploadRoundedIcon } from './icons';
type VideoSourceSettings = {
settings: LocalVideo;
player: TimedVideoPlayer;
global: State<globalState>;
};
export function LocalVideoSettings(props: VideoSourceSettings) {
var fileUploadRef = useRef(null);
var [dummy, setDummy] = useState(false);
var rerender = () => setDummy(!dummy);
return <>
<input
ref={fileUploadRef}
type='file'
accept='video/*'
className='dispnone'
onChange={event => {
var file = event.target.files[0];
if (!file) return;
var reader = new FileReader();
reader.addEventListener('load', ev => {
var video = ev.target.result as ArrayBuffer;
props.settings.source = video;
props.settings.mimetype = file.type;
props.player.loadVideo(arrayBufferToBase64(video, file.type));
props.global.update.refreshLiveTimeline.value();
props.global.ready.video.available.set(true);
props.settings.getVideoInfo().then(() => {
props.global.ready.video.playable.set(true);
props.global.dummies.timeline.set(n => n + 1);
props.global.dummies.tools.set(n => n + 1);
});
});
reader.readAsArrayBuffer(file);
}}
/>
<Button
variant='contained'
color='default'
children='Load video'
onClick={() => (fileUploadRef.current as HTMLInputElement).click()}
startIcon={<UploadRoundedIcon />}
/>
<div className='sidebyside'>
<span className='body'>Fully buffer video before presentation</span>
<Switch
value={props.settings.config.fullyBuffer}
onChange={() => {
props.settings.config.fullyBuffer = !props.settings.config.fullyBuffer;
rerender();
}}
/>
</div>
</>;
}
|