diff options
| -rw-r--r-- | components/icons.tsx | 1 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | pages/editor.tsx | 26 | ||||
| -rw-r--r-- | styles/editor.css | 50 | ||||
| -rw-r--r-- | styles/globals.css | 4 | ||||
| -rw-r--r-- | styles/keyframes.css | 4 | ||||
| -rw-r--r-- | yarn.lock | 10 |
7 files changed, 94 insertions, 3 deletions
diff --git a/components/icons.tsx b/components/icons.tsx index c8a9cbc..954f516 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -124,7 +124,6 @@ export function SlideKeyframe(props: { width='24' height='24' viewBox='0 0 24 24' - fill='none' xmlns='http://www.w3.org/2000/svg' > {{ diff --git a/package.json b/package.json index 91bdf2f..ef0ae8e 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "dependencies": { "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", + "@mdi/js": "^5.9.55", + "@mdi/react": "^1.5.0", "ajv": "^8.3.0", "next": "^10.2.0", "react": "^17.0.2", diff --git a/pages/editor.tsx b/pages/editor.tsx index aeb4f87..5c3828d 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -4,8 +4,10 @@ import { TimedVideoPlayer } from './present'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; import Fab from '@material-ui/core/Fab'; import Toolbar from '@material-ui/core/Toolbar'; +import Icon from '@mdi/react'; import { PressureIcon, SlideKeyframe } from '../components/icons'; @@ -14,6 +16,7 @@ import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded' import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; import PauseRoundedIcon from '@material-ui/icons/PauseRounded'; import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded'; +import { mdiCursorDefault } from '@mdi/js'; function TimelineEditor(props: { player: TimedVideoPlayer; @@ -124,7 +127,28 @@ export default function Index() { </div> </div> </div> - <div className='tools'></div> + <div className='tools'> + <div className='time posrel'> + <span className='framerate numbers posabs l0 t0'>@{player.framerate}fps</span> + <h2 className='timecode numbers posabs r0 t0'>00:00:00:00f</h2> + </div> + <ButtonGroup color='primary' aria-label='outlined primary button group'> + <Button children={<Icon path={mdiCursorDefault} size={1} />} /> + <Button children={<SlideKeyframe type='default' />} /> + <Button children={<SlideKeyframe type='delay' />} /> + <Button children={<SlideKeyframe type='speedChange' />} /> + <Button> + <div className='loopStartEnd'> + <span className='posabs start'> + <SlideKeyframe type='loop' /> + </span> + <span className='posabs end'> + <SlideKeyframe type='loop' loopEnd /> + </span> + </div> + </Button> + </ButtonGroup> + </div> <div className='timeline'> <TimelineEditor player={player} diff --git a/styles/editor.css b/styles/editor.css index 8848b6a..3005be7 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -32,8 +32,56 @@ grid-column: 1; grid-row: 3; background-color: var(--c300); + padding: 8px; } +.appGrid .tools .time { + line-height: 1; + height: 20px; +} + +.appGrid .tools .time .framerate { + font-weight: 500; + color: var(--c700); +} + +.appGrid .tools .time .timecode { + font-weight: 500; + color: var(--gruble); +} + +.appGrid .tools .MuiButtonGroup-root { + margin-top: 8px; +} + +.appGrid .tools .MuiButtonGroup-root .MuiButton-root { + border-width: 2px; + padding: 8px; + color: var(--c800); + border-color: var(--c400); + margin-right: -1px; +} + +.appGrid .tools .MuiButtonGroup-root .MuiButton-root:first-child { + border-radius: 6px 0 0 6px; +} + +.appGrid .tools .MuiButtonGroup-root .MuiButton-root:last-child { + border-radius: 0 6px 6px 0; +} + +.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd { + display: inline-block; + white-space: nowrap; + line-height: 0; + position: relative; + height: 24px; + width: 36px; +} + +.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .start { left: -3px; } +.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .end { right: -3px; } + .appGrid .timeline { grid-column: 2; grid-row: 3; @@ -117,7 +165,7 @@ line-height: 0; top: 16px; z-index: 999; - + color: var(--gruble); } .appGrid .timeline .frames .frame:nth-child(30n) { diff --git a/styles/globals.css b/styles/globals.css index c45aa2d..f69cb97 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -14,6 +14,10 @@ h1 { font-size: 1.25rem; } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } +h1, h2, h3 { + margin: 0; +} + .MuiSvgIcon-root { font-size: 24px !important; } diff --git a/styles/keyframes.css b/styles/keyframes.css index 67b99eb..8e7e3d2 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -6,3 +6,7 @@ margin: 4px -11px; } +.keyframe > * { + fill: currentColor; +} + @@ -142,6 +142,16 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" +"@mdi/js@^5.9.55": + version "5.9.55" + resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.9.55.tgz#8f5bc4d924c23f30dab20545ddc768e778bbc882" + integrity sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A== + +"@mdi/react@^1.5.0": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.5.0.tgz#461d2064ba12d509723bffc95e2f7169a6ac884a" + integrity sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w== + "@next/env@10.2.0": version "10.2.0" resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.0.tgz#154dbce2efa3ad067ebd20b7d0aa9aed775e7c97" |