From c923d99f177e1a6c55de8da78c9c9c3b2aa5786a Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Sat, 18 Feb 2023 11:07:38 +0800 Subject: [PATCH] dim also deselected files in timeline --- src/App.jsx | 5 +++-- src/SegmentList.jsx | 14 +++++++------- src/Timeline.jsx | 5 ++++- src/TimelineSeg.jsx | 6 +++--- src/hooks/useSegments.js | 2 +- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9fc58cff..90d4cd1e 100644 --- a/src/App.jsx +++ b/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} /> { +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(({
{sortableList.map(({ id, seg }, index) => { - const enabled = !invertCutSegments && selectedSegmentsRaw.includes(seg); + const selected = !invertCutSegments && isSegmentSelected({ segId: seg.segId }); return ( { 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 ( ); })} diff --git a/src/TimelineSeg.jsx b/src/TimelineSeg.jsx index 2b5baa96..fbe2fd3e 100644 --- a/src/TimelineSeg.jsx +++ b/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 = { diff --git a/src/hooks/useSegments.js b/src/hooks/useSegments.js index 0a2f97e9..deeaccec 100644 --- a/src/hooks/useSegments.js +++ b/src/hooks/useSegments.js @@ -482,7 +482,7 @@ export default ({ inverseCutSegments, clearSegments, loadCutSegments, - selectedSegmentsRaw, + isSegmentSelected, selectedSegments, selectedSegmentsOrInverse, nonFilteredSegmentsOrInverse,