improve animations

src/BetweenSegments.jsx

@@ -5,29 +5,39 @@ import { FaTrashAlt, FaSave } from 'react-icons/fa';
 import { mySpring } from './animations';
 import { saveColor } from './colors';
 
-const BetweenSegments = memo(({ start, end, duration, invertCutSegments }) => (
+const BetweenSegments = memo(({ start, end, duration, invertCutSegments }) => {
-  <motion.div
+  const left = `${(start / duration) * 100}%`;
-    style={{
+
-      position: 'absolute',
+  return (
-      top: 0,
+    <motion.div
-      bottom: 0,
+      style={{
-      left: `${(start / duration) * 100}%`,
+        position: 'absolute',
-      width: `${((end - start) / duration) * 100}%`,
+        top: 0,
-      display: 'flex',
+        bottom: 0,
-      alignItems: 'center',
+        display: 'flex',
-      pointerEvents: 'none',
+        alignItems: 'center',
-    }}
+        pointerEvents: 'none',
-    layout
+      }}
-    transition={mySpring}
+      initial={{
-  >
+        left,
-    <div style={{ flexGrow: 1, borderBottom: '1px dashed rgba(255, 255, 255, 0.3)', marginLeft: 5, marginRight: 5 }} />
+        width: '0%',
-    {invertCutSegments ? (
+      }}
-      <FaSave style={{ color: saveColor }} size={16} />
+      animate={{
-    ) : (
+        left,
-      <FaTrashAlt style={{ color: 'rgba(255, 255, 255, 0.3)' }} size={16} />
+        width: `${((end - start) / duration) * 100}%`,
-    )}
+      }}
-    <div style={{ flexGrow: 1, borderBottom: '1px dashed rgba(255, 255, 255, 0.3)', marginLeft: 5, marginRight: 5 }} />
+      layout
-  </motion.div>
+      transition={mySpring}
-));
+    >
+      <div style={{ flexGrow: 1, borderBottom: '1px dashed rgba(255, 255, 255, 0.3)', marginLeft: 5, marginRight: 5 }} />
+      {invertCutSegments ? (
+        <FaSave style={{ color: saveColor }} size={16} />
+      ) : (
+        <FaTrashAlt style={{ color: 'rgba(255, 255, 255, 0.3)' }} size={16} />
+      )}
+      <div style={{ flexGrow: 1, borderBottom: '1px dashed rgba(255, 255, 255, 0.3)', marginLeft: 5, marginRight: 5 }} />
+    </motion.div>
+  );
+});
 
 export default BetweenSegments;

src/SegmentList.jsx

@@ -13,6 +13,7 @@ import useContextMenu from './hooks/useContextMenu';
 import useUserSettings from './hooks/useUserSettings';
 import { saveColor, controlsBackground, primaryTextColor } from './colors';
 import { getSegColor } from './util/colors';
+import { mySpring } from './animations';
 
 const buttonBaseStyle = {
   margin: '0 3px', borderRadius: 3, color: 'white', cursor: 'pointer',
@@ -109,7 +110,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
       role="button"
       onClick={() => !invertCutSegments && onClick(index)}
       onDoubleClick={onDoubleClick}
-      layouy
+      layout
       style={{ originY: 0, margin: '5px 0', background: 'rgba(0,0,0,0.1)', border: `1px solid rgba(255,255,255,${isActive ? 1 : 0.3})`, padding: 5, borderRadius: 5, position: 'relative' }}
       initial={{ scaleY: 0 }}
       animate={{ scaleY: 1, opacity: !enabled && !invertCutSegments ? 0.5 : undefined }}
@@ -258,6 +259,7 @@ const SegmentList = memo(({
       initial={{ x: width }}
       animate={{ x: 0 }}
       exit={{ x: width }}
+      transition={mySpring}
     >
       <div style={{ fontSize: 14, padding: '0 5px' }} className="no-user-select">
         <FaAngleRight

src/Timeline.jsx

@@ -310,8 +310,7 @@ const Timeline = memo(({
 
           {inverseCutSegments.map((seg) => (
             <BetweenSegments
-              // eslint-disable-next-line react/no-array-index-key
+              key={seg.segId}
-              key={`${seg.start},${seg.end}`}
               start={seg.start}
               end={seg.end}
               duration={durationSafe}

src/animations.js

@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/prefer-default-export
-export const mySpring = { type: 'spring', damping: 25, stiffness: 350 };
+export const mySpring = { type: 'spring', damping: 50, stiffness: 700 };

src/components/BatchFilesList.jsx

@@ -8,6 +8,8 @@ import { SortAlphabeticalIcon, SortAlphabeticalDescIcon } from 'evergreen-ui';
 
 import BatchFile from './BatchFile';
 import { timelineBackground, controlsBackground } from '../colors';
+import { mySpring } from '../animations';
+
 
 const iconStyle = {
   flexShrink: 0,
@@ -48,6 +50,7 @@ const BatchFilesList = memo(({ selectedBatchFiles, filePath, width, batchFiles,
       initial={{ x: -width }}
       animate={{ x: 0 }}
       exit={{ x: -width }}
+      transition={mySpring}
     >
       <div style={{ background: controlsBackground, fontSize: 14, paddingBottom: 3, paddingTop: 0, paddingLeft: 10, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
         {t('Batch file list')}

src/hooks/useSegments.js

@@ -156,7 +156,7 @@ export default ({
 
   const inverseCutSegments = useMemo(() => {
     const inverted = !haveInvalidSegs && isDurationValid(duration) ? invertSegments(sortSegments(apparentCutSegments), true, true, duration) : undefined;
-    return (inverted || []).map((seg) => ({ ...seg, segId: `${seg.start}-${seg.end}` }));
+    return inverted || [];
   }, [apparentCutSegments, duration, haveInvalidSegs]);
 
   const invertAllSegments = useCallback(() => {

src/segments.js

@@ -114,29 +114,37 @@ export function invertSegments(sortedCutSegments, includeFirstSegment, includeLa
   const ret = [];
 
   if (includeFirstSegment) {
-    if (sortedCutSegments[0].start > 0) {
+    const firstSeg = sortedCutSegments[0];
-      ret.push({
+    if (firstSeg.start > 0) {
+      const inverted = {
         start: 0,
-        end: sortedCutSegments[0].start,
+        end: firstSeg.start,
-      });
+      };
+      if (firstSeg.segId != null) inverted.segId = `start-${firstSeg.segId}`;
+      ret.push(inverted);
     }
   }
 
   sortedCutSegments.forEach((cutSegment, i) => {
     if (i === 0) return;
-    ret.push({
+    const previousSeg = sortedCutSegments[i - 1];
-      start: sortedCutSegments[i - 1].end,
+    const inverted = {
+      start: previousSeg.end,
       end: cutSegment.start,
-    });
+    };
+    if (previousSeg.segId != null && cutSegment.segId != null) inverted.segId = `${previousSeg.segId}-${cutSegment.segId}`;
+    ret.push(inverted);
   });
 
   if (includeLastSegment) {
-    const last = sortedCutSegments[sortedCutSegments.length - 1];
+    const lastSeg = sortedCutSegments[sortedCutSegments.length - 1];
-    if (last.end < duration || duration == null) {
+    if (lastSeg.end < duration || duration == null) {
-      ret.push({
+      const inverted = {
-        start: last.end,
+        start: lastSeg.end,
         end: duration,
-      });
+      };
+      if (lastSeg.segId != null) inverted.segId = `${lastSeg.segId}-end`;
+      ret.push(inverted);
     }
   }