From 03f0bdbe39e9551cecf53876db0993e0a30de3aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?I=C3=B1aki=20Larramendi?=
 <30437204+ilarramendi@users.noreply.github.com>
Date: Wed, 10 Jul 2024 22:17:54 -0300
Subject: [PATCH] Added series empty subtitle episodes progress bar labels
 (#2575)

---
 frontend/src/pages/Series/index.tsx | 31 +++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx
index 229082444..c142a6767 100644
--- a/frontend/src/pages/Series/index.tsx
+++ b/frontend/src/pages/Series/index.tsx
@@ -65,25 +65,34 @@ const SeriesView: FunctionComponent = () => {
         cell: (row) => {
           const { episodeFileCount, episodeMissingCount, profileId, title } =
             row.row.original;
-          let progress = 0;
-          let label = "";
-          if (episodeFileCount === 0 || !profileId) {
-            progress = 0.0;
-          } else {
-            progress = (1.0 - episodeMissingCount / episodeFileCount) * 100.0;
-            label = `${
-              episodeFileCount - episodeMissingCount
-            }/${episodeFileCount}`;
-          }
 
+          const label = `${episodeFileCount - episodeMissingCount}/${episodeFileCount}`;
           return (
             <Progress.Root key={title} size="xl">
               <Progress.Section
-                value={progress}
+                value={
+                  episodeFileCount === 0 || !profileId
+                    ? 0
+                    : (1.0 - episodeMissingCount / episodeFileCount) * 100.0
+                }
                 color={episodeMissingCount === 0 ? "brand" : "yellow"}
               >
                 <Progress.Label>{label}</Progress.Label>
               </Progress.Section>
+              {episodeMissingCount === episodeFileCount && (
+                <Progress.Label
+                  styles={{
+                    label: {
+                      position: "absolute",
+                      top: "3px",
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                    },
+                  }}
+                >
+                  {label}
+                </Progress.Label>
+              )}
             </Progress.Root>
           );
         },