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

🔧 Fixing the DC++ download bundles

Browse Source
This commit is contained in:
Rishi Ghan
2024-10-18 13:18:59 -04:00
parent af130384f1
commit 5d430504ec
2 changed files with 118 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -1,5 +1,4 @@
import React, { useCallback, ReactElement, useEffect, useState } from "react"; import React, { useCallback, ReactElement, useEffect, useState } from "react";
import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings"; import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
import { RootState, SearchInstance } from "threetwo-ui-typings"; import { RootState, SearchInstance } from "threetwo-ui-typings";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
@@ -12,7 +11,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios"; import axios from "axios";
import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints"; import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
interface IAcquisitionPanelProps { interface IAcquisitionPanelProps {
query: any; query: any;
comicObjectId: any; comicObjectId: any;
@@ -35,7 +33,7 @@ export const AcquisitionPanel = (
priority: PriorityEnum; priority: PriorityEnum;
} }
interface SearchResult { interface SearchResult {
id: string; id: string;
// Add other properties as needed // Add other properties as needed
slots: any; slots: any;
type: any; type: any;
@@ -112,26 +110,20 @@ export const AcquisitionPanel = (
*/ */
const search = async (searchData: any) => { const search = async (searchData: any) => {
setAirDCPPSearchResults([]); setAirDCPPSearchResults([]);
socketIOInstance.emit( socketIOInstance.emit("call", "socket.search", {
"call", query: searchData,
"socket.search", config: {
{ protocol: `ws`,
query: searchData, hostname: `localhost:5600`,
config: { username: `user`,
protocol: `ws`, password: `pass`,
hostname: `localhost:5600`,
username: `user`,
password: `pass`,
},
}, },
); });
}; };
socketIOInstance.on("searchResultAdded", ({ result }: any) => { socketIOInstance.on("searchResultAdded", ({ result }: any) => {
setAirDCPPSearchResults((previousState) => { setAirDCPPSearchResults((previousState) => {
const exists = previousState.some( const exists = previousState.some((item) => result.id === item.id);
(item) => result.id === item.id,
);
if (!exists) { if (!exists) {
return [...previousState, result]; return [...previousState, result];
} }
@@ -205,7 +197,7 @@ export const AcquisitionPanel = (
search(manualQuery); search(manualQuery);
}; };
return ( return (
<> <>
<div className="mt-5"> <div className="mt-5">
@@ -334,118 +326,121 @@ export const AcquisitionPanel = (
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100 dark:divide-gray-500"> <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
{map(airDCPPSearchResults, ({ dupe, type, name, id, slots, users, size }, idx) => { {map(
return ( airDCPPSearchResults,
<tr ({ dupe, type, name, id, slots, users, size }, idx) => {
key={idx} return (
className={ <tr
!isNil(dupe) key={idx}
? "bg-gray-100 dark:bg-gray-700" className={
: "w-fit text-sm" !isNil(dupe)
} ? "bg-gray-100 dark:bg-gray-700"
> : "w-fit text-sm"
<td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300"> }
<p className="mb-2"> >
{type.id === "directory" ? ( <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
<i className="fas fa-folder"></i> <p className="mb-2">
) : null} {type.id === "directory" ? (
{ellipsize(name, 70)} <i className="fas fa-folder"></i>
</p> ) : null}
{ellipsize(name, 70)}
<dl> </p>
<dd>
<div className="inline-flex flex-row gap-2"> <dl>
{!isNil(dupe) ? ( <dd>
<div className="inline-flex flex-row gap-2">
{!isNil(dupe) ? (
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
Dupe
</span>
</span>
) : null}
{/* Nicks */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1"> <span className="pr-1 pt-1">
<i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i> <i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
</span> </span>
<span className="text-md text-slate-500 dark:text-slate-900"> <span className="text-md text-slate-500 dark:text-slate-900">
Dupe {users.user.nicks}
</span> </span>
</span> </span>
) : null} {/* Flags */}
{users.user.flags.map((flag, idx) => (
{/* Nicks */} <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="pr-1 pt-1">
<span className="pr-1 pt-1"> <i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
<i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i> </span>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
<span className="text-md text-slate-500 dark:text-slate-900"> {flag}
{users.user.nicks} </span>
</span>
</span>
{/* Flags */}
{users.user.flags.map((flag, idx) => (
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
</span> </span>
))}
<span className="text-md text-slate-500 dark:text-slate-900"> </div>
{flag} </dd>
</span> </dl>
</span> </td>
))} <td>
</div> {/* Extension */}
</dd> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
</dl> <span className="pr-1 pt-1">
</td> <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
<td> </span>
{/* Extension */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="text-md text-slate-500 dark:text-slate-900">
<span className="pr-1 pt-1"> {type.str}
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i> </span>
</span> </span>
</td>
<span className="text-md text-slate-500 dark:text-slate-900"> <td className="px-2">
{type.str} {/* Slots */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{slots.total} slots; {slots.free} free
</span>
</span> </span>
</span> </td>
</td> <td className="px-2">
<td className="px-2"> <button
{/* Slots */} className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> onClick={() =>
<span className="pr-1 pt-1"> download(
<i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i> airDCPPSearchInstance.id,
</span> id,
comicObjectId,
<span className="text-md text-slate-500 dark:text-slate-900"> name,
{slots.total} slots; {slots.free} free size,
</span> type,
</span> {
</td> protocol: `ws`,
<td className="px-2"> hostname: `localhost:5600`,
<button username: `user`,
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500" password: `pass`,
onClick={() => },
download( )
airDCPPSearchInstance.id, }
id, >
comicObjectId, <span className="text-xs">Download</span>
name, <span className="w-5 h-5">
size, <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
type, </span>
{ </button>
protocol: `ws`, </td>
hostname: `localhost:5600`, </tr>
username: `user`, );
password: `pass`, },
}, )}
)
}
>
<span className="text-xs">Download</span>
<span className="w-5 h-5">
<i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
</span>
</button>
</td>
</tr>
);
})}
</tbody> </tbody>
</table> </table>
</div> </div>

2
src/client/components/shared/Carda.tsx
View File

@@ -83,7 +83,7 @@ const renderCard = (props: ICardProps): ReactElement => {
case "vertical-2": case "vertical-2":
return ( return (
<div className="block rounded-md w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500"> <div className="block rounded-md max-w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
<img <img
alt="Home" alt="Home"
src={props.imageUrl} src={props.imageUrl}