aboutsummaryrefslogtreecommitdiff
path: root/components/videosourcesettings.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/videosourcesettings.tsx')
-rw-r--r--components/videosourcesettings.tsx20
1 files changed, 17 insertions, 3 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>
</>;