Compare commits

..

1 Commits

Author SHA1 Message Date
Crowdin Bot
dd59ede224 New Crowdin translations by GitHub Action 2025-09-18 12:13:45 +00:00
38 changed files with 1095 additions and 1805 deletions

View File

@@ -38,7 +38,7 @@ jobs:
run_install: false
- name: Setup Node.js
uses: actions/setup-node@v6
uses: actions/setup-node@v5
with:
node-version: 20
cache: 'pnpm'
@@ -96,7 +96,7 @@ jobs:
run_install: false
- name: Setup Node.js
uses: actions/setup-node@v6
uses: actions/setup-node@v5
with:
node-version: 20
cache: 'pnpm'

View File

@@ -271,4 +271,4 @@ You can show the docker stats by clicking the status indicator but this can also
showStats: true
```
Also see the settings for [show docker stats](settings.md#show-container-stats).
Also see the settings for [show docker stats](settings.md#show-docker-stats).

View File

@@ -178,32 +178,3 @@ See [ClusterRole and ClusterRoleBinding](../installation/k8s.md#clusterrole-and-
## Caveats
Similarly to Docker service discovery, there currently is no rigid ordering to discovered services and discovered services will be displayed above those specified in the `services.yaml`.
## Adding extra configuration files
Some Homepage features (for example, [Proxmox](../configs/proxmox.md)) require additional configuration files such as `proxmox.yaml`.
When running Homepage on Kubernetes, these files must be provided via a `ConfigMap` and mounted into the container at `/app/config`.
### ConfigMap example
```yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: homepage
data:
proxmox.yaml: |
pve:
url: https://proxmox.host.or.ip:8006
token: username@pam!Token ID
secret: secret
```
Mount the file into `/app/config` by updating the `Deployment`:
```yaml
volumeMounts:
- mountPath: /app/config/proxmox.yaml
name: homepage-config
subPath: proxmox.yaml
```

View File

@@ -4,10 +4,10 @@ description: Proxmox Configuration
---
The Proxmox connection is configured in the `proxmox.yaml` file. See [Create token](#create-token) section below for details on how to generate the required API token.
To configure multiple nodes, ensure the key name in the `proxmox.yaml` matches the `proxmoxNode` field used in your service configuration.
You can configure multiple nodes - be sure to use the exact `proxmoxNode` identifier!
```yaml
pve: # must match your actual Proxmox node name
pve:
url: https://proxmox.host.or.ip:8006
token: username@pam!Token ID
secret: secret

View File

@@ -118,47 +118,6 @@ Each widget can optionally provide a list of which fields should be visible via
key: apikeyapikeyapikeyapikeyapikey
```
### Block Highlighting
Widgets can tint their metric block text automatically based on rules defined alongside the service. Attach a `highlight` section to the widget configuration and map each block to one or more numeric or string rules using the field key (for example, `queued`, `lan_users`).
```yaml
- Sonarr:
icon: sonarr.png
href: http://sonarr.host.or.ip
widget:
type: sonarr
url: http://sonarr.host.or.ip
key: ${SONARR_API_KEY}
highlight:
queued:
numeric:
- level: danger
when: gte
value: 20
- level: warn
when: gte
value: 5
- level: good
when: eq
value: 0
status:
string:
- level: danger
when: regex
value: "(failed|import) pending"
- level: good
when: equals
value: "All good"
status_code:
string:
- level: warn
when: regex
value: "^5\\d{2}$"
```
Supported numeric operators for the `when` property are `gt`, `gte`, `lt`, `lte`, `eq`, `ne`, `between`, and `outside`. String rules support `equals`, `includes`, `startsWith`, `endsWith`, and `regex`. Each rule can be inverted with `negate: true`, and string rules may pass `caseSensitive: true` or custom regex `flags`. The highlight engine does its best to coerce formatted values, but you will get the most reliable results when you pass plain numbers or strings into `<Block>`.
## Descriptions
Services may have descriptions,

View File

@@ -109,20 +109,6 @@ color: slate
Supported colors are: `slate`, `gray`, `zinc`, `neutral`, `stone`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `red`, `white`
## Block Highlight Levels
You can override the default Tailwind classes applied when a widget highlight rule resolves to the `good`, `warn`, or `danger` level.
```yaml
blockHighlights:
levels:
good: "bg-emerald-500/40 text-emerald-950 dark:bg-emerald-900/60 dark:text-emerald-400"
warn: "bg-amber-300/30 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200"
danger: "bg-rose-700/45 text-rose-200 dark:bg-rose-950/70 dark:text-rose-400"
```
Any unspecified level falls back to the built-in defaults.
## Layout
You can configure service and bookmarks sections to be either "column" or "row" based layouts, like so:
@@ -455,7 +441,6 @@ There are a few optional settings for the Quick Launch feature:
- `showSearchSuggestions`: show search suggestions for the internet search. If this is not specified then the setting will be inherited from the search widget. If it is not specified there either, it will default to false. For custom providers the `suggestionUrl` needs to be set in order for this to work.
- `provider`: search engine provider. If none is specified it will try to use the provider set for the Search Widget, if neither are present then internet search will be disabled.
- `hideVisitURL`: disable detecting and offering an option to open URLs. This is false by default, enabling the feature.
- `mobileButtonPosition`: enables and sets the position of the mobile quicklaunch button. Options are `top-left`, `top-right`, `bottom-left`, `bottom-right`. This is empty by default, disabling the feature.
```yaml
quicklaunch:
@@ -500,9 +485,9 @@ logpath: /logfile/path
By default, logs are sent both to `stdout` and to a file at the path specified. This can be changed by setting the `LOG_TARGETS` environment variable to one of `both` (default), `stdout` or `file`.
## Show Container Stats
## Show Docker Stats
You can show all docker or proxmox stats expanded in `settings.yaml`:
You can show all docker stats expanded in `settings.yaml`:
```yaml
showStats: true

View File

@@ -62,4 +62,3 @@ To ensure cohesiveness of various widgets, the following should be used as a gui
- Minimize the number of API calls
- Avoid the use of custom proxy unless absolutely necessary
- Widgets should be 'read-only', as in they should not make write changes using the relevant tool's API. Homepage widgets are designed to surface information, not to be a (usually worse) replacement for the tool itself.
- Widgets should not allow manually overriding the "refresh interval" setting, as misconfigured refresh intervals can easily lead to performance issues for users.

View File

@@ -32,7 +32,7 @@ More detail on configuring service widgets can be found in the [Service Widgets
## Info Widgets
Info widgets are used to display information in the header, often about your system or environment. Info widgets are defined in your `widgets.yaml` file. Here's an example:
Info widgets are used to display information in the header, often about your system or environment. Info widgets are defined your `widgets.yaml` file. Here's an example:
```yaml
- openmeteo:

