From 0eee3ce6321990244ac18e0f7e3b1f901e78279d Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 12 May 2021 21:05:11 +0200 Subject: the big class thing --- .gitignore | 3 + package.json | 4 +- pages/present.tsx | 127 +++++++++++++++++++++++++++++----------- styles/presentation.css | 9 ++- timeline.schema.json | 62 ++++++++++++++++++++ timeline.ts | 4 +- yarn.lock | 150 ++++++++++++++++++++++++++++++++++++++++++++++-- 7 files changed, 314 insertions(+), 45 deletions(-) create mode 100644 timeline.schema.json diff --git a/.gitignore b/.gitignore index ced84a7..1890faf 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,6 @@ yarn-error.log* # vercel .vercel +# typescript-json-validator +timeline.validator.ts + diff --git a/package.json b/package.json index 6cbba70..bb41537 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "dependencies": { "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", + "ajv": "^8.3.0", "next": "^10.2.0", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "ts-json-schema-generator": "^0.92.0" }, "devDependencies": { "typescript": "^4.2.4" diff --git a/pages/present.tsx b/pages/present.tsx index 97f48ac..3150784 100644 --- a/pages/present.tsx +++ b/pages/present.tsx @@ -1,5 +1,8 @@ import Button from '@material-ui/core/Button'; import { useEffect, useState } from 'react'; +import { timeline } from '../timeline'; +import * as timelineSchema from '../timeline.schema.json'; +import Ajv from 'ajv'; import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'; import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded'; @@ -9,12 +12,71 @@ 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'); -} +class TimedVideoPlayer { + slide: number; + timeline: timeline; + precision: number; + player: HTMLVideoElement; + video: string; + + constructor(public framerate: number) { + this.slide = 0; + this.precision = 3; + } + + timestampToFrame(timestamp: number): number { + return Math.round((timestamp * 1e3) / (1e3 / this.framerate)); + } + + frameToTimestamp(frame: number): number { + return frame / this.framerate; + } + + registerPlayer(player: HTMLVideoElement) { + this.player = player; + if (this.video) this.player.src = this.video; + this.registerEventListeners(); + } + + registerEventListeners() { + if(!this.video || + !this.player || + !this.timeline ) return; + console.log('we\'re good to go!'); + } + + loadVideo(base64Video: string) { + this.video = base64Video; + if (this.player) this.player.src = this.video; + this.registerEventListeners(); + } + + loadSlides(jsonString: string) { + try { + var timeline = JSON.parse(jsonString); + } catch (e) { + console.log("invalid json object!" + e); + return; + } + var ajv = new Ajv({ allErrors: true }); + var validate = ajv.compile(timelineSchema); + if (!validate(timeline)) { + console.log("schema not passed!") + return; + } + + this.timeline = timeline; -function next() { - console.log('next slide'); + this.registerEventListeners(); + } + + next() { + console.log('next slide'); + } + + previous() { + console.log('previous slide'); + } } export default function Present() { @@ -24,42 +86,39 @@ export default function Present() { }, 500); }, []); - var [videoSRC, setVideoSRC] = useState(''); - var [slides, setSlides] = useState(); - - var precision = 3; - var framerate = 60; + var player = new TimedVideoPlayer(60); useEffect(() => { var videoEL = document.getElementById('player') as HTMLVideoElement; - videoEL.addEventListener('loadeddata', () => { - console.log('initial load'); - }); - videoEL.addEventListener('canplaythrough', () => { - videoEL.play(); - }); + player.registerPlayer(videoEL); + /* videoEL.addEventListener('loadeddata', () => { */ + /* console.log('initial load'); */ + /* }); */ + /* videoEL.addEventListener('canplaythrough', () => { */ + /* console.log('full load') */ + /* }); */ - setInterval(() => { - 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); - } - }, 1e3 / (precision * framerate)); + /* setInterval(() => { */ + /* if (videoEL.paused) return; */ + /* var frame = TimedVideoPlayer.timestampToFrame(videoEL.currentTime, framerate); */ + /* document.getElementById('frame').innerText = frame.toString(); */ + /* if (frame >= framerate) { */ + /* videoEL.pause(); */ + /* console.log(videoEL.currentTime); */ + /* } */ + /* }, 1e3 / (precision * framerate)); */ }, []); return
-
-
+
0
-
+