improve segments

src/TimelineSeg.jsx

@@ -8,66 +8,54 @@ const TimelineSeg = ({
   isCutRangeValid, duration: durationRaw, cutStartTime, cutEndTime, apparentCutStart,
   apparentCutEnd, isActive, segNum, onSegClick, color,
 }) => {
-  const markerWidth = 4;
   const duration = durationRaw || 1;
-  const cutSectionWidth = `calc(${((apparentCutEnd - apparentCutStart) / duration) * 100}% - ${markerWidth * 2}px)`;
+  const cutSectionWidth = `${((apparentCutEnd - apparentCutStart) / duration) * 100}%`;
+  const markerWidth = 4;
 
   const startTimePos = `${(apparentCutStart / duration) * 100}%`;
-  const endTimePos = `${(apparentCutEnd / duration) * 100}%`;
   const markerBorder = isActive ? `2px solid ${color.lighten(0.5).string()}` : undefined;
+  const backgroundColor = isActive ? color.lighten(0.5).alpha(0.5).string() : color.alpha(0.5).string();
   const markerBorderRadius = 5;
 
   const startMarkerStyle = {
-    background: color.alpha(0.5).string(),
     width: markerWidth,
-    left: startTimePos,
     borderLeft: markerBorder,
     borderTopLeftRadius: markerBorderRadius,
     borderBottomLeftRadius: markerBorderRadius,
   };
   const endMarkerStyle = {
-    background: color.alpha(0.5).string(),
     width: markerWidth,
-    marginLeft: -markerWidth,
-    left: endTimePos,
     borderRight: markerBorder,
     borderTopRightRadius: markerBorderRadius,
     borderBottomRightRadius: markerBorderRadius,
   };
-  const cutSectionStyle = {
-    background: color.alpha(0.5).string(),
-    marginLeft: markerWidth,
-    left: startTimePos,
-    width: cutSectionWidth,
-  };
 
   const onThisSegClick = () => onSegClick(segNum);
 
   return (
-    // eslint-disable-next-line react/jsx-fragments
-    <div>
+    <motion.div
+      style={{ position: 'absolute', top: 0, bottom: 0, left: startTimePos, width: cutSectionWidth, display: 'flex', background: backgroundColor, originX: 0 }}
+      layoutTransition={{ type: 'spring', damping: 30, stiffness: 1000 }}
+      initial={{ opacity: 0, scaleX: 0 }}
+      animate={{ opacity: 1, scaleX: 1 }}
+      exit={{ opacity: 0, scaleX: 0 }}
+      onClick={onThisSegClick}
+    >
       {cutStartTime !== undefined && (
-        <div style={startMarkerStyle} className="cut-time-marker" role="button" tabIndex="0" onClick={onThisSegClick} />
+        <div style={startMarkerStyle} role="button" tabIndex="0" />
       )}
       {isCutRangeValid && (cutStartTime !== undefined || cutEndTime !== undefined) && (
-        <motion.div
-          layoutTransition
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-
-          className="cut-section"
-          style={cutSectionStyle}
+        <div
           role="button"
           tabIndex="0"
-          onClick={onThisSegClick}
+          style={{ flexGrow: 1 }}
           title={`${formatDuration({ seconds: cutEndTime - cutStartTime })}`}
         />
       )}
       {cutEndTime !== undefined && (
-        <div style={endMarkerStyle} className="cut-time-marker" role="button" tabIndex="0" onClick={onThisSegClick} />
+        <div style={endMarkerStyle} role="button" tabIndex="0" />
       )}
-    </div>
+    </motion.div>
   );
 };
 

src/main.css

@@ -73,25 +73,6 @@ input, button, textarea, :focus {
   background-color: #444;
 }
 
-.timeline-wrapper .current-time, .timeline-wrapper .cut-section, .timeline-wrapper .cut-time-marker {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-}
-
-.timeline-wrapper .cut-section {
-  z-index: 1;
-}
-.timeline-wrapper .cut-time-marker {
-  z-index: 2;
-  box-sizing: border-box;
-}
-.timeline-wrapper .current-time {
-  z-index: 3;
-  background-color: rgba(255, 255, 255, 1);
-  width: 1px;
-}
-
 .help-sheet {
   background: #525252;
   color: white;

src/renderer.jsx

@@ -1019,7 +1019,7 @@ const App = memo(() => {
         >
           <div>
             <div className="timeline-wrapper" ref={timelineWrapperRef}>
-              {currentTimePos !== undefined && <div className="current-time" style={{ left: currentTimePos, pointerEvents: 'none' }} />}
+              {currentTimePos !== undefined && <div style={{ position: 'absolute', bottom: 0, top: 0, left: currentTimePos, zIndex: 3, backgroundColor: 'rgba(255, 255, 255, 1)', width: 1, pointerEvents: 'none' }} />}
 
               <AnimatePresence>
                 {cutSegments.map((seg, i) => (