dim also deselected files in timeline

src/App.jsx

@@ -348,7 +348,7 @@ const App = memo(() => {
   }, [isFileOpened]);
 
   const {
-    cutSegments, cutSegmentsHistory, createSegmentsFromKeyframes, shuffleSegments, detectBlackScenes, detectSilentScenes, detectSceneChanges, removeCutSegment, invertAllSegments, fillSegmentsGaps, combineOverlappingSegments, shiftAllSegmentTimes, alignSegmentTimesToKeyframes, onViewSegmentTags, updateSegOrder, updateSegOrders, reorderSegsByStartTime, addSegment, setCutStart, setCutEnd, onLabelSegment, splitCurrentSegment, createNumSegments, createFixedDurationSegments, createRandomSegments, apparentCutSegments, haveInvalidSegs, currentSegIndexSafe, currentCutSeg, currentApparentCutSeg, inverseCutSegments, clearSegments, loadCutSegments, selectedSegmentsRaw, setCutTime, getSegApparentEnd, setCurrentSegIndex, onLabelSelectedSegments, deselectAllSegments, selectAllSegments, selectOnlyCurrentSegment, toggleCurrentSegmentSelected, removeSelectedSegments, setDeselectedSegmentIds, onSelectSegmentsByLabel, toggleSegmentSelected, selectOnlySegment, getApparentCutSegmentById, selectedSegments, selectedSegmentsOrInverse, nonFilteredSegmentsOrInverse,
+    cutSegments, cutSegmentsHistory, createSegmentsFromKeyframes, shuffleSegments, detectBlackScenes, detectSilentScenes, detectSceneChanges, removeCutSegment, invertAllSegments, fillSegmentsGaps, combineOverlappingSegments, shiftAllSegmentTimes, alignSegmentTimesToKeyframes, onViewSegmentTags, updateSegOrder, updateSegOrders, reorderSegsByStartTime, addSegment, setCutStart, setCutEnd, onLabelSegment, splitCurrentSegment, createNumSegments, createFixedDurationSegments, createRandomSegments, apparentCutSegments, haveInvalidSegs, currentSegIndexSafe, currentCutSeg, currentApparentCutSeg, inverseCutSegments, clearSegments, loadCutSegments, isSegmentSelected, setCutTime, getSegApparentEnd, setCurrentSegIndex, onLabelSelectedSegments, deselectAllSegments, selectAllSegments, selectOnlyCurrentSegment, toggleCurrentSegmentSelected, removeSelectedSegments, setDeselectedSegmentIds, onSelectSegmentsByLabel, toggleSegmentSelected, selectOnlySegment, getApparentCutSegmentById, selectedSegments, selectedSegmentsOrInverse, nonFilteredSegmentsOrInverse,
   } = useSegments({ filePath, workingRef, setWorking, setCutProgress, mainVideoStream, duration, getRelevantTime, maxLabelLength, checkFileOpened, invertCutSegments });
 
   const jumpSegStart = useCallback((index) => userSeekAbs(apparentCutSegments[index].start), [apparentCutSegments, userSeekAbs]);
