121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import React, { ReactElement, useCallback, useState } from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { DnD } from "../../DnD";
|
|
import { isEmpty } from "lodash";
|
|
import Sticky from "react-stickynode";
|
|
import SlidingPane from "react-sliding-pane";
|
|
import { extractComicArchive } from "../../../actions/fileops.actions";
|
|
import { analyzeImage } from "../../../actions/fileops.actions";
|
|
|
|
export const ArchiveOperations = (props): ReactElement => {
|
|
const { data } = props;
|
|
const isComicBookExtractionInProgress = useSelector(
|
|
(state: RootState) => state.fileOps.comicBookExtractionInProgress,
|
|
);
|
|
const extractedComicBookArchive = useSelector(
|
|
(state: RootState) => state.fileOps.extractedComicBookArchive,
|
|
);
|
|
|
|
const imageAnalysisResult = useSelector(
|
|
(state: RootState) => state.fileOps.imageAnalysisResults,
|
|
);
|
|
|
|
const dispatch = useDispatch();
|
|
const unpackComicArchive = useCallback(() => {
|
|
dispatch(
|
|
extractComicArchive(data.rawFileDetails.filePath, {
|
|
extractTarget: "book",
|
|
targetExtractionFolder:
|
|
"./userdata/expanded/" + data.rawFileDetails.name,
|
|
extractionMode: "all",
|
|
}),
|
|
);
|
|
}, [dispatch, data]);
|
|
|
|
// sliding panel config
|
|
const [visible, setVisible] = useState(false);
|
|
const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
|
|
// current image
|
|
const [currentImage, setCurrentImage] = useState([]);
|
|
|
|
// sliding panel init
|
|
const contentForSlidingPanel = {
|
|
imageAnalysis: {
|
|
content: () => {
|
|
return (
|
|
<div>
|
|
<pre>{currentImage}</pre>
|
|
<pre className="is-size-7">
|
|
{JSON.stringify(imageAnalysisResult, null, 2)}
|
|
</pre>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
};
|
|
|
|
// sliding panel handlers
|
|
const openImageAnalysisPanel = useCallback((imageFilePath) => {
|
|
setSlidingPanelContentId("imageAnalysis");
|
|
dispatch(analyzeImage(imageFilePath));
|
|
setCurrentImage(imageFilePath);
|
|
setVisible(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div key={2}>
|
|
<button
|
|
className={
|
|
isComicBookExtractionInProgress
|
|
? "button is-loading is-warning"
|
|
: "button is-warning"
|
|
}
|
|
onClick={unpackComicArchive}
|
|
>
|
|
<span className="icon is-small">
|
|
<i className="fa-solid fa-box-open"></i>
|
|
</span>
|
|
<span>Unpack comic archive</span>
|
|
</button>
|
|
<div className="columns">
|
|
<div className="mt-5">
|
|
{!isEmpty(extractedComicBookArchive) ? (
|
|
<DnD
|
|
data={extractedComicBookArchive}
|
|
onClickHandler={openImageAnalysisPanel}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{!isEmpty(extractedComicBookArchive) ? (
|
|
<div className="column mt-5">
|
|
<Sticky enabled={true} top={70} bottomBoundary={3000}>
|
|
<div className="card">
|
|
<div className="card-content">
|
|
{extractedComicBookArchive.length} pages
|
|
<button className="button is-small is-light is-primary is-outlined">
|
|
<span className="icon is-small">
|
|
<i className="fa-solid fa-compress"></i>
|
|
</span>
|
|
<span>Convert to CBZ</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Sticky>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<SlidingPane
|
|
isOpen={visible}
|
|
onRequestClose={() => setVisible(false)}
|
|
title={"Image Analysis"}
|
|
width={"600px"}
|
|
>
|
|
{slidingPanelContentId !== "" &&
|
|
contentForSlidingPanel[slidingPanelContentId].content()}
|
|
</SlidingPane>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArchiveOperations;
|