🖼 Added a League of Comic Geeks logo

2022-05-22 01:55:51 -07:00
parent 3173cbf873
commit f0505d7428
8 changed files with 166 additions and 158 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ yarn-error.log
 environment.list
 .env
 src/client/assets/img/missing-file.pxd
+*.pxd
--- a/src/client/assets/img/cvlogo.svg
+++ b/src/client/assets/img/cvlogo.svg
--- a/src/client/assets/img/locglogo.svg
+++ b/src/client/assets/img/locglogo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 2.4.3 -->
+<svg width="624" height="561" viewBox="0 0 624 561" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <text id="LCG" xml:space="preserve"><tspan x="57" y="382" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
+    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 422 C 84.954399 422 76 430.954407 76 442 L 76 446 C 76 457.045593 84.954399 466 96 466 L 193 466 C 204.045593 466 213 457.045593 213 446 L 213 442 C 213 430.954407 204.045593 422 193 422 Z"/>
+    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 422 C 413.954407 422 405 430.954407 405 442 L 405 446 C 405 457.045593 413.954407 466 425 466 L 522 466 C 533.045593 466 542 457.045593 542 446 L 542 442 C 542 430.954407 533.045593 422 522 422 Z"/>
+</svg>
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import Dashboard from "./Dashboard/Dashboard";

 import Import from "./Import";
-import { ComicDetail } from "./ComicDetail";
+import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
 import LibraryContainer from "./Library/LibraryContainer";
 import LibraryGrid from "./Library/LibraryGrid";
 import Search from "./Search";
@@ -85,7 +85,7 @@ export const App = (): ReactElement => {
          <Route path="/search" element={<Search />} />
          <Route
            path={"/comic/details/:comicObjectId"}
-            element={<ComicDetail />}
+            element={<ComicDetailContainer />}
          />
          <Route
            path={"/volume/details/:comicObjectId"}
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -112,7 +112,6 @@ export const AcquisitionPanel = (
    },
    [],
  );
-
  return (
    <>
      <div className="comic-detail columns">
--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -7,25 +7,23 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Card from "./Carda";
-import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
+import Card from "../Carda";
+import { ComicVineMatchPanel } from "./ComicVineMatchPanel";

-import { RawFileDetails } from "./ComicDetail/RawFileDetails";
+import { RawFileDetails } from "./RawFileDetails";

-import TabControls from "./ComicDetail/TabControls";
-import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
-import { Menu } from "./ComicDetail/ActionMenu/Menu";
-import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
-import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML";
-import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
-import DownloadsPanel from "./ComicDetail/DownloadsPanel";
-import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
+import TabControls from "./TabControls";
+import { EditMetadataPanel } from "./EditMetadataPanel";
+import { Menu } from "./ActionMenu/Menu";
+import { ArchiveOperations } from "./Tabs/ArchiveOperations";
+import { ComicInfoXML } from "./Tabs/ComicInfoXML";
+import AcquisitionPanel from "./AcquisitionPanel";
+import DownloadsPanel from "./DownloadsPanel";
+import { VolumeInformation } from "./Tabs/VolumeInformation";

 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";

-import { getComicBookDetailById } from "../actions/comicinfo.actions";
-
 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";
@@ -33,13 +31,11 @@ import SlidingPane from "react-sliding-pane";
 import Modal from "react-modal";
 import ComicViewer from "react-comic-viewer";

-import { escapePoundSymbol } from "../shared/utils/formatting.utils";
-
-import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
-import { getSettings } from "../actions/settings.actions";
-import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
-import AirDCPPSocket from "../services/DcppSearchService";
-import { extractComicArchive } from "../actions/fileops.actions";
+import { getSettings } from "../../actions/settings.actions";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
+import AirDCPPSocket from "../../services/DcppSearchService";
+import { extractComicArchive } from "../../actions/fileops.actions";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";

 type ComicDetailProps = {};
 /**
@@ -52,9 +48,8 @@ type ComicDetailProps = {};
 * )
 */

-export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
+export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const [page, setPage] = useState(1);
-
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
  const [modalIsOpen, setIsOpen] = useState(false);
@@ -68,9 +63,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  const comicVineAPICallProgress = useSelector(
    (state: RootState) => state.comicInfo.inProgress,
  );
-  const comicBookDetailData = useSelector(
-    (state: RootState) => state.comicInfo.comicBookDetail,
-  );
+
  const extractedComicBook = useSelector(
    (state: RootState) => state.fileOps.extractedComicBookArchive,
  );
@@ -94,7 +87,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  }, []);

  useEffect(() => {
-    dispatch(getComicBookDetailById(comicObjectId));
    dispatch(getSettings());
  }, [page, dispatch]);

