📦 Beautified carousel displaying extracted comic book images

package.json

@@ -60,13 +60,14 @@
     "react-masonry-css": "^1.0.16",
     "react-notification-system": "^0.4.0",
     "react-notification-system-redux": "^2.0.1",
+    "react-responsive-carousel": "^3.2.21",
     "react-select": "^4.3.1",
     "react-sliding-pane": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
     "socket.io-client": "^4.1.2",
-    "threetwo-ui-typings": "^1.0.9",
+    "threetwo-ui-typings": "^1.0.10",
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",

src/client/actions/comicinfo.actions.tsx

@@ -1,6 +1,7 @@
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 import qs from "qs";
+import { IExtractionOptions } from "threetwo-ui-typings";
 import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
@@ -8,6 +9,7 @@ import {
   IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED,
   IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
 } from "../constants/action-types";
 import { COMICBOOKINFO_SERVICE_URI } from "../constants/endpoints";
 
@@ -109,3 +111,22 @@ export const applyComicVineMatch =
       IMS_inProgress: false,
     });
   };
+
+export const extractComicArchive =
+  (path: string, options: IExtractionOptions) => async (dispatch) => {
+    const extractedComicBookArchive = await axios({
+      method: "POST",
+      url: "http://localhost:3000/api/import/unrarArchive",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      data: {
+        options,
+        filePath: path,
+      },
+    });
+    dispatch({
+      type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
+      extractedComicBookArchive: extractedComicBookArchive.data,
+    });
+  };

src/client/assets/scss/App.scss

@@ -28,11 +28,11 @@ $border-color: red;
 
 // Dashboard
 .recent-comics-container {
-    display: -webkit-box; /* Not needed if autoprefixing */
+  display: -webkit-box; /* Not needed if autoprefixing */
-    display: -ms-flexbox; /* Not needed if autoprefixing */
+  display: -ms-flexbox; /* Not needed if autoprefixing */
-    display: flex;
+  display: flex;
-    margin-left: -30px; /* gutter size offset */
+  margin-left: -30px; /* gutter size offset */
-    width: auto;
+  width: auto;
 
   .recent-comics-column {
     padding-left: 22px; /* gutter size */
@@ -88,10 +88,9 @@ $border-color: red;
       /* change div to reference your elements you put in <Masonry> */
       margin-bottom: 20px;
     }
-  }  
+  }
 }
 
-
 .min {
   overflow: visible;
   margin: auto;
@@ -281,6 +280,40 @@ $border-color: red;
 }
 
 // Comic Detail
