kopia lustrzana https://github.com/mifi/lossless-cut
add total time
rodzic
c97f7ab732
commit
cf35011021
|
@ -3,65 +3,73 @@ import prettyMs from 'pretty-ms';
|
|||
import { FaSave } from 'react-icons/fa';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { saveColor } from './colors';
|
||||
import { saveColor, timelineBackground } from './colors';
|
||||
|
||||
const SegmentList = memo(({
|
||||
formatTimecode, cutSegments, getFrameCount, getSegColors, onSegClick,
|
||||
currentSegIndex, invertCutSegments,
|
||||
}) => {
|
||||
if (!cutSegments && invertCutSegments) {
|
||||
return <div>Make sure you have no overlapping segments.</div>;
|
||||
return <div style={{ padding: '0 10px' }}>Make sure you have no overlapping segments.</div>;
|
||||
}
|
||||
|
||||
if (!cutSegments || cutSegments.length === 0) {
|
||||
return <div>No segments to export.</div>;
|
||||
return <div style={{ padding: '0 10px' }}>No segments to export.</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div style={{ fontSize: 14, marginBottom: 10 }}>Segments to export:</div>
|
||||
{cutSegments.map((seg, index) => {
|
||||
const duration = seg.end - seg.start;
|
||||
const durationMs = duration * 1000;
|
||||
<div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }}>
|
||||
<div style={{ fontSize: 14, marginBottom: 10 }}>Segments to export:</div>
|
||||
|
||||
const isActive = !invertCutSegments && currentSegIndex === index;
|
||||
const uuid = seg.uuid || `${seg.start}`;
|
||||
{cutSegments.map((seg, index) => {
|
||||
const duration = seg.end - seg.start;
|
||||
const durationMs = duration * 1000;
|
||||
|
||||
function renderNumber() {
|
||||
if (invertCutSegments) return <FaSave style={{ color: saveColor, marginRight: 5, verticalAlign: 'middle' }} size={14} />;
|
||||
const isActive = !invertCutSegments && currentSegIndex === index;
|
||||
const uuid = seg.uuid || `${seg.start}`;
|
||||
|
||||
const {
|
||||
segBgColor, segBorderColor,
|
||||
} = getSegColors(seg);
|
||||
function renderNumber() {
|
||||
if (invertCutSegments) return <FaSave style={{ color: saveColor, marginRight: 5, verticalAlign: 'middle' }} size={14} />;
|
||||
|
||||
return <b style={{ color: 'white', padding: '0 3px', marginRight: 5, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
|
||||
}
|
||||
const {
|
||||
segBgColor, segBorderColor,
|
||||
} = getSegColors(seg);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
role="button"
|
||||
onClick={() => !invertCutSegments && onSegClick(index)}
|
||||
key={uuid}
|
||||
positionTransition
|
||||
style={{ originY: 0, margin: '5px 0', border: `1px solid rgba(255,255,255,${isActive ? 1 : 0.3})`, padding: 5, borderRadius: 5 }}
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={{ scaleY: 1 }}
|
||||
exit={{ scaleY: 0 }}
|
||||
>
|
||||
<div style={{ fontSize: 13, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
|
||||
{renderNumber()}
|
||||
<span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
return <b style={{ color: 'white', padding: '0 3px', marginRight: 5, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
role="button"
|
||||
onClick={() => !invertCutSegments && onSegClick(index)}
|
||||
key={uuid}
|
||||
positionTransition
|
||||
style={{ originY: 0, margin: '5px 0', border: `1px solid rgba(255,255,255,${isActive ? 1 : 0.3})`, padding: 5, borderRadius: 5 }}
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={{ scaleY: 1 }}
|
||||
exit={{ scaleY: 0 }}
|
||||
>
|
||||
<div style={{ fontSize: 13, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
|
||||
{renderNumber()}
|
||||
<span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
|
||||
</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>Total time:</div>
|
||||
<div>{formatTimecode(cutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0))}</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export const saveColor = 'hsl(158, 100%, 43%)';
|
||||
export const primaryColor = 'hsl(194, 78%, 47%)';
|
||||
export const controlsBackground = '#6b6b6b';
|
||||
export const timelineBackground = '#444';
|
||||
|
|
|
@ -22,7 +22,7 @@ import TimelineSeg from './TimelineSeg';
|
|||
import InverseCutSegment from './InverseCutSegment';
|
||||
import StreamsSelector from './StreamsSelector';
|
||||
import { loadMifiLink } from './mifi';
|
||||
import { primaryColor, controlsBackground } from './colors';
|
||||
import { primaryColor, controlsBackground, timelineBackground } from './colors';
|
||||
|
||||
import loadingLottie from './7077-magic-flow.json';
|
||||
|
||||
|
@ -1008,6 +1008,7 @@ const App = memo(() => {
|
|||
title: 'You opened a new file. What do you want to do?',
|
||||
icon: 'question',
|
||||
input: 'radio',
|
||||
inputValue: 'open',
|
||||
showCancelButton: true,
|
||||
inputOptions: {
|
||||
open: 'Open the file instead of the current one. You will lose all work',
|
||||
|
@ -1677,7 +1678,7 @@ const App = memo(() => {
|
|||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute', width: rightBarWidth, padding: '0 10px', right: 0, boxSizing: 'border-box', bottom: bottomBarHeight, top: topBarHeight, background: controlsBackground, color: 'rgba(255,255,255,0.7)', overflowY: 'scroll',
|
||||
position: 'absolute', width: rightBarWidth, right: 0, bottom: bottomBarHeight, top: topBarHeight, background: controlsBackground, color: 'rgba(255,255,255,0.7)', display: 'flex', flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<SegmentList
|
||||
|
@ -1708,7 +1709,7 @@ const App = memo(() => {
|
|||
ref={timelineScrollerRef}
|
||||
>
|
||||
<div
|
||||
style={{ height: 36, width: `${zoom * 100}%`, position: 'relative', backgroundColor: '#444' }}
|
||||
style={{ height: 36, width: `${zoom * 100}%`, position: 'relative', backgroundColor: timelineBackground }}
|
||||
ref={timelineWrapperRef}
|
||||
>
|
||||
{currentTimePos !== undefined && <motion.div transition={{ type: 'spring', damping: 70, stiffness: 800 }} animate={{ left: currentTimePos }} style={{ position: 'absolute', bottom: 0, top: 0, zIndex: 3, backgroundColor: 'black', width: currentTimeWidth, pointerEvents: 'none' }} />}
|
||||
|
|
Ładowanie…
Reference in New Issue