diff options
| -rw-r--r-- | components/loop.tsx | 5 | ||||
| -rw-r--r-- | pages/editor.tsx | 14 | ||||
| -rw-r--r-- | styles/editor.css | 24 | ||||
| -rw-r--r-- | styles/keyframes.css | 6 |
4 files changed, 32 insertions, 17 deletions
diff --git a/components/loop.tsx b/components/loop.tsx index ec45c08..f459ab5 100644 --- a/components/loop.tsx +++ b/components/loop.tsx @@ -1,9 +1,10 @@ +import { CSSProperties } from 'react'; import { SlideKeyframe } from './icons'; export default function Loop(props: { - width: number; + length: number; }) { - return <div style={{ width: props.width }} className='loop'> + return <div style={{ '--loop-length': props.length } as CSSProperties} className='loop'> <SlideKeyframe type='loop' /> <div className='connector dispinbl' /> <SlideKeyframe type='loop' loopEnd /> diff --git a/pages/editor.tsx b/pages/editor.tsx index 5c3828d..eb7e14d 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -10,6 +10,7 @@ import Toolbar from '@material-ui/core/Toolbar'; import Icon from '@mdi/react'; import { PressureIcon, SlideKeyframe } from '../components/icons'; +import Loop from '../components/loop'; import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded'; import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded'; @@ -23,6 +24,7 @@ function TimelineEditor(props: { }) { var frames = [...new Array(props.player.timeline?.framecount || 0)].map((el, i) => <div className='frame'> + <div className='line posabs abscenterh b0' /> <span className='timecode numbers posabs abscenterh'> {props.player?.frameToTimestampString(i + 1)} </span> @@ -30,13 +32,11 @@ function TimelineEditor(props: { {(() => { var slide = props.player?.timeline?.slides.find(slide => slide.frame == i + 1); if (slide) { - return <SlideKeyframe type={slide.type} loopEnd />; - } - var loop = props.player?.timeline?.slides.find(slide => - slide.type == 'loop' && (slide as loopSlide).beginFrame == i + 1 - ); - if (loop) { - return <SlideKeyframe type='loop' />; + if (slide.type == 'loop') { + return <Loop length={slide.frame - (slide as loopSlide).beginFrame} />; + } else { + return <SlideKeyframe type={slide.type} />; + } } })()} </div> diff --git a/styles/editor.css b/styles/editor.css index 3005be7..62fa103 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -142,34 +142,42 @@ margin: 4px; } +.appGrid .timeline { + --zoom: 4; +} + .appGrid .timeline .frames { height: 100%; } .appGrid .timeline .frames .frame { background-color: transparent; - margin-top: 28px; height: 100%; - width: 4px; + width: calc(var(--zoom) * 1px); display: inline-block; border-radius: 2px 2px 0 0; position: relative; overflow: visible; } +.appGrid .timeline .frames .frame:nth-child(30n) .line { + background-color: var(--c300); + top: 28px; + width: 2px; + border-radius: 2px 2px 0 0; +} + .appGrid .timeline .frames .frame .timecode { display: none; } .appGrid .timeline .frames .frame .keyframeWrapper { line-height: 0; - top: 16px; + top: 44px; z-index: 999; color: var(--gruble); -} - -.appGrid .timeline .frames .frame:nth-child(30n) { - background-color: var(--c300); + width: 24px; + height: 24px; } .appGrid .timeline .frames .frame:nth-child(30n) .timecode { @@ -177,7 +185,7 @@ font-weight: 500; line-height: 1; display: inline-block; - top: -16px; + top: 12px; } .appGrid .timeline { diff --git a/styles/keyframes.css b/styles/keyframes.css index 8e7e3d2..53fba20 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -6,6 +6,12 @@ margin: 4px -11px; } +.loop { + width: calc(var(--loop-length) * var(--zoom) * 1px + 24px); + position: absolute; + right: 0; +} + .keyframe > * { fill: currentColor; } |