timeline display in editor

1 files changed, 94 insertions, 3 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index c550eac..aeb4f87 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,8 +1,13 @@
+import { useEffect, useState } from 'react';
+import { loopSlide } from '../timeline';
+import { TimedVideoPlayer } from './present';
+
 import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
 import Fab from '@material-ui/core/Fab';
 import Toolbar from '@material-ui/core/Toolbar';
 
-import { PressureIcon } from '../components/icons';
+import { PressureIcon, SlideKeyframe } from '../components/icons';
 
 import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
@@ -10,7 +15,44 @@ import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
 import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
 import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
 
+function TimelineEditor(props: {
+	player: TimedVideoPlayer;
+}) {
+	var frames = [...new Array(props.player.timeline?.framecount || 0)].map((el, i) =>
+		<div className='frame'>
+			<span className='timecode numbers posabs abscenterh'>
+				{props.player?.frameToTimestampString(i + 1)}
+			</span>
+			<div className='keyframeWrapper posabs abscenterh'>
+				{(() => {
+					var slide = props.player?.timeline?.slides.find(slide => slide.frame == i + 1);
+					if (slide) {
+						return <SlideKeyframe type={slide.type} loopEnd />;
+					}
+					var loop = props.player?.timeline?.slides.find(slide =>
+						slide.type == 'loop' && (slide as loopSlide).beginFrame == i + 1
+					);
+					if (loop) {
+						return <SlideKeyframe type='loop' />;
+					}
+				})()}
+			</div>
+		</div>
+	);
+
+	return <div className='frames'>{frames}</div>;
+}
+
 export default function Index() {
+	var [dummy, setDummy] = useState(false);
+	var rerender = () => setDummy(!dummy);
+	var [player, setPlayer] = useState(new TimedVideoPlayer());
+
+	useEffect(() => {
+		var videoEL = document.getElementById('player') as HTMLVideoElement;
+		player.registerPlayer(videoEL);
+	}, []);
+
 	return <>
 		<div className='appGrid posabs a0'>
 			<AppBar position='static' color='transparent' elevation={0}>
@@ -19,10 +61,55 @@ export default function Index() {
 					<h1>pressure</h1>
 				</Toolbar>
 			</AppBar>
-			<div className='settings'></div>
+			<div className='settings'>
+				<input
+					type='file'
+					id='vidUpload'
+					accept='video/*'
+					className='dispnone'
+					onChange={event => {
+						var file = event.target.files[0];
+						if (!file) return;
+						var reader = new FileReader();
+						reader.addEventListener('load', ev => {
+							player.loadVideo(ev.target.result as string);
+						});
+						reader.readAsDataURL(file);
+					}}
+				/>
+				<input
+					type='file'
+					id='jsonUpload'
+					accept='application/json'
+					className='dispnone'
+					onChange={event => {
+						var file = event.target.files[0];
+						if (!file) return;
+						var reader = new FileReader();
+						reader.addEventListener('load', ev => {
+							player.loadSlides(ev.target.result as string);
+							rerender();
+						});
+						reader.readAsText(file);
+					}}
+				/>
+				<Button
+					variant='contained'
+					color='default'
+					children='Load video'
+					onClick={() => document.getElementById('vidUpload').click()}
+				/>
+				<Button
+					variant='contained'
+					color='default'
+					children='Load json'
+					onClick={() => document.getElementById('jsonUpload').click()}
+				/>
+			</div>
 			<div className='viewer'>
 				<div className='player posrel'>
 					<div className='outer posabs abscenter'>
+						<video id='player' className='fullwidth' />
 					</div>
 				</div>
 				<div className='controls'>
@@ -38,7 +125,11 @@ export default function Index() {
 				</div>
 			</div>
 			<div className='tools'></div>
-			<div className='timeline'></div>
+			<div className='timeline'>
+				<TimelineEditor
+					player={player}
+				/>
+			</div>
 		</div>
 	</>;
 }