aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-05-22 18:55:26 +0200
committerlonkaars <loek@pipeframe.xyz>2021-05-22 18:55:26 +0200
commitb5f6d0eb73d84e65067e1c2b79ade78511916a6e (patch)
tree4715a9461a48afee18b4d826ddec718a8985a151 /pages
parent979fd9945804d2ba252a473bb67c67b13ba8523f (diff)
keyframes movable using react-spring
Diffstat (limited to 'pages')
-rw-r--r--pages/editor.tsx40
1 files changed, 30 insertions, 10 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 5f29ddf..e1e164a 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,5 +1,5 @@
import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { animated, useSpring } from 'react-spring';
+import { animated, useSpring, useSprings } from 'react-spring';
import { useDrag } from 'react-use-gesture';
import create from 'zustand';
import { loopSlide } from '../timeline';
@@ -52,15 +52,38 @@ var useFrame = create(set => ({
function TimelineEditor(props: {
player: TimedVideoPlayer;
}) {
- var keyframes = props.player?.timeline?.slides.map((slide, index) =>
- <div className='frame posabs' style={{ '--frame': slide.frame.toString() } as CSSProperties}>
+ var timelineZoom = getTimelineZoom((st: any) => st.zoom);
+
+ var keyframes: Array<{
+ html: ReactNode;
+ id: string;
+ }> = [];
+ var [keyframeSprings, _keyframeSpringsAPI] = useSprings(
+ props.player?.timeline?.slides.length || 0,
+ i => ({
+ frame: props.player.timeline.slides[i].frame,
+ config: { mass: 0.5, tension: 500, friction: 20 },
+ }),
+ );
+ props.player?.timeline?.slides.forEach((slide, index) => {
+ var id = 'frame' + index;
+ var html = <animated.div
+ className='frame posabs'
+ style={{ '--frame': keyframeSprings[index].frame } as CSSProperties}
+ id={id}
+ >
<div className={'keyframeWrapper posabs abscenterh keyframe-index-' + index}>
{slide.type == 'loop'
? <Loop length={slide.frame - (slide as loopSlide).beginFrame} />
: <SlideKeyframe type={slide.type} />}
</div>
- </div>
- );
+ </animated.div>;
+
+ keyframes[index] = {
+ html,
+ id,
+ };
+ });
var timelineLabels = useTimelineLabels((st: any) => st.labels);
var setTimelineLabels = useTimelineLabels((st: any) => st.setLabels);
@@ -68,8 +91,6 @@ function TimelineEditor(props: {
// var frame = useFrame((st: any) => st.currentFrame);
var setFrame = useFrame((st: any) => st.setFrame);
- var timelineZoom = getTimelineZoom((st: any) => st.zoom);
-
useEffect(() => {
props.player.addEventListener('TimedVideoPlayerOnFrame', (event: CustomEvent) => {
setFrame(event.detail);
@@ -212,9 +233,8 @@ function TimelineEditor(props: {
<div
className='keyframes'
style={{ '--total-frames': props.player?.timeline?.framecount.toString() } as CSSProperties}
- >
- {keyframes}
- </div>
+ children={keyframes.map(kf => kf.html)}
+ />
</div>
</>;
}