ready state / disabled editor and playerhookstate-nolag2

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;