kopia lustrzana https://github.com/mifi/lossless-cut
move buttons and refactor
Mikael Finstad
rodzic
cf35011021
commit
a7226ec107
|
|
@ -1,13 +1,16 @@
|
|||
import React, { memo, Fragment } from 'react';
|
||||
import prettyMs from 'pretty-ms';
|
||||
import { FaSave } from 'react-icons/fa';
|
||||
import { FaSave, FaPlus, FaMinus, FaTag } from 'react-icons/fa';
|
||||
import { motion } from 'framer-motion';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
import { saveColor, timelineBackground } from './colors';
|
||||
import { saveColor } from './colors';
|
||||
|
||||
const SegmentList = memo(({
|
||||
formatTimecode, cutSegments, getFrameCount, getSegColors, onSegClick,
|
||||
currentSegIndex, invertCutSegments,
|
||||
updateCurrentSegOrder, addCutSegment, removeCutSegment,
|
||||
setCurrentSegmentName, currentCutSeg,
|
||||
}) => {
|
||||
if (!cutSegments && invertCutSegments) {
|
||||
return <div style={{ padding: '0 10px' }}>Make sure you have no overlapping segments.</div>;
|
||||
|
|
@ -17,6 +20,42 @@ const SegmentList = memo(({
|
|||
return <div style={{ padding: '0 10px' }}>No segments to export.</div>;
|
||||
}
|
||||
|
||||
const {
|
||||
segActiveBgColor: currentSegActiveBgColor,
|
||||
segBorderColor: currentSegBorderColor,
|
||||
} = getSegColors(currentCutSeg);
|
||||
|
||||
async function onLabelSegmentPress() {
|
||||
const { value } = await Swal.fire({
|
||||
showCancelButton: true,
|
||||
title: 'Label current segment',
|
||||
inputValue: currentCutSeg.name,
|
||||
input: 'text',
|
||||
});
|
||||
|
||||
if (value != null) setCurrentSegmentName(value);
|
||||
}
|
||||
|
||||
async function onReorderSegsPress() {
|
||||
if (cutSegments.length < 2) return;
|
||||
const { value } = await Swal.fire({
|
||||
title: `Change order of segment ${currentSegIndex + 1}`,
|
||||
text: `Please enter a number from 1 to ${cutSegments.length} to be the new order for the current segment`,
|
||||
input: 'text',
|
||||
inputValue: currentSegIndex + 1,
|
||||
showCancelButton: true,
|
||||
inputValidator: (v) => {
|
||||
const parsed = parseInt(v, 10);
|
||||
return Number.isNaN(parsed) || parsed > cutSegments.length || parsed < 1 ? 'Invalid number entered' : undefined;
|
||||
},
|
||||
});
|
||||
|
||||
if (value) {
|
||||
const newOrder = parseInt(value, 10);
|
||||
updateCurrentSegOrder(newOrder - 1);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }}>
|
||||
|
|
@ -54,19 +93,54 @@ const SegmentList = memo(({
|
|||
{renderNumber()}
|
||||
<span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
|
||||
<div style={{ fontSize: 13 }}>
|
||||
Duration {prettyMs(durationMs)}
|
||||
</div>
|
||||
<div style={{ fontSize: 12 }}>
|
||||
({Math.floor(durationMs)} ms, {getFrameCount(duration)} frames)
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div style={{ padding: 10, boxSizing: 'border-box', background: timelineBackground, borderBottom: '1px solid grey', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', padding: '5px 0', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid grey' }}>
|
||||
<FaPlus
|
||||
size={30}
|
||||
style={{ margin: '0 5px', color: 'white', cursor: 'pointer' }}
|
||||
role="button"
|
||||
title="Add segment"
|
||||
onClick={addCutSegment}
|
||||
/>
|
||||
|
||||
<FaMinus
|
||||
size={30}
|
||||
style={{ margin: '0 5px', background: cutSegments.length < 2 ? undefined : currentSegActiveBgColor, borderRadius: 3, color: 'white', cursor: 'pointer' }}
|
||||
role="button"
|
||||
title={`Delete current segment ${currentSegIndex + 1}`}
|
||||
onClick={removeCutSegment}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{ background: currentSegActiveBgColor, border: `2px solid ${currentSegBorderColor}`, borderRadius: 5, color: 'white', fontSize: 23, textAlign: 'center', fontWeight: 'bold', boxSizing: 'border-box', height: 30, width: 30, margin: '0 5px', cursor: 'pointer' }}
|
||||
role="button"
|
||||
title="Change segment order"
|
||||
onClick={onReorderSegsPress}
|
||||
>
|
||||
{currentSegIndex + 1}
|
||||
</div>
|
||||
|
||||
<FaTag
|
||||
size={20}
|
||||
title="Label segment"
|
||||
role="button"
|
||||
style={{ padding: 4, margin: '0 5px', background: currentSegActiveBgColor, borderRadius: 3, color: 'white', cursor: 'pointer' }}
|
||||
onClick={onLabelSegmentPress}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: 10, boxSizing: 'border-box', borderBottom: '1px solid grey', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div>Total time:</div>
|
||||
<div>{formatTimecode(cutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0))}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useEffect, useState, useCallback, useRef, Fragment, useMemo } from 'react';
|
||||
import { IoIosHelpCircle, IoIosCamera } from 'react-icons/io';
|
||||
import { FaPlus, FaMinus, FaHandPointRight, FaHandPointLeft, FaTrashAlt, FaVolumeMute, FaVolumeUp, FaYinYang, FaFileExport, FaTag } from 'react-icons/fa';
|
||||
import { 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';
|
||||
|
|
@ -571,26 +571,6 @@ const App = memo(() => {
|
|||
setCutSegments(cutSegmentsNew);
|
||||
}, [currentSegIndexSafe, cutSegments, setCutSegments]);
|
||||
|
||||
async function onReorderSegsPress() {
|
||||
if (cutSegments.length < 2) return;
|
||||
const { value } = await Swal.fire({
|
||||
title: 'Change the order for the current segment',
|
||||
text: `Please enter a number from 1 to ${cutSegments.length}`,
|
||||
input: 'text',
|
||||
inputValue: currentSegIndexSafe + 1,
|
||||
showCancelButton: true,
|
||||
inputValidator: (v) => {
|
||||
const parsed = parseInt(v, 10);
|
||||
return Number.isNaN(parsed) || parsed > cutSegments.length || parsed < 1 ? 'Invalid number entered' : undefined;
|
||||
},
|
||||
});
|
||||
|
||||
if (value) {
|
||||
const newOrder = parseInt(value, 10);
|
||||
updateCurrentSegOrder(newOrder - 1);
|
||||
}
|
||||
}
|
||||
|
||||
const jumpCutStart = () => seekAbs(currentApparentCutSeg.start);
|
||||
const jumpCutEnd = () => seekAbs(currentApparentCutSeg.end);
|
||||
|
||||
|
|
@ -1445,17 +1425,6 @@ const App = memo(() => {
|
|||
return () => window.removeEventListener('keydown', keyScrollPreventer);
|
||||
}, []);
|
||||
|
||||
async function onLabelSegmentPress() {
|
||||
const { value } = await Swal.fire({
|
||||
showCancelButton: true,
|
||||
title: 'Label current segment',
|
||||
inputValue: currentCutSeg.name,
|
||||
input: 'text',
|
||||
});
|
||||
|
||||
if (value != null) setCurrentSegmentName(value);
|
||||
}
|
||||
|
||||
function renderSetCutpointButton(side) {
|
||||
const start = side === 'start';
|
||||
const Icon = start ? FaHandPointLeft : FaHandPointRight;
|
||||
|
|
@ -1472,10 +1441,6 @@ const App = memo(() => {
|
|||
}
|
||||
|
||||
const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
|
||||
const curSegButtonStyle = getSegButtonStyle({
|
||||
segActiveBgColor: currentSegActiveBgColor,
|
||||
segBorderColor: currentSegBorderColor,
|
||||
});
|
||||
|
||||
function renderJumpCutpointButton(direction) {
|
||||
const newIndex = currentSegIndexSafe + direction;
|
||||
|
|
@ -1683,12 +1648,17 @@ const App = memo(() => {
|
|||
>
|
||||
<SegmentList
|
||||
currentSegIndex={currentSegIndexSafe}
|
||||
onSegClick={setCurrentSegIndex}
|
||||
formatTimecode={formatTimecode}
|
||||
cutSegments={outSegments}
|
||||
getFrameCount={getFrameCount}
|
||||
getSegColors={getSegColors}
|
||||
formatTimecode={formatTimecode}
|
||||
invertCutSegments={invertCutSegments}
|
||||
onSegClick={setCurrentSegIndex}
|
||||
updateCurrentSegOrder={updateCurrentSegOrder}
|
||||
setCurrentSegmentName={setCurrentSegmentName}
|
||||
currentCutSeg={currentCutSeg}
|
||||
addCutSegment={addCutSegment}
|
||||
removeCutSegment={removeCutSegment}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
@ -1832,39 +1802,6 @@ const App = memo(() => {
|
|||
<div className="left-menu no-user-select" style={{ position: 'absolute', left: 0, bottom: 0, padding: '.3em', display: 'flex', alignItems: 'center' }}>
|
||||
{renderInvertCutButton()}
|
||||
|
||||
<FaPlus
|
||||
size={30}
|
||||
style={{ margin: '0 5px', color: 'white' }}
|
||||
role="button"
|
||||
title="Add segment"
|
||||
onClick={addCutSegment}
|
||||
/>
|
||||
|
||||
<FaMinus
|
||||
size={30}
|
||||
style={{ margin: '0 5px', background: cutSegments.length < 2 ? undefined : currentSegActiveBgColor, borderRadius: 3, color: 'white' }}
|
||||
role="button"
|
||||
title={`Delete current segment ${currentSegIndexSafe + 1}`}
|
||||
onClick={removeCutSegment}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{ ...curSegButtonStyle, height: 10, padding: 4, margin: '0 5px' }}
|
||||
role="button"
|
||||
title="Change segment order"
|
||||
onClick={onReorderSegsPress}
|
||||
>
|
||||
{currentSegIndexSafe + 1}
|
||||
</div>
|
||||
|
||||
<FaTag
|
||||
size={10}
|
||||
title="Label segment"
|
||||
role="button"
|
||||
style={{ padding: 4, border: `2px solid ${currentSegBorderColor}`, background: currentSegActiveBgColor, borderRadius: 6 }}
|
||||
onClick={onLabelSegmentPress}
|
||||
/>
|
||||
|
||||
<select style={{ width: 80, margin: '0 10px' }} value={zoom.toString()} title="Zoom" onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
|
||||
{Array(10).fill().map((unused, z) => {
|
||||
const val = 2 ** z;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue