improve segment colors and ui

src/App.jsx

@@ -158,13 +158,13 @@ const App = memo(() => {
     segCounterRef.current = 0;
   }, []);
 
-  const createSegmentAndIncrementCount = useCallback((segment) => {
+  const createIndexedSegment = useCallback(({ segment, incrementCount } = {}) => {
     const ret = createSegment({ segIndex: segCounterRef.current, ...segment });
-    segCounterRef.current += 1;
+    if (incrementCount) segCounterRef.current += 1;
     return ret;
   }, []);
 
-  const createInitialCutSegments = useCallback(() => [createSegmentAndIncrementCount()], [createSegmentAndIncrementCount]);
+  const createInitialCutSegments = useCallback(() => [createIndexedSegment()], [createIndexedSegment]);
 
   const [currentSegIndex, setCurrentSegIndex] = useState(0);
   const [cutStartTimeManual, setCutStartTimeManual] = useState();
@@ -474,7 +474,7 @@ const App = memo(() => {
 
       const cutSegmentsNew = [
         ...cutSegments,
-        createSegmentAndIncrementCount({ start: suggestedStart }),
+        createIndexedSegment({ segment: { start: suggestedStart }, incrementCount: true }),
       ];
 
       setCutSegments(cutSegmentsNew);
@@ -482,7 +482,7 @@ const App = memo(() => {
     } catch (err) {
       console.error(err);
     }
-  }, [currentCutSeg.start, currentCutSeg.end, getCurrentTime, cutSegments, createSegmentAndIncrementCount, setCutSegments]);
+  }, [currentCutSeg.start, currentCutSeg.end, getCurrentTime, cutSegments, createIndexedSegment, setCutSegments]);
 
   const setCutStart = useCallback(() => {
     if (!filePath) return;
@@ -1269,13 +1269,13 @@ const App = memo(() => {
 
     const getNewName = (oldName, suffix) => oldName && `${segment.name} ${suffix}`;
 
-    const firstPart = createSegmentAndIncrementCount({ name: getNewName(segment.name, '1'), start: segment.start, end: currentTime });
-    const secondPart = createSegmentAndIncrementCount({ name: getNewName(segment.name, '2'), start: currentTime, end: segment.end });
+    const firstPart = createIndexedSegment({ segment: { name: getNewName(segment.name, '1'), start: segment.start, end: currentTime }, incrementCount: true });
+    const secondPart = createIndexedSegment({ segment: { name: getNewName(segment.name, '2'), start: currentTime, end: segment.end }, incrementCount: true });
 
     const newSegments = [...cutSegments];
     newSegments.splice(firstSegmentAtCursorIndex, 1, firstPart, secondPart);
     setCutSegments(newSegments);
-  }, [apparentCutSegments, createSegmentAndIncrementCount, cutSegments, getCurrentTime, setCutSegments]);
+  }, [apparentCutSegments, createIndexedSegment, cutSegments, getCurrentTime, setCutSegments]);
 
   const loadCutSegments = useCallback((edl, append = false) => {
     const validEdl = edl.filter((row) => (
@@ -1292,11 +1292,11 @@ const App = memo(() => {
       clearSegCounter();
     }
     setCutSegments((existingSegments) => {
-      const newSegments = validEdl.map(createSegmentAndIncrementCount);
+      const newSegments = validEdl.map((segment) => createIndexedSegment({ segment, incrementCount: true }));
       if (append && existingSegments.length > 1) return [...existingSegments, ...newSegments];
       return newSegments;
     });
-  }, [clearSegCounter, createSegmentAndIncrementCount, setCutSegments]);
+  }, [clearSegCounter, createIndexedSegment, setCutSegments]);
 
   const loadEdlFile = useCallback(async ({ path, type, append }) => {
     console.log('Loading EDL file', type, path, append);

src/BottomBar.jsx

@@ -61,8 +61,10 @@ const BottomBar = memo(({
 
     const backgroundColor = seg && getSegColor(seg).alpha(0.5).string();
     const opacity = seg ? undefined : 0.3;
+    const text = seg ? `${newIndex + 1}` : '-';
+    const wide = text.length > 1;
     const segButtonStyle = {
-      backgroundColor, opacity, padding: 6, borderRadius: 10, color: 'white', fontSize: 14, width: 7, lineHeight: '11px', fontWeight: 'bold', margin: '0 5px',
+      backgroundColor, opacity, padding: `6px ${wide ? 4 : 6}px`, borderRadius: 10, color: 'white', fontSize: wide ? 12 : 14, width: 20, boxSizing: 'border-box', letterSpacing: -1, lineHeight: '10px', fontWeight: 'bold', margin: '0 6px',
     };
 
     return (
@@ -72,7 +74,7 @@ const BottomBar = memo(({
         title={`${direction > 0 ? t('Select next segment') : t('Select previous segment')} (${newIndex + 1})`}
         onClick={() => seg && setCurrentSegIndex(newIndex)}
       >
-        {seg ? newIndex + 1 : '-'}
+        {text}
       </div>
     );
   }
@@ -86,7 +88,7 @@ const BottomBar = memo(({
 
     const isCutTimeManualSet = () => cutTimeManual !== undefined;
 
-    const border = `1px solid ${getSegColor(currentCutSeg).desaturate(0.3).string()}`;
+    const border = `1px solid ${getSegColor(currentCutSeg).alpha(0.8).string()}`;
 
     const cutTimeInputStyle = {
       background: 'white', border, borderRadius: 5, color: 'rgba(0, 0, 0, 0.7)', fontSize: 13, textAlign: 'center', padding: '1px 5px', marginTop: 0, marginBottom: 0, marginLeft: isStart ? 0 : 5, marginRight: isStart ? 5 : 0, boxSizing: 'border-box', fontFamily: 'inherit', width: 90, outline: 'none',

src/SegmentList.jsx

@@ -72,7 +72,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
 
     const segColor = getSegColor(seg);
 
-    return <b style={{ color: 'white', padding: '0 4px', marginRight: 3, background: segColor.alpha(0.5).string(), border: `1px solid ${isActive ? segColor.lighten(0.5).string() : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
+    return <b style={{ color: 'white', padding: '0 4px', marginRight: 3, marginLeft: -3, background: segColor.alpha(0.5).string(), border: `1px solid ${isActive ? segColor.lighten(0.3).string() : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
   }
 
   const timeStr = useMemo(() => `${formatTimecode({ seconds: seg.start })} - ${formatTimecode({ seconds: seg.end })}`, [seg.start, seg.end, formatTimecode]);
@@ -168,8 +168,8 @@ const SegmentList = memo(({
   }
 
   function renderFooter() {
-    const currentSegColor = getSegColor(currentCutSeg).alpha(0.5).desaturate(0.4).string();
-    const segAtCursorColor = getSegColor(segmentAtCursor).desaturate(0.4).alpha(0.5).string();
+    const currentSegColor = getSegColor(currentCutSeg).alpha(0.5).string();
+    const segAtCursorColor = getSegColor(segmentAtCursor).alpha(0.5).string();
 
     function renderExportEnabledCheckBox() {
       const segmentExportEnabled = currentCutSeg && enabledSegmentsRaw.some((s) => s.segId === currentCutSeg.segId);

src/Timeline.jsx

@@ -267,9 +267,9 @@ const Timeline = memo(({
                 <TimelineSeg
                   key={seg.segId}
                   segNum={i}
-                  segBgColor={segColor.alpha(0.5).string()}
-                  segActiveBgColor={segColor.lighten(0.5).alpha(0.5).string()}
-                  segBorderColor={segColor.lighten(0.5).string()}
+                  segBgColor={segColor.alpha(0.6).string()}
+                  segActiveBgColor={segColor.alpha(0.7).string()}
+                  segBorderColor={segColor.lighten(0.2).string()}
                   onSegClick={setCurrentSegIndex}
                   isActive={i === currentSegIndexSafe}
                   duration={durationSafe}

src/components/SegmentCutpointButton.jsx

@@ -6,8 +6,8 @@ const SegmentCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, styl
   const segColor = getSegColor(currentCutSeg);
 
   const start = side === 'start';
-  const border = `4px solid ${segColor.lighten(0.5).string()}`;
-  const backgroundColor = segColor.lighten(0.5).alpha(0.5).string();
+  const border = `4px solid ${segColor.lighten(0.1).string()}`;
+  const backgroundColor = segColor.alpha(0.5).string();
 
   return (
     <Icon

src/util/colors.js

@@ -1,20 +1,12 @@
 import color from 'color';
 
-// https://github.com/mock-end/random-color/blob/master/index.js
-/* eslint-disable */
-function getColor(saturation, value, n) {
-  var ratioMul = 0.618033988749895;
-  var initialHue = 0.65;
+// http://phrogz.net/css/distinct-colors.html
+const colorStrings = '#ff5100, #ffc569, #ddffd1, #00ccff, #e9d1ff, #ff0084, #ff6975, #ffe6d1, #ffff69, #69ff96, #008cff, #ae00ff, #ff002b, #ff8c00, #8cff00, #69ffff, #0044ff, #ff00d4, #ffd1d9'.split(',').map((str) => str.trim());
+const colors = colorStrings.map((str) => color(str));
 
-  const hue = (initialHue + ((n + 1) * ratioMul)) % 1;
-
-  return color({
-    h: hue * 360,
-    s: saturation * 100,
-    v: value * 100,
-  });
-};
-/* eslint-enable */
+function getColor(n) {
+  return colors[n % colors.length];
+}
 
 // eslint-disable-next-line import/prefer-default-export
 export function getSegColor(seg) {
@@ -27,5 +19,5 @@ export function getSegColor(seg) {
   }
   const { segIndex } = seg;
 
-  return getColor(1, 0.95, segIndex);
+  return getColor(segIndex);
 }