Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 10:22:31 +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 = ({
duration, cutStart, cutEnd, isActive, segNum,
onSegClick, color, invertCutSegments,
onSegClick, invertCutSegments, segBgColor, segActiveBgColor, segBorderColor,
}) => {
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 markerBorder = `2px solid ${isActive ? strongColor : 'transparent'}`;
const backgroundColor = isActive ? strongBgColor : color.alpha(0.5).string();
const markerBorder = `2px solid ${isActive ? segBorderColor : 'transparent'}`;
const backgroundColor = isActive ? segActiveBgColor : segBgColor;
const markerBorderRadius = 5;
const wrapperStyle = {
@ -66,7 +64,7 @@ const TimelineSeg = ({
style={{ width: 16, height: 16, flexShrink: 1 }}
>
<FaTrashAlt
style={{ width: '100%', color: strongColor }}
style={{ width: '100%', color: segBorderColor }}
size={16}
/>
</motion.div>

39
src/renderer.jsx
View File

@ -1,6 +1,6 @@
import React, { memo, useEffect, useState, useCallback, useRef, Fragment } from 'react';
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 { FiScissors } from 'react-icons/fi';
import { AnimatePresence, motion } from 'framer-motion';
@ -1063,6 +1063,8 @@ const App = memo(() => {
const segColor = (currentCutSeg || {}).color;
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 = {
position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px',
@ -1273,6 +1275,21 @@ const App = memo(() => {
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 AutoMergeIcon = autoMerge ? MdCallMerge : MdCallSplit;
@ -1470,7 +1487,9 @@ const App = memo(() => {
<TimelineSeg
key={seg.uuid}
segNum={i}
color={seg.color}
segBgColor={segBgColor}
segActiveBgColor={segActiveBgColor}
segBorderColor={segBorderColor}
onSegClick={currentSegIndexNew => setCurrentSegIndex(currentSegIndexNew)}
isActive={i === currentSegIndexSafe}
duration={durationSafe}
@ -1510,13 +1529,7 @@ const App = memo(() => {
onClick={() => seekAbs(0)}
/>
<FaAngleLeft
title="Set cut start to current position"
style={{ background: segBgColor, borderRadius: 10, padding: 3 }}
size={16}
onClick={setCutStart}
role="button"
/>
{renderSetCutpointButton('start')}
<div style={{ position: 'relative' }}>
{renderCutTimeInput('start')}
@ -1561,13 +1574,7 @@ const App = memo(() => {
/>
</div>
<FaAngleRight
title="Set cut end to current position"
style={{ background: segBgColor, borderRadius: 10, padding: 3 }}
size={16}
onClick={setCutEnd}
role="button"
/>
{renderSetCutpointButton('end')}
<i
className="button fa fa-step-forward"