@@ -109,6 +101,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
    }
  }, [userSettings]);

+  // destructure props
+  console.log(ADCPPSocket)
+
  // sliding panel init
  const contentForSlidingPanel = {
    CVMatches: {
@@ -146,38 +141,35 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
      content: () => <EditMetadataPanel />,
    },
  };
+  const {
+    data: {
+      _id,
+      rawFileDetails,
+      inferredMetadata,
+      sourcedMetadata: { comicvine, locg, comicInfo },
+    },
+  } = data;

  // check for the availability of CV metadata
  const isComicBookMetadataAvailable =
-    comicBookDetailData.sourcedMetadata &&
-    !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) &&
-    !isUndefined(
-      comicBookDetailData.sourcedMetadata.comicvine.volumeInformation,
-    ) &&
-    !isEmpty(comicBookDetailData.sourcedMetadata);
+    !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);

  // check for the availability of rawFileDetails
  const areRawFileDetailsAvailable =
-    !isUndefined(comicBookDetailData.rawFileDetails) &&
-    !isEmpty(comicBookDetailData.rawFileDetails.cover);
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
+
+  const { issueName, url } = determineCoverFile({
+    rawFileDetails,
+    comicvine,
+    locg,
+  });

  // query for airdc++
-  const airDCPPQuery = {};
-  if (isComicBookMetadataAvailable) {
-    Object.assign(airDCPPQuery, {
-      issue: {
-        name: comicBookDetailData.sourcedMetadata.comicvine.volumeInformation
-          .name,
-      },
-    });
-  } else if (areRawFileDetailsAvailable) {
-    Object.assign(airDCPPQuery, {
-      issue: {
-        name: comicBookDetailData.inferredMetadata.issue.name,
-        number: comicBookDetailData.inferredMetadata.issue.number,
-      },
-    });
-  }
+  const airDCPPQuery = {
+    issue: {
+      name: issueName,
+    },
+  };

  // Tab content and header details
  const tabGroup = [
@@ -186,7 +178,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
      name: "Volume Information",
      icon: <i className="fa-solid fa-layer-group"></i>,
      content: isComicBookMetadataAvailable ? (
-        <VolumeInformation data={comicBookDetailData} key={1} />
+        <VolumeInformation data={data.data} key={1} />
      ) : null,
      shouldShow: isComicBookMetadataAvailable,
    },
@@ -197,24 +189,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
      content: (
        <div className="columns" key={2}>
          <div className="column is-three-quarters">
-            {!isNil(comicBookDetailData.sourcedMetadata) &&
-              !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
-                <ComicInfoXML
-                  json={comicBookDetailData.sourcedMetadata.comicInfo}
-                />
-              )}
+            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
          </div>
        </div>
      ),
