import React, { useState } from "react"; import { Button, Stack, Text, NumberInput, Select, Divider } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { CompressParameters } from "../../../hooks/tools/compress/useCompressParameters"; interface CompressSettingsProps { parameters: CompressParameters; onParameterChange: (key: keyof CompressParameters, value: any) => void; disabled?: boolean; } const CompressSettings = ({ parameters, onParameterChange, disabled = false }: CompressSettingsProps) => { const { t } = useTranslation(); const [isSliding, setIsSliding] = useState(false); return ( {/* Compression Method */} Compression Method
{/* Quality Adjustment */} {parameters.compressionMethod === 'quality' && ( Compression Level
onParameterChange('compressionLevel', parseInt(e.target.value))} onMouseDown={() => setIsSliding(true)} onMouseUp={() => setIsSliding(false)} onTouchStart={() => setIsSliding(true)} onTouchEnd={() => setIsSliding(false)} disabled={disabled} style={{ width: '100%', height: '6px', borderRadius: '3px', background: `linear-gradient(to right, #228be6 0%, #228be6 ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef 100%)`, outline: 'none', WebkitAppearance: 'none' }} /> {isSliding && (
{parameters.compressionLevel}
)}
Min 1 Max 9
{parameters.compressionLevel <= 3 && "1-3 PDF compression"} {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && "4-6 lite image compression"} {parameters.compressionLevel >= 7 && "7-9 intense image compression Will dramatically reduce image quality"}
)} {/* File Size Input */} {parameters.compressionMethod === 'filesize' && ( Desired File Size
onParameterChange('fileSizeValue', value?.toString() || '')} min={0} disabled={disabled} style={{ flex: 1 }} /> onParameterChange('grayscale', e.target.checked)} disabled={disabled} /> {t("compress.grayscale.label", "Apply Grayscale for compression")} ); }; export default CompressSettings;