From a7314f876ea528fdec0fb0a2adaa36a01afcdf38 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Mon, 1 Feb 2021 12:13:01 +0000
Subject: [PATCH] fix(frontend): correctly show 4k download tracker activity

---
 src/components/DownloadBlock/index.tsx           | 15 +++++++++++++--
 src/components/MovieDetails/index.tsx            |  8 ++++++++
 src/components/RequestList/RequestItem/index.tsx |  2 +-
 src/components/TvDetails/index.tsx               |  8 ++++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/DownloadBlock/index.tsx b/src/components/DownloadBlock/index.tsx
index 3783d8c25..42deaad14 100644
--- a/src/components/DownloadBlock/index.tsx
+++ b/src/components/DownloadBlock/index.tsx
@@ -5,9 +5,13 @@ import Badge from '../Common/Badge';
 
 interface DownloadBlockProps {
   downloadItem: DownloadingItem;
+  is4k?: boolean;
 }
 
-const DownloadBlock: React.FC<DownloadBlockProps> = ({ downloadItem }) => {
+const DownloadBlock: React.FC<DownloadBlockProps> = ({
+  downloadItem,
+  is4k = false,
+}) => {
   return (
     <div className="p-4">
       <div className="w-56 mb-2 text-sm truncate sm:w-80 md:w-full">
@@ -36,7 +40,14 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({ downloadItem }) => {
         </div>
       </div>
       <div className="flex items-center justify-between text-xs">
-        <Badge className="capitalize">{downloadItem.status}</Badge>
+        <span>
+          {is4k && (
+            <Badge badgeType="warning" className="mr-1">
+              4K
+            </Badge>
+          )}
+          <Badge className="capitalize">{downloadItem.status}</Badge>
+        </span>
         <span>
           ETA{' '}
           {downloadItem.estimatedCompletionTime ? (
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index afe92a85f..29fd784c3 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -163,6 +163,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                     <DownloadBlock downloadItem={status} />
                   </li>
                 ))}
+                {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
+                  <li
+                    key={`dl-status-${status.externalId}-${index}`}
+                    className="border-b border-gray-700 last:border-b-0"
+                  >
+                    <DownloadBlock downloadItem={status} is4k />
+                  </li>
+                ))}
               </ul>
             </div>
           </>
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 807555ef7..435a6eb85 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -193,7 +193,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
           </Badge>
         ) : (
           <StatusBadge
-            status={requestData.media.status}
+            status={requestData.media[requestData.is4k ? 'status4k' : 'status']}
             inProgress={
               (
                 requestData.media[
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 60d649b27..e30edb647 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -191,6 +191,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     <DownloadBlock downloadItem={status} />
                   </li>
                 ))}
+                {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
+                  <li
+                    key={`dl-status-${status.externalId}-${index}`}
+                    className="border-b border-gray-700 last:border-b-0"
+                  >
+                    <DownloadBlock downloadItem={status} is4k />
+                  </li>
+                ))}
               </ul>
             </div>
           </>