@@ -2263,7 +2263,7 @@ const App = memo(() => {
                   onRemoveSelected={removeSelectedSegments}
                   toggleSegmentsList={toggleSegmentsList}
                   splitCurrentSegment={splitCurrentSegment}
-                  selectedSegmentsRaw={selectedSegmentsRaw}
+                  isSegmentSelected={isSegmentSelected}
                   selectedSegments={selectedSegmentsOrInverse}
                   onSelectSingleSegment={selectOnlySegment}
                   onToggleSegmentSelected={toggleSegmentSelected}
@@ -2308,6 +2308,7 @@ const App = memo(() => {
               isFileOpened={isFileOpened}
               onWheel={onTimelineWheel}
               goToTimecode={goToTimecode}
+              isSegmentSelected={isSegmentSelected}
             />
 
             <BottomBar

src/SegmentList.jsx

@@ -22,7 +22,7 @@ const buttonBaseStyle = {
 const neutralButtonColor = 'rgba(255, 255, 255, 0.2)';
 
 
-const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCount, updateOrder, invertCutSegments, onClick, onRemovePress, onRemoveSelected, onLabelSelectedSegments, onReorderPress, onLabelPress, enabled, onSelectSingleSegment, onToggleSegmentSelected, onDeselectAllSegments, onSelectSegmentsByLabel, onSelectAllSegments, jumpSegStart, jumpSegEnd, addSegment, onViewSegmentTags, onExtractSegmentFramesAsImages }) => {
+const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCount, updateOrder, invertCutSegments, onClick, onRemovePress, onRemoveSelected, onLabelSelectedSegments, onReorderPress, onLabelPress, selected, onSelectSingleSegment, onToggleSegmentSelected, onDeselectAllSegments, onSelectSegmentsByLabel, onSelectAllSegments, jumpSegStart, jumpSegEnd, addSegment, onViewSegmentTags, onExtractSegmentFramesAsImages }) => {
   const { t } = useTranslation();
 
   const ref = useRef();
@@ -87,7 +87,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
 
   function onDoubleClick() {
     if (invertCutSegments) return;
-    if (!enabled) {
+    if (!selected) {
       onToggleSegmentSelected(seg);
       return;
     }
@@ -97,7 +97,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
   const durationMsFormatted = Math.floor(durationMs);
   const frameCount = getFrameCount(duration);
 
-  const CheckIcon = enabled ? FaRegCheckCircle : FaRegCircle;
+  const CheckIcon = selected ? FaRegCheckCircle : FaRegCircle;
 
   const onToggleSegmentSelectedClick = useCallback((e) => {
     e.stopPropagation();
@@ -115,7 +115,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
       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 }}
+      animate={{ scaleY: 1, opacity: !selected && !invertCutSegments ? 0.5 : undefined }}
       exit={{ scaleY: 0 }}
       className="segment-list-entry"
     >
@@ -146,7 +146,7 @@ const SegmentList = memo(({
   currentSegIndex,
   updateSegOrder, updateSegOrders, addSegment, removeCutSegment, onRemoveSelected,
   onLabelSegment, currentCutSeg, segmentAtCursor, toggleSegmentsList, splitCurrentSegment,
-  selectedSegments, selectedSegmentsRaw, onSelectSingleSegment, onToggleSegmentSelected, onDeselectAllSegments, onSelectAllSegments, onSelectSegmentsByLabel, onExtractSegmentFramesAsImages, onLabelSelectedSegments,
+  selectedSegments, isSegmentSelected, onSelectSingleSegment, onToggleSegmentSelected, onDeselectAllSegments, onSelectAllSegments, onSelectSegmentsByLabel, onExtractSegmentFramesAsImages, onLabelSelectedSegments,
   jumpSegStart, jumpSegEnd, onViewSegmentTags,
 }) => {
   const { t } = useTranslation();
@@ -278,13 +278,13 @@ const SegmentList = memo(({
       <div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }} className="hide-scrollbar">
         <ReactSortable list={sortableList} setList={setSortableList} disabled={!!invertCutSegments} handle=".segment-handle">
           {sortableList.map(({ id, seg }, index) => {
-            const enabled = !invertCutSegments && selectedSegmentsRaw.includes(seg);
+            const selected = !invertCutSegments && isSegmentSelected({ segId: seg.segId });
             return (
               <Segment
                 key={id}
                 seg={seg}
                 index={index}
-                enabled={enabled}
+                selected={selected}
                 onClick={onSegClick}
                 addSegment={addSegment}
                 onRemoveSelected={onRemoveSelected}

src/Timeline.jsx

@@ -60,7 +60,7 @@ const Timeline = memo(({
   setCurrentSegIndex, currentSegIndexSafe, inverseCutSegments, formatTimecode,
   waveforms, shouldShowWaveform, shouldShowKeyframes, timelineHeight = 36, thumbnails,
   onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled,
-  playing, isFileOpened, onWheel, commandedTimeRef, goToTimecode,
+  playing, isFileOpened, onWheel, commandedTimeRef, goToTimecode, isSegmentSelected,
 }) => {
   const { t } = useTranslation();
 
@@ -291,6 +291,8 @@ const Timeline = memo(({
 
             if (seg.start === 0 && seg.end === 0) return null; // No video loaded
 
+            const selected = invertCutSegments || isSegmentSelected({ segId: seg.segId });
+
             return (
               <TimelineSeg
                 key={seg.segId}
@@ -304,6 +306,7 @@ const Timeline = memo(({
                 cutEnd={seg.end}
                 invertCutSegments={invertCutSegments}
                 formatTimecode={formatTimecode}
+                selected={selected}
               />
             );
           })}

src/TimelineSeg.jsx

@@ -7,7 +7,7 @@ import { mySpring } from './animations';
 
 const TimelineSeg = memo(({
   duration, cutStart, cutEnd, isActive, segNum, name,
-  onSegClick, invertCutSegments, segColor, formatTimecode,
+  onSegClick, invertCutSegments, segColor, formatTimecode, selected,
 }) => {
   const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`;
 
@@ -16,10 +16,10 @@ const TimelineSeg = memo(({
   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 (invertCutSegments || !selected) return segColor.alpha(0.4).string();
     if (isActive) return segColor.alpha(0.7).string();
     return segColor.alpha(0.6).string();
-  }, [invertCutSegments, isActive, segColor]);
+  }, [invertCutSegments, isActive, segColor, selected]);
   const markerBorderRadius = 5;
 
   const wrapperStyle = {

src/hooks/useSegments.js

@@ -482,7 +482,7 @@ export default ({
     inverseCutSegments,
     clearSegments,
     loadCutSegments,
-    selectedSegmentsRaw,
+    isSegmentSelected,
     selectedSegments,
     selectedSegmentsOrInverse,
     nonFilteredSegmentsOrInverse,