From 9422fa9dc4d9ee213fb25a03e5e60d7e99e79458 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Wed, 12 May 2021 19:53:36 +0200
Subject: move load json and video buttons to menu [temp]

---
 pages/present.tsx       | 179 +++++++++++++++++++++++++-----------------------
 styles/presentation.css |  10 ++-
 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 {
-- 
cgit v1.2.3