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 });