From 7abc292d37e6ef34edfd257d69262bc3b4b92572 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Wed, 15 Feb 2023 13:36:19 +0800
Subject: [PATCH] dim colors in invert mode

---
 src/Timeline.jsx    |  4 +---
 src/TimelineSeg.jsx | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Timeline.jsx b/src/Timeline.jsx
index 38e572de..46dba881 100644
--- a/src/Timeline.jsx
+++ b/src/Timeline.jsx
@@ -296,9 +296,7 @@ const Timeline = memo(({
               <TimelineSeg
                 key={seg.segId}
                 segNum={i}
-                segBgColor={segColor.alpha(0.6).string()}
-                segActiveBgColor={segColor.alpha(0.7).string()}
-                segBorderColor={segColor.lighten(0.2).string()}
+                segColor={segColor}
                 onSegClick={setCurrentSegIndex}
                 isActive={i === currentSegIndexSafe}
                 duration={durationSafe}
diff --git a/src/TimelineSeg.jsx b/src/TimelineSeg.jsx
index 98bfd358..c4b0f051 100644
--- a/src/TimelineSeg.jsx
+++ b/src/TimelineSeg.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { FaTrashAlt } from 'react-icons/fa';
 
@@ -7,13 +7,19 @@ import { mySpring } from './animations';
 
 const TimelineSeg = memo(({
   duration, cutStart, cutEnd, isActive, segNum, name,
-  onSegClick, invertCutSegments, segBgColor, segActiveBgColor, segBorderColor, formatTimecode,
+  onSegClick, invertCutSegments, segColor, formatTimecode,
 }) => {
   const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`;
 
   const startTimePos = `${(cutStart / duration) * 100}%`;
-  const markerBorder = `2px solid ${isActive ? segBorderColor : 'transparent'}`;
-  const backgroundColor = isActive ? segActiveBgColor : segBgColor;
+
+  const markerBorder = useMemo(() => `2px solid ${isActive ? segColor.lighten(0.2).string() : 'transparent'}`, [isActive, segColor]);
+
+  const backgroundColor = useMemo(() => {
+    if (invertCutSegments) return segColor.alpha(0.4).string();
+    if (isActive) return segColor.alpha(0.7).string();
+    return segColor.alpha(0.6).string();
+  }, [invertCutSegments, isActive, segColor]);
   const markerBorderRadius = 5;
 
   const wrapperStyle = {
@@ -25,7 +31,6 @@ const TimelineSeg = memo(({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    background: backgroundColor,
     originX: 0,
     boxSizing: 'border-box',
 
@@ -49,7 +54,7 @@ const TimelineSeg = memo(({
       style={wrapperStyle}
       layoutTransition={mySpring}
       initial={{ opacity: 0, scaleX: 0 }}
-      animate={{ opacity: 1, scaleX: 1 }}
+      animate={{ opacity: 1, scaleX: 1, backgroundColor }}
       exit={{ opacity: 0, scaleX: 0 }}
       role="button"
       onClick={onThisSegClick}
@@ -66,7 +71,7 @@ const TimelineSeg = memo(({
             style={{ width: 16, height: 16, flexShrink: 1 }}
           >
             <FaTrashAlt
-              style={{ width: '100%', color: segBorderColor }}
+              style={{ width: '100%', color: 'rgba(255,255,255,0.8)' }}
               size={16}
             />
           </motion.div>