diff options
| -rw-r--r-- | pages/present.tsx | 44 | ||||
| -rw-r--r-- | timeline.ts | 4 |
2 files changed, 32 insertions, 16 deletions
diff --git a/pages/present.tsx b/pages/present.tsx index f4dd486..1e37702 100644 --- a/pages/present.tsx +++ b/pages/present.tsx @@ -1,7 +1,7 @@ import Button from '@material-ui/core/Button'; import Ajv from 'ajv'; -import { useEffect } from 'react'; -import timeline, { slide, anySlide } from '../timeline'; +import { useEffect, useState } from 'react'; +import timeline, { delaySlide, loopSlide, slide, speedChangeSlide } from '../timeline'; import * as timelineSchema from '../timeline.schema.json'; import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'; @@ -54,10 +54,10 @@ class TimedVideoPlayer { this.player.pause(); } - handleSlide(slide: anySlide) { - switch(slide.type) { + handleSlide(slide: slide) { + switch (slide.type) { case 'loop': { - this.jumpToFrame(slide.beginFrame); + this.jumpToFrame((slide as loopSlide).beginFrame); break; } case 'delay': { @@ -65,12 +65,12 @@ class TimedVideoPlayer { this.slide++; setTimeout(() => { this.player.play(); - }, slide.delay); + }, (slide as delaySlide).delay); break; } case 'speedChange': { this.slide++; - this.player.playbackRate = this.framerate / slide.newFramerate; + this.player.playbackRate = this.framerate / (slide as speedChangeSlide).newFramerate; break; } default: { @@ -97,8 +97,9 @@ class TimedVideoPlayer { var slide = this.timeline.slides[this.slide]; if (!slide) return; - if (this.frame >= slide.frame) + if (this.frame >= slide.frame) { this.handleSlide(slide); + } }, 1e3 / (this.precision * this.framerate)); this.registeredEventListeners = true; @@ -169,14 +170,16 @@ class TimedVideoPlayer { } export default function Present() { + var [dummy, setDummy] = useState(false); + var rerender = () => setDummy(!dummy); + var [player, setPlayer] = useState(new TimedVideoPlayer()); + useEffect(() => { setInterval(() => { document.getElementById('time').innerText = new Date().toLocaleTimeString(); }, 500); }, []); - var player = new TimedVideoPlayer(); - useEffect(() => { var videoEL = document.getElementById('player') as HTMLVideoElement; player.registerPlayer(videoEL); @@ -191,14 +194,26 @@ export default function Present() { </div> </div> <div className='fullscreenControls posabs a0'> - <div className='control previous' onClick={() => player.previous()}/> + <div + className='control previous' + onClick={() => { + player.previous(); + rerender(); + }} + /> <div className='control menu' onClick={() => { document.getElementById('menu').classList.add('active'); }} /> - <div className='control next' onClick={() => player.next()} /> + <div + className='control next' + onClick={() => { + player.next(); + rerender(); + }} + /> </div> <div className='menu posabs a0' id='menu'> <div @@ -256,6 +271,7 @@ export default function Present() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadSlides(ev.target.result as string); + rerender(); }); reader.readAsText(file); }} @@ -289,7 +305,9 @@ export default function Present() { </div> </div> <div className='slide posrel floatb'> - <h3 className='time numbers nobr posrel'>slide 1/15</h3> + <h3 className='time numbers nobr posrel'> + slide {player.slide + 1}/{player.timeline?.slides.length || 0} + </h3> </div> </div> </div> diff --git a/timeline.ts b/timeline.ts index 696d7af..8bb4d98 100644 --- a/timeline.ts +++ b/timeline.ts @@ -19,10 +19,8 @@ export interface loopSlide extends slide { playbackType: 'PingPong' | 'Normal'; } -type anySlide = slide | delaySlide | speedChangeSlide | loopSlide; - export default interface timeline { - slides: Array<anySlide>; + slides: Array<slide | delaySlide | speedChangeSlide | loopSlide>; framecount: number; framerate: number; } |