diff --git a/README.md b/README.md index 907f804..1c67ba8 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,16 @@ ThreeTwo! _aims to be_ a comic book curation app. [![Docker Image CI](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml/badge.svg)](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml) +### Screenshots + +![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Dashboard.png) + +![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/Library.png) + +![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/DC%2B%2B%20integration.png) + +![](https://raw.githubusercontent.com/rishighan/threetwo/rishighan-screenshots-dec-2022/ComicVine%20Matching.png) + ### 🦄 Early Development Support Channel diff --git a/package.json b/package.json index 7dd5afc..d8433f2 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "qs": "^6.10.5", "react": "^18.1.0", "react-collapsible": "^2.9.0", - "react-comic-viewer": "^0.3.5", + "react-comic-viewer": "^0.4.0", "react-day-picker": "^8.0.6", "react-dom": "^18.1.0", "react-fast-compare": "^3.2.0", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index dded2b7..ee03372 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -256,35 +256,37 @@ export const fetchComicVineMatches = /** * This method is a proxy to `uncompressFullArchive` which uncompresses complete `rar` or `zip` archives * @param {string} path The path to the compressed archive - * @param {any} options Options object + * @param {any} options Options object * @returns {any} */ -export const extractComicArchive = (path: string, options: any) => async (dispatch) => { - const comicBookPages: string[] = []; - dispatch({ - type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS, - }); - const extractedComicBookArchive = await axios({ - method: "POST", - url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`, - headers: { - "Content-Type": "application/json; charset=utf-8", - }, - data: { - filePath: path, - }, - }); - map(extractedComicBookArchive.data, (page) => { - console.log(page); - const pageFilePath = removeLeadingPeriod(page); - const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`); - comicBookPages.push(imagePath); - }); - dispatch({ - type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS, - extractedComicBookArchive: comicBookPages, - }); -}; +export const extractComicArchive = + (path: string, options: any): any => async (dispatch) => { + const comicBookPages: string[] = []; + console.log(options); + dispatch({ + type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS, + }); + const extractedComicBookArchive = await axios({ + method: "POST", + url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`, + headers: { + "Content-Type": "application/json; charset=utf-8", + }, + data: { + filePath: path, + options, + }, + }); + map(extractedComicBookArchive.data, (page) => { + const pageFilePath = removeLeadingPeriod(page); + const imagePath = encodeURI(`${LIBRARY_SERVICE_HOST}${pageFilePath}`); + comicBookPages.push(imagePath); + }); + dispatch({ + type: IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS, + extractedComicBookArchive: comicBookPages, + }); + }; export const searchIssue = (query, options) => async (dispatch) => { dispatch({ diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index a671b8a..1bc5cf6 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -356,6 +356,10 @@ pre { border-radius: 0.5rem; } +.comic-viewer { + border: 1px solid red; +} + // comicvine metadata .comicvine-metadata { background-color: #f2f1f9; diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index fa3ffc1..0145c09 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -74,13 +74,21 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { const openModal = useCallback((filePath) => { setIsOpen(true); - dispatch(extractComicArchive(filePath)); + dispatch( + extractComicArchive(filePath, { + type: "full", + purpose: "readComicBook", + imageResizeOptions: { + baseWidth: 1024, + }, + }), + ); }, []); const afterOpenModal = useCallback((things) => { // references are now sync'd and can be accessed. // subtitle.style.color = "#f00"; - console.log(things); + console.log("kolaveri", things); }, []); const closeModal = useCallback(() => { @@ -94,7 +102,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { <>
- +

Searching for:

