diff options
| -rw-r--r-- | pages/present.tsx | 62 | ||||
| -rw-r--r-- | styles/globals.css | 5 |
2 files changed, 64 insertions, 3 deletions
diff --git a/pages/present.tsx b/pages/present.tsx index eb1b2ec..b0b020e 100644 --- a/pages/present.tsx +++ b/pages/present.tsx @@ -1,5 +1,5 @@ import Button from '@material-ui/core/Button'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'; import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded'; @@ -21,12 +21,68 @@ export default function Present() { }, 500); }, []); + var [ videoSRC, setVideoSRC ] = useState(""); + + useEffect(() => { + var videoEL = document.getElementById("player") as HTMLVideoElement; + videoEL.addEventListener('loadeddata', () => { + console.log("initial load") + }) + videoEL.addEventListener('canplaythrough', () => { + console.log("full load") + videoEL.play(); + }) + }, []); + return <div className='presentation posfix a0 h100vh'> <div className='slideWrapper abscenterv posrel'> - <div className='slide'></div> + <div className='slide posrel'> + <div className="innner posabs a0"> + <video src={videoSRC} id="player" className="fullwidth"/> + </div> + </div> </div> <div className='fullscreenControls posabs a0'> - <div className='control previous' onClick={previous} /> + <div className='control previous' onClick={previous} > + <input + type='file' + id='vidUpload' + accept='video/*' + className="dispnone" + onChange={event => { + var file = event.target.files[0]; + console.log(event.target.files) + if (!file) return; + console.log('new fileReader!') + var reader = new FileReader(); + reader.addEventListener('error', () => { + console.log("reader error"); + }) + reader.addEventListener('abort', () => { + console.log("reader abortus"); + }) + reader.addEventListener('load', ev => { + console.log("reader done!") + setVideoSRC(ev.target.result as string); + }) + reader.addEventListener('progress', (progEv) => { + console.log(progEv.loaded) + }) + reader.readAsDataURL(file); + }} + /> + <Button + variant='contained' + color='default' + children='load video' + onClick={() => document.getElementById("vidUpload").click()} + /> + <Button + variant='contained' + color='default' + children='load json' + /> + </div> <div className='control menu' onClick={() => { diff --git a/styles/globals.css b/styles/globals.css index d8bb181..9ed6119 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -18,3 +18,8 @@ h3 { font-size: 1rem; } font-size: 24px !important; } +.MuiButton-label { + text-transform: none !important; + font-family: "Inter", sans-serif; +} + |