From 4cae6cc479ebdef3ea217c4bd86ba8772573cb47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Tue, 24 Aug 2021 09:47:45 -1000
Subject: [PATCH] Add a component to show the progress of the download

---
 .../js/components/details/downloadProgress.js | 77 +++++++++++++++++++
 frontend/js/components/list/details.js        |  2 +
 frontend/js/components/movies/details.js      |  4 +
 .../js/components/shows/details/episode.js    |  2 +
 4 files changed, 85 insertions(+)
 create mode 100644 frontend/js/components/details/downloadProgress.js

diff --git a/frontend/js/components/details/downloadProgress.js b/frontend/js/components/details/downloadProgress.js
new file mode 100644
index 0000000..0a2b12f
--- /dev/null
+++ b/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,
+};
diff --git a/frontend/js/components/list/details.js b/frontend/js/components/list/details.js
index 6af8e6f..c00ed7b 100644
--- a/frontend/js/components/list/details.js
+++ b/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 !== ""}
diff --git a/frontend/js/components/movies/details.js b/frontend/js/components/movies/details.js
index d80c561..9c0a115 100644
--- a/frontend/js/components/movies/details.js
+++ b/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>
diff --git a/frontend/js/components/shows/details/episode.js b/frontend/js/components/shows/details/episode.js
index bc4738e..c60a17d 100644
--- a/frontend/js/components/shows/details/episode.js
+++ b/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)}