@@ -112,7 +120,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { comicVineSearchResults, comicObjectId, }} - />) : (
+ /> + ) : ( +
{ visible={comicVineAPICallProgress} />
-
)} - ), +
+ )} + + ), }, - editComicBookMetadata: { content: () => , }, }; - // check for the availability of CV metadata const isComicBookMetadataAvailable = @@ -249,7 +259,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { {/* raw file details */} -
+
{!isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover) && ( <> @@ -280,6 +290,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { )} diff --git a/src/client/components/ComicDetail/ComicVineDetails.tsx b/src/client/components/ComicDetail/ComicVineDetails.tsx index 27985c2..853157b 100644 --- a/src/client/components/ComicDetail/ComicVineDetails.tsx +++ b/src/client/components/ComicDetail/ComicVineDetails.tsx @@ -7,7 +7,7 @@ import Card from "../Carda"; export const ComicVineDetails = (props): ReactElement => { const { data, updatedAt } = props; return ( -
+
ComicVine Metadata
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx index 2f086fb..7db0d4f 100644 --- a/src/client/components/ComicDetail/RawFileDetails.tsx +++ b/src/client/components/ComicDetail/RawFileDetails.tsx @@ -7,7 +7,7 @@ export const RawFileDetails = (props): ReactElement => { const { rawFileDetails, inferredMetadata } = props.data; return ( <> -
+
Raw File Details
@@ -38,7 +38,7 @@ export const RawFileDetails = (props): ReactElement => {
-
+
{/* inferred metadata */}
Inferred Issue Metadata
diff --git a/yarn.lock b/yarn.lock index 17e4121..42a1571 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1283,7 +1283,7 @@ dependencies: tslib "^2.0.0" -"@emotion/babel-plugin@^11.3.0", "@emotion/babel-plugin@^11.7.1": +"@emotion/babel-plugin@^11.7.1": version "11.9.2" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95" integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw== @@ -1317,28 +1317,45 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.1": +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + +"@emotion/is-prop-valid@^1.1.0": version "1.1.3" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a" integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA== dependencies: "@emotion/memoize" "^0.7.4" +"@emotion/is-prop-valid@^1.1.2": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" + integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg== + dependencies: + "@emotion/memoize" "^0.8.0" + "@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== -"@emotion/react@11.7.1": - version "11.7.1" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07" - integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw== +"@emotion/memoize@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" + integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== + +"@emotion/react@11.9.0": + version "11.9.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8" + integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ== dependencies: "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" "@emotion/cache" "^11.7.1" - "@emotion/serialize" "^1.0.2" - "@emotion/sheet" "^1.1.0" - "@emotion/utils" "^1.0.0" + "@emotion/serialize" "^1.0.3" + "@emotion/utils" "^1.1.0" "@emotion/weak-memoize" "^0.2.5" hoist-non-react-statics "^3.3.1" @@ -1366,21 +1383,32 @@ "@emotion/utils" "^1.0.0" csstype "^3.0.2" -"@emotion/sheet@^1.1.0", "@emotion/sheet@^1.1.1": +"@emotion/serialize@^1.0.3": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0" + integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA== + dependencies: + "@emotion/hash" "^0.9.0" + "@emotion/memoize" "^0.8.0" + "@emotion/unitless" "^0.8.0" + "@emotion/utils" "^1.2.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787" integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA== -"@emotion/styled@11.6.0": - version "11.6.0" - resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d" - integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw== +"@emotion/styled@11.8.1": + version "11.8.1" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17" + integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ== dependencies: "@babel/runtime" "^7.13.10" - "@emotion/babel-plugin" "^11.3.0" - "@emotion/is-prop-valid" "^1.1.1" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/is-prop-valid" "^1.1.2" "@emotion/serialize" "^1.0.2" - "@emotion/utils" "^1.0.0" + "@emotion/utils" "^1.1.0" "@emotion/stylis@^0.8.4": version "0.8.5" @@ -1392,11 +1420,21 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" + integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== + "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf" integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ== +"@emotion/utils@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" + integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== + "@emotion/weak-memoize@^0.2.5": version "0.2.5" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" @@ -15281,20 +15319,20 @@ react-collapsible@^2.9.0: resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.10.0.tgz#57330f9f4f968a41ece49c651b56cf30f9a06d19" integrity sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A== -react-comic-viewer@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.3.5.tgz#ab5f9ba74a4aa2e748c29d11b43e40d2a042d9ba" - integrity sha512-xMjvu/JVJ821dYWOuOiZlEEMpgdmUeUtznoRjBlMaFi6WJI52V55/6E+ICg8VqROwiMwmWjp65rGhF1P8hlRLg== +react-comic-viewer@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/react-comic-viewer/-/react-comic-viewer-0.4.0.tgz#81e170c4d3924f3312171e3fc7d5d4485466c301" + integrity sha512-tdse0Vn6cJzEbFUZMlEBcY1LrH+LfCKodJInl5Y5lyIZyKARoejLrQNlJPnarvNcPW0qm6yQkYioaI56pq0U1w== dependencies: - "@emotion/react" "11.7.1" - "@emotion/styled" "11.6.0" + "@emotion/react" "11.9.0" + "@emotion/styled" "11.8.1" "@react-hook/window-size" "^3.0.7" "@rooks/use-did-update" "^4.10.0" "@rooks/use-outside-click-ref" "4.11.2" nanoid "^3.1.25" react-full-screen "1.1.0" react-icons "4.3.1" - react-swipeable "6.2.0" + react-swipeable "6.2.2" screenfull "^5.1.0" react-day-picker@^8.0.6: @@ -15534,10 +15572,10 @@ react-stickynode@^4.0.0: shallowequal "^1.0.0" subscribe-ui-event "^2.0.6" -react-swipeable@6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.0.tgz#057271cb7a6fb4af9d2a3f6d80ccdf33e2f64d47" - integrity sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw== +react-swipeable@6.2.2: + version "6.2.2" + resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.2.2.tgz#52ba570f3a7a90db7093094ec476f3d151f727d1" + integrity sha512-Oz7nSFrssvq2yvy05aNL3F+yBUqSvLsK6x1mu+rQFOpMdQVnt4izKt1vyjvvTb70q6GQOaSpaB6qniROW2MAzQ== react-syntax-highlighter@^15.4.5: version "15.5.0"