lossless-cut/src/RightMenu.jsx

67 wiersze
2.0 KiB
JavaScript

import React, { memo } from 'react';
import { IoIosCamera } from 'react-icons/io';
import { FaTrashAlt, FaFileExport } from 'react-icons/fa';
import { MdRotate90DegreesCcw } from 'react-icons/md';
import { FiScissors } from 'react-icons/fi';
import { useTranslation } from 'react-i18next';
import { primaryColor } from './colors';
const RightMenu = memo(({
isRotationSet, rotation, areWeCutting, increaseRotation, deleteSource, renderCaptureFormatButton,
capture, cutClick, multipleCutSegments,
}) => {
const rotationStr = `${rotation}°`;
const CutIcon = areWeCutting ? FiScissors : FaFileExport;
const { t } = useTranslation();
return (
<div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
<div>
<span style={{ width: 40, textAlign: 'right', display: 'inline-block' }}>{isRotationSet && rotationStr}</span>
<MdRotate90DegreesCcw
size={26}
style={{ margin: '0 5px', verticalAlign: 'middle' }}
title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
onClick={increaseRotation}
role="button"
/>
</div>
<FaTrashAlt
title={t('Delete source file')}
style={{ padding: '5px 10px' }}
size={16}
onClick={deleteSource}
role="button"
/>
{renderCaptureFormatButton({ height: 20 })}
<IoIosCamera
style={{ paddingLeft: 5, paddingRight: 15 }}
size={25}
title={t('Capture frame')}
onClick={capture}
/>
<span
style={{ background: primaryColor, borderRadius: 5, padding: '3px 7px', fontSize: 14 }}
onClick={cutClick}
title={multipleCutSegments ? t('Export all segments') : t('Export selection')}
role="button"
>
<CutIcon
style={{ verticalAlign: 'middle', marginRight: 3 }}
size={16}
/>
{t('Export')}
</span>
</div>
);
});
export default RightMenu;