diff options
| -rw-r--r-- | components/timeinput.tsx | 24 | ||||
| -rw-r--r-- | pages/editor.tsx | 33 | ||||
| -rw-r--r-- | styles/globals.css | 3 |
3 files changed, 57 insertions, 3 deletions
diff --git a/components/timeinput.tsx b/components/timeinput.tsx new file mode 100644 index 0000000..7232494 --- /dev/null +++ b/components/timeinput.tsx @@ -0,0 +1,24 @@ +import TextField from '@material-ui/core/TextField'; +import { TimedVideoPlayer } from '../pages/present'; + +export default function TimecodeInput(props: { + value: number; + update: (newValue: number) => void; + player: TimedVideoPlayer; + label: string; +}) { + return <TextField + variant='filled' + label={props.label} + value={props.player.frameToTimestampString(props.value, false)} + spellCheck={false} + onChange={e => e.preventDefault()} + onKeyDown={e => { + var mod = 1; + if (e.shiftKey) mod = 10; + + if (e.key == 'ArrowUp') props.update(props.value + mod); + if (e.key == 'ArrowDown') props.update(props.value - mod); + }} + />; +} diff --git a/pages/editor.tsx b/pages/editor.tsx index 47a6fb1..9460605 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -16,6 +16,7 @@ import { import KeybindSelector from '../components/keybindselector'; import PlaySkipIconAni from '../components/play-skip'; import Selection from '../components/selection'; +import TimecodeInput from '../components/timeinput'; import timeline, { anySlide, clickThroughBehaviours, @@ -1217,12 +1218,39 @@ function SlideProperties(props: { type: slideTypes; }) { if (props.type == 'default') return null; + + var slide = useHookstate(global).selection.slides[0]; + + var [test, setTest] = useState(0); + return <div className='section'> <span className='title'>Properties</span> {{ 'loop': <> - <TextField label='Duration' variant='filled' /> - <TextField label='Start timestamp' variant='filled' /> + <TextField + label='Duration' + variant='filled' + type='number' + value={(slide as State<loopSlide>).frame.get() - (slide as State<loopSlide>).beginFrame.get()} + /> + <TimecodeInput + label='Start timestamp' + value={(slide as State<loopSlide>).beginFrame.get()} + update={newValue => { + (slide as State<loopSlide>).frame.set(newValue); + global.update.refreshLiveTimeline.value(); + }} + player={player} + /> + <TimecodeInput + label='End timestamp' + value={(slide as State<loopSlide>).frame.get()} + update={newValue => { + (slide as State<loopSlide>).frame.set(newValue); + global.update.refreshLiveTimeline.value(); + }} + player={player} + /> <TextField label='End timestamp' variant='filled' /> </>, 'delay': <> @@ -1276,6 +1304,7 @@ function SlideSettings() { onChange={e => { if (selection.slides.value.length != 1) return; selection.slides[0].clickThroughBehaviour.set(e.target.value as clickThroughBehaviours); + global.update.refreshLiveTimeline.value(); }} IconComponent={ArrowDropDownRoundedIcon} value={clickThroughBehaviour} diff --git a/styles/globals.css b/styles/globals.css index 3cefd6a..cc44d7b 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -45,7 +45,8 @@ h1, h2, h3 { transition-property: width; transition-duration: 100ms; white-space: nowrap; - overflow: hidden; + overflow-x: clip; + overflow-y: visible; text-overflow: ellipsis; width: calc(100% - 48px); |