diff --git a/src/renderer/src/SegmentList.tsx b/src/renderer/src/SegmentList.tsx
index e6db1066..30b6b2cc 100644
--- a/src/renderer/src/SegmentList.tsx
+++ b/src/renderer/src/SegmentList.tsx
@@ -25,7 +25,8 @@ const buttonBaseStyle = {
margin: '0 3px', borderRadius: 3, color: 'white', cursor: 'pointer',
};
-const neutralButtonColor = 'var(--gray8)';
+const disabledButtonStyle = { color: 'var(--gray10)', backgroundColor: 'var(--gray6)' };
+const neutralButtonColor = 'var(--gray9)';
// eslint-disable-next-line react/display-name
const Segment = memo(({
@@ -319,6 +320,13 @@ function SegmentList({
const { invertCutSegments, simpleMode, darkMode } = useUserSettings();
+ const getButtonColor = useCallback((seg: StateSegment | undefined, next?: boolean) => getSegColor(seg ? { segColorIndex: next ? seg.segColorIndex + 1 : seg.segColorIndex } : undefined).desaturate(0.3).lightness(darkMode ? 45 : 55).string(), [darkMode, getSegColor]);
+ const currentSegColor = useMemo(() => getButtonColor(currentCutSeg), [currentCutSeg, getButtonColor]);
+ const segAtCursorColor = useMemo(() => getButtonColor(segmentAtCursor), [getButtonColor, segmentAtCursor]);
+
+ const segmentsTotal = useMemo(() => selectedSegments.reduce((acc, seg) => (seg.end == null ? 0 : seg.end - seg.start) + acc, 0), [selectedSegments]);
+
+
const segmentsOrInverse: (InverseCutSegment | StateSegment)[] = invertCutSegments ? inverseCutSegments : cutSegments;
const sortableList = useMemo(() => segmentsOrInverse.map((seg) => ({ id: seg.segId, seg })), [segmentsOrInverse]);
@@ -356,12 +364,6 @@ function SegmentList({
}, [cutSegments.length, t, updateSegOrder]);
function renderFooter() {
- const getButtonColor = (seg: StateSegment | undefined) => getSegColor(seg).desaturate(0.3).lightness(darkMode ? 45 : 55).string();
- const currentSegColor = getButtonColor(currentCutSeg);
- const segAtCursorColor = getButtonColor(segmentAtCursor);
-
- const segmentsTotal = selectedSegments.reduce((acc, seg) => (seg.end == null ? 0 : seg.end - seg.start) + acc, 0);
-
return (
<>
@@ -375,7 +377,7 @@ function SegmentList({
= 2 ? currentSegColor : neutralButtonColor }}
+ style={{ ...buttonBaseStyle, ...(cutSegments.length >= 2 ? { backgroundColor: currentSegColor } : disabledButtonStyle) }}
role="button"
title={t('Remove cutpoint from segment {{segmentNumber}}', { segmentNumber: currentSegIndex + 1 })}
onClick={() => removeSegment(currentSegIndex)}
@@ -387,7 +389,7 @@ function SegmentList({
size={16}
title={t('Change segment order')}
role="button"
- style={{ ...buttonBaseStyle, padding: 4, background: currentSegColor }}
+ style={{ ...buttonBaseStyle, padding: 4, ...(cutSegments.length >= 2 ? { backgroundColor: currentSegColor } : disabledButtonStyle) }}
onClick={() => onReorderSegs(currentSegIndex)}
/>
@@ -395,7 +397,7 @@ function SegmentList({
size={16}
title={t('Label segment')}
role="button"
- style={{ ...buttonBaseStyle, padding: 4, background: currentSegColor }}
+ style={{ ...buttonBaseStyle, padding: 4, ...(cutSegments.length > 0 ? { backgroundColor: currentSegColor } : disabledButtonStyle) }}
onClick={() => onLabelSegment(currentSegIndex)}
/>
>
@@ -405,16 +407,16 @@ function SegmentList({
size={22}
title={t('Split segment at cursor')}
role="button"
- style={{ ...buttonBaseStyle, padding: 1, background: segmentAtCursor ? segAtCursorColor : neutralButtonColor }}
+ style={{ ...buttonBaseStyle, padding: 1, ...(segmentAtCursor ? { backgroundColor: segAtCursorColor } : disabledButtonStyle) }}
onClick={splitCurrentSegment}
/>
{!invertCutSegments && (
0 ? { backgroundColor: neutralButtonColor } : disabledButtonStyle) }}
onClick={onInvertSelectedSegments}
/>
)}
@@ -530,7 +532,7 @@ function SegmentList({
- {segmentsOrInverse.length > 0 && renderFooter()}
+ {renderFooter()}
>
);
diff --git a/src/renderer/src/hooks/useSegments.ts b/src/renderer/src/hooks/useSegments.ts
index d96c4d82..b46c9496 100644
--- a/src/renderer/src/hooks/useSegments.ts
+++ b/src/renderer/src/hooks/useSegments.ts
@@ -544,10 +544,12 @@ function useSegments({ filePath, workingRef, setWorking, setProgress, videoStrea
}
const segment = cutSegments[firstSegmentAtCursorIndex];
- if (segment == null) throw new Error();
+ invariant(segment != null);
const getNewName = (oldName: string, suffix: string) => oldName && `${segment.name} ${suffix}`;
+ if (segment.start === relevantTime || segment.end === relevantTime) return; // No point
+
const firstPart = createIndexedSegment({ segment: { name: getNewName(segment.name, '1'), start: segment.start, end: relevantTime }, incrementCount: false });
const secondPart = createIndexedSegment({ segment: { name: getNewName(segment.name, '2'), start: relevantTime, end: segment.end }, incrementCount: true });