From 80f63017ac5e9b1720a19c761dbef4dd517f1c2c Mon Sep 17 00:00:00 2001
From: Gauthier <mail@gauthierth.fr>
Date: Mon, 19 Aug 2024 06:02:52 +0200
Subject: [PATCH] fix: handle status badge for season packs (#927)

* fix: handle status badge for season packs

When a series is downloaded with a season pack, the status tooltip displays only the name of the
first episode as a title, and displays a list of all episodes as a description, with the same file
being repeated for each episode. This PR fixes this, using the season number as the tooltip title
and showing only the season pack file currently being downloaded.

* fix: add missing i18n translation
---
 server/lib/downloadtracker.ts        |   3 +
 src/components/StatusBadge/index.tsx | 132 +++++++++++++++++++--------
 src/i18n/locale/en.json              |   1 +
 3 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/server/lib/downloadtracker.ts b/server/lib/downloadtracker.ts
index cf29313e..e948c580 100644
--- a/server/lib/downloadtracker.ts
+++ b/server/lib/downloadtracker.ts
@@ -20,6 +20,7 @@ export interface DownloadingItem {
   timeLeft: string;
   estimatedCompletionTime: Date;
   title: string;
+  downloadId: string;
   episode?: EpisodeNumberResult;
 }
 
@@ -95,6 +96,7 @@ class DownloadTracker {
               status: item.status,
               timeLeft: item.timeleft,
               title: item.title,
+              downloadId: item.downloadId,
             }));
 
             if (queueItems.length > 0) {
@@ -172,6 +174,7 @@ class DownloadTracker {
               timeLeft: item.timeleft,
               title: item.title,
               episode: item.episode,
+              downloadId: item.downloadId,
             }));
 
             if (queueItems.length > 0) {
diff --git a/src/components/StatusBadge/index.tsx b/src/components/StatusBadge/index.tsx
index e7cbbbba..0061a903 100644
--- a/src/components/StatusBadge/index.tsx
+++ b/src/components/StatusBadge/index.tsx
@@ -18,6 +18,7 @@ const messages = defineMessages('components.StatusBadge', {
   playonplex: 'Play on {mediaServerName}',
   openinarr: 'Open in {arr}',
   managemedia: 'Manage {mediaType}',
+  seasonnumber: 'S{seasonNumber}',
   seasonepisodenumber: 'S{seasonNumber}E{episodeNumber}',
 });
 
@@ -107,22 +108,34 @@ const StatusBadge = ({
     }
   }
 
-  const tooltipContent = (
-    <ul>
-      {downloadItem.map((status, index) => (
-        <li
-          key={`dl-status-${status.externalId}-${index}`}
-          className="border-b border-gray-700 last:border-b-0"
-        >
-          <DownloadBlock
-            downloadItem={status}
-            title={Array.isArray(title) ? title[index] : title}
-            is4k={is4k}
-          />
-        </li>
-      ))}
-    </ul>
-  );
+  const tooltipContent =
+    mediaType === 'tv' &&
+    downloadItem.length > 1 &&
+    downloadItem.every(
+      (item) =>
+        item.downloadId && item.downloadId === downloadItem[0].downloadId
+    ) ? (
+      <DownloadBlock
+        downloadItem={downloadItem[0]}
+        title={Array.isArray(title) ? title[0] : title}
+        is4k={is4k}
+      />
+    ) : (
+      <ul>
+        {downloadItem.map((status, index) => (
+          <li
+            key={`dl-status-${status.externalId}-${index}`}
+            className="border-b border-gray-700 last:border-b-0"
+          >
+            <DownloadBlock
+              downloadItem={status}
+              title={Array.isArray(title) ? title[index] : title}
+              is4k={is4k}
+            />
+          </li>
+        ))}
+      </ul>
+    );
 
   const badgeDownloadProgress = (
     <div
@@ -177,14 +190,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
@@ -230,14 +256,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
@@ -283,14 +322,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index f34aa5b4..5c9aa6fe 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -1056,6 +1056,7 @@
   "components.StatusBadge.openinarr": "Open in {arr}",
   "components.StatusBadge.playonplex": "Play on {mediaServerName}",
   "components.StatusBadge.seasonepisodenumber": "S{seasonNumber}E{episodeNumber}",
+  "components.StatusBadge.seasonnumber": "S{seasonNumber}",
   "components.StatusBadge.status": "{status}",
   "components.StatusBadge.status4k": "4K {status}",
   "components.StatusChecker.appUpdated": "{applicationTitle} Updated",