kopia lustrzana https://github.com/mifi/lossless-cut
consolidate bottom menus
Mikael Finstad
rodzic
e7526b077e
commit
4b1fab189b
53
src/App.jsx
53
src/App.jsx
|
|
@ -33,8 +33,7 @@ import StreamsSelector from './StreamsSelector';
|
|||
import SegmentList from './SegmentList';
|
||||
import Settings from './Settings';
|
||||
import Timeline from './Timeline';
|
||||
import BottomLeftMenu from './BottomLeftMenu';
|
||||
import BottomRightMenu from './BottomRightMenu';
|
||||
import BottomMenu from './BottomMenu';
|
||||
import TimelineControls from './TimelineControls';
|
||||
import ExportConfirm from './ExportConfirm';
|
||||
import ValueTuner from './components/ValueTuner';
|
||||
|
|
@ -2471,34 +2470,28 @@ const App = memo(() => {
|
|||
simpleMode={simpleMode}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<BottomLeftMenu
|
||||
zoom={zoom}
|
||||
setZoom={setZoom}
|
||||
invertCutSegments={invertCutSegments}
|
||||
setInvertCutSegments={setInvertCutSegments}
|
||||
toggleComfortZoom={toggleComfortZoom}
|
||||
simpleMode={simpleMode}
|
||||
toggleSimpleMode={toggleSimpleMode}
|
||||
/>
|
||||
|
||||
<BottomRightMenu
|
||||
hasVideo={hasVideo}
|
||||
isRotationSet={isRotationSet}
|
||||
rotation={rotation}
|
||||
areWeCutting={areWeCutting}
|
||||
autoMerge={autoMerge}
|
||||
increaseRotation={increaseRotation}
|
||||
cleanupFiles={cleanupFiles}
|
||||
renderCaptureFormatButton={renderCaptureFormatButton}
|
||||
capture={capture}
|
||||
onExportPress={onExportPress}
|
||||
enabledOutSegments={enabledOutSegments}
|
||||
exportConfirmEnabled={exportConfirmEnabled}
|
||||
toggleExportConfirmEnabled={toggleExportConfirmEnabled}
|
||||
simpleMode={simpleMode}
|
||||
/>
|
||||
</div>
|
||||
<BottomMenu
|
||||
zoom={zoom}
|
||||
setZoom={setZoom}
|
||||
invertCutSegments={invertCutSegments}
|
||||
setInvertCutSegments={setInvertCutSegments}
|
||||
toggleComfortZoom={toggleComfortZoom}
|
||||
simpleMode={simpleMode}
|
||||
toggleSimpleMode={toggleSimpleMode}
|
||||
hasVideo={hasVideo}
|
||||
isRotationSet={isRotationSet}
|
||||
rotation={rotation}
|
||||
areWeCutting={areWeCutting}
|
||||
autoMerge={autoMerge}
|
||||
increaseRotation={increaseRotation}
|
||||
cleanupFiles={cleanupFiles}
|
||||
renderCaptureFormatButton={renderCaptureFormatButton}
|
||||
capture={capture}
|
||||
onExportPress={onExportPress}
|
||||
enabledOutSegments={enabledOutSegments}
|
||||
exportConfirmEnabled={exportConfirmEnabled}
|
||||
toggleExportConfirmEnabled={toggleExportConfirmEnabled}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<SideSheet
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
import React, { memo, useCallback } from 'react';
|
||||
import { Select } from 'evergreen-ui';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaYinYang } from 'react-icons/fa';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import SimpleModeButton from './components/SimpleModeButton';
|
||||
import { withBlur, toast } from './util';
|
||||
|
||||
const isDev = window.require('electron-is-dev');
|
||||
const start = new Date().getTime();
|
||||
const zoomOptions = Array(13).fill().map((unused, z) => 2 ** z);
|
||||
|
||||
const BottomLeftMenu = memo(({ zoom, setZoom, invertCutSegments, setInvertCutSegments, toggleComfortZoom, simpleMode, toggleSimpleMode }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onYinYangClick = useCallback(() => {
|
||||
setInvertCutSegments(v => {
|
||||
const newVal = !v;
|
||||
if (newVal) toast.fire({ title: t('When you export, selected segments on the timeline will be REMOVED - the surrounding areas will be KEPT') });
|
||||
else toast.fire({ title: t('When you export, selected segments on the timeline will be KEPT - the surrounding areas will be REMOVED.') });
|
||||
return newVal;
|
||||
});
|
||||
}, [setInvertCutSegments, t]);
|
||||
|
||||
return (
|
||||
<div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
|
||||
<SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} />
|
||||
|
||||
{simpleMode && <div role="button" onClick={toggleSimpleMode} style={{ marginLeft: 5 }}>{t('Toggle advanced view')}</div>}
|
||||
|
||||
{!simpleMode && (
|
||||
<div style={{ marginLeft: 5 }}>
|
||||
<motion.div
|
||||
animate={{ rotateX: invertCutSegments ? 0 : 180, width: 26, height: 26 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<FaYinYang
|
||||
size={26}
|
||||
role="button"
|
||||
title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
|
||||
onClick={onYinYangClick}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!simpleMode && (
|
||||
<>
|
||||
<div role="button" style={{ marginRight: 5, marginLeft: 10 }} title={t('Zoom')} onClick={toggleComfortZoom}>{Math.floor(zoom)}x</div>
|
||||
|
||||
<Select height={20} style={{ width: 65 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
|
||||
<option key="" value="" disabled>{t('Zoom')}</option>
|
||||
{zoomOptions.map(val => (
|
||||
<option key={val} value={String(val)}>{t('Zoom')} {val}x</option>
|
||||
))}
|
||||
</Select>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ color: 'rgba(255,255,255,0.3)', flexShrink: 1, flexGrow: 0, overflow: 'hidden', margin: '0 10px' }}>{!isDev && new Date().getTime() - start > 2 * 60 * 1000 && ['t', 'u', 'C', 's', 's', 'e', 'l', 's', 's', 'o', 'L'].reverse().join('')}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default BottomLeftMenu;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
import React, { memo, useCallback } from 'react';
|
||||
import { Select } from 'evergreen-ui';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FaYinYang, FaTrashAlt } from 'react-icons/fa';
|
||||
import { MdRotate90DegreesCcw } from 'react-icons/md';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { IoIosCamera } from 'react-icons/io';
|
||||
|
||||
import { primaryTextColor } from './colors';
|
||||
|
||||
import ExportButton from './components/ExportButton';
|
||||
import ToggleExportConfirm from './components/ToggleExportConfirm';
|
||||
|
||||
|
||||
import SimpleModeButton from './components/SimpleModeButton';
|
||||
import { withBlur, toast } from './util';
|
||||
|
||||
const isDev = window.require('electron-is-dev');
|
||||
const start = new Date().getTime();
|
||||
const zoomOptions = Array(13).fill().map((unused, z) => 2 ** z);
|
||||
|
||||
const BottomMenu = memo(({
|
||||
zoom, setZoom, invertCutSegments, setInvertCutSegments, toggleComfortZoom, simpleMode, toggleSimpleMode,
|
||||
isRotationSet, rotation, areWeCutting, increaseRotation, cleanupFiles, renderCaptureFormatButton,
|
||||
capture, onExportPress, enabledOutSegments, hasVideo, autoMerge, exportConfirmEnabled, toggleExportConfirmEnabled,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onYinYangClick = useCallback(() => {
|
||||
setInvertCutSegments(v => {
|
||||
const newVal = !v;
|
||||
if (newVal) toast.fire({ title: t('When you export, selected segments on the timeline will be REMOVED - the surrounding areas will be KEPT') });
|
||||
else toast.fire({ title: t('When you export, selected segments on the timeline will be KEPT - the surrounding areas will be REMOVED.') });
|
||||
return newVal;
|
||||
});
|
||||
}, [setInvertCutSegments, t]);
|
||||
|
||||
const rotationStr = `${rotation}°`;
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
|
||||
<SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} />
|
||||
|
||||
{simpleMode && <div role="button" onClick={toggleSimpleMode} style={{ marginLeft: 5 }}>{t('Toggle advanced view')}</div>}
|
||||
|
||||
{!simpleMode && (
|
||||
<div style={{ marginLeft: 5 }}>
|
||||
<motion.div
|
||||
style={{ width: 26, height: 26 }}
|
||||
animate={{ rotateX: invertCutSegments ? 0 : 180 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<FaYinYang
|
||||
size={26}
|
||||
role="button"
|
||||
title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
|
||||
onClick={onYinYangClick}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!simpleMode && (
|
||||
<>
|
||||
<div role="button" style={{ marginRight: 5, marginLeft: 10 }} title={t('Zoom')} onClick={toggleComfortZoom}>{Math.floor(zoom)}x</div>
|
||||
|
||||
<Select height={20} style={{ width: 65 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title={t('Zoom')} onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
|
||||
<option key="" value="" disabled>{t('Zoom')}</option>
|
||||
{zoomOptions.map(val => (
|
||||
<option key={val} value={String(val)}>{t('Zoom')} {val}x</option>
|
||||
))}
|
||||
</Select>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ color: 'rgba(255,255,255,0.3)', flexShrink: 1, flexGrow: 0, overflow: 'hidden', margin: '0 10px' }}>{!isDev && new Date().getTime() - start > 2 * 60 * 1000 && ['t', 'u', 'C', 's', 's', 'e', 'l', 's', 's', 'o', 'L'].reverse().join('')}</div>
|
||||
</div>
|
||||
|
||||
<div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
|
||||
{hasVideo && (
|
||||
<>
|
||||
<span style={{ textAlign: 'right', display: 'inline-block' }}>{isRotationSet && rotationStr}</span>
|
||||
<MdRotate90DegreesCcw
|
||||
size={26}
|
||||
style={{ margin: '0px 5px 0 2px', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
|
||||
title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
|
||||
onClick={increaseRotation}
|
||||
role="button"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!simpleMode && (
|
||||
<FaTrashAlt
|
||||
title={t('Close file and clean up')}
|
||||
style={{ padding: '5px 10px' }}
|
||||
size={16}
|
||||
onClick={cleanupFiles}
|
||||
role="button"
|
||||
/>
|
||||
)}
|
||||
|
||||
{hasVideo && (
|
||||
<>
|
||||
{!simpleMode && renderCaptureFormatButton({ height: 20 })}
|
||||
|
||||
<IoIosCamera
|
||||
style={{ paddingLeft: 5, paddingRight: 15 }}
|
||||
size={25}
|
||||
title={t('Capture frame')}
|
||||
onClick={capture}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!simpleMode && <ToggleExportConfirm style={{ marginRight: 5 }} exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />}
|
||||
|
||||
<ExportButton enabledOutSegments={enabledOutSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default BottomMenu;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import React, { memo } from 'react';
|
||||
import { IoIosCamera } from 'react-icons/io';
|
||||
import { FaTrashAlt } from 'react-icons/fa';
|
||||
import { MdRotate90DegreesCcw } from 'react-icons/md';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { primaryTextColor } from './colors';
|
||||
|
||||
import ExportButton from './components/ExportButton';
|
||||
import ToggleExportConfirm from './components/ToggleExportConfirm';
|
||||
|
||||
|
||||
const BottomRightMenu = memo(({
|
||||
isRotationSet, rotation, areWeCutting, increaseRotation, cleanupFiles, renderCaptureFormatButton,
|
||||
capture, onExportPress, enabledOutSegments, hasVideo, autoMerge, exportConfirmEnabled, toggleExportConfirmEnabled,
|
||||
simpleMode,
|
||||
}) => {
|
||||
const rotationStr = `${rotation}°`;
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
|
||||
{hasVideo && (
|
||||
<>
|
||||
<span style={{ textAlign: 'right', display: 'inline-block' }}>{isRotationSet && rotationStr}</span>
|
||||
<MdRotate90DegreesCcw
|
||||
size={26}
|
||||
style={{ margin: '0px 5px 0 2px', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
|
||||
title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
|
||||
onClick={increaseRotation}
|
||||
role="button"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!simpleMode && (
|
||||
<FaTrashAlt
|
||||
title={t('Close file and clean up')}
|
||||
style={{ padding: '5px 10px' }}
|
||||
size={16}
|
||||
onClick={cleanupFiles}
|
||||
role="button"
|
||||
/>
|
||||
)}
|
||||
|
||||
{hasVideo && (
|
||||
<>
|
||||
{!simpleMode && renderCaptureFormatButton({ height: 20 })}
|
||||
|
||||
<IoIosCamera
|
||||
style={{ paddingLeft: 5, paddingRight: 15 }}
|
||||
size={25}
|
||||
title={t('Capture frame')}
|
||||
onClick={capture}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!simpleMode && <ToggleExportConfirm style={{ marginRight: 5 }} exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />}
|
||||
|
||||
<ExportButton enabledOutSegments={enabledOutSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default BottomRightMenu;
|
||||
Ładowanie…
Reference in New Issue