+
+// extracted comic book archive carousel
+.carousel-root {
+  margin: 0 auto;
+  border-radius: 10px;
+  box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
+  max-width: 300px;
+  ul.slider {
+    li.slide {
+      img {
+        border-radius: 10px;
+      }
+    }
+  }
+  .control-next {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  &:hover {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+}
+  .control-prev {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px; 
+  &:hover {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+}
+  
+}
+
+// airdcpp downloads tab
 .tabs {
   .download-icon-labels {
     .downloads-count {
@@ -368,7 +401,7 @@ $border-color: red;
   margin-bottom: 20px;
 }
 
-// 
+//
 // progress
 .progress-indicator-container {
   height: 100%;

src/client/components/ComicDetail.tsx

@@ -7,15 +7,21 @@ import ComicVineSearchForm from "./ComicVineSearchForm";
 import AcquisitionPanel from "./AcquisitionPanel";
 import DownloadsPanel from "./DownloadsPanel";
 import SlidingPane from "react-sliding-pane";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+
 import Select, { components } from "react-select";
 
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
-import { isEmpty, isUndefined, isNil } from "lodash";
+import { isEmpty, isUndefined, isNil, map } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
-import { getComicBookDetailById } from "../actions/comicinfo.actions";
+import {
+  extractComicArchive,
+  getComicBookDetailById,
+} from "../actions/comicinfo.actions";
 import { detectTradePaperbacks } from "../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 const prettyBytes = require("pretty-bytes");
@@ -54,6 +60,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
+  const extractedComicBookArchive = useSelector(
+    (state: RootState) => state.fileOps.extractedComicBookArchive,
+  );
 
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const dispatch = useDispatch();
@@ -126,7 +135,45 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
         );
       },
     },
-    editComicArchive: { content: () => <>bastard fucks</> },
+    editComicArchive: {
+      content: () => (
+        <>
+          <div className="content">
+            <span className="tags has-addons">
+              <span className="tag">Pages</span>
+              <span className="tag is-warning">
+                {extractedComicBookArchive.length}
+              </span>
+            </span>
+          </div>
+          <Carousel
+            width={300}
+            dynamicHeight
+            showStatus={false}
+            showIndicators={false}
+            showThumbs={false}
+            useKeyboardArrows
+          >
+            {map(extractedComicBookArchive, (page, idx) => {
+              return (
+                <div key={idx}>
+                  <img
+                    src={
+                      "http://localhost:3000/" +
+                      page.containedIn +
+                      "/" +
+                      page.name +
+                      page.extension
+                    }
+                    alt=""
+                  />
+                </div>
+              );
+            })}
+          </Carousel>
+        </>
+      ),
+    },
   };
 
   const openDrawerWithCVMatches = useCallback(() => {
@@ -136,9 +183,23 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, [dispatch, comicBookDetailData]);
 
   const openDrawerForEditingComicArchive = useCallback(() => {
+    dispatch(
+      extractComicArchive(
+        comicBookDetailData.rawFileDetails.containedIn +
+          "/" +
+          comicBookDetailData.rawFileDetails.name +
+          comicBookDetailData.rawFileDetails.extension,
+        {
+          extractTarget: "book",
+          targetExtractionFolder:
+            "./userdata/expanded/" + comicBookDetailData.rawFileDetails.name,
+          extractionMode: "all",
+        },
+      ),
+    );
     setSlidingPanelContentId("editComicArchive");
     setVisible(true);
-  }, [dispatch]);
+  }, [dispatch, comicBookDetailData, extractedComicBookArchive]);
 
   const [active, setActive] = useState(1);
   const createDescriptionMarkup = (html) => {

src/client/constants/action-types.ts

@@ -38,6 +38,14 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
 export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
   "IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
 
+// extracted comic archive
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS";
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS";
+export const IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED =
+  "IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_FAILED";
+
 // AirDC++
 export const AIRDCPP_SEARCH_IN_PROGRESS = "AIRDCPP_SEARCH_IN_PROGRESS";
 export const AIRDCPP_SEARCH_RESULTS_ADDED = "AIRDCPP_SEARCH_RESULTS_ADDED";

src/client/reducers/fileops.reducer.ts

@@ -13,6 +13,8 @@ import {
   IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS,
   IMS_COMIC_BOOK_GROUPS_FETCHED,
   IMS_COMIC_BOOK_GROUPS_CALL_FAILED,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
 } from "../constants/action-types";
 const initialState = {
   IMSCallInProgress: false,
@@ -22,6 +24,7 @@ const initialState = {
   isComicVineMetadataImportInProgress: false,
   comicVineMetadataImportError: {},
   rawImportError: {},
+  extractedComicBookArchive: [],
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -92,6 +95,19 @@ function fileOpsReducer(state = initialState, action) {
         error: action.error,
       };
     }
+    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS: {
+      return {
+        ...state,
+        IMSCallInProgress: true,
+      };
+    }
+    case IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS: {
+      return {
+        ...state,
+        extractedComicBookArchive: action.extractedComicBookArchive,
+        IMSCallInProgress: false,
+      };
+    }
     default:
       return state;
   }

yarn.lock

@@ -3749,6 +3749,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.1.11, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -11085,6 +11090,13 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-easy-swipe@^0.0.21:
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
+  integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
@@ -11212,6 +11224,15 @@ react-redux@^7.2.3:
     prop-types "^15.7.2"
     react-is "^16.13.1"
 
+react-responsive-carousel@^3.2.21:
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.21.tgz#a464a93c33f9fc29e3bbd1944ce885a0a343a996"
+  integrity sha512-y2ueGqv/yo6HQJi9IbrJVRJobp4EOrNe6BQOC61CoADg3wUjq0gqAcrtSsLQIRLtbt6nCo7cTPRX4wAkSwdiTA==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    react-easy-swipe "^0.0.21"
+
 react-router-dom@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
@@ -13139,10 +13160,10 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-threetwo-ui-typings@^1.0.9:
+threetwo-ui-typings@^1.0.10:
-  version "1.0.9"
+  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.9.tgz#c7d30ec50afb244917628727b91ee8fbc58e4518"
+  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.10.tgz#bbe74b53a6ba3963068b99a1944a5b2723cd62da"
-  integrity sha512-zOxDtVfe7Z8vSo0XsOBjT2F4WrBRVfL6ooQ82P/oor1UENZfBnBKj6aKsJT8/zINfvS/GZM96F8q8V1f2YrpCw==
+  integrity sha512-4FKd/Oq6wVgQZmgFErZ4/zIjp+T3UbV9zkVbgTqSyCsIu9MPXKAgHvfZaiV7TU05MCjuiaPJ+9XuUjtBrP6ixQ==
   dependencies:
     typescript "^4.3.2"