half load video on new project done

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>