🖼 Added a League of Comic Geeks logo
This commit is contained in:
@@ -112,7 +112,6 @@ export const AcquisitionPanel = (
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="comic-detail columns">
|
||||
|
||||
317
src/client/components/ComicDetail/ComicDetail.tsx
Normal file
317
src/client/components/ComicDetail/ComicDetail.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
ReactElement,
|
||||
useContext,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Card from "../Carda";
|
||||
import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
|
||||
|
||||
import { RawFileDetails } from "./RawFileDetails";
|
||||
|
||||
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 "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 SlidingPane from "react-sliding-pane";
|
||||
import Modal from "react-modal";
|
||||
import ComicViewer from "react-comic-viewer";
|
||||
|
||||
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 = {};
|
||||
/**
|
||||
* Component for displaying the metadata for a comic in greater detail.
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* return (
|
||||
* <ComicDetail/>
|
||||
* )
|
||||
*/
|
||||
|
||||
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);
|
||||
|
||||
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,
|
||||
);
|
||||
const { comicObjectId } = useParams<{ comicObjectId: string }>();
|
||||
const userSettings = useSelector((state: RootState) => state.settings.data);
|
||||
const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const openModal = useCallback((filePath) => {
|
||||
setIsOpen(true);
|
||||
dispatch(extractComicArchive(filePath));
|
||||
}, []);
|
||||
|
||||
const afterOpenModal = useCallback(() => {
|
||||
// references are now sync'd and can be accessed.
|
||||
// subtitle.style.color = "#f00";
|
||||
}, []);
|
||||
|
||||
const closeModal = useCallback(() => {
|
||||
setIsOpen(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(getSettings());
|
||||
}, [page, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) {
|
||||
setADCPPSocket(
|
||||
new AirDCPPSocket({
|
||||
protocol: `${userSettings.directConnect.client.host.protocol}`,
|
||||
hostname: `${userSettings.directConnect.client.host.hostname}`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}, [userSettings]);
|
||||
|
||||
// destructure props
|
||||
console.log(ADCPPSocket)
|
||||
|
||||
// sliding panel init
|
||||
const contentForSlidingPanel = {
|
||||
CVMatches: {
|
||||
content: () => {
|
||||
if (!comicVineAPICallProgress) {
|
||||
return (
|
||||
<ComicVineMatchPanel
|
||||
props={{
|
||||
comicVineSearchQueryObject,
|
||||
comicVineAPICallProgress,
|
||||
comicVineSearchResults,
|
||||
comicObjectId,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="progress-indicator-container">
|
||||
<div className="indicator">
|
||||
<Loader
|
||||
type="MutatingDots"
|
||||
color="#CCC"
|
||||
secondaryColor="#999"
|
||||
height={100}
|
||||
width={100}
|
||||
visible={comicVineAPICallProgress}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
editComicBookMetadata: {
|
||||
content: () => <EditMetadataPanel />,
|
||||
},
|
||||
};
|
||||
const {
|
||||
data: {
|
||||
_id,
|
||||
rawFileDetails,
|
||||
inferredMetadata,
|
||||
sourcedMetadata: { comicvine, locg, comicInfo },
|
||||
},
|
||||
} = data;
|
||||
|
||||
// check for the availability of CV metadata
|
||||
const isComicBookMetadataAvailable =
|
||||
!isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
|
||||
|
||||
// check for the availability of rawFileDetails
|
||||
const areRawFileDetailsAvailable =
|
||||
!isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
|
||||
|
||||
const { issueName, url } = determineCoverFile({
|
||||
rawFileDetails,
|
||||
comicvine,
|
||||
locg,
|
||||
});
|
||||
|
||||
// query for airdc++
|
||||
const airDCPPQuery = {
|
||||
issue: {
|
||||
name: issueName,
|
||||
},
|
||||
};
|
||||
|
||||
// Tab content and header details
|
||||
const tabGroup = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Volume Information",
|
||||
icon: <i className="fa-solid fa-layer-group"></i>,
|
||||
content: isComicBookMetadataAvailable ? (
|
||||
<VolumeInformation data={data.data} key={1} />
|
||||
) : null,
|
||||
shouldShow: isComicBookMetadataAvailable,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "ComicInfo.xml",
|
||||
icon: <i className="fa-solid fa-code"></i>,
|
||||
content: (
|
||||
<div className="columns" key={2}>
|
||||
<div className="column is-three-quarters">
|
||||
{!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
shouldShow: !isEmpty(comicInfo),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: <i className="fa-regular fa-file-archive"></i>,
|
||||
name: "Archive Operations",
|
||||
content: <ArchiveOperations data={data.data} key={3} />,
|
||||
shouldShow: areRawFileDetailsAvailable,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: <i className="fa-solid fa-floppy-disk"></i>,
|
||||
name: "Acquisition",
|
||||
content: (
|
||||
<AcquisitionPanel query={airDCPPQuery} comicObjectid={_id} key={4} />
|
||||
),
|
||||
shouldShow: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: null,
|
||||
name: !isEmpty(data.data) ? (
|
||||
<span className="download-tab-name">Downloads</span>
|
||||
) : (
|
||||
"Downloads"
|
||||
),
|
||||
content: !isNil(data.data) && !isEmpty(data.data) && (
|
||||
<DownloadsPanel
|
||||
data={data.data.acquisition.directconnect}
|
||||
comicObjectId={comicObjectId}
|
||||
key={5}
|
||||
/>
|
||||
),
|
||||
shouldShow: true,
|
||||
},
|
||||
];
|
||||
// filtered Tabs
|
||||
const filteredTabs = tabGroup.filter((tab) => tab.shouldShow);
|
||||
|
||||
// Determine which cover image to use:
|
||||
// 1. from the locally imported or
|
||||
// 2. from the CV-scraped version
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="section">
|
||||
{!isNil(data) && !isEmpty(data) && (
|
||||
<>
|
||||
<h1 className="title">{issueName}</h1>
|
||||
<div className="columns is-multiline">
|
||||
<div className="column is-narrow">
|
||||
<Card
|
||||
imageUrl={url}
|
||||
orientation={"vertical"}
|
||||
hasDetails={false}
|
||||
cardContainerStyle={{ maxWidth: 275 }}
|
||||
/>
|
||||
{/* action dropdown */}
|
||||
<div className="mt-4 is-size-7">
|
||||
<Menu
|
||||
data={data.data}
|
||||
handlers={{ setSlidingPanelContentId, setVisible }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* raw file details */}
|
||||
<div className="column is-three-fifths">
|
||||
{!isUndefined(rawFileDetails) &&
|
||||
!isEmpty(rawFileDetails.cover) && (
|
||||
<>
|
||||
<RawFileDetails
|
||||
data={{
|
||||
rawFileDetails: rawFileDetails,
|
||||
inferredMetadata: inferredMetadata,
|
||||
}}
|
||||
/>
|
||||
{/* Read comic button */}
|
||||
<button
|
||||
className="button is-success is-light"
|
||||
onClick={() => openModal(rawFileDetails.filePath)}
|
||||
>
|
||||
<i className="fa-solid fa-book-open mr-2"></i>
|
||||
Read
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
style={{ content: { marginTop: "2rem" } }}
|
||||
isOpen={modalIsOpen}
|
||||
onAfterOpen={afterOpenModal}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Example Modal"
|
||||
>
|
||||
<button onClick={closeModal}>close</button>
|
||||
{extractedComicBook && (
|
||||
<ComicViewer
|
||||
pages={extractedComicBook}
|
||||
direction="ltr"
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{<TabControls filteredTabs={filteredTabs} />}
|
||||
|
||||
<SlidingPane
|
||||
isOpen={visible}
|
||||
onRequestClose={() => setVisible(false)}
|
||||
title={"Comic Vine Search Matches"}
|
||||
width={"600px"}
|
||||
>
|
||||
{slidingPanelContentId !== "" &&
|
||||
contentForSlidingPanel[slidingPanelContentId].content()}
|
||||
</SlidingPane>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
26
src/client/components/ComicDetail/ComicDetailContainer.tsx
Normal file
26
src/client/components/ComicDetail/ComicDetailContainer.tsx
Normal file
@@ -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;
|
||||
};
|
||||
Reference in New Issue
Block a user