-      shouldShow:
-        !isUndefined(comicBookDetailData.sourcedMetadata) &&
-        !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo),
+      shouldShow: !isEmpty(comicInfo),
    },
    {
      id: 3,
      icon: <i className="fa-regular fa-file-archive"></i>,
      name: "Archive Operations",
-      content: <ArchiveOperations data={comicBookDetailData} key={3} />,
+      content: <ArchiveOperations data={data.data} key={3} />,
      shouldShow: areRawFileDetailsAvailable,
    },
    {
@@ -222,26 +207,21 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
      icon: <i className="fa-solid fa-floppy-disk"></i>,
      name: "Acquisition",
      content: (
-        <AcquisitionPanel
-          query={airDCPPQuery}
-          comicObjectid={comicBookDetailData._id}
-          key={4}
-        />
+        <AcquisitionPanel query={airDCPPQuery} comicObjectid={_id} key={4} />
      ),
      shouldShow: true,
    },
    {
      id: 5,
      icon: null,
-      name:
-        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
-          <span className="download-tab-name">Downloads</span>
-        ) : (
-          "Downloads"
-        ),
-      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+      name: !isEmpty(data.data) ? (
+        <span className="download-tab-name">Downloads</span>
+      ) : (
+        "Downloads"
+      ),
+      content: !isNil(data.data) && !isEmpty(data.data) && (
        <DownloadsPanel
-          data={comicBookDetailData.acquisition.directconnect}
+          data={data.data.acquisition.directconnect}
          comicObjectId={comicObjectId}
          key={5}
        />
@@ -255,29 +235,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
  // Determine which cover image to use:
  // 1. from the locally imported or
  // 2. from the CV-scraped version
-  let imagePath = "";
-  let comicBookTitle = "";
-  if (areRawFileDetailsAvailable) {
-    const encodedFilePath = encodeURI(
-      `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
-    );
-    imagePath = escapePoundSymbol(encodedFilePath);
-    comicBookTitle = comicBookDetailData.rawFileDetails.name;
-  } else if (isComicBookMetadataAvailable) {
-    imagePath = comicBookDetailData.sourcedMetadata.comicvine.image.small_url;
-    comicBookTitle = comicBookDetailData.sourcedMetadata.comicvine.name;
-  }

  return (
    <section className="container">
      <div className="section">
-        {!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+        {!isNil(data) && !isEmpty(data) && (
          <>
-            <h1 className="title">{comicBookTitle}</h1>
+            <h1 className="title">{issueName}</h1>
            <div className="columns is-multiline">
              <div className="column is-narrow">
                <Card
-                  imageUrl={imagePath}
+                  imageUrl={url}
                  orientation={"vertical"}
                  hasDetails={false}
                  cardContainerStyle={{ maxWidth: 275 }}
@@ -285,29 +253,26 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                {/* action dropdown */}
                <div className="mt-4 is-size-7">
                  <Menu
-                    data={comicBookDetailData}
+                    data={data.data}
                    handlers={{ setSlidingPanelContentId, setVisible }}
                  />
                </div>
              </div>
              {/* raw file details */}
              <div className="column is-three-fifths">
-                {!isUndefined(comicBookDetailData.rawFileDetails) &&
-                  !isEmpty(comicBookDetailData.rawFileDetails.cover) && (
+                {!isUndefined(rawFileDetails) &&
+                  !isEmpty(rawFileDetails.cover) && (
                    <>
                      <RawFileDetails
                        data={{
-                          rawFileDetails: comicBookDetailData.rawFileDetails,
-                          inferredMetadata:
-                            comicBookDetailData.inferredMetadata,
+                          rawFileDetails: rawFileDetails,
+                          inferredMetadata: inferredMetadata,
                        }}
                      />
                      {/* Read comic button */}
                      <button
                        className="button is-success is-light"
-                        onClick={() =>
-                          openModal(comicBookDetailData.rawFileDetails.filePath)
-                        }
+                        onClick={() => openModal(rawFileDetails.filePath)}
                      >
                        <i className="fa-solid fa-book-open mr-2"></i>
                        Read
--- a/src/client/components/ComicDetail/ComicDetailContainer.tsx
+++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx
@@ -0,0 +1,26 @@
+import { isEmpty, isUndefined } from "lodash";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import { getComicBookDetailById } from "../../actions/comicinfo.actions";
+import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
+
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import { getSettings } from "../../actions/settings.actions";
+
+
+export const ComicDetailContainer = (): ReactElement | null => {
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+  const dispatch = useDispatch();
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  useEffect(() => {
+    dispatch(getComicBookDetailById(comicObjectId));
+    // dispatch(getSettings());
+  }, [dispatch]);
+  return !isEmpty(comicBookDetailData) ? (
+    <ComicDetail data={comicBookDetailData} />
+  ) : null;
+};
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -5,6 +5,7 @@ import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";

 type WantedComicsListProps = {
  comics: any;
@@ -44,60 +45,69 @@ export const WantedComicsList = ({
        className="recent-comics-container"
        columnClassName="recent-comics-column"
      >
-        {map(comics, ({ _id, rawFileDetails, sourcedMetadata }) => {
-          const isComicBookMetadataAvailable =
-            sourcedMetadata &&
-            !isUndefined(sourcedMetadata.comicvine) &&
-            !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
-            !isEmpty(sourcedMetadata);
-          let imagePath = "";
-          let comicName = "";
-          if (isComicBookMetadataAvailable) {
-            imagePath = sourcedMetadata.comicvine.image.small_url;
-            comicName = sourcedMetadata.comicvine.name;
-          }
-          const titleElement = (
-            <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 20)}</Link>
-          );
-          return (
-            <Card
-              key={_id}
-              orientation={"vertical"}
-              imageUrl={imagePath}
-              hasDetails
-              title={comicName ? titleElement : <span>No Name</span>}
-            >
-              <div className="content is-flex is-flex-direction-row">
-                {isComicBookMetadataAvailable && (
-                  <span className="icon custom-icon is-small">
-                    <img src="/img/cvlogo.svg" />
-                  </span>
-                )}
-                {/* Raw file presence  */}
-                {isEmpty(rawFileDetails.cover) && (
-                  <span className="icon custom-icon is-small has-text-danger mr-2">
-                    <img src="/img/missing-file.svg" />
-                  </span>
-                )}
-                {/* Issue type */}
-                {isComicBookMetadataAvailable &&
-                !isNil(
-                  detectIssueTypes(
-                    sourcedMetadata.comicvine.volumeInformation.description,
-                  ),
-                ) ? (
-                  <span className="tag is-warning">
-                    {
-                      detectIssueTypes(
-                        sourcedMetadata.comicvine.volumeInformation.description,
-                      ).displayName
-                    }
-                  </span>
-                ) : null}
-              </div>
-            </Card>
-          );
-        })}
+        {map(
+          comics,
+          ({
+            _id,
+            rawFileDetails,
+            sourcedMetadata: { comicvine, comicInfo, locg },
+          }) => {
+            const isComicBookMetadataAvailable =
+              !isUndefined(comicvine) &&
+              !isUndefined(comicvine.volumeInformation);
+            const consolidatedComicMetadata = {
+              rawFileDetails,
+              comicvine,
+              comicInfo,
+              locg,
+            };
+
+            const { issueName, url } = determineCoverFile(
+              consolidatedComicMetadata,
+            );
+            const titleElement = (
+              <Link to={"/comic/details/" + _id}>
+                {ellipsize(issueName, 20)}
+              </Link>
+            );
+            return (
+              <Card
+                key={_id}
+                orientation={"vertical"}
+                imageUrl={url}
+                hasDetails
+                title={issueName ? titleElement : <span>No Name</span>}
+              >
+                <div className="content is-flex is-flex-direction-row">
+                  {/* comicVine metadata presence */}
+                  {isComicBookMetadataAvailable && (
+                    <span className="icon custom-icon is-small">
+                      <img src="/img/cvlogo.svg" />
+                    </span>
+                  )}
+                  {!isEmpty(locg) && (
+                    <span className="icon custom-icon">
+                      <img src="/img/locglogo.svg" />
+                    </span>
+                  )}
+                  {/* Issue type */}
+                  {isComicBookMetadataAvailable &&
+                  !isNil(
+                    detectIssueTypes(comicvine.volumeInformation.description),
+                  ) ? (
+                    <span className="tag is-warning">
+                      {
+                        detectIssueTypes(
+                          comicvine.volumeInformation.description,
+                        ).displayName
+                      }
+                    </span>
+                  ) : null}
+                </div>
+              </Card>
+            );
+          },
+        )}
      </Masonry>
    </>
  );