video source settings beginnings

2 files changed, 54 insertions, 1 deletions

diff --git a/components/icons.tsx b/components/icons.tsx
index 5e06bf8..3240f9e 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -267,7 +267,7 @@ export function BracketsRoundedIcon() {
 	</svg>;
 }
 
-export function SlashIconRounded() {
+export function SlashRoundedIcon() {
 	return <svg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
 		<path
 			fill-rule='evenodd'
@@ -276,3 +276,13 @@ export function SlashIconRounded() {
 		/>
 	</svg>;
 }
+
+export function UploadRoundedIcon() {
+	return <svg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'>
+		<path
+			d='M6.70711 8.29289L11.2929 3.70711C11.6834 3.31658 12.3166 3.31658 12.7071 3.70711L17.2929 8.29289C17.9229 8.92286 17.4767 10 16.5858 10H7.41421C6.52331 10 6.07714 8.92286 6.70711 8.29289Z'
+		/>
+		<path d='M9 10H15V15C15 15.5523 14.5523 16 14 16H10C9.44772 16 9 15.5523 9 15V10Z' />
+		<rect x='5' y='18' width='14' height='2' rx='1' />
+	</svg>;
+}
diff --git a/components/videosourcesettings.tsx b/components/videosourcesettings.tsx
new file mode 100644
index 0000000..ae7f75b
--- /dev/null
+++ b/components/videosourcesettings.tsx
@@ -0,0 +1,43 @@
+import { useRef } from 'react';
+import { LocalVideo } from '../project';
+
+import Button from '@material-ui/core/Button';
+import Switch from '@material-ui/core/Switch';
+
+import { UploadRoundedIcon } from './icons';
+
+export function LocalVideoSettings(props: { settings: LocalVideo; }) {
+	var fileUploadRef = useRef(null);
+
+	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', async ev => {
+					props.settings.load(ev.target.result as ArrayBuffer);
+				});
+				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}
+			/>
+		</div>
+	</>;
+}