frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

⬇️ Download panel first draft

Browse Source
This commit is contained in:
Rishi Ghan
2021-08-24 12:45:22 -07:00
parent 8a1e6fb98a
commit 140f690c77
7 changed files with 144 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/client/actions/airdcpp.actions.tsx
View File

@@ -9,7 +9,10 @@ import {
AIRDCPP_SEARCH_RESULTS_RECEIVED,
AIRDCPP_HUB_SEARCHES_SENT,
AIRDCPP_RESULT_DOWNLOAD_INITIATED,
AIRDCPP_DOWNLOAD_PROGRESS_TICK,
} from "../constants/action-types";
import { isNil } from "lodash";
import axios from "axios";
interface SearchData {
query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
@@ -53,15 +56,58 @@ export const search = (data: SearchData) => async (dispatch) => {
};
export const downloadAirDCPPItem =
(instanceId: string, resultId: string): void =>
(instanceId: string, resultId: string, comicObjectId: string): void =>
async (dispatch) => {
await SocketService.connect("admin", "password", true);
const downloadResult = await SocketService.post(
`search/${instanceId}/results/${resultId}/download`,
);
dispatch({
type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
downloadResult: downloadResult,
});
SocketService.disconnect();
try {
let bundleDBImportResult = {};
await SocketService.connect("admin", "password", true);
const downloadResult = await SocketService.post(
`search/${instanceId}/results/${resultId}/download`,
);
if (!isNil(downloadResult)) {
bundleDBImportResult = await axios({
method: "POST",
url: "http://localhost:3000/api/import/applyAirDCPPDownloadMetadata",
headers: {
"Content-Type": "application/json; charset=utf-8",
},
data: {
resultId,
comicObjectId,
downloadResult,
searchInstanceId: instanceId,
},
});
dispatch({
type: AIRDCPP_RESULT_DOWNLOAD_INITIATED,
downloadResult: downloadResult,
bundleDBImportResult,
});
}
SocketService.disconnect();
} catch (error) {
throw error;
}
};
export const getDownloadProgress =
(fileId: string, directoryId?: string): void =>
async (dispatch) => {
try {
await SocketService.connect("admin", "password", true);
SocketService.addListener(
`queue`,
"queue_bundle_tick",
async (downloadProgressData) => {
dispatch({
type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
downloadProgressData,
});
},
);
} catch (error) {
throw error;
}
};

7
src/client/actions/fileops.actions.tsx
View File

@@ -1,9 +1,5 @@
import axios from "axios";
import {
IFolderData,
IExtractedComicBookCoverFile,
IComicVineSearchQuery,
} from "threetwo-ui-typings";
import { IFolderData, IExtractedComicBookCoverFile } from "threetwo-ui-typings";
import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
import { io } from "socket.io-client";
import {
@@ -18,7 +14,6 @@ import {
IMS_CV_METADATA_IMPORT_FAILED,
} from "../constants/action-types";
import { refineQuery } from "../shared/utils/filenameparser.utils";
import { extend } from "lodash";
import sortBy from "array-sort-by";
export async function walkFolder(path: string): Promise<Array<IFolderData>> {

27
src/client/components/AcquisitionPanel.tsx
View File

@@ -1,8 +1,8 @@
import React, { useState, useEffect, useCallback, ReactElement } from "react";
import React, { useCallback, ReactElement } from "react";
import { search, downloadAirDCPPItem } from "../actions/airdcpp.actions";
import { useDispatch, useSelector } from "react-redux";
import { RootState, SearchInstance } from "threetwo-ui-typings";
import { each, isNil, map } from "lodash";
import { isNil, map } from "lodash";
interface IAcquisitionPanelProps {
comicBookMetadata: any;
@@ -13,6 +13,7 @@ export const AcquisitionPanel = (
): ReactElement => {
const volumeName =
props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
const airDCPPSearchResults = useSelector(
(state: RootState) => state.airdcpp.results,
@@ -26,6 +27,7 @@ export const AcquisitionPanel = (
const searchInstance: SearchInstance = useSelector(
(state: RootState) => state.airdcpp.searchInstance,
);
const dispatch = useDispatch();
const getDCPPSearchResults = useCallback(
(searchQuery) => {
@@ -35,16 +37,18 @@ export const AcquisitionPanel = (
);
const dcppQuery = {
query: {
pattern: `${volumeName}`,
pattern: `${sanitizedVolumeName}`,
extensions: ["cbz", "cbr"],
},
hub_urls: ["perfection.crabdance.com:777"],
hub_urls: ["nmdcs://piter.feardc.net:411"],
priority: 1,
};
const downloadDCPPResult = useCallback(
(searchInstanceId, resultId) =>
dispatch(downloadAirDCPPItem(searchInstanceId, resultId)),
(searchInstanceId, resultId, comicBookObjectId) =>
dispatch(
downloadAirDCPPItem(searchInstanceId, resultId, comicBookObjectId),
),
[dispatch],
);
return (
@@ -62,6 +66,7 @@ export const AcquisitionPanel = (
Search on AirDC++
</button>
</div>
{/* AirDC++ search instance details */}
{!isNil(searchInfo) && !isNil(searchInstance) && (
<>
<div className="column is-one-quarter is-size-7">
@@ -95,7 +100,7 @@ export const AcquisitionPanel = (
</>
)}
</div>
{/* results */}
{/* AirDC++ results */}
<div>
{!isNil(airDCPPSearchResults) && (
<table className="table is-striped">
@@ -110,7 +115,7 @@ export const AcquisitionPanel = (
<tbody>
{map(airDCPPSearchResults, ({ name, type, slots, users, id }) => {
return (
<tr>
<tr key={id}>
<td>
<p className="mb-2">
{type.id === "directory" ? (
@@ -149,7 +154,11 @@ export const AcquisitionPanel = (
<td>
<a
onClick={() =>
downloadDCPPResult(searchInstance.id, id)
downloadDCPPResult(
searchInstance.id,
id,
props.comicBookMetadata._id,
)
}
>
<i className="fas fa-file-download"></i>

8
src/client/components/ComicDetail.tsx
View File

@@ -4,6 +4,7 @@ import Card from "./Carda";
import MatchResult from "./MatchResult";
import ComicVineSearchForm from "./ComicVineSearchForm";
import AcquisitionPanel from "./AcquisitionPanel";
import DownloadsPanel from "./DownloadsPanel";
import { css } from "@emotion/react";
import PuffLoader from "react-spinners/PuffLoader";
@@ -50,6 +51,10 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
const comicBookDetailData = useSelector(
(state: RootState) => state.comicInfo.comicBookDetail,
);
const bundleMetadata = useSelector(
(state: RootState) => state.comicInfo.downloadResult,
);
const { comicObjectId } = useParams<{ comicObjectId: string }>();
const dispatch = useDispatch();
const toggleActionDropdown = () =>
@@ -60,7 +65,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
}, [page, dispatch]);
const openDrawerWithCVMatches = useCallback(() => {
console.log("here")
setVisible(true);
dispatch(fetchComicVineMatches(comicBookDetailData));
}, [dispatch, comicBookDetailData]);
@@ -155,7 +159,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
id: 4,
icon: <i className="fas fa-cloud-download-alt"></i>,
name: "Downloads",
content: <div>Downloads</div>,
content: <DownloadsPanel data={comicBookDetailData} />,
},
];
const MetadataTabGroup = () => {

51
src/client/components/DownloadsPanel.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React, { useCallback, useEffect, useState, ReactElement } from "react";
import { getDownloadProgress } from "../actions/airdcpp.actions";
import { useDispatch, useSelector } from "react-redux";
import { RootState, SearchInstance } from "threetwo-ui-typings";
import { isNil, map } from "lodash";
import prettyBytes from "pretty-bytes";
interface IDownloadsPanelProps {
data: any;
}
export const DownloadsPanel = (
props: IDownloadsPanelProps,
): ReactElement | null => {
const downloadProgressTick = useSelector(
(state: RootState) => state.airdcpp.downloadProgressData,
);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getDownloadProgress("12312"));
}, [dispatch]);
return !isNil(downloadProgressTick) ? (
<div className="column is-one-quarter">
{JSON.stringify(downloadProgressTick)}
<progress
className="progress is-small is-success"
value={downloadProgressTick.downloaded_bytes}
max={downloadProgressTick.size}
>
{(parseInt(downloadProgressTick.downloaded_bytes) /
parseInt(downloadProgressTick.size)) *
100}
%
</progress>
<dl>
<dt>{downloadProgressTick.name}</dt>
<dd>
{prettyBytes(downloadProgressTick.downloaded_bytes)} of
{prettyBytes(downloadProgressTick.size)}
</dd>
<dd>
{prettyBytes(downloadProgressTick.speed)} per second. Time left:
{parseInt(downloadProgressTick.seconds_left) / 60}
</dd>
<dd>{downloadProgressTick.target}</dd>
</dl>
</div>
) : null;
};
export default DownloadsPanel;

4
src/client/constants/action-types.ts
View File

@@ -36,4 +36,6 @@ export const AIRDCPP_SEARCH_RESULTS_RECEIVED =
"AIRDCPP_SEARCH_RESULTS_RECEIVED";
export const AIRDCPP_HUB_SEARCHES_SENT = "AIRDCPP_HUB_SEARCHES_SENT";
export const AIRDCPP_RESULT_DOWNLOAD_INITIATED = "AIRDCPP_RESULT_DOWNLOAD_INITIATED";
export const AIRDCPP_RESULT_DOWNLOAD_INITIATED =
"AIRDCPP_RESULT_DOWNLOAD_INITIATED";
export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";

9
src/client/reducers/airdcpp.reducer.ts
View File

@@ -3,6 +3,7 @@ import {
AIRDCPP_SEARCH_RESULTS_RECEIVED,
AIRDCPP_HUB_SEARCHES_SENT,
AIRDCPP_RESULT_DOWNLOAD_INITIATED,
AIRDCPP_DOWNLOAD_PROGRESS_TICK,
} from "../constants/action-types";
const initialState = {
@@ -10,6 +11,8 @@ const initialState = {
searchStatus: "",
searchInfo: null,
searchInstance: null,
downloadResult: null,
bundleDBImportResult: null,
};
function airdcppReducer(state = initialState, action) {
@@ -39,6 +42,12 @@ function airdcppReducer(state = initialState, action) {
return {
...state,
downloadResult: action.downloadResult,
bundleDBImportResult: action.bundleDBImportResult,
};
case AIRDCPP_DOWNLOAD_PROGRESS_TICK:
return {
...state,
downloadProgressData: action.downloadProgressData,
};
default: