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

This commit is contained in:
Matteo Bossi 2023-06-06 01:14:10 +02:00
parent 0eab4e7943
commit 5b3d1cc6e0
7 changed files with 92 additions and 70 deletions

View file

@ -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>
}
</>
);
}

View file

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

View file

@ -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>
}
</>
);
}

View file

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