From 016d41f703d21ec72254de97abbbab967e977941 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Fri, 18 Feb 2022 22:14:16 +0800 Subject: [PATCH] improve segment colors and ui --- src/App.jsx | 20 ++++++++++---------- src/BottomBar.jsx | 8 +++++--- src/SegmentList.jsx | 6 +++--- src/Timeline.jsx | 6 +++--- src/components/SegmentCutpointButton.jsx | 4 ++-- src/util/colors.js | 22 +++++++--------------- 6 files changed, 30 insertions(+), 36 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d97dd3c..c71f9bf 100644 --- a/src/App.jsx +++ b/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); diff --git a/src/BottomBar.jsx b/src/BottomBar.jsx index 3f5318a..70f8b92 100644 --- a/src/BottomBar.jsx +++ b/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} ); } @@ -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', diff --git a/src/SegmentList.jsx b/src/SegmentList.jsx index 30903fc..f6e6c89 100644 --- a/src/SegmentList.jsx +++ b/src/SegmentList.jsx @@ -72,7 +72,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou const segColor = getSegColor(seg); - return {index + 1}; + return {index + 1}; } 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); diff --git a/src/Timeline.jsx b/src/Timeline.jsx index 312a1e1..a01dc63 100644 --- a/src/Timeline.jsx +++ b/src/Timeline.jsx @@ -267,9 +267,9 @@ const Timeline = memo(({ 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); }