css tweaks + code splitting

5 files changed, 79 insertions, 55 deletions

diff --git a/components/slideprops.tsx b/components/slideprops.tsx
new file mode 100644
index 0000000..aa118e8
--- /dev/null
+++ b/components/slideprops.tsx
@@ -0,0 +1,57 @@
+import { State } from '@hookstate/core';
+
+import TextField from '@material-ui/core/TextField';
+
+import TimecodeInput from '../components/timeinput';
+import { globalState } from '../pages/editor';
+import { TimedVideoPlayer } from '../pages/present';
+import { anySlide, loopSlide } from '../timeline';
+
+export default function SlideProperties(props: {
+	slide: State<anySlide>;
+	global: State<globalState>;
+	player: TimedVideoPlayer;
+}) {
+	if (props.slide.value.type == 'default') return null;
+
+	return <div className='section'>
+		<span className='title'>Properties</span>
+		{{
+			'loop': <>
+				<TextField
+					label='Duration'
+					variant='filled'
+					type='number'
+					value={(props.slide as State<loopSlide>).frame.get()
+						- (props.slide as State<loopSlide>).beginFrame.get()}
+				/>
+				<TimecodeInput
+					label='Start timestamp'
+					value={(props.slide as State<loopSlide>).beginFrame.get()}
+					update={newValue => {
+						(props.slide as State<loopSlide>).frame.set(newValue);
+						props.global.update.refreshLiveTimeline.value();
+					}}
+					player={props.player}
+				/>
+				<TimecodeInput
+					label='End timestamp'
+					value={(props.slide as State<loopSlide>).frame.get()}
+					update={newValue => {
+						(props.slide as State<loopSlide>).frame.set(newValue);
+						props.global.update.refreshLiveTimeline.value();
+					}}
+					player={props.player}
+				/>
+				<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.slide.value.type]}
+	</div>;
+}
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 29e409e..49f3306 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -17,7 +17,7 @@ import {
 import KeybindSelector from '../components/keybindselector';
 import PlaySkipIconAni from '../components/play-skip';
 import Selection from '../components/selection';
-import TimecodeInput from '../components/timeinput';
+import SlideProperties from '../components/slideprops';
 import Project, { arrayBufferToBase64, PresentationSettings, VideoSources, VideoSourceType } from '../project';
 import {
 	anySlide,
@@ -39,7 +39,6 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import Slider from '@material-ui/core/Slider';
 import Switch from '@material-ui/core/Switch';
-import TextField from '@material-ui/core/TextField';
 import Toolbar from '@material-ui/core/Toolbar';
 import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded';
 import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded';
@@ -206,6 +205,8 @@ function select(slides: anySlide[]) {
 
 		var [startOffset, widthOffset] = calculateSelectionOffsets(left.type, right.type);
 
+		// TODO: sometimes has wrong offset when clicking slide
+
 		selectionPosAPI[global.selection.hidden.value ? 'set' : 'start']({
 			y1: 50,
 			y2: 62,
@@ -1173,51 +1174,6 @@ function DefaultSettings() {
 	</>;
 }
 
-function SlideProperties(props: { slide: State<anySlide>; }) {
-	if (props.slide.value.type == 'default') return null;
-
-	return <div className='section'>
-		<span className='title'>Properties</span>
-		{{
-			'loop': <>
-				<TextField
-					label='Duration'
-					variant='filled'
-					type='number'
-					value={(props.slide as State<loopSlide>).frame.get()
-						- (props.slide as State<loopSlide>).beginFrame.get()}
-				/>
-				<TimecodeInput
-					label='Start timestamp'
-					value={(props.slide as State<loopSlide>).beginFrame.get()}
-					update={newValue => {
-						(props.slide as State<loopSlide>).frame.set(newValue);
-						global.update.refreshLiveTimeline.value();
-					}}
-					player={player}
-				/>
-				<TimecodeInput
-					label='End timestamp'
-					value={(props.slide as State<loopSlide>).frame.get()}
-					update={newValue => {
-						(props.slide as State<loopSlide>).frame.set(newValue);
-						global.update.refreshLiveTimeline.value();
-					}}
-					player={player}
-				/>
-				<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.slide.value.type]}
-	</div>;
-}
-
 function SlideSettings() {
 	var selection = Array.from(useHookstate(global).selection.slides);
 	selection = selection.map(slide => {
@@ -1255,8 +1211,13 @@ function SlideSettings() {
 					</ToggleButton>
 				</ToggleButtonGroup>
 			</div>
-			{selection.length == 1 && <SlideProperties slide={selection[0]} />}
+			{selection.length == 1 && <SlideProperties
+				slide={selection[0]}
+				global={global}
+				player={player}
+			/>}
 			<div className='section'>
+				<span className='title'>Behavior</span>
 				<FormControl variant='filled'>
 					<InputLabel>Click through behaviour</InputLabel>
 					<Select
diff --git a/styles/editor.css b/styles/editor.css
index cb9bc35..30a48be 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -60,7 +60,7 @@
 	top: 32px;
 	overflow-y: scroll;
 	overflow-x: hidden;
-	border-radius: 4px;
+	border-radius: 6px;
 	margin-right: -16px;
 }
 .settings .inner button {
@@ -87,7 +87,7 @@
 .MuiSlider-thumb.MuiSlider-active { box-shadow: 0px 0px 0px 14px var(--selection-hover-color) !important; }
 
 .MuiFormControl-root {
-	border-radius: 4px;
+	border-radius: 6px;
 	overflow: hidden;
 }
 .MuiSelect-icon,
@@ -529,3 +529,9 @@ header .projarea span {
 	margin: -2px -4px;
 	border-radius: 6px;
 }
+
+.MuiSelect-root, .MuiInputBase-root { border-radius: 6px !important; }
+.MuiInputBase-root { background-color: var(--c600) !important; }
+.MuiSelect-root { background-color: var(--c200) !important; }
+.MuiFormLabel-root { font-weight: 500 !important; }
+
diff --git a/styles/globals.css b/styles/globals.css
index cc44d7b..dd3734e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -55,3 +55,7 @@ h1, h2, h3 {
 .MuiInputLabel-root.MuiInputLabel-shrink {
 	width: calc(100% - 0px);
 }
+
+.MuiButton-root {
+	border-radius: 6px !important;
+}
diff --git a/styles/keybindselector.css b/styles/keybindselector.css
index a923df9..1128fa7 100644
--- a/styles/keybindselector.css
+++ b/styles/keybindselector.css
@@ -5,13 +5,9 @@
 
 .keybind-selector > * { cursor: pointer !important; } 
 
-.keybind-selector .MuiInputBase-root {
-	background-color: var(--c600) !important;
-}
-
 .keybind-selector-inner .keybind {
 	padding: 2px 4px 1px;
-	margin-right: 3px;
+	margin-right: 4px;
 	margin-bottom: 3px;
 	border-radius: 4px;
 	user-select: none;