aiden
/
lossless-cut
mirror of https://github.com/mifi/lossless-cut
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve ui

Browse Source
exiftool-integration
Mikael Finstad 4 years ago
parent 4b1fab189b
commit b698b5f445
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 76 additions and 75 deletions
Show Stats Download Patch File Download Diff File

149
src/BottomMenu.jsx
Unescape Escape View File

@ -38,86 +38,87 @@ const BottomMenu = memo(({
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}
<div
className="no-user-select"
style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '3px 4px' }}
>
<SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} style={{ flexShrink: 0 }} />
{simpleMode && <div role="button" onClick={toggleSimpleMode} style={{ marginLeft: 5, fontSize: '90%' }}>{t('Toggle advanced view')}</div>}
{!simpleMode && (
<div style={{ marginLeft: 5 }}>
<motion.div
style={{ width: 24, height: 24 }}
animate={{ rotateX: invertCutSegments ? 0 : 180 }}
transition={{ duration: 0.3 }}
>
<FaYinYang
size={24}
role="button"
title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
onClick={onYinYangClick}
/>
</>
)}
{!simpleMode && (
<FaTrashAlt
title={t('Close file and clean up')}
style={{ padding: '5px 10px' }}
size={16}
onClick={cleanupFiles}
</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={{ flexBasis: 85, flexGrow: 0 }} 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 style={{ flexGrow: 1 }} />
{hasVideo && (
<>
<span style={{ textAlign: 'right', display: 'inline-block' }}>{isRotationSet && rotationStr}</span>
<MdRotate90DegreesCcw
size={24}
style={{ margin: '0px 0px 0 2px', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
onClick={increaseRotation}
role="button"
/>
)}
{hasVideo && (
<>
{!simpleMode && renderCaptureFormatButton({ height: 20 })}
<IoIosCamera
style={{ paddingLeft: 5, paddingRight: 15 }}
size={25}
title={t('Capture frame')}
onClick={capture}
/>
</>
)}
</>
)}
{!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} />}
{!simpleMode && <ToggleExportConfirm style={{ marginRight: 5 }} exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />}
<ExportButton enabledOutSegments={enabledOutSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
</div>
<ExportButton enabledOutSegments={enabledOutSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
</div>
);
});

2
src/components/ExportButton.jsx
Unescape Escape View File

@ -22,7 +22,7 @@ const ExportButton = memo(({ enabledOutSegments, areWeCutting, autoMerge, onClic
return (
<div
style={{ cursor: 'pointer', background: primaryColor, borderRadius: size * 5, paddingTop: size * 1, paddingBottom: size * 2.5, paddingLeft: size * 7, paddingRight: size * 7, fontSize: size * 13 }}
style={{ cursor: 'pointer', background: primaryColor, borderRadius: size * 5, paddingTop: size * 1, paddingBottom: size * 2.5, paddingLeft: size * 7, paddingRight: size * 7, fontSize: size * 13, whiteSpace: 'nowrap' }}
onClick={onClick}
title={exportButtonTitle}
role="button"

Write Preview
Loading…
Cancel
Save