View File

@@ -16,5 +16,4 @@ widget:
username: username
password: password
enableLeechProgress: true # optional, defaults to false
enableLeechSize: true # optional, defaults to false
```

View File

@@ -10,11 +10,11 @@ The Unraid widget allows you to monitor the resources of an Unraid server.
**Minimum Requirements:**
- Unraid 7.2 -or- Unraid Connect plugin 2025.08.19.1850
- API key with the **ADMIN** role: [Managing API Keys](https://docs.unraid.net/go/managing-api-keys)
- API key with the **GUEST** (read only) role: [Managing API Keys](https://docs.unraid.net/go/managing-api-keys)
The widget can display metrics for selected Unraid pools. If using one of the "pool" fields, you must also add the pool name to the settings.
**Allowed fields:** `["cpu","memoryPercent","memoryAvailable","memoryUsed","notifications","arrayFree","arrayUsedSpace","arrayUsedPercent","status","pool1UsedSpace","pool1FreeSpace","pool1UsedPercent","pool2UsedSpace","pool2FreeSpace","pool2UsedPercent","pool3UsedSpace","pool3FreeSpace","pool3UsedPercent","pool4UsedSpace","pool4FreeSpace","pool4UsedPercent"]`
**Allowed fields:** `["cpu","memoryPercent","memoryAvailable","memoryUsed","notifications","arrayFreeSpace","arrayUsedSpace","arrayUsedPercent","status","pool1UsedSpace","pool1FreeSpace","pool1UsedPercent","pool2UsedSpace","pool2FreeSpace","pool2UsedPercent","pool3UsedSpace","pool3FreeSpace","pool3UsedPercent","pool4UsedSpace","pool4FreeSpace","pool4UsedPercent"]`
```yaml
widget:

View File

