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

@@ -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) {

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 = (
+  const tooltipContent =
-    <ul>
+    mediaType === 'tv' &&
-      {downloadItem.map((status, index) => (
+    downloadItem.length > 1 &&
-        <li
+    downloadItem.every(
-          key={`dl-status-${status.externalId}-${index}`}
+      (item) =>
-          className="border-b border-gray-700 last:border-b-0"
+        item.downloadId && item.downloadId === downloadItem[0].downloadId
-        >
+    ) ? (
-          <DownloadBlock
+      <DownloadBlock
-            downloadItem={status}
+        downloadItem={downloadItem[0]}
-            title={Array.isArray(title) ? title[index] : title}
+        title={Array.isArray(title) ? title[0] : title}
-            is4k={is4k}
+        is4k={is4k}
-          />
+      />
-        </li>
+    ) : (
-      ))}
+      <ul>
-    </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 && (
+                  {mediaType === 'tv' &&
-                    <span className="ml-1">
+                    downloadItem[0].episode &&
-                      {intl.formatMessage(messages.seasonepisodenumber, {
+                    (downloadItem.length > 1 &&
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
+                    downloadItem.every(
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
+                      (item) =>
-                      })}
+                        item.downloadId &&
-                    </span>
+                        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 && (
+                  {mediaType === 'tv' &&
-                    <span className="ml-1">
+                    downloadItem[0].episode &&
-                      {intl.formatMessage(messages.seasonepisodenumber, {
+                    (downloadItem.length > 1 &&
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
+                    downloadItem.every(
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
+                      (item) =>
-                      })}
+                        item.downloadId &&
-                    </span>
+                        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 && (
+                  {mediaType === 'tv' &&
-                    <span className="ml-1">
+                    downloadItem[0].episode &&
-                      {intl.formatMessage(messages.seasonepisodenumber, {
+                    (downloadItem.length > 1 &&
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
+                    downloadItem.every(
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
+                      (item) =>
-                      })}
+                        item.downloadId &&
-                    </span>
+                        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" />
                 </>
               )}

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",