move buttons and refactor

src/SegmentList.jsx

@@ -1,13 +1,16 @@
 import React, { memo, Fragment } from 'react';
 import prettyMs from 'pretty-ms';
-import { FaSave } from 'react-icons/fa';
+import { FaSave, FaPlus, FaMinus, FaTag } from 'react-icons/fa';
 import { motion } from 'framer-motion';
+import Swal from 'sweetalert2';
 
-import { saveColor, timelineBackground } from './colors';
+import { saveColor } from './colors';
 
 const SegmentList = memo(({
   formatTimecode, cutSegments, getFrameCount, getSegColors, onSegClick,
   currentSegIndex, invertCutSegments,
+  updateCurrentSegOrder, addCutSegment, removeCutSegment,
+  setCurrentSegmentName, currentCutSeg,
 }) => {
   if (!cutSegments && invertCutSegments) {
     return <div style={{ padding: '0 10px' }}>Make sure you have no overlapping segments.</div>;
@@ -17,6 +20,42 @@ const SegmentList = memo(({
     return <div style={{ padding: '0 10px' }}>No segments to export.</div>;
   }
 
+  const {
+    segActiveBgColor: currentSegActiveBgColor,
+    segBorderColor: currentSegBorderColor,
+  } = getSegColors(currentCutSeg);
+
+  async function onLabelSegmentPress() {
+    const { value } = await Swal.fire({
+      showCancelButton: true,
+      title: 'Label current segment',
+      inputValue: currentCutSeg.name,
+      input: 'text',
+    });
+
+    if (value != null) setCurrentSegmentName(value);
+  }
+
+  async function onReorderSegsPress() {
+    if (cutSegments.length < 2) return;
+    const { value } = await Swal.fire({
+      title: `Change order of segment ${currentSegIndex + 1}`,
+      text: `Please enter a number from 1 to ${cutSegments.length} to be the new order for the current segment`,
+      input: 'text',
+      inputValue: currentSegIndex + 1,
+      showCancelButton: true,
+      inputValidator: (v) => {
+        const parsed = parseInt(v, 10);
+        return Number.isNaN(parsed) || parsed > cutSegments.length || parsed < 1 ? 'Invalid number entered' : undefined;
+      },
+    });
+
+    if (value) {
+      const newOrder = parseInt(value, 10);
+      updateCurrentSegOrder(newOrder - 1);
+    }
+  }
+
   return (
     <Fragment>
       <div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }}>
@@ -54,19 +93,54 @@ const SegmentList = memo(({
                 {renderNumber()}
                 <span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
               </div>
+              <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
               <div style={{ fontSize: 13 }}>
                 Duration {prettyMs(durationMs)}
               </div>
               <div style={{ fontSize: 12 }}>
                 ({Math.floor(durationMs)} ms, {getFrameCount(duration)} frames)
               </div>
-              <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
             </motion.div>
           );
         })}
       </div>
 
-      <div style={{ padding: 10, boxSizing: 'border-box', background: timelineBackground, borderBottom: '1px solid grey', display: 'flex', justifyContent: 'space-between' }}>
+      <div style={{ display: 'flex', padding: '5px 0', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid grey' }}>
+        <FaPlus
+          size={30}
+          style={{ margin: '0 5px', color: 'white', cursor: 'pointer' }}
+          role="button"
+          title="Add segment"
+          onClick={addCutSegment}
+        />
+
+        <FaMinus
+          size={30}
+          style={{ margin: '0 5px', background: cutSegments.length < 2 ? undefined : currentSegActiveBgColor, borderRadius: 3, color: 'white', cursor: 'pointer' }}
+          role="button"
+          title={`Delete current segment ${currentSegIndex + 1}`}
+          onClick={removeCutSegment}
+        />
+
+        <div
+          style={{ background: currentSegActiveBgColor, border: `2px solid ${currentSegBorderColor}`, borderRadius: 5, color: 'white', fontSize: 23, textAlign: 'center', fontWeight: 'bold', boxSizing: 'border-box', height: 30, width: 30, margin: '0 5px', cursor: 'pointer' }}
+          role="button"
+          title="Change segment order"
+          onClick={onReorderSegsPress}
+        >
+          {currentSegIndex + 1}
+        </div>
+
+        <FaTag
+          size={20}
+          title="Label segment"
+          role="button"
+          style={{ padding: 4, margin: '0 5px', background: currentSegActiveBgColor, borderRadius: 3, color: 'white', cursor: 'pointer' }}
+          onClick={onLabelSegmentPress}
+        />
+      </div>
+
+      <div style={{ padding: 10, boxSizing: 'border-box', borderBottom: '1px solid grey', display: 'flex', justifyContent: 'space-between' }}>
         <div>Total time:</div>
         <div>{formatTimecode(cutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0))}</div>
       </div>

src/renderer.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useState, useCallback, useRef, Fragment, useMemo } from 'react';
 import { IoIosHelpCircle, IoIosCamera } from 'react-icons/io';
-import { FaPlus, FaMinus, FaHandPointRight, FaHandPointLeft, FaTrashAlt, FaVolumeMute, FaVolumeUp, FaYinYang, FaFileExport, FaTag } from 'react-icons/fa';
+import { FaHandPointRight, FaHandPointLeft, FaTrashAlt, FaVolumeMute, FaVolumeUp, FaYinYang, FaFileExport } from 'react-icons/fa';
 import { MdRotate90DegreesCcw, MdCallSplit, MdCallMerge } from 'react-icons/md';
 import { FiScissors } from 'react-icons/fi';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -571,26 +571,6 @@ const App = memo(() => {
     setCutSegments(cutSegmentsNew);
   }, [currentSegIndexSafe, cutSegments, setCutSegments]);
 
-  async function onReorderSegsPress() {
-    if (cutSegments.length < 2) return;
-    const { value } = await Swal.fire({
-      title: 'Change the order for the current segment',
-      text: `Please enter a number from 1 to ${cutSegments.length}`,
-      input: 'text',
-      inputValue: currentSegIndexSafe + 1,
-      showCancelButton: true,
-      inputValidator: (v) => {
-        const parsed = parseInt(v, 10);
-        return Number.isNaN(parsed) || parsed > cutSegments.length || parsed < 1 ? 'Invalid number entered' : undefined;
-      },
-    });
-
-    if (value) {
-      const newOrder = parseInt(value, 10);
-      updateCurrentSegOrder(newOrder - 1);
-    }
-  }
-
   const jumpCutStart = () => seekAbs(currentApparentCutSeg.start);
   const jumpCutEnd = () => seekAbs(currentApparentCutSeg.end);
 
@@ -1445,17 +1425,6 @@ const App = memo(() => {
     return () => window.removeEventListener('keydown', keyScrollPreventer);
   }, []);
 
-  async function onLabelSegmentPress() {
-    const { value } = await Swal.fire({
-      showCancelButton: true,
-      title: 'Label current segment',
-      inputValue: currentCutSeg.name,
-      input: 'text',
-    });
-
-    if (value != null) setCurrentSegmentName(value);
-  }
-
   function renderSetCutpointButton(side) {
     const start = side === 'start';
     const Icon = start ? FaHandPointLeft : FaHandPointRight;
@@ -1472,10 +1441,6 @@ const App = memo(() => {
   }
 
   const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
-  const curSegButtonStyle = getSegButtonStyle({
-    segActiveBgColor: currentSegActiveBgColor,
-    segBorderColor: currentSegBorderColor,
-  });
 
   function renderJumpCutpointButton(direction) {
     const newIndex = currentSegIndexSafe + direction;
@@ -1683,12 +1648,17 @@ const App = memo(() => {
           >
             <SegmentList
               currentSegIndex={currentSegIndexSafe}
-              onSegClick={setCurrentSegIndex}
-              formatTimecode={formatTimecode}
               cutSegments={outSegments}
               getFrameCount={getFrameCount}
               getSegColors={getSegColors}
+              formatTimecode={formatTimecode}
               invertCutSegments={invertCutSegments}
+              onSegClick={setCurrentSegIndex}
+              updateCurrentSegOrder={updateCurrentSegOrder}
+              setCurrentSegmentName={setCurrentSegmentName}
+              currentCutSeg={currentCutSeg}
+              addCutSegment={addCutSegment}
+              removeCutSegment={removeCutSegment}
             />
           </div>
         </Fragment>
@@ -1832,39 +1802,6 @@ const App = memo(() => {
       <div className="left-menu no-user-select" style={{ position: 'absolute', left: 0, bottom: 0, padding: '.3em', display: 'flex', alignItems: 'center' }}>
         {renderInvertCutButton()}
 
-        <FaPlus
-          size={30}
-          style={{ margin: '0 5px', color: 'white' }}
-          role="button"
-          title="Add segment"
-          onClick={addCutSegment}
-        />
-
-        <FaMinus
-          size={30}
-          style={{ margin: '0 5px', background: cutSegments.length < 2 ? undefined : currentSegActiveBgColor, borderRadius: 3, color: 'white' }}
-          role="button"
-          title={`Delete current segment ${currentSegIndexSafe + 1}`}
-          onClick={removeCutSegment}
-        />
-
-        <div
-          style={{ ...curSegButtonStyle, height: 10, padding: 4, margin: '0 5px' }}
-          role="button"
-          title="Change segment order"
-          onClick={onReorderSegsPress}
-        >
-          {currentSegIndexSafe + 1}
-        </div>
-
-        <FaTag
-          size={10}
-          title="Label segment"
-          role="button"
-          style={{ padding: 4, border: `2px solid ${currentSegBorderColor}`, background: currentSegActiveBgColor, borderRadius: 6 }}
-          onClick={onLabelSegmentPress}
-        />
-
         <select style={{ width: 80, margin: '0 10px' }} value={zoom.toString()} title="Zoom" onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
           {Array(10).fill().map((unused, z) => {
             const val = 2 ** z;