fix(frontend): correctly show 4k download tracker activity

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 ? (

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>
           </>

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[

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>
           </>