aiden
/
lossless-cut
mirror of https://github.com/mifi/lossless-cut
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve segment colors and ui

Browse Source
pull/982/head
Mikael Finstad 4 years ago
parent 6c1b0e21da
commit 016d41f703
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
6 changed files with 30 additions and 36 deletions
Show Stats Download Patch File Download Diff File

20
src/App.jsx
Unescape Escape View File

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

8
src/BottomBar.jsx
Unescape Escape View File

@ -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}
</div>
);
}
@ -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',

6
src/SegmentList.jsx
Unescape Escape View File

@ -72,7 +72,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
const segColor = getSegColor(seg);
return <b style={{ color: 'white', padding: '0 4px', marginRight: 3, background: segColor.alpha(0.5).string(), border: `1px solid ${isActive ? segColor.lighten(0.5).string() : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
return <b style={{ color: 'white', padding: '0 4px', marginRight: 3, marginLeft: -3, background: segColor.alpha(0.5).string(), border: `1px solid ${isActive ? segColor.lighten(0.3).string() : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
}
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);

6
src/Timeline.jsx
Unescape Escape View File

@ -267,9 +267,9 @@ const Timeline = memo(({
<TimelineSeg
key={seg.segId}
segNum={i}
segBgColor={segColor.alpha(0.5).string()}
segActiveBgColor={segColor.lighten(0.5).alpha(0.5).string()}
segBorderColor={segColor.lighten(0.5).string()}
segBgColor={segColor.alpha(0.6).string()}
segActiveBgColor={segColor.alpha(0.7).string()}
segBorderColor={segColor.lighten(0.2).string()}
onSegClick={setCurrentSegIndex}
isActive={i === currentSegIndexSafe}
duration={durationSafe}

4
src/components/SegmentCutpointButton.jsx
Unescape Escape View File

@ -6,8 +6,8 @@ const SegmentCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, styl
const segColor = getSegColor(currentCutSeg);
const start = side === 'start';
const border = `4px solid ${segColor.lighten(0.5).string()}`;
const backgroundColor = segColor.lighten(0.5).alpha(0.5).string();
const border = `4px solid ${segColor.lighten(0.1).string()}`;
const backgroundColor = segColor.alpha(0.5).string();
return (
<Icon

22
src/util/colors.js
Unescape Escape View File

@ -1,20 +1,12 @@
import color from 'color';
// https://github.com/mock-end/random-color/blob/master/index.js
/* eslint-disable */
function getColor(saturation, value, n) {
var ratioMul = 0.618033988749895;
var initialHue = 0.65;
// http://phrogz.net/css/distinct-colors.html
const colorStrings = '#ff5100, #ffc569, #ddffd1, #00ccff, #e9d1ff, #ff0084, #ff6975, #ffe6d1, #ffff69, #69ff96, #008cff, #ae00ff, #ff002b, #ff8c00, #8cff00, #69ffff, #0044ff, #ff00d4, #ffd1d9'.split(',').map((str) => 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);
}

Write Preview
Loading…
Cancel
Save