Make styling more consistent and add toggle to opt-in instead of opting out

public/locales/en/common.json

@@ -194,13 +194,15 @@
     "sonarr": {
         "wanted": "Wanted",
         "queued": "Queued",
-        "series": "Series"
+        "series": "Series",
+        "queue": "Queue"
     },
     "radarr": {
         "wanted": "Wanted",
         "missing": "Missing",
         "queued": "Queued",
-        "movies": "Movies"
+        "movies": "Movies",
+        "queue": "Queue"
     },
     "lidarr": {
         "wanted": "Wanted",

src/components/widgets/queue/queueEntry.jsx

@@ -0,0 +1,28 @@
+import {BsFillPlayFill, BsPauseFill} from "react-icons/bs";
+
+export default function QueueEntry({ status, title, activity, timeLeft, progress}) {
+  return (
+    <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
+      <div
+        className="absolute h-5 rounded-md bg-theme-200 dark:bg-theme-900/40 z-0"
+        style={{
+          width: `${progress}%`,
+        }}
+      />
+      <div className="text-xs z-10 self-center ml-1">
+        {status === "paused" && (
+          <BsPauseFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+        )}
+        {status !== "paused" && (
+          <BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
+        )}
+      </div>
+      <div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
+        <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden text-left">{title}</div>
+      </div>
+      <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+        {timeLeft ? `${activity} - ${timeLeft}` : activity}
+      </div>
+    </div>
+  );
+}

src/utils/config/service-helpers.js

@@ -168,7 +168,7 @@ export async function servicesFromKubernetes() {
       .filter((ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/href`])
       ingressList.items.push(...traefikServices);
     }
-    
+
     if (!ingressList) {
       return [];
     }
@@ -276,7 +276,8 @@ export function cleanServiceGroups(groups) {
           wan, // opnsense widget, pfsense widget
           enableBlocks, // emby/jellyfin
           enableNowPlaying,
-          volume, // diskstation widget
+          volume, // diskstation widget,
+          enableQueue, // sonarr/radarr
         } = cleanedService.widget;
 
         const fieldsList = typeof fields === 'string' ? JSON.parse(fields) : fields;
@@ -312,6 +313,9 @@ export function cleanServiceGroups(groups) {
           if (enableBlocks !== undefined) cleanedService.widget.enableBlocks = JSON.parse(enableBlocks);
           if (enableNowPlaying !== undefined) cleanedService.widget.enableNowPlaying = JSON.parse(enableNowPlaying);
         }
+        if (["sonarr", "radarr"].includes(type)) {
+          if (enableQueue !== undefined) cleanedService.widget.enableQueue = JSON.parse(enableQueue);
+        }
         if (["diskstation", "qnap"].includes(type)) {
           if (volume) cleanedService.widget.volume = volume;
         }

src/widgets/radarr/component.jsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "next-i18next";
 import { useCallback } from 'react';
-import classNames from 'classnames';
+
+import QueueEntry from "../../components/widgets/queue/queueEntry";
 
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
@@ -32,6 +33,8 @@ export default function Component({ service }) {
     return <Container service={service} error={finalError} />;
   }
 
+  const enableQueue = widget?.enableQueue;
+
   if (!moviesData || !queuedData || !queueDetailsData) {
     return (
       <>
@@ -41,9 +44,11 @@ export default function Component({ service }) {
           <Block label="radarr.queued" />
           <Block label="radarr.movies" />
         </Container>
-        <Container service={service}>
-          <BlockList label="radarr.queued" />
-        </Container>
+        { enableQueue &&
+          <Container service={service}>
+            <BlockList label="radarr.queued" />
+          </Container>
+        }
       </>
     );
   }
@@ -56,34 +61,22 @@ export default function Component({ service }) {
         <Block label="radarr.queued" value={t("common.number", { value: queuedData.totalCount })} />
         <Block label="radarr.movies" value={t("common.number", { value: moviesData.have })} />
       </Container>
-      <Container service={service}>
-        <BlockList label="radarr.queued" childHeight={52}>
-          {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => (
-            <div className="my-0.5 w-full flex flex-col justify-between items-center" key={queueEntry.movieId}>
-              <div className="h-6 w-full flex flex-row justify-between items-center">
-                <div className="w-full mr-5 overflow-hidden">
-                  <div className="whitespace-nowrap w-0 text-left">{moviesData.all.find((entry) => entry.id === queueEntry.movieId)?.title}</div>
-                </div>
-                <div>{formatDownloadState(queueEntry.trackedDownloadState)}</div>
-              </div>
-              <div className="h-6 w-full flex flex-row justify-between items-center">
-                <div className="mr-5 w-full bg-theme-800/30 rounded-full h-full dark:bg-theme-200/20">
-                  <div
-                    className={classNames(
-                      "h-full rounded-full transition-all duration-1000",
-                      queueEntry.trackedDownloadStatus === "ok" ? "bg-blue-500/80" : "bg-orange-500/80"
-                    )}
-                    style={{
-                      width: `${(1 - queueEntry.sizeLeft / queueEntry.size) * 100}%`,
-                    }}
-                  />
-                </div>
-                <div className="w-24 text-right">{queueEntry.timeLeft}</div>
-              </div>
-            </div>
-          )) : undefined}
-        </BlockList>
-      </Container>
+      { enableQueue &&
+        <Container service={service}>
+          <BlockList label="radarr.queue" childHeight={24}>
+            {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => (
+              <QueueEntry
+                progress={(1 - queueEntry.sizeLeft / queueEntry.size) * 100}
+                status={queueEntry.status}
+                timeLeft={queueEntry.timeLeft}
+                title={moviesData.all.find((entry) => entry.id === queueEntry.movieId)?.title}
+                activity={formatDownloadState(queueEntry.trackedDownloadState)}
+                key={queueEntry.movieId}
+              />
+            )) : undefined}
+          </BlockList>
+        </Container>
+      }
     </>
   );
 }

src/widgets/radarr/widget.js

@@ -29,7 +29,8 @@ const widget = {
         timeLeft: entry.timeleft,
         size: entry.size,
         sizeLeft: entry.sizeleft,
-        movieId: entry.movieId
+        movieId: entry.movieId,
+        status: entry.status
       })).sort((a, b) => {
         const downloadingA = a.trackedDownloadState === "downloading"
         const downloadingB = b.trackedDownloadState === "downloading"

src/widgets/sonarr/component.jsx

@@ -1,7 +1,8 @@
 import { useTranslation } from "next-i18next";
-import classNames from 'classnames';
 import { useCallback } from 'react';
 
+import QueueEntry from "../../components/widgets/queue/queueEntry";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
@@ -33,6 +34,8 @@ export default function Component({ service }) {
     return <Container service={service} error={finalError} />;
   }
 
+  const enableQueue = widget?.enableQueue;
+
   if (!wantedData || !queuedData || !seriesData || !queueDetailsData) {
     return (
       <>
@@ -41,9 +44,11 @@ export default function Component({ service }) {
           <Block label="sonarr.queued" />
           <Block label="sonarr.series" />
         </Container>
-        <Container service={service}>
-          <BlockList label="sonarr.queued" />
-        </Container>
+        { enableQueue &&
+          <Container service={service}>
+            <BlockList label="sonarr.queued" />
+          </Container>
+        }
       </>
     );
   }
@@ -55,34 +60,22 @@ export default function Component({ service }) {
         <Block label="sonarr.queued" value={t("common.number", { value: queuedData.totalRecords })} />
         <Block label="sonarr.series" value={t("common.number", { value: seriesData.length })} />
       </Container>
-      <Container service={service}>
-        <BlockList label="sonarr.queued" childHeight={52}>
-          {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => (
-            <div className="my-0.5 w-full flex flex-col justify-between items-center" key={queueEntry.episodeId}>
-              <div className="h-6 w-full flex flex-row justify-between items-center">
-                <div className="w-full mr-5 overflow-hidden">
-                  <div className="whitespace-nowrap text-left w-0">{seriesData.find((entry) => entry.id === queueEntry.seriesId).title} • {queueEntry.episodeTitle}</div>
-                </div>
-                <div>{formatDownloadState(queueEntry.trackedDownloadState)}</div>
-              </div>
-              <div className="h-6 w-full flex flex-row justify-between items-center">
-                <div className="mr-5 w-full bg-theme-800/30 rounded-full h-full dark:bg-theme-200/20">
-                  <div
-                    className={classNames(
-                      "h-full rounded-full transition-all duration-1000",
-                      queueEntry.trackedDownloadStatus === "ok" ? "bg-blue-500/80" : "bg-orange-500/80"
-                    )}
-                    style={{
-                      width: `${(1 - queueEntry.sizeLeft / queueEntry.size) * 100}%`,
-                    }}
-                  />
-                </div>
-                <div className="w-24 text-right">{queueEntry.timeLeft}</div>
-              </div>
-            </div>
-          )) : undefined}
-        </BlockList>
-      </Container>
+      { enableQueue &&
+        <Container service={service}>
+          <BlockList label="sonarr.queue" childHeight={24}>
+            {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => (
+              <QueueEntry
+                progress={(1 - queueEntry.sizeLeft / queueEntry.size) * 100}
+                status={queueEntry.status}
+                timeLeft={queueEntry.timeLeft}
+                title={`${seriesData.find((entry) => entry.id === queueEntry.seriesId)?.title  } • ${  queueEntry.episodeTitle}`}
+                activity={formatDownloadState(queueEntry.trackedDownloadState)}
+                key={queueEntry.episodeId}
+              />
+            )) : undefined}
+          </BlockList>
+        </Container>
+      }
     </>
   );
 }

src/widgets/sonarr/widget.js

@@ -35,7 +35,8 @@ const widget = {
         sizeLeft: entry.sizeleft,
         seriesId: entry.seriesId,
         episodeTitle: entry.episode?.title,
-        episodeId: entry.episodeId
+        episodeId: entry.episodeId,
+        status: entry.status
       })).sort((a, b) => {
         const downloadingA = a.trackedDownloadState === "downloading"
         const downloadingB = b.trackedDownloadState === "downloading"