ready state / disabled tools

2 files changed, 58 insertions, 2 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 58b360d..722c4a8 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -67,6 +67,13 @@ interface project {
 			right: slideTypes | null;
 		};
 	};
+	ready: {
+		timeline: boolean;
+		video: {
+			available: boolean;
+			fullyloaded: boolean;
+		};
+	};
 	update: {
 		refreshLiveTimeline: () => void;
 	};
@@ -91,6 +98,13 @@ var project = createState<project>({
 			right: null,
 		},
 	},
+	ready: {
+		timeline: false,
+		video: {
+			available: false,
+			fullyloaded: false,
+		},
+	},
 	update: {
 		refreshLiveTimeline: () => {
 			player.timeline.slides = Array(...(project.timeline.workingTimeline.value));
@@ -828,6 +842,7 @@ function DefaultSettings() {
 							player.loadSlides(ev.target.result as string);
 							project.timeline.workingTimeline.set(player.timeline.slides);
 							project.update.refreshLiveTimeline.value();
+							project.ready.timeline.set(true);
 						});
 						reader.readAsText(file);
 					}}
@@ -874,15 +889,17 @@ function Tools() {
 	var frame = useHookstate(project).timeline.frame;
 	var tool = useHookstate(project).timeline.tool;
 	var timelineZoom = useHookstate(project).timeline.zoom;
+	var ready = useHookstate(project).ready;
 
 	return <div className='tools'>
-		<div className='time posrel'>
+		<div className={'time posrel ' + (ready.timeline.get() ? '' : 'disabled')}>
 			<span className='framerate numbers posabs l0 t0'>@{player.framerate}fps</span>
 			<h2 className='timecode numbers posabs r0 t0'>
 				{player.frameToTimestampString(frame.value, false)}
 			</h2>
 		</div>
 		<ToggleButtonGroup
+			className={ready.timeline.get() ? '' : 'disabled'}
 			color='primary'
 			aria-label='outlined primary button group'
 			value={tool.get()}
@@ -903,7 +920,7 @@ function Tools() {
 				</div>
 			</ToggleButton>
 		</ToggleButtonGroup>
-		<div className='zoom'>
+		<div className={'zoom ' + (ready.timeline.get() ? '' : 'disabled')}>
 			<ZoomOutRoundedIcon />
 			<div className='spacing'>
 				<Slider
diff --git a/styles/editor.css b/styles/editor.css
index a14adb3..95cff49 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -167,6 +167,18 @@
 	color: var(--gruble);
 }
 
+.tools .time .framerate,
+.tools .time .timecode {
+	transition-property: opacity, color;
+	transition-duration: 150ms;
+}
+
+.tools .time.disabled .framerate,
+.tools .time.disabled .timecode {
+	opacity: .6;
+	color: var(--c700);
+}
+
 .appGrid .tools .MuiToggleButtonGroup-root,
 .appGrid .tools .zoom {
 	margin-top: 8px;
@@ -185,12 +197,39 @@
 	color: var(--gruble);
 }
 
+.zoom .MuiSlider-root,
+.zoom .MuiSvgIcon-root {
+	transition-property: opactity, color;
+	transition-duration: 150ms;
+}
+
+.zoom.disabled .MuiSlider-root,
+.zoom.disabled .MuiSvgIcon-root {
+	pointer-events: none;
+	color: var(--c800) !important;
+	opacity: .6;
+}
+
 .appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root {
 	border-width: 2px;
 	padding: 8px;
 	color: var(--c800);
 	border-color: var(--c400);
 	margin-right: -1px;
+	transition-property: opacity, background-color, color, border-color;
+	transition-duration: 150ms;
+}
+
+.MuiToggleButtonGroup-root.disabled .MuiToggleButton-root {
+	opacity: .6;
+	pointer-events: none;
+}
+
+.MuiToggleButtonGroup-root.disabled .MuiToggleButton-root.Mui-selected {
+	color: var(--c800) !important;
+	background-color: var(--c400) !important;
+	border-top-color: var(--c600) !important;
+	border-bottom-color: var(--c600) !important;
 }
 
 .appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected {