lossless-cut/src/RightMenu.jsx

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 ExportButton from './components/ExportButton';


const RightMenu = memo(({
  isRotationSet, rotation, areWeCutting, increaseRotation, deleteSource, renderCaptureFormatButton,
  capture, onExportPress, outSegments, hasVideo, autoMerge,
}) => {
  const rotationStr = `${rotation}°`;

  const { t } = useTranslation();

  return (
    <div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
      {hasVideo && (
        <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"
      />

      {hasVideo && (
        <>
          {renderCaptureFormatButton({ height: 20 })}

          <IoIosCamera
            style={{ paddingLeft: 5, paddingRight: 15 }}
            size={25}
            title={t('Capture frame')}
            onClick={capture}
          />
        </>
      )}

      <ExportButton outSegments={outSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
    </div>
  );
});

export default RightMenu;