2024-02-06 10:58:56 +00:00
8 changed files with 11097 additions and 89 deletions
--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
    "react-select": "^5.8.0",
    "react-select-async-paginate": "^0.7.2",
    "react-sliding-pane": "^7.1.0",
-    "react-stickynode": "^4.1.0",
    "react-textarea-autosize": "^8.3.4",
    "reapop": "^4.2.1",
    "slick-carousel": "^1.8.1",
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -63,19 +63,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const [modalIsOpen, setIsOpen] = useState(false);
  const [comicVineMatches, setComicVineMatches] = useState([]);

-  //   const comicVineSearchResults = useSelector(
-  //     (state: RootState) => state.comicInfo.searchResults,
-  //   );
-  //   const comicVineSearchQueryObject = useSelector(
-  //     (state: RootState) => state.comicInfo.searchQuery,
-  //   );
-  //   const comicVineAPICallProgress = useSelector(
-  //     (state: RootState) => state.comicInfo.inProgress,
-  //   );
-  //
-  //   const extractedComicBook = useSelector(
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.reading,
-  //   );
  const { comicObjectId } = useParams<{ comicObjectId: string }>();

  // const dispatch = useDispatch();
@@ -288,7 +275,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {

  // check for the availability of rawFileDetails
  const areRawFileDetailsAvailable =
-    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);

  const { issueName, url } = determineCoverFile({
    rawFileDetails,
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -9,7 +9,7 @@ export const TabControls = (props): ReactElement => {
  const [active, setActive] = useState(filteredTabs[0].id);
  useEffect(() => {
    setActive(filteredTabs[0].id);
-  }, []);
+  }, [filteredTabs]);

  return (
    <>
--- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
+++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
@@ -1,51 +1,112 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { DnD } from "../../shared/Draggable/DnD";
-import { isEmpty } from "lodash";
-import Sticky from "react-stickynode";
+import { isEmpty, isUndefined } from "lodash";
 import SlidingPane from "react-sliding-pane";
-import { analyzeImage } from "../../../actions/fileops.actions";
 import { Canvas } from "../../shared/Canvas";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { LIBRARY_SERVICE_HOST } from "../../../constants/endpoints";
+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";

 export const ArchiveOperations = (props): ReactElement => {
  const { data } = props;
-  //   const isComicBookExtractionInProgress = useSelector(
-  //     (state: RootState) => state.fileOps.comicBookExtractionInProgress,
-  //   );
-  //   const extractedComicBookArchive = useSelector(
-  //     (state: RootState) => state.fileOps.extractedComicBookArchive.analysis,
-  //   );
-  //
-  //   const imageAnalysisResult = useSelector((state: RootState) => {
-  //     return state.fileOps.imageAnalysisResults;
-  //   });
-
+  const queryClient = useQueryClient();
+  const { socketIOInstance } = useStore(
+    useShallow((state) => ({
+      socketIOInstance: state.socketIOInstance,
+    })),
+  );
  // 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?.data.map((path: string) => `${LIBRARY_SERVICE_HOST}/${path}`);
+    return data?.map((path: string) =>
+      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: uncompressedArchive,
+    data: uncompressionResult,
    refetch,
    isLoading,
  } = useQuery({
    queryFn: async () =>
      await axios({
        method: "POST",
-        url: `http://localhost:3000/api/jobqueue/uncompressFullArchive`,
+        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",
@@ -55,39 +116,40 @@ export const ArchiveOperations = (props): ReactElement => {
          },
        },
      }),
-    queryKey: [""],
-    select: constructImagePaths,
+    queryKey: ["uncompressedArchive"],
    enabled: false,
  });
+
  // sliding panel init
  const contentForSlidingPanel = {
-    // imageAnalysis: {
-    //   content: () => {
-    //     return (
-    //       <div>
-    //         <pre className="is-size-7">{currentImage}</pre>
-    //         {!isEmpty(imageAnalysisResult) ? (
-    //           <pre className="is-size-7 p-2 mt-3">
-    //             <Canvas data={imageAnalysisResult} />
-    //           </pre>
-    //         ) : null}
-    //         <pre className="is-size-7 mt-3">
-    //           {JSON.stringify(imageAnalysisResult.analyzedData, null, 2)}
-    //         </pre>
-    //       </div>
-    //     );
-    //   },
-    // },
+    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");
-    // dispatch(analyzeImage(imageFilePath));
+    analyzeImage(imageFilePath);
    setCurrentImage(imageFilePath);
    setVisible(true);
  }, []);

+  console.log(uncompressedArchive);
  return (
    <div key={2}>
      <article
@@ -104,41 +166,61 @@ export const ArchiveOperations = (props): ReactElement => {
        </div>
      </article>
      <div className="mt-5">
-        <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>
+        {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">
+          <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>
+
+          {!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 className="columns">
+      <div>
        <div className="mt-5">
          {!isEmpty(uncompressedArchive) ? (
            <DnD
              data={uncompressedArchive}
              onClickHandler={openImageAnalysisPanel}
            />
-          ) : null}
+          ) : (
+            "asdas"
+          )}
        </div>
-        {!isEmpty(uncompressedArchive) ? (
-          <div>
-            <span className="has-text-size-4">
-              {uncompressedArchive?.length} pages
-            </span>
-            <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>
-        ) : null}
      </div>
-      {/* <SlidingPane
+      <SlidingPane
        isOpen={visible}
        onRequestClose={() => setVisible(false)}
        title={"Image Analysis"}
@@ -146,7 +228,7 @@ export const ArchiveOperations = (props): ReactElement => {
      >
        {slidingPanelContentId !== "" &&
          contentForSlidingPanel[slidingPanelContentId].content()}
-      </SlidingPane> */}
+      </SlidingPane>
    </div>
  );
 };
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -150,6 +150,14 @@ export const Dashboard = (): ReactElement => {
                          {rawFileDetails.extension}
                        </span>
                      </span>
+                      {/* Uncompressed status  */}
+                      {rawFileDetails.archive.uncompressed ? (
+                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                          <span className="pr-1 pt-1">
+                            <i className="icon-[solar--bookmark-bold-duotone] w-4 h-4"></i>
+                          </span>
+                        </span>
+                      ) : null}
                    </dd>
                  </div>

--- a/src/client/components/shared/Canvas.tsx
+++ b/src/client/components/shared/Canvas.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useRef } from "react";

-export const Canvas = (data) => {
-  const { colorHistogramData } = data.data;
-  console.log(data);
+export const Canvas = ({ data }) => {
+  const { colorHistogramData } = data;
  const width = 559;
  const height = 200;
  const pixelRatio = window.devicePixelRatio;
@@ -10,7 +9,11 @@ export const Canvas = (data) => {
  const canvas = useRef(null);

  useEffect(() => {
-    const context = canvas.current.getContext("2d");
+    const context = canvas.current?.getContext("2d");
+    if (!context) {
+      return;
+    }
+
    context.scale(pixelRatio, pixelRatio);
    const guideHeight = 8;
    const startY = height - guideHeight;
@@ -46,18 +49,24 @@ export const Canvas = (data) => {
      context.stroke();

      // Guide
-      context.strokeStyle = "rgb(" + i + ", " + i + ", " + i + ")";
+      context.strokeStyle = `rgb(${i}, ${i}, ${i})`;
      context.beginPath();
      context.moveTo(x, startY);
      context.lineTo(x, height);
      context.closePath();
      context.stroke();
    }
-  });
+
+    // Cleanup function
+    return () => {
+      // Perform cleanup actions here
+    };
+  }, [colorHistogramData, pixelRatio]);

  const dw = Math.floor(pixelRatio * width);
  const dh = Math.floor(pixelRatio * height);
  const style = { width, height };
+
  return <canvas ref={canvas} width={dw} height={dh} style={style} />;
 };

--- a/src/client/components/shared/Draggable/DnD.tsx
+++ b/src/client/components/shared/Draggable/DnD.tsx
@@ -21,6 +21,7 @@ import { Cover } from "./Cover";
 import { map } from "lodash";

 export const DnD = (data) => {
+  console.log(data.data);
  const [items, setItems] = useState(data.data);
  const [activeId, setActiveId] = useState(null);
  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
--- a/yarn.lock
+++ b/yarn.lock