0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/locales/en/common.json
View file

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

28
src/components/widgets/queue/queueEntry.jsx Normal file
View file

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

8
src/utils/config/service-helpers.js
View file

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

57
src/widgets/radarr/component.jsx
View file

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

3
src/widgets/radarr/widget.js
View file

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

57
src/widgets/sonarr/component.jsx
View file

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

3
src/widgets/sonarr/widget.js
View file

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