From 0dec7575221e86f39439b249a5da6044c1a0a9b4 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 26 Jun 2021 10:51:06 +0200
Subject: new timeline.ts schema + editor (pretty much) done

---
 components/fadethrough.tsx | 18 ++++++++++++++++++
 package.json               |  6 ++++++
 pages/editor.tsx           | 31 +++++++++++++++++++++++--------
 readme.md                  |  4 +++-
 styles/editor.css          |  9 +++++++++
 timeline.schema.json       |  9 ++++++---
 6 files changed, 65 insertions(+), 12 deletions(-)
 create mode 100644 components/fadethrough.tsx

diff --git a/components/fadethrough.tsx b/components/fadethrough.tsx
new file mode 100644
index 0000000..5f5d06c
--- /dev/null
+++ b/components/fadethrough.tsx
@@ -0,0 +1,18 @@
+import Fade from '@material-ui/core/Fade';
+import Grow from '@material-ui/core/Grow';
+import { ReactNode } from 'react';
+
+export default function FadeThroughTransition(props: {
+	from: ReactNode;
+	to: ReactNode;
+	show: boolean;
+}) {
+	return <div className='posabs a0 fadethrough'>
+		<Grow in={props.show} timeout={500}>
+			<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/package.json b/package.json
index ec3c9b6..d5ea486 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,12 @@
 	"author": "lonkaars <loek@pipeframe.xyz>",
 	"license": "MIT",
 	"private": false,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"schema": "npx ts-json-schema-generator --path timeline.ts --type timeline > timeline.schema.json"
+	},
 	"dependencies": {
 		"@hookstate/core": "^3.0.8",
 		"@material-ui/core": "^4.11.4",
diff --git a/pages/editor.tsx b/pages/editor.tsx
index b217eab..b72d705 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -4,6 +4,7 @@ import { animated, useSpring } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
 import { useMousetrap } from 'use-mousetrap';
 
+import FadeThroughTransition from '../components/fadethrough';
 import {
 	FullScreenControlsRoundedIcon,
 	MenuBarControlsRoundedIcon,
@@ -812,9 +813,6 @@ function ProjectSettings() {
 	</DialogBox>;
 }
 
-// https://material.io/design/navigation/navigation-transitions.html#peer-transitions
-// https://material-ui.com/components/transitions/#grow
-// https://material-ui.com/components/transitions/#fade
 function DefaultSettings() {
 	var [nextSlideKeybinds, setNextSlideKeybinds] = useState(['Space', 'n', 'Enter']);
 	var [previousSlideKeybinds, setPreviousSlideKeybinds] = useState(['Backspace', 'p']);
@@ -826,7 +824,7 @@ function DefaultSettings() {
 		<ProjectSettings />
 		<h2 className='title posabs h0 t0'>Presentation settings</h2>
 		<div className='scroll posabs h0 b0'>
-			<div className='section'>
+			<div className={'section ' + (global.ready.timeline.value ? '' : 'disabled')}>
 				<span className='title'>Controls</span>
 				<div className='sidebyside'>
 					<span className='body'>Allow remote control during presentation</span>
@@ -885,7 +883,7 @@ function DefaultSettings() {
 					</Select>
 				</FormControl>
 			</div>
-			<div className='section'>
+			<div className={'section ' + (global.ready.timeline.value ? '' : 'disabled')}>
 				<span className='title'>Keybindings</span>
 				<KeybindSelector label='Next slide' value={nextSlideKeybinds} onChange={setNextSlideKeybinds} />
 				<KeybindSelector
@@ -1004,6 +1002,17 @@ function DefaultSettings() {
 	</>;
 }
 
+function KeyframeSettings() {
+	return <>
+		<h2 className='title posabs h0 t0'>Keyframe settings</h2>
+		<div className='scroll posabs h0 b0'>
+			<div className='section'>
+				<span className='title'>Cool</span>
+			</div>
+		</div>
+	</>;
+}
+
 function zoomAroundPoint(newZoom: number, pivot: number) {
 	var timeline = document.querySelector('.timeline .timelineInner');
 	var frame = getFrameAtOffset(pivot, global.timeline.zoom.value);
@@ -1094,9 +1103,15 @@ export default function Index() {
 				</Toolbar>
 			</AppBar>
 			<div className='settings fullwidth-inputs posrel'>
-				<div className='inner posabs a0'>
-					<DefaultSettings />
-				</div>
+				<FadeThroughTransition
+					from={<div className='inner posabs a0'>
+						<DefaultSettings />
+					</div>}
+					to={<div className='inner posabs a0'>
+						<KeyframeSettings />
+					</div>}
+					show={false}
+				/>
 			</div>
 			<div className='viewer'>
 				<div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}>
diff --git a/readme.md b/readme.md
index 6538e5e..ce6c679 100644
--- a/readme.md
+++ b/readme.md
@@ -10,7 +10,9 @@ love, and present it to the world with ease.
 ## roadmap
 
 - [x] working demo
-- [ ] standalone web editor
+- [x] standalone web editor
+	- [ ] keyframe snapping to cursor/needle
+	- [ ] undo/redo timeline
 - [ ] backend in rust
 - [ ] remote control with phone
 - [ ] presenter view
diff --git a/styles/editor.css b/styles/editor.css
index 6e68b30..9393227 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -34,9 +34,18 @@
 
 .settings .inner .section {
 	margin-top: 16px;
+	user-select: none;
+	transition-property: opacity;
+	transition-duration: 150ms;
+}
+
+.settings .inner .section.disabled {
+	opacity: .4;
+	pointer-events: none;
 }
 
 .settings .inner .section .title {
+	user-select: none;
 	color: var(--c800);
 	display: block;
 }
diff --git a/timeline.schema.json b/timeline.schema.json
index 75c5265..3076125 100644
--- a/timeline.schema.json
+++ b/timeline.schema.json
@@ -94,7 +94,10 @@
 			"additionalProperties": false,
 			"properties": {
 				"controlType": {
-					"const": "FullScreen",
+					"enum": [
+						"FullScreen",
+						"MenuBar"
+					],
 					"type": "string"
 				}
 			},
@@ -124,10 +127,10 @@
 				}
 			},
 			"required": [
-				"frame",
 				"clickThroughBehaviour",
 				"type",
-				"id"
+				"id",
+				"frame"
 			],
 			"type": "object"
 		},
-- 
cgit v1.2.3