diff options
| -rw-r--r-- | components/videosourcesettings.tsx | 20 | ||||
| -rw-r--r-- | pages/editor.tsx | 17 |
2 files changed, 27 insertions, 10 deletions
diff --git a/components/videosourcesettings.tsx b/components/videosourcesettings.tsx index f4cea9e..35e180c 100644 --- a/components/videosourcesettings.tsx +++ b/components/videosourcesettings.tsx @@ -1,4 +1,6 @@ -import { useRef } from 'react'; +import { State } from '@hookstate/core'; +import { useRef, useState } from 'react'; +import { globalState } from '../pages/editor'; import { TimedVideoPlayer } from '../pages/present'; import { arrayBufferToBase64, LocalVideo } from '../project'; @@ -10,11 +12,15 @@ 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} @@ -25,11 +31,16 @@ export function LocalVideoSettings(props: VideoSourceSettings) { var file = event.target.files[0]; if (!file) return; var reader = new FileReader(); - reader.addEventListener('load', async ev => { + reader.addEventListener('load', ev => { var video = ev.target.result as ArrayBuffer; props.settings.load(video); props.settings.mimetype = file.type; props.player.loadVideo(arrayBufferToBase64(video, file.type)); + props.global.update.refreshLiveTimeline.value(); + props.global.ready.video.set({ + available: true, + playable: true, + }); }); reader.readAsArrayBuffer(file); }} @@ -45,7 +56,10 @@ export function LocalVideoSettings(props: VideoSourceSettings) { <span className='body'>Fully buffer video before presentation</span> <Switch value={props.settings.config.fullyBuffer} - onChange={() => props.settings.config.fullyBuffer = !props.settings.config.fullyBuffer} + onChange={() => { + props.settings.config.fullyBuffer = !props.settings.config.fullyBuffer; + rerender(); + }} /> </div> </>; diff --git a/pages/editor.tsx b/pages/editor.tsx index f9c0e80..f07d915 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -63,7 +63,7 @@ var slideAPIs: { [key: string]: any; }[] = []; var player = new TimedVideoPlayer(); var projectFile = new Project(); -interface globalState { +export interface globalState { timeline: { playing: boolean; frame: number; @@ -1069,10 +1069,12 @@ function DefaultSettings() { <InputLabel>Video source</InputLabel> <Select value={projectFile.video?.type || ''} - onChange={e => + onChange={e => { projectFile.video = new (VideoSources.find(s => s.type == e.target.value as VideoSourceType - ).class)()} + ).class)(); + rerender(); + }} IconComponent={ArrowDropDownRoundedIcon} > {VideoSources.map(s => <MenuItem value={s.type} children={s.name} />)} @@ -1081,7 +1083,7 @@ function DefaultSettings() { {(() => { if (!projectFile.video) return null; var SourceSettings = VideoSources.find(s => s.type == projectFile.video.type).settings; - return <SourceSettings settings={projectFile.video} player={player} />; + return <SourceSettings settings={projectFile.video} player={player} global={global} />; })()} </div> <div className={'section ' + (ready.timeline.value ? '' : 'disabled')}> @@ -1149,7 +1151,7 @@ function DefaultSettings() { projectFile.downloadProjectFile(); }} /> - {false && <Button + <Button variant='contained' color='default' children='New project' @@ -1157,7 +1159,6 @@ function DefaultSettings() { var newProj: timeline = { slides: [], name: 'New project', - settings: { controlType: 'FullScreen' }, framerate: 0, framecount: 0, }; @@ -1168,7 +1169,7 @@ function DefaultSettings() { global.ready.timeline.set(true); }} startIcon={<AddRoundedIcon />} - />} + /> </div> </div> </>; @@ -1299,6 +1300,8 @@ function Tools() { useMousetrap(['e'], switchToTool('delay')); useMousetrap(['s'], switchToTool('speedChange')); + // ! TODO: read fps from projectFile + return <div className='tools'> <div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}> <span className='framerate numbers posabs l0 t0'>@{framerate.get()}fps</span> |