mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-03-13 02:18:16 +01:00
Feature/V2/Compress (#3982)
# Description of Changes - Added the compression tool - Slightly adjusted the padding on split, compress and the parent sidebar component so things aren't so smushed - Future work will be to allow multi-select on files and to add further styling to the toolstep / sidebar component --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Ethan <ethan@MacBook-Pro.local> Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
This commit is contained in:
EthanHealy01
GitHub
@@ -1,186 +1,157 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { Button, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Loader, Alert } from "@mantine/core";
|
||||
import { FileWithUrl } from "../types/file";
|
||||
import { fileStorage } from "../services/fileStorage";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
|
||||
export interface CompressProps {
|
||||
files?: FileWithUrl[];
|
||||
setDownloadUrl?: (url: string) => void;
|
||||
setLoading?: (loading: boolean) => void;
|
||||
params?: {
|
||||
compressionLevel: number;
|
||||
grayscale: boolean;
|
||||
removeMetadata: boolean;
|
||||
expectedSize: string;
|
||||
aggressive: boolean;
|
||||
};
|
||||
updateParams?: (newParams: Partial<CompressProps["params"]>) => void;
|
||||
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
|
||||
import OperationButton from "../components/tools/shared/OperationButton";
|
||||
import ErrorNotification from "../components/tools/shared/ErrorNotification";
|
||||
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
|
||||
import ResultsPreview from "../components/tools/shared/ResultsPreview";
|
||||
|
||||
import CompressSettings from "../components/tools/compress/CompressSettings";
|
||||
|
||||
import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
|
||||
import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
|
||||
|
||||
interface CompressProps {
|
||||
selectedFiles?: File[];
|
||||
onPreviewFile?: (file: File | null) => void;
|
||||
}
|
||||
|
||||
const CompressPdfPanel: React.FC<CompressProps> = ({
|
||||
files = [],
|
||||
setDownloadUrl,
|
||||
setLoading,
|
||||
params = {
|
||||
compressionLevel: 5,
|
||||
grayscale: false,
|
||||
removeMetadata: false,
|
||||
expectedSize: "",
|
||||
aggressive: false,
|
||||
},
|
||||
updateParams,
|
||||
}) => {
|
||||
const Compress = ({ selectedFiles = [], onPreviewFile }: CompressProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { setCurrentMode } = useFileContext();
|
||||
|
||||
const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
|
||||
const [localLoading, setLocalLoading] = useState<boolean>(false);
|
||||
const compressParams = useCompressParameters();
|
||||
const compressOperation = useCompressOperation();
|
||||
|
||||
// Endpoint validation
|
||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
|
||||
|
||||
const {
|
||||
compressionLevel,
|
||||
grayscale,
|
||||
removeMetadata,
|
||||
expectedSize,
|
||||
aggressive,
|
||||
} = params;
|
||||
|
||||
// Update selection state if files prop changes
|
||||
React.useEffect(() => {
|
||||
setSelected(files.map(() => false));
|
||||
}, [files]);
|
||||
|
||||
const handleCheckbox = (idx: number) => {
|
||||
setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
|
||||
};
|
||||
useEffect(() => {
|
||||
compressOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
}, [compressParams.parameters, selectedFiles]);
|
||||
|
||||
const handleCompress = async () => {
|
||||
const selectedFiles = files.filter((_, i) => selected[i]);
|
||||
if (selectedFiles.length === 0) return;
|
||||
setLocalLoading(true);
|
||||
setLoading?.(true);
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
// Handle IndexedDB files
|
||||
for (const file of selectedFiles) {
|
||||
if (!file.id) {
|
||||
continue; // Skip files without an id
|
||||
}
|
||||
const storedFile = await fileStorage.getFile(file.id);
|
||||
if (storedFile) {
|
||||
const blob = new Blob([storedFile.data], { type: storedFile.type });
|
||||
const actualFile = new File([blob], storedFile.name, {
|
||||
type: storedFile.type,
|
||||
lastModified: storedFile.lastModified
|
||||
});
|
||||
formData.append("fileInput", actualFile);
|
||||
}
|
||||
}
|
||||
|
||||
formData.append("compressionLevel", compressionLevel.toString());
|
||||
formData.append("grayscale", grayscale.toString());
|
||||
formData.append("removeMetadata", removeMetadata.toString());
|
||||
formData.append("aggressive", aggressive.toString());
|
||||
if (expectedSize) formData.append("expectedSize", expectedSize);
|
||||
|
||||
const res = await fetch("/api/v1/general/compress-pdf", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const blob = await res.blob();
|
||||
setDownloadUrl?.(URL.createObjectURL(blob));
|
||||
} catch (error) {
|
||||
console.error('Compression failed:', error);
|
||||
} finally {
|
||||
setLocalLoading(false);
|
||||
setLoading?.(false);
|
||||
}
|
||||
await compressOperation.executeOperation(
|
||||
compressParams.parameters,
|
||||
selectedFiles
|
||||
);
|
||||
};
|
||||
|
||||
if (endpointLoading) {
|
||||
return (
|
||||
<Stack align="center" justify="center" h={200}>
|
||||
<Loader size="md" />
|
||||
<Text size="sm" c="dimmed">{t("loading", "Loading...")}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
const handleThumbnailClick = (file: File) => {
|
||||
onPreviewFile?.(file);
|
||||
sessionStorage.setItem('previousMode', 'compress');
|
||||
setCurrentMode('viewer');
|
||||
};
|
||||
|
||||
if (endpointEnabled === false) {
|
||||
return (
|
||||
<Stack align="center" justify="center" h={200}>
|
||||
<Alert color="red" title={t("error._value", "Error")} variant="light">
|
||||
{t("endpointDisabled", "This feature is currently disabled.")}
|
||||
</Alert>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
const handleSettingsReset = () => {
|
||||
compressOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
setCurrentMode('compress');
|
||||
};
|
||||
|
||||
const hasFiles = selectedFiles.length > 0;
|
||||
const hasResults = compressOperation.downloadUrl !== null;
|
||||
const filesCollapsed = hasFiles;
|
||||
const settingsCollapsed = hasResults;
|
||||
|
||||
const previewResults = useMemo(() =>
|
||||
compressOperation.files?.map((file, index) => ({
|
||||
file,
|
||||
thumbnail: compressOperation.thumbnails[index]
|
||||
})) || [],
|
||||
[compressOperation.files, compressOperation.thumbnails]
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text fw={500} mb={4}>{t("multiPdfDropPrompt", "Select files to compress:")}</Text>
|
||||
<Stack gap={4}>
|
||||
{files.length === 0 && <Text c="dimmed" size="sm">{t("noFileSelected")}</Text>}
|
||||
{files.map((file, idx) => (
|
||||
<Checkbox
|
||||
key={file.name + idx}
|
||||
label={file.name}
|
||||
checked={selected[idx] || false}
|
||||
onChange={() => handleCheckbox(idx)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
<Stack gap={4} mb={14}>
|
||||
<Text size="sm" style={{ minWidth: 140 }}>{t("compress.selectText.2", "Compression Level")}</Text>
|
||||
<Slider
|
||||
min={1}
|
||||
max={9}
|
||||
step={1}
|
||||
value={compressionLevel}
|
||||
onChange={(value) => updateParams?.({ compressionLevel: value })}
|
||||
marks={[
|
||||
{ value: 1, label: "1" },
|
||||
{ value: 5, label: "5" },
|
||||
{ value: 9, label: "9" },
|
||||
]}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
</Stack>
|
||||
<Checkbox
|
||||
label={t("compress.grayscale.label", "Convert images to grayscale")}
|
||||
checked={grayscale}
|
||||
onChange={e => updateParams?.({ grayscale: e.currentTarget.checked })}
|
||||
/>
|
||||
<Checkbox
|
||||
label={t("removeMetadata.submit", "Remove PDF metadata")}
|
||||
checked={removeMetadata}
|
||||
onChange={e => updateParams?.({ removeMetadata: e.currentTarget.checked })}
|
||||
/>
|
||||
<Checkbox
|
||||
label={t("compress.selectText.1.1", "Aggressive compression (may reduce quality)")}
|
||||
checked={aggressive}
|
||||
onChange={e => updateParams?.({ aggressive: e.currentTarget.checked })}
|
||||
/>
|
||||
<TextInput
|
||||
label={t("compress.selectText.5", "Expected output size")}
|
||||
placeholder={t("compress.selectText.5", "e.g. 25MB, 10.8MB, 25KB")}
|
||||
value={expectedSize}
|
||||
onChange={e => updateParams?.({ expectedSize: e.currentTarget.value })}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleCompress}
|
||||
loading={localLoading}
|
||||
disabled={selected.every(v => !v)}
|
||||
fullWidth
|
||||
mt="md"
|
||||
<ToolStepContainer>
|
||||
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title="Files"
|
||||
isVisible={true}
|
||||
isCollapsed={filesCollapsed}
|
||||
isCompleted={filesCollapsed}
|
||||
completedMessage={hasFiles ? `Selected: ${selectedFiles[0]?.name}` : undefined}
|
||||
>
|
||||
{t("compress.submit", "Compress")} {t("pdfPrompt", "PDF")}{selected.filter(Boolean).length > 1 ? "s" : ""}
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
<FileStatusIndicator
|
||||
selectedFiles={selectedFiles}
|
||||
placeholder="Select a PDF file in the main view to get started"
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
export default CompressPdfPanel;
|
||||
{/* Settings Step */}
|
||||
<ToolStep
|
||||
title="Settings"
|
||||
isVisible={hasFiles}
|
||||
isCollapsed={settingsCollapsed}
|
||||
isCompleted={settingsCollapsed}
|
||||
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
|
||||
completedMessage={settingsCollapsed ? "Compression completed" : undefined}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<CompressSettings
|
||||
parameters={compressParams.parameters}
|
||||
onParameterChange={compressParams.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
|
||||
<OperationButton
|
||||
onClick={handleCompress}
|
||||
isLoading={compressOperation.isLoading}
|
||||
disabled={!compressParams.validateParameters() || !hasFiles || !endpointEnabled}
|
||||
loadingText={t("loading")}
|
||||
submitText="Compress and Review"
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
|
||||
{/* Results Step */}
|
||||
<ToolStep
|
||||
title="Results"
|
||||
isVisible={hasResults}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
{compressOperation.status && (
|
||||
<Text size="sm" c="dimmed">{compressOperation.status}</Text>
|
||||
)}
|
||||
|
||||
<ErrorNotification
|
||||
error={compressOperation.errorMessage}
|
||||
onClose={compressOperation.clearError}
|
||||
/>
|
||||
|
||||
{compressOperation.downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={compressOperation.downloadUrl}
|
||||
download={compressOperation.downloadFilename}
|
||||
leftSection={<DownloadIcon />}
|
||||
color="green"
|
||||
fullWidth
|
||||
mb="md"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<ResultsPreview
|
||||
files={previewResults}
|
||||
onFileClick={handleThumbnailClick}
|
||||
isGeneratingThumbnails={compressOperation.isGeneratingThumbnails}
|
||||
title="Compression Results"
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
</Stack>
|
||||
</ToolStepContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Compress;
|
||||
|
||||
@@ -73,7 +73,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
|
||||
|
||||
return (
|
||||
<ToolStepContainer>
|
||||
<Stack gap="md" h="100%" p="md" style={{ overflow: 'auto' }}>
|
||||
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title="Files"
|
||||
@@ -97,7 +97,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
|
||||
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
|
||||
completedMessage={settingsCollapsed ? "Split completed" : undefined}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Stack gap="sm">
|
||||
<SplitSettings
|
||||
mode={splitParams.mode}
|
||||
onModeChange={splitParams.setMode}
|
||||
@@ -123,7 +123,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
|
||||
title="Results"
|
||||
isVisible={hasResults}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Stack gap="sm">
|
||||
{splitOperation.status && (
|
||||
<Text size="sm" c="dimmed">{splitOperation.status}</Text>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user