aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/present.tsx179
-rw-r--r--styles/presentation.css10
2 files changed, 99 insertions, 90 deletions
diff --git a/pages/present.tsx b/pages/present.tsx
index 7254594..97f48ac 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -6,6 +6,9 @@ import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
import SettingsRemoteRoundedIcon from '@material-ui/icons/SettingsRemoteRounded';
import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
+import CodeRoundedIcon from '@material-ui/icons/CodeRounded';
+import MovieRoundedIcon from '@material-ui/icons/MovieRounded';
+
function previous() {
console.log('previous slide');
}
@@ -21,109 +24,43 @@ export default function Present() {
}, 500);
}, []);
- var [ videoSRC, setVideoSRC ] = useState("");
- var [ slides, setSlides ] = useState();
+ var [videoSRC, setVideoSRC] = useState('');
+ var [slides, setSlides] = useState();
var precision = 3;
var framerate = 60;
useEffect(() => {
- var videoEL = document.getElementById("player") as HTMLVideoElement;
+ var videoEL = document.getElementById('player') as HTMLVideoElement;
videoEL.addEventListener('loadeddata', () => {
- console.log("initial load")
- })
+ console.log('initial load');
+ });
videoEL.addEventListener('canplaythrough', () => {
videoEL.play();
- })
+ });
setInterval(() => {
- if(videoEL.paused) return;
+ if (videoEL.paused) return;
var frame = Math.round((videoEL.currentTime * 1e3) / (1e3 / framerate));
document.getElementById('frame').innerText = frame.toString();
if (frame >= framerate) {
- videoEL.pause()
- console.log(videoEL.currentTime)
- };
+ videoEL.pause();
+ console.log(videoEL.currentTime);
+ }
}, 1e3 / (precision * framerate));
}, []);
return <div className='presentation posfix a0 h100vh'>
<div className='slideWrapper abscenterv posrel'>
<div className='slide posrel'>
- <div className="innner posabs a0">
- <video src={videoSRC} id="player" className="fullwidth"/>
+ <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} >
- <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);
- }}
- />
- <input
- type='file'
- id='jsonUpload'
- accept='application/json'
- 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!")
- setSlides(JSON.parse(ev.target.result as string));
- })
- reader.addEventListener('progress', (progEv) => {
- console.log(progEv.loaded)
- })
- reader.readAsText(file);
- }}
- />
- { !videoSRC && <Button
- variant='contained'
- color='default'
- children='load video'
- onClick={() => document.getElementById("vidUpload").click()}
- /> }
- { !slides && <Button
- variant='contained'
- color='default'
- children='load json'
- onClick={() => document.getElementById("jsonUpload").click()}
- /> }
- <span id="frame">0</span>
+ <div className='control previous' onClick={previous}>
+ <span id='frame'>0</span>
</div>
<div
className='control menu'
@@ -141,19 +78,19 @@ export default function Present() {
}}
/>
<div className='info sidebyside posabs h0 b0'>
- <div className='timetitle'>
+ <div className='timetitle floatb'>
<h3 className='time numbers nobr' id='time'>14:00:41</h3>
<h1 className='title nobr'>PWS Presentatie</h1>
</div>
<div className='buttons floatb'>
<div className='inner center'>
- <Button
+ {false && <Button
variant='contained'
color='default'
className='bg-err'
startIcon={<ExitToAppRoundedIcon />}
children='Stop presentation'
- />
+ />}
<Button
variant='contained'
color='default'
@@ -163,18 +100,86 @@ export default function Present() {
document.getElementById('menu').classList.remove('active');
}}
/>
- <Button
+ <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);
+ }}
+ />
+ <input
+ type='file'
+ id='jsonUpload'
+ accept='application/json'
+ 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!');
+ setSlides(JSON.parse(ev.target.result as string));
+ });
+ reader.addEventListener('progress', (progEv) => {
+ console.log(progEv.loaded);
+ });
+ reader.readAsText(file);
+ }}
+ />
+ {!videoSRC && <Button
+ variant='contained'
+ color='default'
+ children='Load video'
+ startIcon={<MovieRoundedIcon />}
+ onClick={() => document.getElementById('vidUpload').click()}
+ />}
+ {!slides && <Button
+ variant='contained'
+ color='default'
+ children='Load json'
+ startIcon={<CodeRoundedIcon />}
+ onClick={() => document.getElementById('jsonUpload').click()}
+ />}
+ {false && <Button
variant='contained'
color='default'
startIcon={<SettingsRemoteRoundedIcon />}
children='Connect remote'
- />
- <Button
+ />}
+ {false && <Button
variant='contained'
color='default'
startIcon={<SettingsRoundedIcon />}
children='Settings'
- />
+ />}
</div>
</div>
<div className='slide posrel floatb'>
diff --git a/styles/presentation.css b/styles/presentation.css
index 0a95b97..3b659c6 100644
--- a/styles/presentation.css
+++ b/styles/presentation.css
@@ -1,3 +1,7 @@
+:root {
+ background-color: var(--c100);
+}
+
.slideWrapper {
margin: 0 auto;
max-width: calc(16 / 9 * 100vh);
@@ -5,7 +9,7 @@
.slideWrapper .slide {
padding-top: calc(9 / 16 * 100%);
- background-color: #ff00ff;
+ background-color: var(--c200);
}
.fullscreenControls {
@@ -49,12 +53,12 @@
#menu .info h3 {
color: var(--c700);
font-weight: 400;
- font-size: 50px;
+ font-size: min(50px, 3vw);
}
#menu .info h1 {
font-weight: 600;
- font-size: 70px;
+ font-size: min(70px, 4.2vw);
}
#menu .MuiButton-root {