settings adjust based on selection

3 files changed, 73 insertions, 22 deletions

diff --git a/components/fadethrough.tsx b/components/fadethrough.tsx
index 5f5d06c..e3af4d3 100644
--- a/components/fadethrough.tsx
+++ b/components/fadethrough.tsx
@@ -1,18 +1,22 @@
-import Fade from '@material-ui/core/Fade';
 import Grow from '@material-ui/core/Grow';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 export default function FadeThroughTransition(props: {
 	from: ReactNode;
 	to: ReactNode;
 	show: boolean;
 }) {
+	var [firstRender, setFirstRender] = useState(true);
+	useEffect(() => {
+		setTimeout(() => setFirstRender(false), 0);
+	}, []);
+
 	return <div className='posabs a0 fadethrough'>
-		<Grow in={props.show} timeout={500}>
+		<div className={'fadeout ' + (firstRender ? 'first' : '')}>
+			<div className='posabs a0 from'>{props.from}</div>
+		</div>
+		<Grow in={props.show} timeout={300}>
 			<div className='posabs a0 to'>{props.to}</div>
 		</Grow>
-		<Fade in={!props.show}>
-			<div className='posabs a0 from'>{props.from}</div>
-		</Fade>
 	</div>;
 }
diff --git a/pages/editor.tsx b/pages/editor.tsx
index b72d705..5944cd2 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,8 +1,9 @@
-import { createState, Downgraded, none, State, useHookstate } from '@hookstate/core';
+import { createState, Downgraded, none, PluginCallbacks, State, StateValueAtRoot, 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';
 import { useMousetrap } from 'use-mousetrap';
+import { v4 as uuid } from 'uuid';
 
 import FadeThroughTransition from '../components/fadethrough';
 import {
@@ -86,6 +87,10 @@ interface globalState {
 	dialog: {
 		projectSettings: boolean;
 	};
+	settings: {
+		node: ReactNode;
+		name: string;
+	};
 	ready: {
 		timeline: boolean;
 		video: {
@@ -127,6 +132,10 @@ var global = createState<globalState>({
 			playable: false,
 		},
 	},
+	settings: {
+		node: <DefaultSettings />,
+		name: 'DefaultSettings',
+	},
 	update: {
 		refreshLiveTimeline: () => {
 			player.timeline.slides = Array(...(global.timeline.workingTimeline.value));
@@ -144,6 +153,22 @@ var global = createState<globalState>({
 	},
 });
 
+var settings = {
+	'default': {
+		node: <DefaultSettings />,
+		name: 'DefaultSettings',
+	},
+	'slide': {
+		node: <SlideSettings />,
+		name: 'SlideSettings',
+	},
+};
+function setSetting(name: keyof typeof settings) {
+	var setting = settings[name];
+	if (global.settings.name.value == setting.name) return;
+	global.settings.set(setting);
+}
+
 interface project {
 	timeline: timeline;
 }
@@ -415,8 +440,10 @@ function TimelineSelection(props: { selectionAreaRef: Ref<ReactNode>; }) {
 		if (!global.selection.active.value) global.selection.active.set(true);
 		if (last) {
 			global.selection.active.set(false);
-			if (distanceTraveled <= minDistance) global.selection.hidden.set(true);
-			else {
+			if (distanceTraveled <= minDistance) {
+				setSetting('default');
+				global.selection.hidden.set(true);
+			} else {
 				var endingFrame = startingFrame + frameWidth;
 				var expandedTimeline = new Array(...project.timeline.slides.value);
 				for (let i = 0; i < expandedTimeline.length; i++) {
@@ -433,6 +460,7 @@ function TimelineSelection(props: { selectionAreaRef: Ref<ReactNode>; }) {
 				);
 
 				if (keyframesInSelection.length < 1) {
+					setSetting('default');
 					global.selection.hidden.set(true);
 					return;
 				}
@@ -465,6 +493,7 @@ function TimelineSelection(props: { selectionAreaRef: Ref<ReactNode>; }) {
 						widthOffset,
 					});
 				}, 100);
+				setSetting('slide');
 				global.selection.merge({
 					type: {
 						left: left.type,
@@ -1002,9 +1031,9 @@ function DefaultSettings() {
 	</>;
 }
 
-function KeyframeSettings() {
+function SlideSettings() {
 	return <>
-		<h2 className='title posabs h0 t0'>Keyframe settings</h2>
+		<h2 className='title posabs h0 t0'>Slide settings</h2>
 		<div className='scroll posabs h0 b0'>
 			<div className='section'>
 				<span className='title'>Cool</span>
@@ -1078,6 +1107,22 @@ function Tools() {
 	</div>;
 }
 
+var settingsArr: ReactNode[] = [null, global.settings.node.attach(Downgraded).value];
+function SettingsPane() {
+	var settings = useHookstate(global).settings;
+	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}
+	/>;
+}
+
 export default function Index() {
 	var playing = useHookstate(global).timeline.playing;
 
@@ -1102,17 +1147,7 @@ export default function Index() {
 					<h1>pressure</h1>
 				</Toolbar>
 			</AppBar>
-			<div className='settings fullwidth-inputs posrel'>
-				<FadeThroughTransition
-					from={<div className='inner posabs a0'>
-						<DefaultSettings />
-					</div>}
-					to={<div className='inner posabs a0'>
-						<KeyframeSettings />
-					</div>}
-					show={false}
-				/>
-			</div>
+			<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'>
diff --git a/styles/editor.css b/styles/editor.css
index 9393227..949265d 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -490,3 +490,15 @@
 	z-index: 9;
 }
 
+.fadeout {
+	transition-property: opacity;
+	transition-duration: 100ms;
+	opacity: 0;
+	user-select: none;
+	pointer-events: none;
+}
+
+.fadeout.first {
+	transition-duration: 0ms;
+	opacity: 1;
+}