Add a component to show the progress of the download

* Create a separate file for css
* Clean the css from unused styles

frontend/js/components/details/downloadProgress.js

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+export const DownloadProgress = ({ imdbId, season, episode }) => {
+  let history = useHistory();
+  const torrentGroup = useSelector((state) =>
+    state.torrents.torrents.get(imdbId)
+  );
+  if (!torrentGroup || torrentGroup.length === 0) {
+    return null;
+  }
+
+  let torrent;
+  const type = torrentGroup[0].type;
+  switch (type) {
+    case "movie":
+      torrent = torrentGroup[0];
+      break;
+    case "episode": {
+      if (!season || !episode) {
+        return null;
+      }
+
+      const torrents = torrentGroup.filter(
+        (torrent) => torrent.episode === episode && torrent.season === season
+      );
+      if (torrents.length !== 1) {
+        return null;
+      }
+      torrent = torrents[0];
+
+      break;
+    }
+    default:
+      return null;
+  }
+
+  if (!torrent || !torrent.status) {
+    return null;
+  }
+
+  const progress = Number(torrent.status.percent_done).toFixed(1);
+  if (progress === 0) {
+    return null;
+  }
+
+  const handleClick = () => {
+    history.push("/torrents/list");
+  };
+
+  return (
+    <div className="w-100 mt-n2 clickable" onClick={handleClick}>
+      <small className="text text-muted">Downloading...</small>
+      <div
+        className="progress"
+        style={{
+          height: "0.2rem",
+        }}
+      >
+        <div
+          className="progress-bar bg-warning"
+          style={{
+            width: `${progress}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+DownloadProgress.propTypes = {
+  imdbId: PropTypes.string.isRequired,
+  season: PropTypes.number,
+  episode: PropTypes.number,
+};

frontend/js/components/list/details.js

@@ -12,6 +12,7 @@ import { Rating } from "../details/rating";
 import { ReleaseDate } from "../details/releaseDate";
 import { Runtime } from "../details/runtime";
 import { Title } from "../details/title";
+import { DownloadProgress } from "../details/downloadProgress";
 
 const ListDetails = (props) => {
   if (!props.data || Object.keys(props.data).length === 0) {
@@ -41,6 +42,7 @@ const ListDetails = (props) => {
           subtitles={props.data.subtitles}
         />
       </div>
+      <DownloadProgress imdbId={props.data.imdb_id} />
       <TrackingLabel
         wishlisted={props.data.wishlisted}
         inLibrary={props.data.polochon_url !== ""}

frontend/js/components/movies/details.js

@@ -20,6 +20,7 @@ import { PolochonMetadata } from "../details/polochon";
 import { TrackingLabel } from "../details/tracking";
 import { Genres } from "../details/genres";
 import { Runtime } from "../details/runtime";
+import { DownloadProgress } from "../details/downloadProgress";
 
 import { DownloadAndStream } from "../buttons/download";
 import { ImdbBadge } from "../buttons/imdb";
@@ -122,6 +123,9 @@ export const Header = () => {
                 subtitles={subtitles}
               />
             </div>
+            <div className="card-text mt-2">
+              <DownloadProgress imdbId={imdbId} />
+            </div>
             <p className="card-text">
               <TrackingLabel inLibrary={inLibrary} wishlisted={wishlisted} />
             </p>

frontend/js/components/shows/details/episode.js

@@ -11,6 +11,7 @@ import { PolochonMetadata } from "../../details/polochon";
 import { ReleaseDate } from "../../details/releaseDate";
 import { Runtime } from "../../details/runtime";
 import { Title } from "../../details/title";
+import { DownloadProgress } from "../../details/downloadProgress";
 
 import { DownloadAndStream } from "../../buttons/download";
 import { ShowMore } from "../../buttons/showMore";
@@ -62,6 +63,7 @@ export const Episode = ({ season, episode }) => {
         />
         <ReleaseDate date={data.aired} />
         <Runtime runtime={data.runtime} />
+        <DownloadProgress imdbId={imdbId} season={season} episode={episode} />
         <Plot plot={data.plot} />
         <DownloadAndStream
           name={prettyEpisodeName(showTitle, season, episode)}

frontend/webpack.config.js

@@ -113,9 +113,6 @@ const config = {
     new MiniCssExtractPlugin({
       filename: "[contenthash].css",
     }),
-    new PurgeCSSPlugin({
-      paths: () => glob.sync(`${SRC_DIR}/**/*`, { nodir: true }),
-    }),
     new WorkboxPlugin.GenerateSW(),
   ],
   resolve: {
@@ -124,4 +121,12 @@ const config = {
   devtool: mode === "production" ? false : "source-map",
 };
 
+if (mode === "production") {
+  config.plugins.push(
+    new PurgeCSSPlugin({
+      paths: () => glob.sync(`${SRC_DIR}/**/*`, { nodir: true }),
+    })
+  );
+}
+
 module.exports = config;