@@ -1,28 +0,0 @@
---
title: Your Spotify
description: Your Spotify Widget Configuration
---
Learn more about [Your Spotify](https://github.com/Yooooomi/your_spotify).
Find your API key under `Settings > Account > Public token`, click `Generate` if not yet generated, copy key after
`?token=`.
Allowed fields: `["songs", "time", "artists"]`.
```yaml
widget:
type: yourspotify
url: http://your-spotify-server.host.or.ip # if using lsio image, add /api/
key: apikeyapikeyapikeyapikeyapikey
interval: month # optional, defaults to week
```
#### Interval
Allowed values for `interval`: `day`, `week`, `month`, `year`, `all`.
!!! note
`interval` is different from predefined intervals you see in `Your Spotify`'s UI.
For example, `This week` in UI means _from the start of this week_, here `week` means _past 7 days_.

View File

@@ -176,7 +176,6 @@ nav:
- widgets/services/wgeasy.md
- widgets/services/whatsupdocker.md
- widgets/services/xteve.md
- widgets/services/yourspotify.md
- widgets/services/zabbix.md
- "Information Widgets":
- widgets/info/index.md

View File

@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.6.0",
"version": "1.4.6",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
@@ -11,14 +11,14 @@
"telemetry": "next telemetry disable"
},
"dependencies": {
"@headlessui/react": "^2.2.9",
"@headlessui/react": "^2.2.7",
"@kubernetes/client-node": "^1.0.0",
"classnames": "^2.5.1",
"compare-versions": "^6.1.1",
"dockerode": "^4.0.7",
"follow-redirects": "^1.15.11",
"gamedig": "^5.3.2",
"i18next": "^25.5.3",
"gamedig": "^5.3.1",
"i18next": "^24.2.3",
"ical.js": "^2.1.0",
"js-yaml": "^4.1.0",
"json-rpc-2.0": "^1.7.0",
@@ -28,8 +28,8 @@
"next": "^15.5.2",
"next-i18next": "^12.1.0",
"ping": "^0.4.4",
"pretty-bytes": "^7.1.0",
"raw-body": "^3.0.1",
"pretty-bytes": "^6.1.1",
"raw-body": "^3.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^15.5.3",
@@ -44,18 +44,18 @@
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/postcss": "^4.1.14",
"@tailwindcss/postcss": "^4.0.9",
"eslint": "^9.25.1",
"eslint-config-next": "^15.2.4",
"eslint-config-prettier": "^10.1.8",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-prettier": "^5.5.1",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.2.0",
"postcss": "^8.5.6",
"prettier": "^3.6.2",
"prettier-plugin-organize-imports": "^4.3.0",
"prettier-plugin-organize-imports": "^4.1.0",
"tailwind-scrollbar": "^4.0.2",
"tailwindcss": "^4.0.9",
"typescript": "^5.7.3"

663
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1114,10 +1114,5 @@
"num_success_latest": "Succeeding",
"num_failure_latest": "Failing",
"bytes_added_30": "Bytes Added"
},
"yourspotify": {
"songs": "Songs",
"time": "Time",
"artists": "Artists"
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,37 +1,21 @@
Babel==2.12.1
backrefs==5.9
cairocffi==1.7.1
CairoSVG==2.7.1
certifi==2023.7.22
cffi==1.17.1
cfgv==3.4.0
charset-normalizer==3.2.0
click==8.1.7
colorama==0.4.6
cssselect2==0.7.0
defusedxml==0.7.1
distlib==0.3.9
filelock==3.17.0
ghp-import==2.1.0
identify==2.6.7
idna==3.4
Jinja2==3.1.2
Markdown==3.4.4
MarkupSafe==2.1.3
mergedeep==1.3.4
mkdocs==1.6.0
mkdocs-get-deps==0.2.0
mkdocs-material==9.6.18
mkdocs==1.6
mkdocs-material==9.5.26
mkdocs-material-extensions==1.3.1
mkdocs-redirects==1.2.1
nodeenv==1.9.1
packaging==23.1
paginate==0.5.6
pathspec==0.11.2
pillow==10.4.0
platformdirs==3.10.0
pre-commit==3.5.0
pycparser==2.22
Pygments==2.16.1
pymdown-extensions==10.3
python-dateutil==2.8.2
@@ -40,8 +24,8 @@ pyyaml_env_tag==0.1
regex==2023.8.8
requests==2.31.0
six==1.16.0
tinycss2==1.4.0
urllib3==2.0.5
virtualenv==20.29.2
watchdog==3.0.0
webencodings==0.5.1
pre-commit==3.5.0
mkdocs-material[imaging]==9.5.26
mkdocs-redirects==1.2.1

View File

@@ -1,21 +1,13 @@
import classNames from "classnames";
import { useTranslation } from "next-i18next";
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { FiSearch } from "react-icons/fi";
import useSWR from "swr";
import { SettingsContext } from "utils/contexts/settings";
import ResolvedIcon from "./resolvedicon";
import { getStoredProvider, searchProviders } from "./widgets/search/search";
const MOBILE_BUTTON_POSITIONS = {
"top-left": "top-4 left-4",
"top-right": "top-4 right-4",
"bottom-left": "bottom-4 left-4",
"bottom-right": "bottom-4 right-4",
};
export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, setSearching }) {
export default function QuickLaunch({ servicesAndBookmarks, searchString, setSearchString, isOpen, close }) {
const { t } = useTranslation();
const { settings } = useContext(SettingsContext);
@@ -57,10 +49,6 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
);
}
let mobileButtonPosition = settings.quicklaunch?.mobileButtonPosition
? MOBILE_BUTTON_POSITIONS[settings.quicklaunch.mobileButtonPosition]
: null;
function openCurrentItem(newWindow) {
const result = results[currentItemIndex];
window.open(
@@ -71,13 +59,13 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
}
const closeAndReset = useCallback(() => {
setSearching(false);
close(false);
setTimeout(() => {
setSearchString("");
setCurrentItemIndex(null);
setSearchSuggestions([]);
}, 200); // delay a little for animations
}, [setSearching, setSearchString, setCurrentItemIndex, setSearchSuggestions]);
}, [close, setSearchString, setCurrentItemIndex, setSearchSuggestions]);
function handleSearchChange(event) {
const rawSearchString = event.target.value;
@@ -257,98 +245,86 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
}
return (
<>
<div
className={classNames(
"relative z-40 ease-in-out duration-300 transition-opacity",
hidden && !isOpen && "hidden",
!hidden && isOpen && "opacity-100",
!isOpen && "opacity-0",
)}
role="dialog"
aria-modal="true"
>
<div className="fixed inset-0 bg-gray-500 opacity-50" />
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full min-w-full items-start justify-center text-center">
<dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<input
placeholder="Search"
className={classNames(
results.length > 0 && "rounded-t-md",
results.length === 0 && "rounded-md",
"w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800",
)}
type="text"
autoCorrect="false"
ref={searchField}
value={searchString}
onChange={handleSearchChange}
onKeyDown={handleSearchKeyDown}
/>
{results.length > 0 && (
<ul className="max-h-[60vh] overflow-y-auto m-2">
{results.map((r, i) => (
<li key={[r.name, r.container, r.app, r.href].filter((s) => s).join("-")}>
<button
type="button"
data-index={i}
onMouseEnter={handleItemHover}
onClick={handleItemClick}
onKeyDown={handleItemKeyDown}
className={classNames(
"flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
<div
className={classNames(
"relative z-40 ease-in-out duration-300 transition-opacity",
hidden && !isOpen && "hidden",
!hidden && isOpen && "opacity-100",
!isOpen && "opacity-0",
)}
role="dialog"
aria-modal="true"
>
<div className="fixed inset-0 bg-gray-500 opacity-50" />
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full min-w-full items-start justify-center text-center">
<dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<input
placeholder="Search"
className={classNames(
results.length > 0 && "rounded-t-md",
results.length === 0 && "rounded-md",
"w-full p-4 m-0 border-0 border-b border-slate-700 focus:border-slate-700 focus:outline-0 focus:ring-0 text-sm md:text-xl text-theme-700 dark:text-theme-200 bg-theme-60 dark:bg-theme-800",
)}
type="text"
autoCorrect="false"
ref={searchField}
value={searchString}
onChange={handleSearchChange}
onKeyDown={handleSearchKeyDown}
/>
{results.length > 0 && (
<ul className="max-h-[60vh] overflow-y-auto m-2">
{results.map((r, i) => (
<li key={[r.name, r.container, r.app, r.href].filter((s) => s).join("-")}>
<button
type="button"
data-index={i}
onMouseEnter={handleItemHover}
onClick={handleItemClick}
onKeyDown={handleItemKeyDown}
className={classNames(
"flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
)}
>
<div className="flex flex-row items-center mr-4 pointer-events-none">
{(r.icon || r.abbr) && (
<div className="w-5 text-xs mr-4">
{r.icon && <ResolvedIcon icon={r.icon} />}
{r.abbr && r.abbr}
</div>
)}
>
<div className="flex flex-row items-center mr-4 pointer-events-none">
{(r.icon || r.abbr) && (
<div className="w-5 text-xs mr-4">
{r.icon && <ResolvedIcon icon={r.icon} />}
{r.abbr && r.abbr}
<div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
{r.type !== "searchSuggestion" && <span className="mr-4">{r.name}</span>}
{r.type === "searchSuggestion" && (
<div className="flex-nowrap">
<span className="whitespace-pre">
{r.name.indexOf(searchString) === 0 ? searchString : ""}
</span>
<span className="whitespace-pre opacity-50">
{r.name.indexOf(searchString) === 0 ? r.name.substring(searchString.length) : r.name}
</span>
</div>
)}
<div className="flex flex-col md:flex-row text-left items-baseline mr-4 pointer-events-none">
{r.type !== "searchSuggestion" && <span className="mr-4">{r.name}</span>}
{r.type === "searchSuggestion" && (
<div className="flex-nowrap">
<span className="whitespace-pre">
{r.name.indexOf(searchString) === 0 ? searchString : ""}
</span>
<span className="whitespace-pre opacity-50">
{r.name.indexOf(searchString) === 0 ? r.name.substring(searchString.length) : r.name}
</span>
</div>
)}
{r.description && (
<span className="text-xs text-theme-600 text-light">
{searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
</span>
)}
</div>
{r.description && (
<span className="text-xs text-theme-600 text-light">
{searchDescriptions && r.priority < 2 ? highlightText(r.description) : r.description}
</span>
)}
</div>
<div className="text-xs text-theme-600 font-bold pointer-events-none">
{t(`quicklaunch.${r.type ? r.type.toLowerCase() : "bookmark"}`)}
</div>
</button>
</li>
))}
</ul>
)}
</dialog>
</div>
</div>
<div className="text-xs text-theme-600 font-bold pointer-events-none">
{t(`quicklaunch.${r.type ? r.type.toLowerCase() : "bookmark"}`)}
</div>
</button>
</li>
))}
</ul>
)}
</dialog>
</div>
</div>
{mobileButtonPosition && (
<button
type="button"
onClick={setSearching.bind(this, !isOpen)}
className={`fixed ${mobileButtonPosition} z-40 p-2 rounded-full sm:hidden text-theme-700 dark:text-theme-200 bg-theme-50 dark:bg-theme-800 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 transition-opacity duration-100`}
style={{ opacity: isOpen ? 0 : 1 }}
>
<FiSearch className="w-4 h-4" />
</button>
)}
</>
</div>
);
}

View File

@@ -1,47 +1,16 @@
import classNames from "classnames";
import { useTranslation } from "next-i18next";
import { useContext, useMemo } from "react";
import { BlockHighlightContext } from "./highlight-context";
import { evaluateHighlight, getHighlightClass } from "utils/highlights";
export default function Block({ value, label, field }) {
export default function Block({ value, label }) {
const { t } = useTranslation();
const highlightConfig = useContext(BlockHighlightContext);
const highlight = useMemo(() => {
if (!highlightConfig) return null;
const labels = Array.isArray(label) ? label : [label];
const candidates = [];
if (typeof field === "string") candidates.push(field);
for (const candidateLabel of labels) {
if (typeof candidateLabel === "string") candidates.push(candidateLabel);
}
for (const candidate of candidates) {
const result = evaluateHighlight(candidate, value, highlightConfig);
if (result) return result;
}
return null;
}, [field, label, value, highlightConfig]);
const highlightClass = useMemo(() => {
if (!highlight?.level) return undefined;
return getHighlightClass(highlight.level, highlightConfig);
}, [highlight, highlightConfig]);
return (
<div
className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
value === undefined ? "animate-pulse" : "",
highlightClass,
"service-block",
)}
data-highlight-level={highlight?.level}
data-highlight-source={highlight?.source}
>
<div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
<div className="font-bold text-xs uppercase">{t(label)}</div>

View File

@@ -1,10 +1,7 @@
import { useContext, useMemo } from "react";
import { useContext } from "react";
import { SettingsContext } from "utils/contexts/settings";
import Error from "./error";
import { BlockHighlightContext } from "./highlight-context";
import { buildHighlightConfig } from "utils/highlights";
const ALIASED_WIDGETS = {
pialert: "netalertx",
@@ -14,11 +11,6 @@ const ALIASED_WIDGETS = {
export default function Container({ error = false, children, service }) {
const { settings } = useContext(SettingsContext);
const highlightConfig = useMemo(
() => buildHighlightConfig(settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type),
[settings?.blockHighlights, service?.widget?.highlight, service?.widget?.type],
);
if (error) {
if (settings.hideErrors || service.widget.hide_errors) {
return null;
@@ -59,11 +51,6 @@ export default function Container({ error = false, children, service }) {
}),
);
}
const content = <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
if (!highlightConfig) {
return content;
}
return <BlockHighlightContext.Provider value={highlightConfig}>{content}</BlockHighlightContext.Provider>;
return <div className="relative flex flex-row w-full service-container">{visibleChildren}</div>;
}

View File

@@ -1,3 +0,0 @@
import { createContext } from "react";
export const BlockHighlightContext = createContext(null);

View File

@@ -113,7 +113,7 @@ export default function Widget({ options }) {
<Resource
icon={FaMemory}
value={t("common.bytes", {
value: data.mem.available,
value: data.mem.free,
maximumFractionDigits: 1,
binary: true,
})}

View File

@@ -1,4 +1,4 @@
export default function QueueEntry({ title, activity, timeLeft, progress, size }) {
export default function QueueEntry({ title, activity, timeLeft, progress }) {
return (
<div className="text-theme-700 dark:text-theme-200 relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex">
<div
@@ -11,7 +11,6 @@ export default function QueueEntry({ title, activity, timeLeft, progress, size }
<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">
{size && `${size} - `}
{timeLeft ? `${activity} - ${timeLeft}` : activity}
</div>
</div>

View File

@@ -417,7 +417,6 @@ function Home({ initialSettings }) {
)}
<meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
<meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
<meta name="color-scheme" content="dark light"></meta>
</Head>
<Script src="/api/config/custom.js" />
@@ -433,7 +432,7 @@ function Home({ initialSettings }) {
searchString={searchString}
setSearchString={setSearchString}
isOpen={searching}
setSearching={setSearching}
close={setSearching}
/>
<div
id="information-widgets"
@@ -500,7 +499,6 @@ function Home({ initialSettings }) {
export default function Wrapper({ initialSettings, fallback }) {
const { theme } = useContext(ThemeContext);
const { color } = useContext(ColorContext);
let backgroundImage = "";
let opacity = initialSettings?.backgroundOpacity ?? 0;
let backgroundBlur = false;
@@ -529,59 +527,41 @@ export default function Wrapper({ initialSettings, fallback }) {
html.classList.toggle("dark", theme === "dark");
html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
const desiredThemeClass = `theme-${color || initialSettings.color || "slate"}`;
const themeClassesToRemove = Array.from(html.classList).filter(
(cls) => cls.startsWith("theme-") && cls !== desiredThemeClass,
);
if (themeClassesToRemove.length) {
html.classList.remove(...themeClassesToRemove);
}
if (!html.classList.contains(desiredThemeClass)) {
html.classList.add(desiredThemeClass);
}
html.classList.remove(...Array.from(html.classList).filter((cls) => cls.startsWith("theme-")));
html.classList.add(`theme-${initialSettings.color || "slate"}`);
if (backgroundImage) {
const safeBackgroundImage = backgroundImage.replace(/'/g, "\\'");
body.style.backgroundImage = `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${safeBackgroundImage}')`;
body.style.backgroundSize = "cover";
body.style.backgroundPosition = "center";
body.style.backgroundAttachment = "fixed";
body.style.backgroundRepeat = "no-repeat";
body.style.backgroundColor = "";
} else {
body.style.backgroundImage = "none";
body.style.backgroundColor = "rgb(var(--bg-color))";
body.style.backgroundSize = "";
body.style.backgroundPosition = "";
body.style.backgroundAttachment = "";
body.style.backgroundRepeat = "";
}
return () => {
body.style.backgroundImage = "";
body.style.backgroundColor = "";
body.style.backgroundSize = "";
body.style.backgroundPosition = "";
body.style.backgroundAttachment = "";
body.style.backgroundRepeat = "";
};
}, [backgroundImage, opacity, theme, color, initialSettings.color]);
// Remove any previously applied inline styles
body.style.backgroundImage = "";
body.style.backgroundColor = "";
body.style.backgroundAttachment = "";
}, [backgroundImage, opacity, theme, initialSettings.color]);
return (
<div id="page_wrapper" className="relative min-h-screen">
<div
id="inner_wrapper"
tabIndex="-1"
className={classNames(
"w-full min-h-screen overflow-auto",
backgroundBlur &&
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
)}
>
<Index initialSettings={initialSettings} fallback={fallback} />
<>
{backgroundImage && (
<div
id="background"
aria-hidden="true"
style={{
backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
}}
/>
)}
<div id="page_wrapper" className="relative h-full">
<div
id="inner_wrapper"
tabIndex="-1"
className={classNames(
"w-full h-full overflow-auto",
backgroundBlur &&
`backdrop-blur${initialSettings.background.blur?.length ? `-${initialSettings.background.blur}` : ""}`,
backgroundSaturate && `backdrop-saturate-${initialSettings.background.saturate}`,
backgroundBrightness && `backdrop-brightness-${initialSettings.background.brightness}`,
)}
>
<Index initialSettings={initialSettings} fallback={fallback} />
</div>
</div>
</div>
</>
);
}

View File

@@ -30,6 +30,18 @@ body,
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(var(--bg-color));
}
#background {
position: fixed;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
pointer-events: none;
}
html,

View File

@@ -254,7 +254,6 @@ export function cleanServiceGroups(groups) {
// all widgets
fields,
hideErrors,
highlight,
type,
// azuredevops
@@ -285,7 +284,6 @@ export function cleanServiceGroups(groups) {
// deluge, qbittorrent
enableLeechProgress,
enableLeechSize,
// diskstation
volume,
@@ -410,9 +408,6 @@ export function cleanServiceGroups(groups) {
// wgeasy
threshold,
// yourspotify
interval,
// technitium
range,
@@ -442,21 +437,6 @@ export function cleanServiceGroups(groups) {
index,
};
if (highlight) {
let parsedHighlight = highlight;
if (typeof highlight === "string") {
try {
parsedHighlight = JSON.parse(highlight);
} catch (e) {
logger.error("Invalid highlight configuration detected in config for service '%s'", service.name);
parsedHighlight = null;
}
}
if (parsedHighlight && typeof parsedHighlight === "object") {
widget.highlight = parsedHighlight;
}
}
if (type === "azuredevops") {
if (userEmail) widget.userEmail = userEmail;
if (repositoryId) widget.repositoryId = repositoryId;
@@ -510,7 +490,6 @@ export function cleanServiceGroups(groups) {
}
if (["deluge", "qbittorrent"].includes(type)) {
if (enableLeechProgress !== undefined) widget.enableLeechProgress = JSON.parse(enableLeechProgress);
if (enableLeechSize !== undefined) widget.enableLeechSize = JSON.parse(enableLeechSize);
}
if (["opnsense", "pfsense"].includes(type)) {
if (wan) widget.wan = wan;
@@ -644,11 +623,6 @@ export function cleanServiceGroups(groups) {
if (pool3) widget.pool3 = pool3;
if (pool4) widget.pool4 = pool4;
}
if (type === "yourspotify") {
if (interval !== undefined) {
widget.interval = interval;
}
}
return widget;
});
return cleanedService;

View File

@@ -1,257 +0,0 @@
const DEFAULT_LEVEL_CLASSES = {
good: "bg-emerald-500/40 text-emerald-950 dark:bg-emerald-900/60 dark:text-emerald-400",
warn: "bg-amber-300/30 text-amber-900 dark:bg-amber-900/30 dark:text-amber-200",
danger: "bg-rose-700/45 text-rose-200 dark:bg-rose-950/70 dark:text-rose-400",
};
const normalizeFieldKeys = (fields, widgetType) => {
if (!fields || typeof fields !== "object") return {};
return Object.entries(fields).reduce((acc, [key, value]) => {
if (value === null || value === undefined) return acc;
if (typeof key !== "string") return acc;
const trimmedKey = key.trim();
if (trimmedKey === "") return acc;
acc[trimmedKey] = value;
if (widgetType && !trimmedKey.includes(".")) {
const namespacedKey = `${widgetType}.${trimmedKey}`;
if (!(namespacedKey in acc)) {
acc[namespacedKey] = value;
}
}
return acc;
}, {});
};
export const buildHighlightConfig = (globalConfig, widgetConfig, widgetType) => {
const levels = {
...DEFAULT_LEVEL_CLASSES,
...(globalConfig?.levels || {}),
...(widgetConfig?.levels || {}),
};
const { levels: _levels, ...fields } = widgetConfig || {};
const normalizedFields = normalizeFieldKeys(fields, widgetType);
const hasLevels = Object.values(levels).some(Boolean);
const hasFields = Object.keys(normalizedFields).length > 0;
if (!hasLevels && !hasFields) return null;
return { levels, fields: normalizedFields };
};
const NUMERIC_OPERATORS = {
gt: (value, target) => value > target,
gte: (value, target) => value >= target,
lt: (value, target) => value < target,
lte: (value, target) => value <= target,
eq: (value, target) => value === target,
ne: (value, target) => value !== target,
};
const STRING_OPERATORS = {
equals: (value, target, caseSensitive) =>
caseSensitive ? value === target : value.toLowerCase() === target.toLowerCase(),
includes: (value, target, caseSensitive) =>
caseSensitive ? value.includes(target) : value.toLowerCase().includes(target.toLowerCase()),
startsWith: (value, target, caseSensitive) =>
caseSensitive ? value.startsWith(target) : value.toLowerCase().startsWith(target.toLowerCase()),
endsWith: (value, target, caseSensitive) =>
caseSensitive ? value.endsWith(target) : value.toLowerCase().endsWith(target.toLowerCase()),
};
const toNumber = (value) => {
if (typeof value === "number" && Number.isFinite(value)) return value;
if (typeof value === "string" && value.trim()) {
const trimmed = value.trim();
const candidate = Number(trimmed);
if (!Number.isNaN(candidate)) return candidate;
}
return undefined;
};
const parseNumericValue = (value) => {
if (value === null || value === undefined) return undefined;
if (typeof value === "number" && Number.isFinite(value)) return value;
if (typeof value === "string") {
const trimmed = value.trim();
if (!trimmed) return undefined;
const direct = Number(trimmed);
if (!Number.isNaN(direct)) return direct;
const compact = trimmed.replace(/\s+/g, "");
if (!compact || !/^[-+]?[0-9.,]+$/.test(compact)) return undefined;
const commaCount = (compact.match(/,/g) || []).length;
const dotCount = (compact.match(/\./g) || []).length;
if (commaCount && dotCount) {
const lastComma = compact.lastIndexOf(",");
const lastDot = compact.lastIndexOf(".");
if (lastComma > lastDot) {
const asDecimal = compact.replace(/\./g, "").replace(/,/g, ".");
const parsed = Number(asDecimal);
return Number.isNaN(parsed) ? undefined : parsed;
}
const asThousands = compact.replace(/,/g, "");
const parsed = Number(asThousands);
return Number.isNaN(parsed) ? undefined : parsed;
}
if (commaCount) {
const parts = compact.split(",");
if (commaCount === 1 && parts[1]?.length <= 2) {
const parsed = Number(compact.replace(",", "."));
if (!Number.isNaN(parsed)) return parsed;
}
const isGrouped = parts.length > 1 && parts.slice(1).every((part) => part.length === 3);
if (isGrouped) {
const parsed = Number(compact.replace(/,/g, ""));
if (!Number.isNaN(parsed)) return parsed;
}
return undefined;
}
if (dotCount) {
const parts = compact.split(".");
if (dotCount === 1 && parts[1]?.length <= 2) {
const parsed = Number(compact);
if (!Number.isNaN(parsed)) return parsed;
}
const isGrouped = parts.length > 1 && parts.slice(1).every((part) => part.length === 3);
if (isGrouped) {
const parsed = Number(compact.replace(/\./g, ""));
if (!Number.isNaN(parsed)) return parsed;
}
const parsed = Number(compact);
return Number.isNaN(parsed) ? undefined : parsed;
}
const parsed = Number(compact);
return Number.isNaN(parsed) ? undefined : parsed;
}
if (typeof value === "object" && value !== null && "props" in value) {
return undefined;
}
return undefined;
};
const evaluateNumericRule = (value, rule) => {
if (!rule || typeof rule !== "object") return false;
const operator = rule.when && NUMERIC_OPERATORS[rule.when];
const numericValue = toNumber(rule.value);
if (operator && numericValue !== undefined) {
const passes = operator(value, numericValue);
return rule.negate ? !passes : passes;
}
if (rule.when === "between") {
const min = toNumber(rule.min ?? rule.value?.min);
const max = toNumber(rule.max ?? rule.value?.max);
if (min === undefined && max === undefined) return false;
const lowerBound = min ?? Number.NEGATIVE_INFINITY;
const upperBound = max ?? Number.POSITIVE_INFINITY;
const passes = value >= lowerBound && value <= upperBound;
return rule.negate ? !passes : passes;
}
if (rule.when === "outside") {
const min = toNumber(rule.min ?? rule.value?.min);
const max = toNumber(rule.max ?? rule.value?.max);
if (min === undefined && max === undefined) return false;
const passes = value < (min ?? Number.NEGATIVE_INFINITY) || value > (max ?? Number.POSITIVE_INFINITY);
return rule.negate ? !passes : passes;
}
return false;
};
const evaluateStringRule = (value, rule) => {
if (!rule || typeof rule !== "object") return false;
if (rule.when === "regex" && typeof rule.value === "string") {
try {
const flags = rule.flags || (rule.caseSensitive ? "" : "i");
const regex = new RegExp(rule.value, flags);
const passes = regex.test(value);
return rule.negate ? !passes : passes;
} catch (error) {
return false;
}
}
const operator = rule.when && STRING_OPERATORS[rule.when];
if (!operator || typeof rule.value !== "string") return false;
const passes = operator(value, rule.value, Boolean(rule.caseSensitive));
return rule.negate ? !passes : passes;
};
const ensureArray = (value) => {
if (Array.isArray(value)) return value;
if (value === undefined || value === null) return [];
return [value];
};
const findHighlightLevel = (ruleSet, numericValue, stringValue) => {
const { numeric, string } = ruleSet;
if (numeric && numericValue !== undefined) {
const numericRules = ensureArray(numeric);
const numericCandidates = Array.isArray(numericValue) ? numericValue : [numericValue];
for (const candidate of numericCandidates) {
for (const rule of numericRules) {
if (rule?.level && evaluateNumericRule(candidate, rule)) {
return { level: rule.level, source: "numeric", rule };
}
}
}
}
if (string && stringValue !== undefined) {
const stringRules = ensureArray(string);
for (const rule of stringRules) {
if (rule?.level && evaluateStringRule(stringValue, rule)) {
return { level: rule.level, source: "string", rule };
}
}
}
return null;
};
export const evaluateHighlight = (fieldKey, value, highlightConfig) => {
if (!highlightConfig || !fieldKey) return null;
const { fields } = highlightConfig;
if (!fields || typeof fields !== "object") return null;
const ruleSet = fields[fieldKey];
if (!ruleSet) return null;
const numericValue = parseNumericValue(value);
let stringValue;
if (typeof value === "string") {
stringValue = value;
} else if (typeof value === "number" || typeof value === "bigint") {
stringValue = String(value);
} else if (typeof value === "boolean") {
stringValue = value ? "true" : "false";
}
const normalizedString = typeof stringValue === "string" ? stringValue.trim() : stringValue;
return findHighlightLevel(ruleSet, numericValue, normalizedString);
};
export const getHighlightClass = (level, highlightConfig) => {
if (!level || !highlightConfig) return undefined;
return highlightConfig.levels?.[level];
};
export const getDefaultHighlightLevels = () => DEFAULT_LEVEL_CLASSES;

View File

@@ -24,11 +24,10 @@ function buildResponse(plans) {
plans.forEach((plan) => {
const statuses = plan?.recentBackups?.status;
// See https://github.com/garethgeorge/backrest/blob/4357295a17cb2e71639473c9929a060c4dd1b624/proto/v1/operations.proto#L78-L87
if (Array.isArray(statuses) && statuses.length > 0) {
if (statuses[0] === "STATUS_SUCCESS") {
numSuccessLatest++;
} else if (statuses[0] === "STATUS_ERROR") {
} else {
numFailureLatest++;
}
}

View File

@@ -150,7 +150,6 @@ const components = {
wgeasy: dynamic(() => import("./wgeasy/component")),
whatsupdocker: dynamic(() => import("./whatsupdocker/component")),
xteve: dynamic(() => import("./xteve/component")),
yourspotify: dynamic(() => import("./yourspotify/component")),
zabbix: dynamic(() => import("./zabbix/component")),
};

View File

@@ -205,14 +205,13 @@ export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
const {
data: sessionsData,
error: sessionsError,
mutate: sessionMutate,
} = useWidgetAPI(widget, enableNowPlaying ? "Sessions" : "", {
refreshInterval: enableNowPlaying ? 5000 : undefined,
} = useWidgetAPI(widget, "Sessions", {
refreshInterval: 5000,
});
const { data: countData, error: countError } = useWidgetAPI(widget, "Count", {
@@ -240,12 +239,13 @@ export default function Component({ service }) {
}
const enableBlocks = service.widget?.enableBlocks;
const enableNowPlaying = service.widget?.enableNowPlaying ?? true;
const enableMediaControl = service.widget?.enableMediaControl !== false; // default is true
const enableUser = !!service.widget?.enableUser; // default is false
const expandOneStreamToTwoRows = service.widget?.expandOneStreamToTwoRows !== false; // default is true
const showEpisodeNumber = !!service.widget?.showEpisodeNumber; // default is false
if ((enableNowPlaying && !sessionsData) || !countData) {
if (!sessionsData || !countData) {
return (
<>
{enableBlocks && <CountBlocks service={service} countData={null} />}

View File

@@ -27,7 +27,7 @@ export default function Component({ service }) {
useEffect(() => {
if (data) {
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { a: data.used, b: data.available }];
const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
@@ -67,10 +67,10 @@ export default function Component({ service }) {
{data && !error && (
<Block position="bottom-3 left-3">
{data.available && chart && (
{data.free && chart && (
<div className="text-xs opacity-50">
{t("common.bytes", {
value: data.available,
value: data.free,
maximumFractionDigits: 1,
binary: true,
})}{" "}
@@ -93,10 +93,10 @@ export default function Component({ service }) {
{!chart && (
<Block position="top-3 right-3">
{data.available && (
{data.free && (
<div className="text-xs opacity-50">
{t("common.bytes", {
value: data.available,
value: data.free,
maximumFractionDigits: 1,
binary: true,
})}{" "}

View File

@@ -33,6 +33,14 @@ export default function Component({ service }) {
return (
<Container service={service}>
<Block
label="myspeed.ping"
value={t("common.ms", {
value: data[0].ping,
style: "unit",
unit: "millisecond",
})}
/>
<Block
label="myspeed.download"
value={t("common.bitrate", {
@@ -47,14 +55,6 @@ export default function Component({ service }) {
decimals: 2,
})}
/>
<Block
label="myspeed.ping"
value={t("common.ms", {
value: data[0].ping,
style: "unit",
unit: "millisecond",
})}
/>
</Container>
);
}

View File

@@ -66,7 +66,7 @@ export default async function omadaProxyHandler(req, res) {
const controllerVersionMajor = parseInt(controllerVersion.split(".")[0], 10);
if (![3, 4, 5, 6].includes(controllerVersionMajor)) {
if (![3, 4, 5].includes(controllerVersionMajor)) {
return res.status(500).json({ error: { message: "Error determining controller version", data } });
}
@@ -80,7 +80,6 @@ export default async function omadaProxyHandler(req, res) {
loginUrl = `${url}/api/v2/login`;
break;
case 5:
case 6:
loginUrl = `${url}/${cId}/api/v2/login`;
break;
default:
@@ -123,7 +122,6 @@ export default async function omadaProxyHandler(req, res) {
sitesUrl = `${url}/api/v2/sites?token=${token}&currentPage=1&currentPageSize=1000`;
break;
case 5:
case 6:
sitesUrl = `${url}/${cId}/api/v2/sites?token=${token}&currentPage=1&currentPageSize=1000`;
break;
default:
@@ -209,8 +207,8 @@ export default async function omadaProxyHandler(req, res) {
connectedAp = siteResponseData.result.connectedAp;
activeUser = siteResponseData.result.activeUser;
alerts = siteResponseData.result.alerts;
} else if ([4, 5, 6].includes(controllerVersionMajor)) {
const siteName = controllerVersionMajor > 4 ? site.id : site.key;
} else if (controllerVersionMajor === 4 || controllerVersionMajor === 5) {
const siteName = controllerVersionMajor === 5 ? site.id : site.key;
const siteStatsUrl =
controllerVersionMajor === 4
? `${url}/api/v2/sites/${siteName}/dashboard/overviewDiagram?token=${token}&currentPage=1&currentPageSize=1000`

View File

@@ -80,11 +80,6 @@ export default function Component({ service }) {
timeLeft={t("common.duration", { value: queueEntry.eta })}
title={queueEntry.name}
activity={queueEntry.state}
size={
widget?.enableLeechSize
? t("common.bbytes", { value: queueEntry.size, maximumFractionDigits: 1 })
: undefined
}
key={`${queueEntry.name}-${queueEntry.amount_left}`}
/>
))}

View File

@@ -52,7 +52,6 @@ export default function Component({ service }) {
let status;
let uptime = 0;
let logIndex = 0;
const hasLogs = Array.isArray(monitor.logs) && monitor.logs.length > 0;
switch (monitor.status) {
case 0:
@@ -63,7 +62,7 @@ export default function Component({ service }) {
break;
case 2:
status = t("uptimerobot.up");
uptime = t("common.duration", { value: hasLogs ? monitor.logs[0].duration : 0 });
uptime = t("common.duration", { value: monitor.logs[0].duration });
logIndex = 1;
break;
case 8:
@@ -77,14 +76,14 @@ export default function Component({ service }) {
break;
}
const lastDown = hasLogs ? new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString() : "";
const downDuration = t("common.duration", { value: hasLogs ? monitor.logs[logIndex].duration : 0 });
const hideDown = !hasLogs || (logIndex === 1 && monitor.logs[logIndex].type !== 1);
const lastDown = new Date(monitor.logs[logIndex].datetime * 1000).toLocaleString();
const downDuration = t("common.duration", { value: monitor.logs[logIndex].duration });
const hideDown = logIndex === 1 && monitor.logs[logIndex].type !== 1;
return (
<Container service={service}>
<Block label="uptimerobot.status" value={status} />
{hasLogs && <Block label="uptimerobot.uptime" value={uptime} />}
<Block label="uptimerobot.uptime" value={uptime} />
{!hideDown && <Block label="uptimerobot.lastDown" value={lastDown} />}
{!hideDown && <Block label="uptimerobot.downDuration" value={downDuration} />}
</Container>

View File

@@ -141,7 +141,6 @@ import watchtower from "./watchtower/widget";
import wgeasy from "./wgeasy/widget";
import whatsupdocker from "./whatsupdocker/widget";
import xteve from "./xteve/widget";
import yourspotify from "./yourspotify/widget";
import zabbix from "./zabbix/widget";
const widgets = {
@@ -292,7 +291,6 @@ const widgets = {
wgeasy,
whatsupdocker,
xteve,
yourspotify,
zabbix,
};

View File

@@ -1,76 +0,0 @@
import Block from "components/services/widget/block";
import Container from "components/services/widget/container";
import { useTranslation } from "next-i18next";
import { useMemo } from "react";
import useWidgetAPI from "utils/proxy/use-widget-api";
function getStartDate(interval) {
const d = new Date();
switch (interval) {
case "day":
d.setDate(d.getDate() - 1);
break;
case "week":
d.setDate(d.getDate() - 7);
break;
case "month":
d.setMonth(d.getMonth() - 1);
break;
case "year":
d.setFullYear(d.getFullYear() - 1);
break;
}
return d.toISOString();
}
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const interval = widget?.interval || "week";
const date = useMemo(() => {
return interval === "all" ? "2006-04-23T00:00:00.000Z" : getStartDate(interval);
}, [interval]);
const params = {
timeSplit: "all",
start: date,
};
const { data: songsListened, error: songsError } = useWidgetAPI(widget, "songs", params);
const { data: timeListened, error: timeError } = useWidgetAPI(widget, "time", params);
const { data: artistsListened, error: artistsError } = useWidgetAPI(widget, "artists", params);
if (songsError || timeError || artistsError) {
return <Container service={service} error={songsError ?? timeError ?? artistsError} />;
}
if (isNaN(songsListened) || isNaN(timeListened) || isNaN(artistsListened)) {
return (
<Container service={service}>
<Block label="yourspotify.songs" />
<Block label="yourspotify.time" />
<Block label="yourspotify.artists" />
</Container>
);
}
return (
<Container service={service}>
<Block label="yourspotify.songs" value={t("common.number", { value: songsListened })} />
<Block
label="yourspotify.time"
value={t(
timeListened > 0 ? "common.duration" : "common.number", // Display 0 if duration is 0
{
value: timeListened / 1000,
},
)}
/>
<Block label="yourspotify.artists" value={t("common.number", { value: artistsListened })} />
</Container>
);
}

View File

@@ -1,27 +0,0 @@
import { asJson } from "utils/proxy/api-helpers";
import genericProxyHandler from "utils/proxy/handlers/generic";
const widget = {
api: "{url}/spotify/{endpoint}?token={key}",
proxyHandler: genericProxyHandler,
mappings: {
songs: {
endpoint: "songs_per",
params: ["start", "timeSplit"],
map: (data) => asJson(data)[0]?.count || 0,
},
time: {
endpoint: "time_per",
params: ["start", "timeSplit"],
map: (data) => asJson(data)[0]?.count || 0,
},
artists: {
endpoint: "different_artists_per",
params: ["start", "timeSplit"],
map: (data) => asJson(data)[0]?.artists?.length || 0,
},
},
};
export default widget;