aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--pages/editor.tsx72
-rw-r--r--styles/editor.css18
-rw-r--r--styles/globals.css13
-rw-r--r--timeline.ts10
4 files changed, 99 insertions, 14 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index bde174f..47a6fb1 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -18,6 +18,7 @@ import PlaySkipIconAni from '../components/play-skip';
import Selection from '../components/selection';
import timeline, {
anySlide,
+ clickThroughBehaviours,
loopBeginSlide,
loopSlide,
presentationSettings,
@@ -1045,8 +1046,6 @@ function DefaultSettings() {
<FormControl variant='filled'>
<InputLabel>On-screen controls</InputLabel>
<Select
- labelId='demo-simple-select-filled-label'
- id='demo-simple-select-filled'
value={proj.settings.controlType.get()}
onChange={e =>
proj.settings.controlType.set(e.target.value as presentationSettings['controlType'])}
@@ -1214,12 +1213,77 @@ function DefaultSettings() {
</>;
}
+function SlideProperties(props: {
+ type: slideTypes;
+}) {
+ if (props.type == 'default') return null;
+ return <div className='section'>
+ <span className='title'>Properties</span>
+ {{
+ 'loop': <>
+ <TextField label='Duration' variant='filled' />
+ <TextField label='Start timestamp' variant='filled' />
+ <TextField label='End timestamp' variant='filled' />
+ </>,
+ 'delay': <>
+ <TextField label='Delay duration' variant='filled' />
+ </>,
+ 'speedChange': <>
+ <TextField label='New speed' variant='filled' />
+ <TextField label='Factor' variant='filled' />
+ </>,
+ }[props.type]}
+ </div>;
+}
+
function SlideSettings() {
+ var selection = useHookstate(global).selection;
+ var multipleSlides = selection.slides.get().length > 1;
+ var slideType = selection.slides.get()[0]?.type || '';
+ var clickThroughBehaviour = selection.slides.get()[0]?.clickThroughBehaviour || '';
+
return <>
<h2 className='title posabs h0 t0'>Slide settings</h2>
<div className='scroll posabs h0 b0'>
<div className='section'>
- <span className='title'>Cool</span>
+ <span className='title'>Type</span>
+ <ToggleButtonGroup
+ className={'toolsSelection ' + (multipleSlides ? 'disabled' : '')}
+ color='primary'
+ aria-label='outlined primary button group'
+ value={slideType}
+ exclusive
+ onChange={(_event: any, newTool: string | null) => {
+ if (newTool === null) return;
+ }}
+ >
+ <ToggleButton value='default' children={<SlideKeyframe type='default' />} />
+ <ToggleButton value='delay' children={<SlideKeyframe type='delay' />} />
+ <ToggleButton value='speedChange' children={<SlideKeyframe type='speedChange' />} />
+ <ToggleButton value='loop'>
+ <div className='loopStartEnd'>
+ <span className='posabs start' children={<SlideKeyframe type='loop' />} />
+ <span className='posabs end' children={<SlideKeyframe type='loop' loopEnd />} />
+ </div>
+ </ToggleButton>
+ </ToggleButtonGroup>
+ </div>
+ {!multipleSlides && <SlideProperties type={slideType as slideTypes} />}
+ <div className='section'>
+ <FormControl variant='filled'>
+ <InputLabel>Click through behaviour</InputLabel>
+ <Select
+ onChange={e => {
+ if (selection.slides.value.length != 1) return;
+ selection.slides[0].clickThroughBehaviour.set(e.target.value as clickThroughBehaviours);
+ }}
+ IconComponent={ArrowDropDownRoundedIcon}
+ value={clickThroughBehaviour}
+ >
+ <MenuItem value='ImmediatelySkip' children='Immediately skip' />
+ <MenuItem value='PlayOut' children='Play out' />
+ </Select>
+ </FormControl>
</div>
</div>
</>;
@@ -1257,7 +1321,7 @@ function Tools() {
</h2>
</div>
<ToggleButtonGroup
- className={ready.timeline.get() ? '' : 'disabled'}
+ className={'toolsSelection ' + (ready.timeline.get() ? '' : 'disabled')}
color='primary'
aria-label='outlined primary button group'
value={tool.get()}
diff --git a/styles/editor.css b/styles/editor.css
index 4483c51..d1e5e00 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -224,10 +224,12 @@
opacity: .6;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root {
+.appGrid .settings .MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root { border-color: var(--c700); }
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root {
border-width: 2px;
padding: 8px;
color: var(--c800);
+ background-color: transparent;
border-color: var(--c400);
margin-right: -1px;
transition-property: opacity, background-color, color, border-color;
@@ -246,22 +248,24 @@
border-bottom-color: var(--c600) !important;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected {
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root.Mui-selected {
color: var(--gruble);
background-color: rgba(93, 233, 174, 0.12);
+}
+.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected {
border-top-color: #334A5A;
border-bottom-color: #334A5A;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root:first-child {
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root:first-child {
border-radius: 6px 0 0 6px;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root:last-child {
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root:last-child {
border-radius: 0 6px 6px 0;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd {
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root .loopStartEnd {
display: inline-block;
white-space: nowrap;
line-height: 0;
@@ -270,8 +274,8 @@
width: 36px;
}
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd .start { left: -3px; }
-.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd .end { right: -3px; }
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root .loopStartEnd .start { left: -3px; }
+.MuiToggleButtonGroup-root.toolsSelection .MuiToggleButton-root .loopStartEnd .end { right: -3px; }
.appGrid .timeline {
grid-column: 2;
diff --git a/styles/globals.css b/styles/globals.css
index 471cc80..3cefd6a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -41,3 +41,16 @@ h1, h2, h3 {
height: 8px;
}
+.MuiInputLabel-root {
+ transition-property: width;
+ transition-duration: 100ms;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ width: calc(100% - 48px);
+}
+
+.MuiInputLabel-root.MuiInputLabel-shrink {
+ width: calc(100% - 0px);
+}
diff --git a/timeline.ts b/timeline.ts
index f5f8066..d0780ff 100644
--- a/timeline.ts
+++ b/timeline.ts
@@ -1,11 +1,15 @@
import { v4 as uuid } from 'uuid';
-export type slideTypes = 'default' | 'delay' | 'speedChange' | 'loop';
-export var slideTypes = ['default', 'delay', 'speedChange', 'loop'];
+export const slideTypes = ['default', 'delay', 'speedChange', 'loop'] as const;
+export type slideTypes = typeof slideTypes[number];
+
+export const clickThroughBehaviours = ['ImmediatelySkip', 'PlayOut'] as const;
+export type clickThroughBehaviours = typeof clickThroughBehaviours[number];
+
export type anySlide = slide | delaySlide | speedChangeSlide | loopSlide;
export class slide {
- clickThroughBehaviour: 'ImmediatelySkip' | 'PlayOut' = 'ImmediatelySkip';
+ clickThroughBehaviour: clickThroughBehaviours = 'ImmediatelySkip';
type: slideTypes = 'default';
id: string;