diff options
| -rw-r--r-- | components/fadethrough.tsx | 18 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | pages/editor.tsx | 31 | ||||
| -rw-r--r-- | readme.md | 4 | ||||
| -rw-r--r-- | styles/editor.css | 9 | ||||
| -rw-r--r-- | timeline.schema.json | 9 |
6 files changed, 65 insertions, 12 deletions
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')}> @@ -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" }, |