aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-06-19 13:22:52 +0200
committerlonkaars <loek@pipeframe.xyz>2021-06-19 13:22:52 +0200
commit2fc2a8c76722f801c29e8a314f8de22ae9572a04 (patch)
treeea7bc49329e574a303cf85eab07afdb52cc46963 /pages
parent57246e885544bd76c4ec2cafbb1adc530e382fa6 (diff)
button styling
Diffstat (limited to 'pages')
-rw-r--r--pages/editor.tsx141
1 files changed, 78 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'>