aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/slideprops.tsx57
-rw-r--r--pages/editor.tsx57
-rw-r--r--styles/editor.css10
-rw-r--r--styles/globals.css4
-rw-r--r--styles/keybindselector.css6
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;