242 lines
8.0 KiB
TypeScript
242 lines
8.0 KiB
TypeScript
import React, { ReactElement, useCallback, useEffect, useState } from "react";
|
|
import { DnD } from "../../shared/Draggable/DnD";
|
|
import { isEmpty } from "lodash";
|
|
import SlidingPane from "react-sliding-pane";
|
|
import { Canvas } from "../../shared/Canvas";
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
import {
|
|
IMAGETRANSFORMATION_SERVICE_BASE_URI,
|
|
LIBRARY_SERVICE_BASE_URI,
|
|
LIBRARY_SERVICE_HOST,
|
|
} from "../../../constants/endpoints";
|
|
import { useStore } from "../../../store";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
|
|
|
|
export const ArchiveOperations = (props): ReactElement => {
|
|
const { data } = props;
|
|
|
|
const { socketIOInstance } = useStore(
|
|
useShallow((state) => ({
|
|
socketIOInstance: state.socketIOInstance,
|
|
})),
|
|
);
|
|
const queryClient = useQueryClient();
|
|
// sliding panel config
|
|
const [visible, setVisible] = useState(false);
|
|
const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
|
|
// current image
|
|
const [currentImage, setCurrentImage] = useState([]);
|
|
const [uncompressedArchive, setUncompressedArchive] = useState([]);
|
|
const [imageAnalysisResult, setImageAnalysisResult] = useState({});
|
|
const constructImagePaths = (data): Array<string> => {
|
|
return data?.map((path: string) =>
|
|
escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
|
|
);
|
|
};
|
|
|
|
// Listen to the uncompression complete event and orchestrate the final payload
|
|
socketIOInstance.on("LS_UNCOMPRESSION_JOB_COMPLETE", (data) => {
|
|
setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
|
|
});
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
if (data.rawFileDetails?.archive?.uncompressed) {
|
|
const fetchUncompressedArchive = async () => {
|
|
try {
|
|
const response = await axios({
|
|
url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
|
|
method: "POST",
|
|
data: {
|
|
basePathToWalk: data?.rawFileDetails?.archive?.expandedPath,
|
|
extensions: [".jpg", ".jpeg", ".png", ".bmp", "gif"],
|
|
},
|
|
transformResponse: async (responseData) => {
|
|
const parsedData = JSON.parse(responseData);
|
|
const paths = parsedData.map((pathObject) => {
|
|
return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
|
|
});
|
|
const uncompressedArchive = constructImagePaths(paths);
|
|
|
|
if (isMounted) {
|
|
setUncompressedArchive(uncompressedArchive);
|
|
}
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("Error fetching uncompressed archive:", error);
|
|
// Handle error if necessary
|
|
}
|
|
};
|
|
fetchUncompressedArchive();
|
|
}
|
|
|
|
// Cleanup function
|
|
return () => {
|
|
isMounted = false;
|
|
setUncompressedArchive([]);
|
|
};
|
|
}, [data]);
|
|
|
|
const analyzeImage = async (imageFilePath: string) => {
|
|
const response = await axios({
|
|
url: `${IMAGETRANSFORMATION_SERVICE_BASE_URI}/analyze`,
|
|
method: "POST",
|
|
data: {
|
|
imageFilePath,
|
|
},
|
|
});
|
|
setImageAnalysisResult(response?.data);
|
|
queryClient.invalidateQueries({ queryKey: ["uncompressedArchive"] });
|
|
};
|
|
|
|
const {
|
|
data: uncompressionResult,
|
|
refetch,
|
|
isLoading,
|
|
isSuccess,
|
|
} = useQuery({
|
|
queryFn: async () =>
|
|
await axios({
|
|
method: "POST",
|
|
url: `http://localhost:3000/api/library/uncompressFullArchive`,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
data: {
|
|
filePath: data.rawFileDetails.filePath,
|
|
comicObjectId: data._id,
|
|
options: {
|
|
type: "full",
|
|
purpose: "analysis",
|
|
imageResizeOptions: {
|
|
baseWidth: 275,
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
queryKey: ["uncompressedArchive"],
|
|
enabled: false,
|
|
});
|
|
|
|
if (isSuccess) {
|
|
queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
|
|
}
|
|
|
|
// sliding panel init
|
|
const contentForSlidingPanel = {
|
|
imageAnalysis: {
|
|
content: () => {
|
|
return (
|
|
<div>
|
|
<pre className="text-sm">{currentImage}</pre>
|
|
{!isEmpty(imageAnalysisResult) ? (
|
|
<pre className="p-2 mt-3">
|
|
<Canvas data={imageAnalysisResult} />
|
|
</pre>
|
|
) : null}
|
|
<pre className="font-hasklig mt-3 text-sm">
|
|
{JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
|
|
</pre>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
};
|
|
|
|
// sliding panel handlers
|
|
const openImageAnalysisPanel = useCallback((imageFilePath) => {
|
|
setSlidingPanelContentId("imageAnalysis");
|
|
analyzeImage(imageFilePath);
|
|
setCurrentImage(imageFilePath);
|
|
setVisible(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div key={2}>
|
|
<article
|
|
role="alert"
|
|
className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
|
|
>
|
|
<div>
|
|
<p>You can perform several operations on your comic book archive.</p>
|
|
<p>
|
|
Uncompressing, re-organizing the individual pages, then
|
|
re-compressing to a different format, for example.
|
|
</p>
|
|
<p>You can also analyze color histograms of pages.</p>
|
|
</div>
|
|
</article>
|
|
<div className="mt-5">
|
|
{data.rawFileDetails.archive?.uncompressed ? (
|
|
<article
|
|
role="alert"
|
|
className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
|
|
>
|
|
This issue is already uncompressed at:
|
|
<p>
|
|
<code className="font-hasklig text-sm">
|
|
{data.rawFileDetails.archive.expandedPath}
|
|
</code>
|
|
<div className="">It has {uncompressedArchive?.length} pages</div>
|
|
</p>
|
|
</article>
|
|
) : null}
|
|
|
|
<div className="flex flex-row gap-2 mt-4">
|
|
{!data.rawFileDetails?.archive?.uncompressed ? (
|
|
<button
|
|
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
|
onClick={() => refetch()}
|
|
>
|
|
<span className="text-md">Unpack Comic Archive</span>
|
|
<span className="w-6 h-6">
|
|
<i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
|
|
</span>
|
|
</button>
|
|
) : null}
|
|
|
|
{!isEmpty(uncompressedArchive) ? (
|
|
<div>
|
|
<button
|
|
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
|
onClick={() => refetch()}
|
|
>
|
|
<span className="text-md">Convert to .cbz</span>
|
|
<span className="w-6 h-6">
|
|
<i className="h-6 w-6 icon-[solar--zip-file-bold-duotone]"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="mt-10">
|
|
{!isEmpty(uncompressedArchive) ? (
|
|
<DnD
|
|
data={uncompressedArchive}
|
|
onClickHandler={openImageAnalysisPanel}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<SlidingPane
|
|
isOpen={visible}
|
|
onRequestClose={() => setVisible(false)}
|
|
title={"Image Analysis"}
|
|
width={"600px"}
|
|
>
|
|
{slidingPanelContentId !== "" &&
|
|
contentForSlidingPanel[slidingPanelContentId].content()}
|
|
</SlidingPane>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArchiveOperations;
|