From abca906d804e876a01d4c07c226caefeeaca9920 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 15 May 2021 10:54:55 +0200
Subject: timeline display in editor

---
 pages/editor.tsx  | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 pages/present.tsx |  8 ++++-
 2 files changed, 101 insertions(+), 4 deletions(-)

(limited to 'pages')

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>
 	</>;
 }
diff --git a/pages/present.tsx b/pages/present.tsx
index ad3cec2..19ef111 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -1,6 +1,7 @@
 import Button from '@material-ui/core/Button';
 import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
+import Timecode from 'timecode-boss';
 import timeline, { delaySlide, loopSlide, slide, speedChangeSlide } from '../timeline';
 import * as timelineSchema from '../timeline.schema.json';
 
@@ -12,7 +13,7 @@ import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 import CodeRoundedIcon from '@material-ui/icons/CodeRounded';
 import MovieRoundedIcon from '@material-ui/icons/MovieRounded';
 
-class TimedVideoPlayer {
+export class TimedVideoPlayer {
 	slide: number;
 	timeline: timeline;
 	precision: number;
@@ -30,6 +31,11 @@ class TimedVideoPlayer {
 		this.registeredEventListeners = false;
 	}
 
+	frameToTimestampString(frame: number) {
+		var timecodeString = new Timecode(frame, this.framerate).toString();
+		return timecodeString.replace(/^(00:)+/, '') + 'f';
+	}
+
 	timestampToFrame(timestamp: number): number {
 		return Math.ceil((timestamp * 1e3) / (1e3 / this.framerate));
 	}
-- 
cgit v1.2.3