diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/editor.tsx | 97 | ||||
| -rw-r--r-- | pages/present.tsx | 8 |
2 files changed, 101 insertions, 4 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> </>; } 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)); } |