slide settings beginnings

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;