diff options
| -rw-r--r-- | pages/editor.tsx | 23 | ||||
| -rw-r--r-- | styles/editor.css | 19 |
2 files changed, 39 insertions, 3 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index eb7e14d..53f7397 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -25,7 +25,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'> + <span className='timecode nosel numbers posabs abscenterh'> {props.player?.frameToTimestampString(i + 1)} </span> <div className='keyframeWrapper posabs abscenterh'> @@ -43,7 +43,24 @@ function TimelineEditor(props: { </div> ); - return <div className='frames'>{frames}</div>; + return <> + <div className='scrubber posabs v0'> + <svg + width='20' + height='28' + viewBox='0 0 20 28' + xmlns='http://www.w3.org/2000/svg' + className='head posabs t0 abscenterh' + > + <path + d='M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V17.3431C20 18.404 19.5786 19.4214 18.8284 20.1716L11 28H9L1.17157 20.1716C0.421426 19.4214 0 18.404 0 17.3431V4Z' + /> + </svg> + <div className='needle posabs a0' /> + <div className='frameOverlay posabs v0' /> + </div> + <div className='frames'>{frames}</div> + </>; } export default function Index() { @@ -149,7 +166,7 @@ export default function Index() { </Button> </ButtonGroup> </div> - <div className='timeline'> + <div className='timeline posrel'> <TimelineEditor player={player} /> diff --git a/styles/editor.css b/styles/editor.css index 62fa103..3d84c22 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -194,3 +194,22 @@ white-space: nowrap; } +.timeline .scrubber { + width: 2px; + overflow: visible; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); + z-index: 999999999; + --frame: 30; + left: calc((var(--zoom) * (var(--frame) - 0.5)) * 1px - 1px) +} + +.timeline .frameOverlay { + left: 2px; + width: calc(var(--zoom) * 1px - 2px); + background-color: var(--blue); + opacity: .0; +} + +.timeline .scrubber .head { fill: var(--blue); } +.timeline .scrubber .needle { background-color: var(--blue); } + |