Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 18:32:34 +01:00
Code Issues Releases Activity

improve start/stop buttons

Browse Source
This commit is contained in:
Mikael Finstad 2020-02-20 19:02:15 +08:00
parent e7d3de3a25
commit 3ad0a0c9bc
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/TimelineSeg.jsx
View File

@ -9,15 +9,13 @@ const { formatDuration } = require('./util');
const TimelineSeg = ({ const TimelineSeg = ({
duration, cutStart, cutEnd, isActive, segNum, duration, cutStart, cutEnd, isActive, segNum,
onSegClick, color, invertCutSegments, onSegClick, invertCutSegments, segBgColor, segActiveBgColor, segBorderColor,
}) => { }) => {
const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`; const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`;
const strongColor = color.lighten(0.5).string();
const strongBgColor = color.lighten(0.5).alpha(0.5).string();
const startTimePos = `${(cutStart / duration) * 100}%`; const startTimePos = `${(cutStart / duration) * 100}%`;
const markerBorder = `2px solid ${isActive ? strongColor : 'transparent'}`; const markerBorder = `2px solid ${isActive ? segBorderColor : 'transparent'}`;
const backgroundColor = isActive ? strongBgColor : color.alpha(0.5).string(); const backgroundColor = isActive ? segActiveBgColor : segBgColor;
const markerBorderRadius = 5; const markerBorderRadius = 5;
const wrapperStyle = { const wrapperStyle = {
@ -66,7 +64,7 @@ const TimelineSeg = ({
style={{ width: 16, height: 16, flexShrink: 1 }} style={{ width: 16, height: 16, flexShrink: 1 }}
> >
<FaTrashAlt <FaTrashAlt
style={{ width: '100%', color: strongColor }} style={{ width: '100%', color: segBorderColor }}
size={16} size={16}
/> />
</motion.div> </motion.div>

39
src/renderer.jsx
View File

@ -1,6 +1,6 @@
import React, { memo, useEffect, useState, useCallback, useRef, Fragment } from 'react'; import React, { memo, useEffect, useState, useCallback, useRef, Fragment } from 'react';
import { IoIosHelpCircle, IoIosCamera } from 'react-icons/io'; import { IoIosHelpCircle, IoIosCamera } from 'react-icons/io';
import { FaPlus, FaMinus, FaAngleLeft, FaAngleRight, FaTrashAlt, FaVolumeMute, FaVolumeUp, FaYinYang, FaFileExport } from 'react-icons/fa'; import { FaPlus, FaMinus, FaHandPointRight, FaHandPointLeft, FaTrashAlt, FaVolumeMute, FaVolumeUp, FaYinYang, FaFileExport } from 'react-icons/fa';
import { MdRotate90DegreesCcw, MdCallSplit, MdCallMerge } from 'react-icons/md'; import { MdRotate90DegreesCcw, MdCallSplit, MdCallMerge } from 'react-icons/md';
import { FiScissors } from 'react-icons/fi'; import { FiScissors } from 'react-icons/fi';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
@ -1063,6 +1063,8 @@ const App = memo(() => {
const segColor = (currentCutSeg || {}).color; const segColor = (currentCutSeg || {}).color;
const segBgColor = segColor.alpha(0.5).string(); const segBgColor = segColor.alpha(0.5).string();
const segActiveBgColor = segColor.lighten(0.5).alpha(0.5).string();
const segBorderColor = segColor.lighten(0.5).string();
const jumpCutButtonStyle = { const jumpCutButtonStyle = {
position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px', position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px',
@ -1273,6 +1275,21 @@ const App = memo(() => {
return () => window.removeEventListener('keydown', keyScrollPreventer); return () => window.removeEventListener('keydown', keyScrollPreventer);
}, []); }, []);
function renderSetCutpointButton(side) {
const start = side === 'start';
const Icon = start ? FaHandPointLeft : FaHandPointRight;
const border = `4px solid ${segBorderColor}`;
return (
<Icon
size={13}
title="Set cut end to current position"
role="button"
style={{ padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: segActiveBgColor, borderRadius: 6 }}
onClick={start ? setCutStart : setCutEnd}
/>
);
}
const primaryColor = 'hsl(194, 78%, 47%)'; const primaryColor = 'hsl(194, 78%, 47%)';
const AutoMergeIcon = autoMerge ? MdCallMerge : MdCallSplit; const AutoMergeIcon = autoMerge ? MdCallMerge : MdCallSplit;
@ -1470,7 +1487,9 @@ const App = memo(() => {
<TimelineSeg <TimelineSeg
key={seg.uuid} key={seg.uuid}
segNum={i} segNum={i}
color={seg.color} segBgColor={segBgColor}
segActiveBgColor={segActiveBgColor}
segBorderColor={segBorderColor}
onSegClick={currentSegIndexNew => setCurrentSegIndex(currentSegIndexNew)} onSegClick={currentSegIndexNew => setCurrentSegIndex(currentSegIndexNew)}
isActive={i === currentSegIndexSafe} isActive={i === currentSegIndexSafe}
duration={durationSafe} duration={durationSafe}
@ -1510,13 +1529,7 @@ const App = memo(() => {
onClick={() => seekAbs(0)} onClick={() => seekAbs(0)}
/> />
<FaAngleLeft {renderSetCutpointButton('start')}
title="Set cut start to current position"
style={{ background: segBgColor, borderRadius: 10, padding: 3 }}
size={16}
onClick={setCutStart}
role="button"
/>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{renderCutTimeInput('start')} {renderCutTimeInput('start')}
@ -1561,13 +1574,7 @@ const App = memo(() => {
/> />
</div> </div>
<FaAngleRight {renderSetCutpointButton('end')}
title="Set cut end to current position"
style={{ background: segBgColor, borderRadius: 10, padding: 3 }}
size={16}
onClick={setCutEnd}
role="button"
/>
<i <i
className="button fa fa-step-forward" className="button fa fa-step-forward"