diff options
| -rw-r--r-- | pages/editor.tsx | 22 | ||||
| -rw-r--r-- | styles/editor.css | 44 |
2 files changed, 60 insertions, 6 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 0290fe1..40aeefc 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -71,7 +71,7 @@ interface project { timeline: boolean; video: { available: boolean; - fullyloaded: boolean; + playable: boolean; }; }; update: { @@ -102,7 +102,7 @@ var project = createState<project>({ timeline: false, video: { available: false, - fullyloaded: false, + playable: false, }, }, update: { @@ -504,6 +504,8 @@ function TimelineEditor() { var mouseX = 0; + var ready = useHookstate(project).ready; + var timelineRef = useRef(null); var selectionAreaRef = useRef(null); useEffect(() => { @@ -653,7 +655,7 @@ function TimelineEditor() { }, []); return <div - className='timeline posrel' + className={'timeline posrel ' + (ready.timeline.get() ? '' : 'disabled')} style={{ '--zoom': zoomToPx(timelineZoom.value) } as CSSProperties} ref={timelineRef} > @@ -810,6 +812,12 @@ function DefaultSettings() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadVideo(ev.target.result as string); + project.ready.video.available.set(true); + + player.player.addEventListener( + 'canplaythrough', + () => project.ready.video.playable.set(true), + ); player.player.addEventListener('play', () => project.timeline.playing.set(true)); player.player.addEventListener('pause', () => project.timeline.playing.set(false)); @@ -949,6 +957,8 @@ export default function Index() { document.addEventListener('gesturechange', preventDefault); }, []); + var ready = useHookstate(project).ready; + return <> <div className='appGrid posabs a0'> <AppBar position='static' color='transparent' elevation={0}> @@ -963,12 +973,12 @@ export default function Index() { </div> </div> <div className='viewer'> - <div className='player posrel'> + <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'> + <div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}> <div className='posabs abscenter'> <Fab size='small' @@ -979,7 +989,7 @@ export default function Index() { }} /> <Fab - className='playPause' + className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')} size='medium' onClick={() => { player.next(); diff --git a/styles/editor.css b/styles/editor.css index 95cff49..9ae1baa 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -169,6 +169,7 @@ .tools .time .framerate, .tools .time .timecode { + user-select: none; transition-property: opacity, color; transition-duration: 150ms; } @@ -279,7 +280,13 @@ line-height: 0; } +.player.disabled .outer { + border-color: var(--c400) !important; +} + .appGrid .viewer .player .outer { + transition-property: border-color; + transition-duration: 150ms; border: 8px solid var(--piss); border-radius: 8px; } @@ -311,11 +318,26 @@ .appGrid .viewer .controls .MuiFab-root.playPause { background-color: var(--blue); } +.appGrid .viewer .controls.disabled .playPause, +.appGrid .viewer .controls .playPause.disabled { + color: var(--c700); + opacity: .6; + background-color: var(--c400); +} .appGrid .viewer .controls .MuiFab-root { color: var(--fg); } +.appGrid .viewer .controls.disabled .MuiFab-root { + color: var(--c700); + opacity: .6; + pointer-events: none; +} +.appGrid .viewer .controls .MuiFab-root { + transition-property: background-color, color, opacity; + transition-duration: 150ms; +} .appGrid .viewer .controls .MuiFab-root:not(.playPause) { background-color: var(--transparent); box-shadow: none; @@ -423,11 +445,33 @@ .timeline .scrubber .head { fill: var(--blue); } .timeline .scrubber .needle { background-color: var(--blue); } +.timeline .scrubber .head, +.timeline .scrubber .needle { + transition-property: fill, background-color; + transition-duration: 150ms; +} + +.timeline.disabled .scrubberJumpArea { pointer-events: none; } +.timeline.disabled .scrubber .head { fill: var(--c600); } +.timeline.disabled .scrubber .needle { background-color: var(--c600); } + .timeline .labels .label { transform: translate(-50%, -100%); color: var(--c700); } +.timeline .labels .label, +.timeline .timeScale { + transition-property: color, opacity; + transition-duration: 150ms; +} + +.timeline.disabled .labels .label, +.timeline.disabled .timeScale { + color: var(--c600); + opacity: .6; +} + .timeline .scrubberJumpArea { height: 28px; z-index: 9; |