diff options
| -rw-r--r-- | components/selection.tsx | 1 | ||||
| -rw-r--r-- | pages/editor.tsx | 15 | ||||
| -rw-r--r-- | timeline.ts | 4 |
3 files changed, 17 insertions, 3 deletions
diff --git a/components/selection.tsx b/components/selection.tsx index 52096df..4be9767 100644 --- a/components/selection.tsx +++ b/components/selection.tsx @@ -5,6 +5,7 @@ type cornerTypes = 'round' | 'diamond' | 'square' | 'square-s'; var slideTypeToCornerType = { default: 'diamond', loop: 'square', + loopBegin: 'square', speedChange: 'square', delay: 'round', }; diff --git a/pages/editor.tsx b/pages/editor.tsx index abb7b5e..1f79699 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -2,7 +2,7 @@ import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'; import { animated, useSpring } from 'react-spring'; import { useDrag } from 'react-use-gesture'; import create from 'zustand'; -import { anySlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline'; +import { anySlide, loopBeginSlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline'; import { TimedVideoPlayer } from './present'; import AppBar from '@material-ui/core/AppBar'; @@ -70,7 +70,8 @@ var useFrame = create(set => ({ function calculateSelectionOffsets(left: slideTypes, right: slideTypes) { var offsets = { default: { left: -6, right: 6 }, - loop: { left: -2, right: 1 }, + loop: { left: -3, right: 1 }, + loopBegin: { left: -1, right: 3 }, delay: { left: -6, right: 6 }, speedChange: { left: -6, right: 6 }, }; @@ -409,7 +410,15 @@ function TimelineEditor(props: { if (distanceTraveled <= minDistance) setSelectionHidden(true); else { var endingFrame = startingFrame + frameWidth; - var keyframesInSelection = player.timeline.slides.filter((slide: anySlide) => + var expandedTimeline = new Array(...player.timeline.slides); + for (let i = 0; i < expandedTimeline.length; i++) { + var slide = expandedTimeline[i]; + if (slide.type != 'loop') continue; + var beginFrame = (slide as loopSlide).beginFrame; + expandedTimeline.splice(i, 0, new loopBeginSlide(beginFrame)); + i++; + } + var keyframesInSelection = expandedTimeline.filter((slide: anySlide) => slide.frame >= Math.floor(startingFrame) && slide.frame <= Math.ceil(endingFrame) ); diff --git a/timeline.ts b/timeline.ts index b39d55d..ade936e 100644 --- a/timeline.ts +++ b/timeline.ts @@ -29,6 +29,10 @@ export class loopSlide extends slide { playbackType: 'PingPong' | 'Normal' = 'Normal'; } +export class loopBeginSlide extends slide { + type = 'loopBegin' as slideTypes; +} + export var toolToSlide = { default: slide, delay: delaySlide, |