import * as React from "react" ; import * as ReactDOM from "react-dom" ; import { Audio , Controls , IdMap , Script , Player } from "liqvid" ; import rebindArrowKeys from "@lib/rebind-arrow-keys" ; import seekOnLoad from "@lib/seekonload" ; import { MEDIA_URL } from "@env/media-url" ; import markers from "./markers" ; import objects from "./objects" ; import Intro from "./Intro" ; import CMSlide from "./CodeMirror" ; import CursorSlide from "./Cursor" ; import PaintSlide from "./Paint" ; import PlaybackSlide from "./PlaybackSlide" ; import ScriptSlide from "./ScriptSlide" ; import PlayerSlide from "./PlayerSlide" ; import UtilsSlide from "./UtilsSlide" ; import RecordingSlide from "./RecordingSlide" ; import { controls } from "@env/controls" ; function Ractive ( ) { const playerRef = React . useRef < Player > ( ) ; React . useEffect ( ( ) => { const player = playerRef . current ; rebindArrowKeys ( player ) ; player . canPlay . then ( ( ) => { seekOnLoad ( player . playback ) ; player . ready ( ) ; } ) ; } , [ ] ) ; const script = new Script ( markers ) ; const ps = script . parseStart ; const highlights = [ { title : "Codebooth" , time : ps ( "codemirror/" ) } , { title : "Cursor" , time : ps ( "cursor/" ) } , { title : "Paint" , time : ps ( "paint/" ) } , { title : "Playback" , time : ps ( "playback/" ) } , { title : "Script" , time : ps ( "script/" ) } , { title : "Player" , time : ps ( "player/" ) } , { title : "Utils" , time : ps ( "utils/" ) } , { title : "Recording" , time : ps ( "recording/" ) } ] ; const thumbData = { cols : 5 , rows : 5 , height : 100 , width : 160 , frequency : 1 , path : `${ MEDIA_URL }/thumbs/%s.png` , highlights } ; return ( < Player controls = { controls } ref = { playerRef } script = { script } thumbs = { thumbData } > < IdMap map = { objects } > { } { < Audio start = { 0 } > < source src = { `${ MEDIA_URL }/audio/audio.webm` } type = "audio/webm" / > < source src = { `${ MEDIA_URL }/audio/audio.mp4` } type = "audio/mp4" / > < /Audio>} < Intro / > < CMSlide /> < CursorSlide / > < PaintSlide /> < PlaybackSlide / > < ScriptSlide /> < PlayerSlide / > < UtilsSlide /> < RecordingSlide / > < /IdMap> < /Player>); } ReactDOM . render ( < Ractive />, document.querySelector("main"));