open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
pull/1560/head
Matteo Bossi 2 years ago
parent 0eab4e7943
commit 5b3d1cc6e0
7 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File

6
public/locales/en/common.json
Unescape View File

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

28
src/components/widgets/queue/queueEntry.jsx
Unescape 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
Unescape View File

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

57
src/widgets/radarr/component.jsx
Unescape 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>
}
</>
);
}

3
src/widgets/radarr/widget.js
Unescape 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"

57
src/widgets/sonarr/component.jsx
Unescape 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>
}
</>
);
}

3
src/widgets/sonarr/widget.js
Unescape 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"

Write Preview
Loading…
Cancel
Save