aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/editor.tsx174
-rw-r--r--styles/editor.css22
2 files changed, 116 insertions, 80 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 0387246..177ec9f 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -14,6 +14,7 @@ import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import Fab from '@material-ui/core/Fab';
import Slider from '@material-ui/core/Slider';
+import Switch from '@material-ui/core/Switch';
import Toolbar from '@material-ui/core/Toolbar';
import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded';
import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded';
@@ -75,6 +76,11 @@ var useFrame = create(set => ({
setFrame: (newFrame: number) => set(() => ({ currentFrame: newFrame })),
}));
+var usePlaying = create(set => ({
+ playing: false,
+ setPlaying: (playing: boolean) => set(() => ({ playing })),
+}));
+
function calculateSelectionOffsets(left: slideTypes, right: slideTypes) {
var offsets = {
default: { left: -6, right: 6 },
@@ -609,12 +615,93 @@ function TimelineEditor(props: {
</>;
}
-export default function Index() {
- var [dummy, setDummy] = useState(false);
- var rerender = () => setDummy(!dummy);
-
+function DefaultSettings() {
+ var setPlaying = usePlaying((st: any) => st.setPlaying);
var setWorkingTimeline = useWorkingTimeline((st: any) => st.setTimeline);
+ return <>
+ <h2 className='title posabs h0 t0'>Presentation settings</h2>
+ <div className='scroll posabs h0 b0'>
+ <div className='section'>
+ <span className='title'>Controls</span>
+ <div className='sidebyside'>
+ <span className='body'>Allow remote control during presentation</span>
+ <Switch />
+ </div>
+ </div>
+ <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);
+ });
+ 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>
+ </>;
+}
+
+export default function Index() {
var timelineZoom = getTimelineZoom((st: any) => st.zoom);
var setTimelineZoom = getTimelineZoom((st: any) => st.setZoom);
@@ -622,7 +709,7 @@ export default function Index() {
var [tool, setTool] = useState('cursor');
- var [playing, setPlaying] = useState(false);
+ var playing = usePlaying((st: any) => st.playing);
var mouseX = 0;
@@ -673,80 +760,9 @@ export default function Index() {
<h1>pressure</h1>
</Toolbar>
</AppBar>
- <div className='settings'>
- <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 className='settings posrel'>
+ <div className='inner posabs a0'>
+ <DefaultSettings />
</div>
</div>
<div className='viewer'>
diff --git a/styles/editor.css b/styles/editor.css
index 210ffbc..296a6b7 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -42,12 +42,32 @@
}
.settings .inner .section > * { margin-bottom: 8px; }
-.settings .inner .scroll { top: 32px; }
+.settings .inner .scroll {
+ top: 32px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ border-radius: 4px;
+ margin-right: -8px;
+}
.settings .inner button {
width: 100%;
background-color: var(--piss);
color: var(--bg);
}
+.settings .inner .section .settings {
+ display: grid;
+ grid-auto-flow: column;
+}
+
+.settings ::-webkit-scrollbar-track,
+.settings ::-webkit-scrollbar-track-piece,
+.settings ::-webkit-scrollbar {
+ background-color: var(--c400);
+}
+
+.settings ::-webkit-scrollbar-thumb {
+ background-color: var(--c700);
+}
.appGrid .viewer {
grid-column: 2;