diff options
| -rw-r--r-- | pages/editor.tsx | 141 | ||||
| -rw-r--r-- | styles/editor.css | 27 |
2 files changed, 105 insertions, 63 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index a1960a8..0387246 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -27,6 +27,10 @@ import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded'; import { mdiCursorDefault } from '@mdi/js'; +import CodeRoundedIcon from '@material-ui/icons/CodeRounded'; +import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded'; +import VideoLabelRoundedIcon from '@material-ui/icons/VideoLabelRounded'; + var keyframeInAnimations: { [key: string]: { x: number; y: number; }; } = {}; var slideAPIs: { [key: string]: any; }[] = []; @@ -670,69 +674,80 @@ export default function Index() { </Toolbar> </AppBar> <div className='settings'> - <input - type='file' - id='vidUpload' - accept='video/*' - className='dispnone' - onChange={event => { - var file = event.target.files[0]; - if (!file) return; - var reader = new FileReader(); - reader.addEventListener('load', ev => { - player.loadVideo(ev.target.result as string); - - player.player.addEventListener('play', () => setPlaying(true)); - player.player.addEventListener('pause', () => setPlaying(false)); - }); - reader.readAsDataURL(file); - }} - /> - <Button - variant='contained' - color='default' - children='Load video' - onClick={() => document.getElementById('vidUpload').click()} - /> - <input - type='file' - id='jsonUpload' - accept='application/json' - className='dispnone' - onChange={event => { - var file = event.target.files[0]; - if (!file) return; - var reader = new FileReader(); - reader.addEventListener('load', ev => { - player.loadSlides(ev.target.result as string); - setWorkingTimeline(player.timeline.slides); - rerender(); - }); - reader.readAsText(file); - }} - /> - <Button - variant='contained' - color='default' - children='Load json' - onClick={() => document.getElementById('jsonUpload').click()} - /> - <Button - variant='contained' - color='default' - children='Download json' - onClick={() => { - var timeline = Object({ ...(player.timeline) }); - var data = JSON.stringify(timeline); - var blob = new Blob([data], { type: 'application/json' }); - var a = document.createElement('a'); - a.href = URL.createObjectURL(blob); - a.download = player.timeline.name - .toLowerCase() - .replace(/\s/g, '-'); - a.click(); - }} - /> + <div className='inner posrel'> + <h2 className='title posabs h0 t0'>Presentation settings</h2> + <div className='scroll posabs h0 b0'> + <div className='section'> + <span className='title'>Cool temporary buttons</span> + <input + type='file' + id='vidUpload' + accept='video/*' + className='dispnone' + onChange={event => { + var file = event.target.files[0]; + if (!file) return; + var reader = new FileReader(); + reader.addEventListener('load', ev => { + player.loadVideo(ev.target.result as string); + + player.player.addEventListener('play', () => setPlaying(true)); + player.player.addEventListener('pause', () => setPlaying(false)); + }); + reader.readAsDataURL(file); + }} + /> + <Button + variant='contained' + color='default' + children='Load video' + onClick={() => document.getElementById('vidUpload').click()} + startIcon={<VideoLabelRoundedIcon />} + /> + <input + type='file' + id='jsonUpload' + accept='application/json' + className='dispnone' + onChange={event => { + var file = event.target.files[0]; + if (!file) return; + var reader = new FileReader(); + reader.addEventListener('load', ev => { + player.loadSlides(ev.target.result as string); + setWorkingTimeline(player.timeline.slides); + rerender(); + }); + reader.readAsText(file); + }} + /> + <Button + variant='contained' + color='default' + children='Load json' + onClick={() => document.getElementById('jsonUpload').click()} + startIcon={<CodeRoundedIcon />} + /> + <Button + variant='contained' + color='default' + children='Download json' + onClick={() => { + var timeline = Object({ ...(player.timeline) }); + var data = JSON.stringify(timeline); + var blob = new Blob([data], { type: 'application/json' }); + var a = document.createElement('a'); + a.href = URL.createObjectURL(blob); + a.download = player.timeline.name + .toLowerCase() + .replace(/\s/g, '-'); + a.click(); + }} + startIcon={<GetAppRoundedIcon />} + /> + </div> + </div> + </div> </div> <div className='viewer'> <div className='player posrel'> diff --git a/styles/editor.css b/styles/editor.css index 881f82c..210ffbc 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -22,6 +22,33 @@ background-color: var(--c400); } +.appGrid .settings .inner { + margin: 16px; +} + +.settings .inner .title { + font-size: 1em; + font-weight: 500; + color: var(--mint); +} + +.settings .inner .section { + margin-top: 16px; +} + +.settings .inner .section .title { + color: var(--c800); + display: block; +} + +.settings .inner .section > * { margin-bottom: 8px; } +.settings .inner .scroll { top: 32px; } +.settings .inner button { + width: 100%; + background-color: var(--piss); + color: var(--bg); +} + .appGrid .viewer { grid-column: 2; grid-row: 2; |