🔧 Refactoring AirDC++ downloads

package.json

@@ -53,6 +53,7 @@
     "pretty-bytes": "^5.6.0",
     "react": "^18.0.0",
     "react-collapsible": "^2.8.3",
+    "react-comic-viewer": "^0.3.5",
     "react-datepicker": "^4.5.0",
     "react-dom": "^18.0.0",
     "react-fast-compare": "^3.2.0",

src/client/actions/airdcpp.actions.tsx

@@ -131,6 +131,14 @@ export const downloadAirDCPPItem =
         const downloadResult = await ADCPPSocket.post(
           `search/${instanceId}/results/${resultId}/download`,
         );
+        // download status check
+        await ADCPPSocket.addListener(
+          `queue`,
+          "queue_file_status",
+          async (searchInfo) => {
+            console.log("HERE", searchInfo);
+          },
+        );
 
         let bundleId;
         let directoryIds;

src/client/assets/scss/App.scss

@@ -246,7 +246,6 @@ pre {
             margin-top: 10px;
           }
         }
-
       }
       .is-divider {
         margin-top: 1.5rem;
@@ -271,17 +270,17 @@ pre {
 }
 
 .issue-metadata {
-  background-color: #FBFFEE;
+  background-color: #fbffee;
   padding: 0.8em;
   border-radius: 0.5rem;
   .name {
     font-size: 0.95rem;
-    color: #4A4F50;
+    color: #4a4f50;
   }
 }
 
 .comicInfo-metadata {
-  background-color: #F7EBDD;
+  background-color: #f7ebdd;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }
@@ -368,7 +367,7 @@ pre {
 .tabs {
   .download-icon-labels {
     .downloads-count {
-      margin: 0 1em 0 0.4em;
+      margin: 0 1em -1px 0.4em;
       border: 1px solid #ccc;
     }
   }

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -58,27 +58,33 @@ export const DownloadsPanel = (
     return (
       <div className="column is-half">
         {JSON.stringify(props.data.downloadProgressTick)}
+
+        <div className="card">
+          <div className="card-content is-size-7">
+            <dl>
+              <dt className="is-size-6">{props.data.name}</dt>
+              <dd>
+                <span className="is-size-3 has-text-weight-semibold">
+                  {prettyBytes(props.data.downloaded_bytes)}/
+                  {prettyBytes(props.data.size)}{" "}
+                </span>
                 <progress
                   className="progress is-small is-success"
                   value={props.data.downloaded_bytes}
                   max={props.data.size}
                 >
-          {(parseInt(props.data.downloaded_bytes) / parseInt(props.data.size)) *
+                  {(parseInt(props.data.downloaded_bytes) /
+                    parseInt(props.data.size)) *
                     100}
                   %
                 </progress>
-        <div className="card">
-          <div className="card-content is-size-7">
-            <dl>
-              <dt>{props.data.name}</dt>
-              <dd>
-                {prettyBytes(props.data.downloaded_bytes)} of{" "}
-                {prettyBytes(props.data.size)}
               </dd>
-              <dd>{prettyBytes(props.data.speed)} per second.</dd>
-              <dd>
+              <dd className="is-size-5">
+                {prettyBytes(props.data.speed)} per second.
+              </dd>
+              <dd className="is-size-5">
                 Time left:
-                {parseInt(props.data.seconds_left) / 60}
+                {Math.round(parseInt(props.data.seconds_left) / 60)}
               </dd>
               <dd>{props.data.target}</dd>
             </dl>