From 5b3d1cc6e06ef71d2d9bf8fe4d396c7383c57370 Mon Sep 17 00:00:00 2001 From: Matteo Bossi Date: Tue, 6 Jun 2023 01:14:10 +0200 Subject: [PATCH] Make styling more consistent and add toggle to opt-in instead of opting out --- public/locales/en/common.json | 6 ++- src/components/widgets/queue/queueEntry.jsx | 28 ++++++++++ src/utils/config/service-helpers.js | 8 ++- src/widgets/radarr/component.jsx | 57 +++++++++------------ src/widgets/radarr/widget.js | 3 +- src/widgets/sonarr/component.jsx | 57 +++++++++------------ src/widgets/sonarr/widget.js | 3 +- 7 files changed, 92 insertions(+), 70 deletions(-) create mode 100644 src/components/widgets/queue/queueEntry.jsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 7f1a86de..a3d74aee 100755 --- a/public/locales/en/common.json +++ b/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", diff --git a/src/components/widgets/queue/queueEntry.jsx b/src/components/widgets/queue/queueEntry.jsx new file mode 100644 index 00000000..0d0625e9 --- /dev/null +++ b/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 ( +
+
+
+ {status === "paused" && ( + + )} + {status !== "paused" && ( + + )} +
+
+
{title}
+
+
+ {timeLeft ? `${activity} - ${timeLeft}` : activity} +
+
+ ); +} diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js index 7f9d45e4..41fe263a 100644 --- a/src/utils/config/service-helpers.js +++ b/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; } diff --git a/src/widgets/radarr/component.jsx b/src/widgets/radarr/component.jsx index 2e58bf9d..0212eaa7 100644 --- a/src/widgets/radarr/component.jsx +++ b/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 ; } + const enableQueue = widget?.enableQueue; + if (!moviesData || !queuedData || !queueDetailsData) { return ( <> @@ -41,9 +44,11 @@ export default function Component({ service }) { - - - + { enableQueue && + + + + } ); } @@ -56,34 +61,22 @@ export default function Component({ service }) { - - - {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => ( -
-
-
-
{moviesData.all.find((entry) => entry.id === queueEntry.movieId)?.title}
-
-
{formatDownloadState(queueEntry.trackedDownloadState)}
-
-
-
-
-
-
{queueEntry.timeLeft}
-
-
- )) : undefined} - - + { enableQueue && + + + {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => ( + entry.id === queueEntry.movieId)?.title} + activity={formatDownloadState(queueEntry.trackedDownloadState)} + key={queueEntry.movieId} + /> + )) : undefined} + + + } ); } diff --git a/src/widgets/radarr/widget.js b/src/widgets/radarr/widget.js index 0f53ab14..8d70192f 100644 --- a/src/widgets/radarr/widget.js +++ b/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" diff --git a/src/widgets/sonarr/component.jsx b/src/widgets/sonarr/component.jsx index ee548b58..0f87b975 100644 --- a/src/widgets/sonarr/component.jsx +++ b/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 ; } + const enableQueue = widget?.enableQueue; + if (!wantedData || !queuedData || !seriesData || !queueDetailsData) { return ( <> @@ -41,9 +44,11 @@ export default function Component({ service }) { - - - + { enableQueue && + + + + } ); } @@ -55,34 +60,22 @@ export default function Component({ service }) { - - - {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => ( -
-
-
-
{seriesData.find((entry) => entry.id === queueEntry.seriesId).title} • {queueEntry.episodeTitle}
-
-
{formatDownloadState(queueEntry.trackedDownloadState)}
-
-
-
-
-
-
{queueEntry.timeLeft}
-
-
- )) : undefined} - - + { enableQueue && + + + {Array.isArray(queueDetailsData) ? queueDetailsData.map((queueEntry) => ( + entry.id === queueEntry.seriesId)?.title } • ${ queueEntry.episodeTitle}`} + activity={formatDownloadState(queueEntry.trackedDownloadState)} + key={queueEntry.episodeId} + /> + )) : undefined} + + + } ); } diff --git a/src/widgets/sonarr/widget.js b/src/widgets/sonarr/widget.js index 80afdb99..c0fae806 100644 --- a/src/widgets/sonarr/widget.js +++ b/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"