diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pages/editor.tsx | 139 | ||||
| -rw-r--r-- | yarn.lock | 5 |
3 files changed, 80 insertions, 65 deletions
diff --git a/package.json b/package.json index d5ea486..85414be 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@hookstate/core": "^3.0.8", + "@hookstate/untracked": "^3.0.0", "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", diff --git a/pages/editor.tsx b/pages/editor.tsx index 5944cd2..c513e63 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,4 +1,4 @@ -import { createState, Downgraded, none, PluginCallbacks, State, StateValueAtRoot, useHookstate } from '@hookstate/core'; +import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core'; import { CSSProperties, ReactNode, Ref, useEffect, useRef, useState } from 'react'; import { animated, useSpring } from 'react-spring'; import { useDrag } from 'react-use-gesture'; @@ -1113,87 +1113,96 @@ function SettingsPane() { var key = uuid(); settingsArr[0] = settingsArr[1]; - settingsArr[1] = settings.node.attach(Downgraded).get(); - - return <FadeThroughTransition - key={key} - from={<div className='inner posabs a0' children={settingsArr[0]} />} - to={<div className='inner posabs a0' children={settingsArr[1]} />} - show={true} - />; + settingsArr[1] = settings.node.attach(Downgraded).value; + + return <div className='settings fullwidth-inputs posrel'> + <FadeThroughTransition + key={key} + from={<div className='inner posabs a0' children={settingsArr[0]} />} + to={<div className='inner posabs a0' children={settingsArr[1]} />} + show={true} + /> + </div>; } -export default function Index() { +function Player() { var playing = useHookstate(global).timeline.playing; + var ready = useHookstate(global).ready; var playerRef = useRef(null); useEffect(() => { player.registerPlayer(playerRef.current); }, []); + return <div className='viewer'> + <div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}> + <div className='outer posabs abscenter'> + <video id='player' ref={playerRef} className='fullwidth' /> + </div> + </div> + <div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}> + <div className='posabs abscenter'> + <Fab + size='small' + children={<SkipPreviousRoundedIcon />} + onClick={() => { + player.slide = 0; + player.previous(); + }} + /> + <Fab + className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')} + size='medium' + onClick={() => { + player.next(); + player.player.play(); + }} + children={<PlaySkipIconAni />} + style={{ '--ani-state': playing.get() ? 'skip' : 'play' } as CSSProperties} + /> + <Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} /> + <Fab + size='small' + children={<NavigateNextRoundedIcon />} + onClick={() => { + player.next(); // TODO: fix jank here + player.next(); + player.previous(); + }} + /> + </div> + <div className='posabs abscenterv r0'> + <Fab + size='small' + children={<FullscreenRoundedIcon />} + onClick={() => document.body.requestFullscreen()} + /> + </div> + </div> + </div>; +} + +function TitleBar() { + return <AppBar position='static' color='transparent' elevation={0}> + <Toolbar> + <PressureIcon /> + <h1>pressure</h1> + </Toolbar> + </AppBar>; +} + +export default function Index() { useEffect(() => { var preventDefault = (e: Event) => e.preventDefault(); document.addEventListener('gesturestart', preventDefault); document.addEventListener('gesturechange', preventDefault); }, []); - var ready = useHookstate(global).ready; - return <> <div className='appGrid posabs a0'> - <AppBar position='static' color='transparent' elevation={0}> - <Toolbar> - <PressureIcon /> - <h1>pressure</h1> - </Toolbar> - </AppBar> - <div className='settings fullwidth-inputs posrel' children={<SettingsPane />} /> - <div className='viewer'> - <div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}> - <div className='outer posabs abscenter'> - <video id='player' ref={playerRef} className='fullwidth' /> - </div> - </div> - <div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}> - <div className='posabs abscenter'> - <Fab - size='small' - children={<SkipPreviousRoundedIcon />} - onClick={() => { - player.slide = 0; - player.previous(); - }} - /> - <Fab - className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')} - size='medium' - onClick={() => { - player.next(); - player.player.play(); - }} - children={<PlaySkipIconAni />} - style={{ '--ani-state': playing.get() ? 'skip' : 'play' } as CSSProperties} - /> - <Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} /> - <Fab - size='small' - children={<NavigateNextRoundedIcon />} - onClick={() => { - player.next(); // TODO: fix jank here - player.next(); - player.previous(); - }} - /> - </div> - <div className='posabs abscenterv r0'> - <Fab - size='small' - children={<FullscreenRoundedIcon />} - onClick={() => document.body.requestFullscreen()} - /> - </div> - </div> - </div> + <TitleBar /> + <SettingsPane /> + <Player /> <Tools /> <TimelineEditor /> </div> @@ -76,6 +76,11 @@ resolved "https://registry.yarnpkg.com/@hookstate/core/-/core-3.0.8.tgz#d6838153d6d43c2f35cfca475c31248192564e62" integrity sha512-blQagGIVIbNoUiNCRrvaXqFmUe7WGMY35ok/LENfl2pcIsLBjkreYIZiaSFi83tkycwq7ZOmcQz/R1nvLKhH8w== +"@hookstate/untracked@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@hookstate/untracked/-/untracked-3.0.0.tgz#fcf5005f89a68956c994ffb4b04cc3bd25d7cbf6" + integrity sha512-NctZVu0fEXc+komMmEpJ4OAD77P1P4uhXnU8e2Y1l+k0P+ZCE+enTDvgg9rp2WmViD7s8XA2+lS7wTkHGargmw== + "@material-ui/core@^4.11.4": version "4.11.4" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4" |