aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-05-16 09:32:02 +0200
committerlonkaars <loek@pipeframe.xyz>2021-05-16 09:32:02 +0200
commit9f5b8d99c34dfea3d1b7321bb1009e5e7e0949e0 (patch)
treea65a34df64c347e911b1875b89726762f5bb2c3d
parent6c5787b034db7349d096ec1d2406f72b14efb707 (diff)
loop keyframe + line in frame
-rw-r--r--components/loop.tsx5
-rw-r--r--pages/editor.tsx14
-rw-r--r--styles/editor.css24
-rw-r--r--styles/keyframes.css6
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;
}