Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-25 11:43:17 +01:00
Code Issues Releases Activity

improve colors

Browse Source 
https://github.com/mifi/lossless-cut/discussions/1507
This commit is contained in:
Mikael Finstad 2023-04-03 00:03:33 +09:00
parent 8f4a309038
commit 10f8092d15
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
8 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/BottomBar.jsx
View File

@ -41,7 +41,8 @@ const CutTimeInput = memo(({ darkMode, cutTime, setCutTime, startTimeOffset, see
const isCutTimeManualSet = () => cutTimeManual !== undefined;
const border = `.15em solid ${getSegColor(currentCutSeg, darkMode).alpha(0.8).string()}`;
const segColor = getSegColor(currentCutSeg);
const border = `.1em solid ${darkMode ? segColor.desaturate(0.9).lightness(50).string() : segColor.desaturate(0.7).lightness(60).string()}`;
const cutTimeInputStyle = {
border, borderRadius: 5, backgroundColor: 'var(--gray5)', transition: darkModeTransition, 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',
@ -148,7 +149,7 @@ const BottomBar = memo(({
const selectedSegmentsSafe = (selectedSegments.length > 1 ? selectedSegments : [selectedSegments[0], selectedSegments[0]]).slice(0, 10);
const gradientColors = selectedSegmentsSafe.map((seg, i) => {
const segColor = getSegColor(seg, darkMode);
const segColor = getSegColor(seg);
// make colors stronger, the more segments
return `${segColor.alpha(Math.max(0.4, Math.min(0.8, selectedSegmentsSafe.length / 3))).string()} ${((i / (selectedSegmentsSafe.length - 1)) * 100).toFixed(1)}%`;
}).join(', ');
@ -167,7 +168,7 @@ const BottomBar = memo(({
height: 24,
borderRadius: 4,
};
}, [darkMode, selectedSegments]);
}, [selectedSegments]);
const { invertCutSegments, setInvertCutSegments, simpleMode, toggleSimpleMode, exportConfirmEnabled } = useUserSettings();
@ -190,7 +191,7 @@ const BottomBar = memo(({
const newIndex = currentSegIndexSafe + direction;
const seg = cutSegments[newIndex];
const backgroundColor = seg && getSegColor(seg, darkMode).alpha(0.5).string();
const backgroundColor = seg && getSegColor(seg).desaturate(0.9).lightness(darkMode ? 35 : 55).string();
const opacity = seg ? undefined : 0.5;
const text = seg ? `${newIndex + 1}` : '-';
const wide = text.length > 1;

14
src/SegmentList.jsx
View File

@ -79,9 +79,12 @@ const Segment = memo(({ darkMode, seg, index, currentSegIndex, formatTimecode, g
function renderNumber() {
if (invertCutSegments) return <FaSave style={{ color: saveColor, marginRight: 5, verticalAlign: 'middle' }} size={14} />;
const segColor = getSegColor(seg, darkMode);
const segColor = getSegColor(seg);
return <b style={{ cursor: 'grab', 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 color = segColor.desaturate(0.75).lightness(darkMode ? 35 : 55);
const borderColor = darkMode ? color.lighten(0.5) : color.darken(0.3);
return <b style={{ cursor: 'grab', color: 'white', padding: '0 4px', marginRight: 3, marginLeft: -3, background: color.string(), border: `1px solid ${isActive ? borderColor.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]);
@ -195,8 +198,9 @@ const SegmentList = memo(({
}
function renderFooter() {
const currentSegColor = getSegColor(currentCutSeg, darkMode).alpha(0.5).string();
const segAtCursorColor = getSegColor(segmentAtCursor, darkMode).alpha(0.5).string();
const getButtonColor = (seg) => getSegColor(seg).desaturate(0.8).lightness(darkMode ? 45 : 55).string();
const currentSegColor = getButtonColor(currentCutSeg);
const segAtCursorColor = getButtonColor(segmentAtCursor);
const segmentsTotal = selectedSegments.reduce((acc, { start, end }) => (end - start) + acc, 0);
@ -258,7 +262,7 @@ const SegmentList = memo(({
return (
<motion.div
style={{ width, background: controlsBackground, borderLeft: '1px solid var(--gray6)', color: 'var(--gray11)', transition: darkModeTransition, display: 'flex', flexDirection: 'column', overflowY: 'hidden' }}
style={{ width, background: controlsBackground, borderLeft: '1px solid var(--gray7)', color: 'var(--gray11)', transition: darkModeTransition, display: 'flex', flexDirection: 'column', overflowY: 'hidden' }}
initial={{ x: width }}
animate={{ x: 0 }}
exit={{ x: width }}

6
src/Timeline.jsx
View File

@ -66,7 +66,7 @@ const Timeline = memo(({
const timelineHeight = 36;
const { invertCutSegments, darkMode } = useUserSettings();
const { invertCutSegments } = useUserSettings();
const timelineScrollerRef = useRef();
const timelineScrollerSkipEventRef = useRef();
@ -241,7 +241,7 @@ const Timeline = memo(({
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/mouse-events-have-key-events
<div
style={{ position: 'relative', borderTop: '1px solid var(--gray6)', borderBottom: '1px solid var(--gray6)' }}
style={{ position: 'relative', borderTop: '1px solid var(--gray7)', borderBottom: '1px solid var(--gray7)' }}
onMouseDown={onMouseDown}
onMouseMove={onMouseMove}
onMouseOut={onMouseOut}
@ -295,7 +295,7 @@ const Timeline = memo(({
)}
{apparentCutSegments.map((seg, i) => {
const segColor = getSegColor(seg, darkMode);
const segColor = getSegColor(seg);
if (seg.start === 0 && seg.end === 0) return null; // No video loaded

16
src/TimelineSeg.jsx
View File

@ -3,23 +3,29 @@ import { motion, AnimatePresence } from 'framer-motion';
import { FaTrashAlt } from 'react-icons/fa';
import { mySpring } from './animations';
import useUserSettings from './hooks/useUserSettings';
const TimelineSeg = memo(({
duration, cutStart, cutEnd, isActive, segNum, name,
onSegClick, invertCutSegments, segColor, formatTimecode, selected,
}) => {
const { darkMode } = useUserSettings();
const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`;
const startTimePos = `${(cutStart / duration) * 100}%`;
const markerBorder = useMemo(() => `2px solid ${isActive ? segColor.lighten(0.2).string() : 'transparent'}`, [isActive, segColor]);
const markerBorder = useMemo(() => {
if (!isActive) return '2px solid transparent';
return `2px solid ${(darkMode ? segColor.desaturate(0.6).lightness(70) : segColor.desaturate(0.9).lightness(20)).string()}`;
}, [darkMode, isActive, segColor]);
const backgroundColor = useMemo(() => {
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, selected]);
if (invertCutSegments || !selected) return darkMode ? segColor.desaturate(0.9).lightness(25).string() : segColor.desaturate(0.9).lightness(80).string();
if (isActive) return darkMode ? segColor.desaturate(0.7).lightness(50).string() : segColor.desaturate(0.7).lightness(40).string();
return darkMode ? segColor.desaturate(0.7).lightness(40).string() : segColor.desaturate(0.9).lightness(55).string();
}, [darkMode, invertCutSegments, isActive, segColor, selected]);
const markerBorderRadius = 5;
const wrapperStyle = {

2
src/components/BatchFilesList.jsx
View File

@ -46,7 +46,7 @@ const BatchFilesList = memo(({ selectedBatchFiles, filePath, width, batchFiles,
return (
<motion.div
className="no-user-select"
style={{ width, background: controlsBackground, color: 'var(--gray12)', borderRight: '1px solid var(--gray6)', transition: darkModeTransition, display: 'flex', flexDirection: 'column', overflowY: 'hidden', overflowX: 'hidden', resize: 'horizontal' }}
style={{ width, background: controlsBackground, color: 'var(--gray12)', borderRight: '1px solid var(--gray7)', transition: darkModeTransition, display: 'flex', flexDirection: 'column', overflowY: 'hidden', overflowX: 'hidden', resize: 'horizontal' }}
initial={{ x: -width }}
animate={{ x: 0 }}
exit={{ x: -width }}

2
src/components/OutSegTemplateEditor.jsx
View File

@ -15,7 +15,7 @@ const ReactSwal = withReactContent(Swal);
// eslint-disable-next-line no-template-curly-in-string
const extVar = '${EXT}';
const inputStyle = { flexGrow: 1, fontFamily: 'inherit', fontSize: '.8em', backgroundColor: 'var(--gray3)', color: 'var(--gray12)', border: '1px solid var(--gray6)', appearance: 'none' };
const inputStyle = { flexGrow: 1, fontFamily: 'inherit', fontSize: '.8em', backgroundColor: 'var(--gray3)', color: 'var(--gray12)', border: '1px solid var(--gray7)', appearance: 'none' };
const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generateOutSegFileNames, currentSegIndexSafe, getOutSegError }) => {
const { safeOutputFileName, toggleSafeOutputFileName } = useUserSettings();

6
src/components/SegmentCutpointButton.jsx
View File

@ -5,11 +5,11 @@ import useUserSettings from '../hooks/useUserSettings';
const SegmentCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, style }) => {
const { darkMode } = useUserSettings();
const segColor = getSegColor(currentCutSeg, darkMode);
const segColor = getSegColor(currentCutSeg);
const start = side === 'start';
const border = `4px solid ${segColor.lighten(0.1).string()}`;
const backgroundColor = segColor.alpha(0.5).string();
const border = `3px solid ${segColor.desaturate(0.9).lightness(darkMode ? 45 : 35).string()}`;
const backgroundColor = segColor.desaturate(0.9).lightness(darkMode ? 35 : 55).string();
return (
<Icon

6
src/util/colors.js
View File

@ -9,7 +9,7 @@ function getColor(n) {
}
// eslint-disable-next-line import/prefer-default-export
export function getSegColor(seg, darkMode) {
export function getSegColor(seg) {
if (!seg) {
return color({
h: 0,
@ -19,7 +19,5 @@ export function getSegColor(seg, darkMode) {
}
const { segColorIndex } = seg;
const theColor = getColor(segColorIndex);
if (!darkMode) return theColor.darken(0.6);
return theColor;
return getColor(segColorIndex);
}