Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/xicopitz/homepage

Browse Source
This commit is contained in:
Francisco Coelho 2022-09-11 22:08:11 +01:00
commit a304d87b8a
32 changed files with 597 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -6,16 +6,18 @@
## Features
* Fast! The entire site is statically generated at build time, so you can expect instant load times.
* Images built for AMD64 (x86_64), ARM64, ARMv7 and ARMv6 ([schklom](https://github.com/benphelps/homepage/pull/3) and [modem7](https://github.com/benphelps/homepage/pull/62))
- Supports all Raspberry Pi's, most SBCs & Apple Silicon
* Full i18n support with automatic language detection.
- Human translations for English, Norwegian Bokmål ([comradekingu](https://github.com/benphelps/homepage/commits?author=comradekingu)) and Spanish ([AmadeusGraves](https://github.com/benphelps/homepage/commits?author=AmadeusGraves)).
- Machine translations for Portuguese, French, German, Russian and Chinese (simplified).
- Human translations for English, Norwegian Bokmål ([comradekingu](https://github.com/benphelps/homepage/commits?author=comradekingu)), Spanish ([AmadeusGraves](https://github.com/benphelps/homepage/commits?author=AmadeusGraves)), French (J. Lavoie), Dutch ([deffcolony](https://github.com/benphelps/homepage/commits?author=deffcolony)), Chinese ([nicedc](https://github.com/nicedc)) and Russian ([desolaris](https://github.com/benphelps/homepage/commits?author=desolaris)).
- Machine translations for Portuguese and German.
- Want to help translate? [Join the Weblate project](https://hosted.weblate.org/engage/homepage/).
* Complete Docker support, including AMD64, ARM64, ARMv7 and ARMv6 support ([schklom](https://github.com/benphelps/homepage/pull/3) and [modem7](https://github.com/benphelps/homepage/pull/62))
* Service & Web Bookmarks
* Docker Integration
- Status light + CPU, Memory & Network Reporting *(click on the status light)*
- Container status (Running / Stopped) & statistics (CPU, Memory, Network)
- Automatic service discovery (via labels)
* Service Integration
- Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, Tautulli (Plex), Jellyseerr ([ilusi0n](https://github.com/benphelps/homepage/pull/34)), NZBGet, ruTorrent
- Currently supports Sonarr, Radarr, Ombi, Emby, Jellyfin, Tautulli (Plex), Overseerr, Jellyseerr ([ilusi0n](https://github.com/benphelps/homepage/pull/34)), NZBGet, ruTorrent
- Portainer, Traefik, Speedtest Tracker, PiHole, Nginx Proxy Manager ([aidenpwnz](https://github.com/benphelps/homepage/pull/45))
* Information & Utility Widgets
- System Stats (Disk, CPU, Memory)

11
public/locales/de/common.json
View File

@ -22,12 +22,14 @@
"emby": {
"playing": "Spielen",
"transcoding": "Transcodierung",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Spielen",
"transcoding": "Transcodierung",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Rate",
@ -90,6 +92,11 @@
"updating": "Aktualisieren",
"wait": "Bitte warten"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Anwendungen",
"clients": "Kunden",

11
public/locales/en/common.json
View File

@ -39,12 +39,14 @@
"emby": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Rate",
@ -76,6 +78,11 @@
"approved": "Approved",
"available": "Available"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"pihole": {
"queries": "Queries",
"blocked": "Blocked",

23
public/locales/es/common.json
View File

@ -13,8 +13,8 @@
"used": "Usado"
},
"docker": {
"rx": "RX",
"tx": "TX",
"rx": "Recibido",
"tx": "Transmitido",
"mem": "Memoria",
"cpu": "Procesador",
"offline": "Desconectado"
@ -22,12 +22,14 @@
"emby": {
"playing": "En ejecución",
"transcoding": "Transcodificando",
"bitrate": "Tasa de Bits"
"bitrate": "Tasa de Bits",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "En ejecución",
"transcoding": "Transcodificación",
"bitrate": "Tasa de bits"
"bitrate": "Tasa de bits",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Velocidad",
@ -85,10 +87,15 @@
"total": "Total"
},
"weather": {
"current": "Current Location",
"allow": "Click to allow",
"updating": "Updating",
"wait": "Please wait"
"current": "Ubicación Actual",
"allow": "Haga clic para permitir",
"updating": "Actualizando",
"wait": "Espere, por favor"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Aplicaciones",

27
public/locales/fr/common.json
View File

@ -5,7 +5,7 @@
"status": "Statut"
},
"search": {
"placeholder": "Chercher…"
"placeholder": "Recherche…"
},
"resources": {
"total": "Totale",
@ -22,12 +22,14 @@
"emby": {
"playing": "En jouant",
"transcoding": "Transcoding",
"bitrate": "Débiter"
"bitrate": "Débiter",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "En jouant",
"transcoding": "Transcoding",
"bitrate": "Débiter"
"bitrate": "Débiter",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Évaluer",
@ -36,7 +38,7 @@
},
"rutorrent": {
"active": "Active",
"upload": "Télécharger",
"upload": "Téléverser",
"download": "Télécharger"
},
"sonarr": {
@ -65,8 +67,8 @@
"gravity": "La gravité"
},
"speedtest": {
"upload": "Télécharger",
"download": "Télécharger",
"upload": "Téléversement",
"download": "Téléchargement",
"ping": "Ping-ping"
},
"portainer": {
@ -96,10 +98,15 @@
"ms": "{{value, number}}"
},
"weather": {
"current": "Current Location",
"allow": "Click to allow",
"updating": "Updating",
"wait": "Please wait"
"current": "Localisation actuelle",
"allow": "Cliquez pour autoriser",
"updating": "Mise à jour",
"wait": "Veuillez patienter"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Applications",

11
public/locales/it/common.json
View File

@ -9,12 +9,14 @@
"emby": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"speedtest": {
"upload": "Upload",
@ -90,6 +92,11 @@
"updating": "Updating",
"wait": "Please wait"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

11
public/locales/nb-NO/common.json
View File

@ -22,12 +22,14 @@
"emby": {
"playing": "Spiller",
"transcoding": "Transkoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Spiller",
"transcoding": "Transkoding",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Takt",
@ -90,6 +92,11 @@
"wait": "Vent litt …",
"current": "Nåværende posisjon"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Applications",
"clients": "Clients",

77
public/locales/nl/common.json
View File

@ -5,9 +5,9 @@
"status": "Status"
},
"resources": {
"total": "Total",
"free": "Free",
"used": "Used"
"total": "Totaal",
"free": "Vrij",
"used": "Gebruikt"
},
"docker": {
"rx": "RX",
@ -18,8 +18,8 @@
},
"nzbget": {
"rate": "Rate",
"remaining": "Remaining",
"downloaded": "Downloaded"
"remaining": "Overgebleven",
"downloaded": "Gedownload"
},
"speedtest": {
"upload": "Upload",
@ -27,57 +27,59 @@
"ping": "Ping"
},
"portainer": {
"running": "Running",
"stopped": "Stopped",
"total": "Total"
"running": "Draaiend",
"stopped": "Gestopt",
"total": "Totaal"
},
"weather": {
"updating": "Updating",
"wait": "Please wait",
"current": "Current Location",
"allow": "Click to allow"
"updating": "Updaten",
"wait": "Even geduld",
"current": "Huidige Locatie",
"allow": "Klik om toe te staan"
},
"search": {
"placeholder": "Search…"
"placeholder": "Zoeken…"
},
"emby": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"playing": "Afspelen",
"transcoding": "Transcodering",
"bitrate": "Bitsnelheid",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Playing",
"transcoding": "Transcoding",
"bitrate": "Bitrate"
"playing": "Afspelen",
"transcoding": "Transcodering",
"bitrate": "Bitsnelheid",
"no_active": "No Active Streams"
},
"rutorrent": {
"active": "Active",
"active": "Actief",
"upload": "Upload",
"download": "Download"
},
"sonarr": {
"wanted": "Wanted",
"queued": "Queued",
"wanted": "Gezocht",
"queued": "In de wachtrij",
"series": "Series"
},
"radarr": {
"movies": "Movies",
"wanted": "Wanted",
"queued": "Queued"
"movies": "Films",
"wanted": "Gezocht",
"queued": "In de wachtrij"
},
"ombi": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
"pending": "In afwachting",
"approved": "Goedgekeurd",
"available": "Beschikbaar"
},
"jellyseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
"pending": "In afwachting",
"approved": "Goedgekeurd",
"available": "Beschikbaar"
},
"pihole": {
"queries": "Queries",
"blocked": "Blocked",
"blocked": "Geblokkeerd",
"gravity": "Gravity"
},
"traefik": {
@ -86,9 +88,14 @@
"middleware": "Middleware"
},
"npm": {
"enabled": "Enabled",
"disabled": "Disabled",
"total": "Total"
"enabled": "Ingeschakeld",
"disabled": "Uitgeschakeld",
"total": "Totaal"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Applications",

11
public/locales/pt/common.json
View File

@ -22,12 +22,14 @@
"emby": {
"playing": "A reproduzir",
"transcoding": "Transcodificação",
"bitrate": "Taxa de bits"
"bitrate": "Taxa de bits",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Reproduzindo",
"transcoding": "Transcodificação",
"bitrate": "Taxa de bits"
"bitrate": "Taxa de bits",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Avaliar",
@ -101,6 +103,11 @@
"updating": "A atualizar",
"wait": "Por favor aguarde"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Aplicações",
"clients": "Clientes",

61
public/locales/ru/common.json
View File

@ -10,29 +10,31 @@
"resources": {
"total": "Общий",
"free": "Свободно",
"used": "Использовал"
"used": "Использовано"
},
"docker": {
"rx": "Rx",
"tx": "Техас",
"mem": "Мем",
"tx": "Тx",
"mem": "Память",
"cpu": "Процессор",
"offline": "Не в сети"
},
"emby": {
"playing": "Игра",
"playing": "Воспроизведение",
"transcoding": "Транскодирование",
"bitrate": "Битрейт"
"bitrate": "Битрейт",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Игра",
"playing": "Воспроизведение",
"transcoding": "Транскодирование",
"bitrate": "Битрейт"
"bitrate": "Битрейт",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Оценивать",
"remaining": "Оставшийся",
"downloaded": "Загружен"
"rate": "Оценка",
"remaining": "Осталось",
"downloaded": "Загружено"
},
"rutorrent": {
"active": "Активный",
@ -50,45 +52,50 @@
"movies": "Фильмы"
},
"ombi": {
"pending": "В ожидании",
"approved": "Одобренный",
"available": "Доступный"
"pending": "Ожидание",
"approved": "Одобрено",
"available": "Доступно"
},
"jellyseerr": {
"pending": "В ожидании",
"approved": "Одобренный",
"available": "Доступный"
"pending": "Ожидание",
"approved": "Одобрено",
"available": "Доступно"
},
"pihole": {
"queries": "Запросы",
"blocked": "Заблокированный",
"blocked": "Заблокировано",
"gravity": "Сила тяжести"
},
"speedtest": {
"upload": "Загрузить",
"upload": "Загрузка",
"download": "Скачать",
"ping": "пинг"
},
"portainer": {
"running": "Бег",
"stopped": "Остановился",
"total": "Общий"
"running": "Запущено",
"stopped": "Остановлено",
"total": "Всего"
},
"traefik": {
"routers": "Маршрутизаторы",
"services": "Услуги",
"services": "Сервисы",
"middleware": "Промежуточное программное обеспечение"
},
"npm": {
"enabled": "Включено",
"disabled": "Неполноценный",
"total": "Общий"
"disabled": "Отключено",
"total": "Всего"
},
"weather": {
"wait": "Please wait",
"current": "Current Location",
"wait": "Пожалуйста подождите",
"current": "Текущее местоположение",
"allow": "Click to allow",
"updating": "Updating"
"updating": "Обновление"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Aplicações",

11
public/locales/vi/common.json
View File

@ -22,12 +22,14 @@
"emby": {
"playing": "Đang chơi",
"transcoding": "Chuyển định dạng",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "Đang chơi",
"transcoding": "Chuyển định dạng",
"bitrate": "Bitrate"
"bitrate": "Bitrate",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "Rate",
@ -90,6 +92,11 @@
"updating": "Updating",
"wait": "Please wait"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Aplicações",
"clients": "Clientes",

11
public/locales/zh-CN/common.json
View File

@ -22,12 +22,14 @@
"emby": {
"playing": "玩",
"transcoding": "转码",
"bitrate": "比特率"
"bitrate": "比特率",
"no_active": "No Active Streams"
},
"tautulli": {
"playing": "玩",
"transcoding": "转码",
"bitrate": "比特率"
"bitrate": "比特率",
"no_active": "No Active Streams"
},
"nzbget": {
"rate": "速度",
@ -90,6 +92,11 @@
"updating": "Updating",
"wait": "Please wait"
},
"overseerr": {
"pending": "Pending",
"approved": "Approved",
"available": "Available"
},
"gotify": {
"apps": "Aplicações",
"clients": "Clientes",

2
src/components/bookmarks/item.jsx
View File

@ -6,7 +6,7 @@ export default function Item({ bookmark }) {
<button
type="button"
onClick={() => window.open(bookmark.href, "_blank").focus()}
className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20"
className="w-full text-left mb-3 cursor-pointer rounded-md font-medium text-theme-700 hover:text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/10 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md"
>
<div className="flex">
<div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">

2
src/components/color-toggle.jsx
View File

@ -56,7 +56,7 @@ export default function ColorToggle() {
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute -top-[75px] left-0">
<div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
<div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 w-[85vw] sm:w-full">
<div className="relative grid gap-2 p-2 grid-cols-11 bg-white/50 dark:bg-white/10 shadow-black/10 dark:shadow-black/20 rounded-md shadow-md">
{colors.map((color) => (
<button type="button" onClick={() => setColor(color)} key={color}>

2
src/components/services/item.jsx
View File

@ -28,7 +28,7 @@ export default function Item({ service }) {
<div
className={`${
service.href && service.href !== "#" ? "cursor-pointer " : "cursor-default "
}transition-all h-15 overflow-hidden mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20`}
}transition-all h-15 mb-3 p-1 rounded-md font-medium text-theme-700 hover:text-theme-700/70 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-black/10 dark:shadow-black/20 bg-white/50 hover:bg-theme-300/20 dark:bg-white/10 dark:hover:bg-white/20 backdrop-blur-md`}
>
<div className="flex">
{service.icon && (

2
src/components/services/widget.jsx
View File

@ -13,6 +13,7 @@ import Jellyfin from "./widgets/service/jellyfin";
import Speedtest from "./widgets/service/speedtest";
import Traefik from "./widgets/service/traefik";
import Jellyseerr from "./widgets/service/jellyseerr";
import Overseerr from "./widgets/service/overseerr";
import Npm from "./widgets/service/npm";
import Tautulli from "./widgets/service/tautulli";
import Gotify from "./widgets/service/gotify";
@ -31,6 +32,7 @@ const widgetMappings = {
speedtest: Speedtest,
traefik: Traefik,
jellyseerr: Jellyseerr,
overseerr: Overseerr,
npm: Npm,
tautulli: Tautulli,
gotify: Gotify,

202
src/components/services/widgets/service/emby.jsx
View File

@ -1,17 +1,148 @@
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs";
import Widget from "../widget";
import Block from "../block";
import { formatApiUrl } from "utils/api-helpers";
function ticksToTime(ticks) {
const milliseconds = ticks / 10000;
const seconds = Math.floor((milliseconds / 1000) % 60);
const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
return { hours, minutes, seconds };
}
function ticksToString(ticks) {
const { hours, minutes, seconds } = ticksToTime(ticks);
const parts = [];
if (hours > 0) {
parts.push(hours);
}
parts.push(minutes);
parts.push(seconds);
return parts.map((part) => part.toString().padStart(2, "0")).join(":");
}
function SingleSessionEntry({ playCommand, session }) {
const {
NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted },
} = session;
const percent = (PositionTicks / RunTimeTicks) * 100;
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="text-xs z-10 self-center ml-2">
<span>
{Name}
{SeriesName && ` - ${SeriesName}`}
</span>
</div>
<div className="grow" />
<div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
</div>
<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: `${percent}%`,
}}
/>
<div className="text-xs z-10 self-center ml-1">
{IsPaused && (
<BsFillPlayFill
onClick={() => {
playCommand(session, "Unpause");
}}
className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
/>
)}
{!IsPaused && (
<BsPauseFill
onClick={() => {
playCommand(session, "Pause");
}}
className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
/>
)}
</div>
<div className="grow " />
<div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
</div>
</>
);
}
function SessionEntry({ playCommand, session }) {
const {
NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted },
} = session;
const percent = (PositionTicks / RunTimeTicks) * 100;
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: `${percent}%`,
}}
/>
<div className="text-xs z-10 self-center ml-1">
{IsPaused && (
<BsFillPlayFill
onClick={() => {
playCommand(session, "Unpause");
}}
className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
/>
)}
{!IsPaused && (
<BsPauseFill
onClick={() => {
playCommand(session, "Pause");
}}
className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
/>
)}
<span>
{Name}
{SeriesName && ` - ${SeriesName}`}
</span>
</div>
<div className="grow " />
<div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
<div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
</div>
);
}
export default function Emby({ service }) {
const { t } = useTranslation();
const config = service.widget;
const { data: sessionsData, error: sessionsError } = useSWR(formatApiUrl(config, "Sessions"));
const {
data: sessionsData,
error: sessionsError,
mutate: sessionMutate,
} = useSWR(formatApiUrl(config, "Sessions"), {
refreshInterval: 5000,
});
async function handlePlayCommand(session, command) {
const url = formatApiUrl(config, `Sessions/${session.Id}/Playing/${command}`);
await fetch(url, {
method: "POST",
}).then(() => {
sessionMutate();
});
}
if (sessionsError) {
return <Widget error={t("widget.api_error")} />;
@ -19,26 +150,63 @@ export default function Emby({ service }) {
if (!sessionsData) {
return (
<Widget>
<Block label={t("emby.playing")} />
<Block label={t("emby.transcoding")} />
<Block label={t("emby.bitrate")} />
</Widget>
<div className="flex flex-col pb-1">
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
</div>
);
}
const playing = sessionsData.filter((session) => session?.NowPlayingItem);
const transcoding = sessionsData.filter(
(session) => session?.PlayState && session.PlayState.PlayMethod === "Transcode"
);
const playing = sessionsData
.filter((session) => session?.NowPlayingItem)
.sort((a, b) => {
if (a.PlayState.PositionTicks > b.PlayState.PositionTicks) {
return 1;
}
if (a.PlayState.PositionTicks < b.PlayState.PositionTicks) {
return -1;
}
return 0;
});
const bitrate = playing.reduce((acc, session) => acc + session.NowPlayingItem.Bitrate, 0);
if (playing.length === 0) {
return (
<div className="flex flex-col pb-1">
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">{t("emby.no_active")}</span>
</div>
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
</div>
);
}
if (playing.length === 1) {
const session = playing[0];
return (
<div className="flex flex-col pb-1">
<SingleSessionEntry
playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
session={session}
/>
</div>
);
}
return (
<Widget>
<Block label={t("emby.playing")} value={playing.length} />
<Block label={t("emby.transcoding")} value={transcoding.length} />
<Block label={t("emby.bitrate")} value={t("common.bitrate", { value: bitrate })} />
</Widget>
<div className="flex flex-col pb-1">
{playing.map((session) => (
<SessionEntry
key={session.Id}
playCommand={(currentSession, command) => handlePlayCommand(currentSession, command)}
session={session}
/>
))}
</div>
);
}

47
src/components/services/widgets/service/jellyfin.jsx
View File

@ -1,48 +1,5 @@
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import Widget from "../widget";
import Block from "../block";
import { formatApiUrl } from "utils/api-helpers";
import Emby from "./emby";
export default function Jellyfin({ service }) {
const { t } = useTranslation();
const config = service.widget;
const { data: sessionsData, error: sessionsError } = useSWR(formatApiUrl(config, "Sessions"));
if (sessionsError) {
return <Widget error={t("widget.api_error")} />;
}
if (!sessionsData) {
return (
<Widget>
<Block label={t("emby.playing")} />
<Block label={t("emby.transcoding")} />
<Block label={t("emby.bitrate")} />
</Widget>
);
}
const playing = sessionsData.filter((session) => session?.NowPlayingItem);
const transcoding = sessionsData.filter(
(session) => session?.PlayState && session.PlayState.PlayMethod === "Transcode"
);
const bitrate = playing.reduce(
(acc, session) =>
acc + session.NowPlayingQueueFullItems[0].MediaSources.reduce((acb, source) => acb + source.Bitrate, 0),
0
);
return (
<Widget>
<Block label={t("emby.playing")} value={playing.length} />
<Block label={t("emby.transcoding")} value={transcoding.length} />
<Block label={t("emby.bitrate")} value={t("common.bitrate", { value: bitrate })} />
</Widget>
);
return <Emby service={service} />;
}

37
src/components/services/widgets/service/overseerr.jsx Normal file
View File

@ -0,0 +1,37 @@
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import Widget from "../widget";
import Block from "../block";
import { formatApiUrl } from "utils/api-helpers";
export default function Overseerr({ service }) {
const { t } = useTranslation();
const config = service.widget;
const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, `request/count`));
if (statsError) {
return <Widget error={t("widget.api_error")} />;
}
if (!statsData) {
return (
<Widget>
<Block label={t("overseerr.pending")} />
<Block label={t("overseerr.approved")} />
<Block label={t("overseerr.available")} />
</Widget>
);
}
return (
<Widget>
<Block label={t("overseerr.pending")} value={statsData.pending} />
<Block label={t("overseerr.approved")} value={statsData.approved} />
<Block label={t("overseerr.available")} value={statsData.available} />
</Widget>
);
}

148
src/components/services/widgets/service/tautulli.jsx
View File

@ -1,39 +1,157 @@
/* eslint-disable camelcase */
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import { BsFillPlayFill, BsPauseFill } from "react-icons/bs";
import Widget from "../widget";
import Block from "../block";
import { formatApiUrl } from "utils/api-helpers";
function millisecondsToTime(milliseconds) {
const seconds = Math.floor((milliseconds / 1000) % 60);
const minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
const hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);
return { hours, minutes, seconds };
}
function millisecondsToString(milliseconds) {
const { hours, minutes, seconds } = millisecondsToTime(milliseconds);
const parts = [];
if (hours > 0) {
parts.push(hours);
}
parts.push(minutes);
parts.push(seconds);
return parts.map((part) => part.toString().padStart(2, "0")).join(":");
}
function SingleSessionEntry({ session }) {
const { full_title, duration, view_offset, progress_percent, state, year, grandparent_year } = session;
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="text-xs z-10 self-center ml-2">
<span>{full_title}</span>
</div>
<div className="grow" />
<div className="self-center text-xs flex justify-end mr-2">{year || grandparent_year}</div>
</div>
<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_percent}%`,
}}
/>
<div className="text-xs z-10 self-center ml-1">
{state === "paused" && (
<BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)}
{state !== "paused" && (
<BsPauseFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)}
</div>
<div className="grow " />
<div className="self-center text-xs flex justify-end mr-2">
{millisecondsToString(view_offset)} / {millisecondsToString(duration)}
</div>
</div>
</>
);
}
function SessionEntry({ session }) {
const { full_title, view_offset, progress_percent, state } = session;
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_percent}%`,
}}
/>
<div className="text-xs z-10 self-center ml-1">
{state === "paused" && (
<BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)}
{state !== "paused" && (
<BsPauseFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)}
<span>{full_title}</span>
</div>
<div className="grow " />
<div className="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div>
</div>
);
}
export default function Tautulli({ service }) {
const { t } = useTranslation();
const config = service.widget;
const { data: statsData, error: statsError } = useSWR(formatApiUrl(config, "get_activity"));
const { data: activityData, error: activityError } = useSWR(formatApiUrl(config, "get_activity"), {
refreshInterval: 5000,
});
if (statsError) {
if (activityError) {
return <Widget error={t("widget.api_error")} />;
}
if (!statsData) {
if (!activityData) {
return (
<Widget>
<Block label={t("tautulli.playing")} />
<Block label={t("tautulli.transcoding")} />
<Block label={t("tautulli.bitrate")} />
</Widget>
<div className="flex flex-col pb-1">
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
</div>
);
}
const { data } = statsData.response;
const playing = activityData.response.data.sessions.sort((a, b) => {
if (a.view_offset > b.view_offset) {
return 1;
}
if (a.view_offset < b.view_offset) {
return -1;
}
return 0;
});
if (playing.length === 0) {
return (
<div className="flex flex-col pb-1">
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">{t("tautulli.no_active")}</span>
</div>
<div className="text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1">
<span className="absolute left-2 text-xs mt-[2px]">-</span>
</div>
</div>
);
}
if (playing.length === 1) {
const session = playing[0];
return (
<div className="flex flex-col pb-1">
<SingleSessionEntry session={session} />
</div>
);
}
return (
<Widget>
<Block label={t("tautulli.playing")} value={data.stream_count} />
<Block label={t("tautulli.transcoding")} value={data.stream_count_transcode} />
<Block label={t("tautulli.bitrate")} value={t("common.bitrate", { value: data.total_bandwidth })} />
</Widget>
<div className="flex flex-col pb-1">
{playing.map((session) => (
<SessionEntry key={session.Id} session={session} />
))}
</div>
);
}

11
src/components/widgets/resources/cpu.jsx
View File

@ -14,7 +14,7 @@ export default function Cpu() {
if (error || data?.error) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@ -25,7 +25,7 @@ export default function Cpu() {
if (!data) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@ -37,11 +37,12 @@ export default function Cpu() {
const percent = data.cpu.usage;
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FiCpu className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left font-mono min-w-[50px]">
<div className="flex flex-col ml-3 text-left font-mono min-w-[80px]">
<div className="text-theme-800 dark:text-theme-200 text-xs">
{t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}
{t("common.number", { value: data.cpu.usage, style: "unit", unit: "percent", maximumFractionDigits: 0 })}{" "}
{t("docker.cpu")}
</div>
<UsageBar percent={percent} />
</div>

8
src/components/widgets/resources/disk.jsx
View File

@ -14,7 +14,7 @@ export default function Disk({ options }) {
if (error || data?.error) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@ -25,7 +25,7 @@ export default function Disk({ options }) {
if (!data) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@ -37,9 +37,9 @@ export default function Disk({ options }) {
const percent = Math.round((data.drive.usedGb / data.drive.totalGb) * 100);
return (
<div className="flex-none flex flex-row items-center justify-center group">
<div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
<FiHardDrive className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left ">
<div className="flex flex-col ml-3 text-left min-w-[80px]">
<span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
{t("common.bytes", { value: data.drive.freeGb * 1024 * 1024 * 1024 })} {t("resources.free")}
</span>

8
src/components/widgets/resources/memory.jsx
View File

@ -14,7 +14,7 @@ export default function Memory() {
if (error || data?.error) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
@ -25,7 +25,7 @@ export default function Memory() {
if (!data) {
return (
<div className="flex-none flex flex-row items-center justify-center">
<div className="flex-none flex flex-row items-center mr-3 py-1.5">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<span className="text-theme-800 dark:text-theme-200 text-xs">-</span>
@ -37,9 +37,9 @@ export default function Memory() {
const percent = Math.round((data.memory.usedMemMb / data.memory.totalMemMb) * 100);
return (
<div className="flex-none flex flex-row items-center justify-center group">
<div className="flex-none flex flex-row items-center mr-3 py-1.5 group">
<FaMemory className="text-theme-800 dark:text-theme-200 w-5 h-5" />
<div className="flex flex-col ml-3 text-left">
<div className="flex flex-col ml-3 text-left min-w-[80px]">
<span className="text-theme-800 dark:text-theme-200 text-xs group-hover:hidden">
{t("common.bytes", { value: data.memory.freeMemMb * 1024 * 1024 })} {t("resources.free")}
</span>

8
src/components/widgets/resources/resources.jsx
View File

@ -4,11 +4,13 @@ import Memory from "./memory";
export default function Resources({ options }) {
return (
<div className="flex flex-col max-w:full basis-1/2 sm:basis-auto self-center">
<div className="flex flex-row space-x-4 self-center">
<div className="flex flex-col max-w:full sm:basis-auto self-center m-auto flex-wrap">
<div className="flex flex-row self-center flex-wrap justify-between">
{options.cpu && <Cpu />}
{options.memory && <Memory />}
{options.disk && <Disk options={options} />}
{Array.isArray(options.disk)
? options.disk.map((disk) => <Disk key={disk} options={{ disk }} />)
: options.disk && <Disk options={options} />}
</div>
{options.label && (
<div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>

2
src/components/widgets/resources/usage-bar.jsx
View File

@ -1,6 +1,6 @@
export default function UsageBar({ percent }) {
return (
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20">
<div className="mt-0.5 w-full bg-theme-800/30 rounded-full h-1 dark:bg-white/20 backdrop-blur-md">
<div
className="bg-theme-800/70 h-1 rounded-full dark:bg-white/50"
style={{

5
src/components/widgets/search/search.jsx
View File

@ -51,7 +51,7 @@ export default function Search({ options }) {
}
return (
<form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
<form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow mr-4" onSubmit={handleSubmit}>
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
<input
type="text"
@ -62,7 +62,8 @@ export default function Search({ options }) {
bg-white/50 dark:bg-white/10
focus:ring-theme-500 dark:focus:ring-white/50
focus:border-theme-500 dark:focus:border-white/50
border border-theme-300 dark:border-theme-200/50"
border border-theme-300 dark:border-theme-200/50
backdrop-blur-md"
placeholder={t("search.placeholder")}
onChange={(s) => setQuery(s.currentTarget.value)}
required

19
src/pages/api/services/index.js
View File

@ -1,8 +1,23 @@
/* eslint-disable no-console */
import { servicesFromConfig, servicesFromDocker, cleanServiceGroups } from "utils/service-helpers";
export default async function handler(req, res) {
const discoveredServices = cleanServiceGroups(await servicesFromDocker());
const configuredServices = cleanServiceGroups(await servicesFromConfig());
let discoveredServices;
let configuredServices;
try {
discoveredServices = cleanServiceGroups(await servicesFromDocker());
} catch {
console.error("Failed to discover services, please check docker.yaml for errors");
discoveredServices = [];
}
try {
configuredServices = cleanServiceGroups(await servicesFromConfig());
} catch {
console.error("Failed to load services.yaml, please check for errors");
configuredServices = [];
}
const mergedGroupsNames = [
...new Set([discoveredServices.map((group) => group.name), configuredServices.map((group) => group.name)].flat()),

1
src/pages/api/services/proxy.js
View File

@ -18,6 +18,7 @@ const serviceProxyHandlers = {
gotify: credentialedProxyHandler,
portainer: credentialedProxyHandler,
jellyseerr: credentialedProxyHandler,
overseerr: credentialedProxyHandler,
ombi: credentialedProxyHandler,
// super specific handlers
rutorrent: rutorrentProxyHandler,

4
src/pages/index.jsx
View File

@ -49,7 +49,7 @@ export default function Home({ settings }) {
</Head>
<div className="fixed w-full h-full m-0 p-0" style={wrappedStyle} />
<div className="relative w-full container m-auto flex flex-col h-screen justify-between">
<div className="flex flex-row flex-wrap space-x-0 sm:space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between md:justify-start">
<div className="flex flex-row flex-wrap m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
{widgets && (
<>
{widgets
@ -58,7 +58,7 @@ export default function Home({ settings }) {
<Widget key={i} widget={widget} />
))}
<div className="flex flex-wrap basis-full space-x-0 sm:space-x-4 grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
<div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
{widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) => (

1
src/utils/api-helpers.js
View File

@ -10,6 +10,7 @@ const formats = {
portainer: `{url}/api/endpoints/{env}/{endpoint}`,
rutorrent: `{url}/plugins/httprpc/action.php`,
jellyseerr: `{url}/api/v1/{endpoint}`,
overseerr: `{url}/api/v1/{endpoint}`,
ombi: `{url}/api/v1/{endpoint}`,
npm: `{url}/api/{endpoint}`,
gotify: `{url}/{endpoint}`,

5
src/utils/proxies/credentialed.js
View File

@ -18,11 +18,16 @@ export default async function credentialedProxyHandler(req, res) {
if (widget) {
const url = new URL(formatApiCall(widget.type, { endpoint, ...widget }));
const [status, contentType, data] = await httpProxy(url, {
method: req.method,
withCredentials: true,
credentials: "include",
headers: headersData,
});
if (status === 204 || status === 304) {
return res.status(status).end();
}
if (contentType) res.setHeader("Content-Type", contentType);
return res.status(status).send(data);
}

9
src/utils/proxies/generic.js
View File

@ -10,9 +10,16 @@ export default async function genericProxyHandler(req, res) {
if (widget) {
const url = new URL(formatApiCall(widget.type, { endpoint, ...widget }));
const [status, contentType, data] = await httpProxy(url);
const [status, contentType, data] = await httpProxy(url, {
method: req.method,
});
if (contentType) res.setHeader("Content-Type", contentType);
if (status === 204 || status === 304) {
return res.status(status).end();
}
return res.status(status).send(data);
}
}