From 08ef108100680d0d70617fbdbc6d00a6c2b6f0ab Mon Sep 17 00:00:00 2001 From: Aleksi Lassila Date: Thu, 6 Jul 2023 20:09:46 +0300 Subject: [PATCH] Work in progress source stats components --- src/app.css | 9 ++- src/lib/radarr/radarr.ts | 5 ++ src/routes/+layout.server.ts | 9 +++ src/routes/+layout.svelte | 3 +- .../components/Card/CardPlaceholder.svelte | 13 ++--- .../SetupRequired/SetupRequired.svelte | 16 ++++++ .../components/SourceStats/RadarrStats.svelte | 55 ++++++++++-------- .../components/SourceStats/SonarrStats.svelte | 56 +++++++++++-------- .../SourceStats/StatsContainer.svelte | 48 ++++++++++++++++ .../SourceStats/StatsPlaceholder.svelte | 12 ++++ .../components/Utils/WidthLimited.svelte | 3 + src/routes/components/svgs/SonarrIcon.svelte | 5 +- src/routes/library/+page.server.ts | 18 +++--- src/routes/radarr/stats/+server.ts | 13 +++++ src/routes/sources/+page.svelte | 36 ++---------- 15 files changed, 202 insertions(+), 99 deletions(-) create mode 100644 src/routes/components/SetupRequired/SetupRequired.svelte create mode 100644 src/routes/components/SourceStats/StatsContainer.svelte create mode 100644 src/routes/components/SourceStats/StatsPlaceholder.svelte create mode 100644 src/routes/components/Utils/WidthLimited.svelte create mode 100644 src/routes/radarr/stats/+server.ts diff --git a/src/app.css b/src/app.css index c9ae48c..d57018a 100644 --- a/src/app.css +++ b/src/app.css @@ -3,5 +3,10 @@ @tailwind utilities; a { - @apply hover:text-amber-200; -} \ No newline at end of file + @apply hover:text-amber-200; +} + +.placeholder { + @apply bg-[#ffffff11]; + @apply animate-pulse; +} diff --git a/src/lib/radarr/radarr.ts b/src/lib/radarr/radarr.ts index d78f03f..d2cea19 100644 --- a/src/lib/radarr/radarr.ts +++ b/src/lib/radarr/radarr.ts @@ -29,6 +29,11 @@ export const RadarrApi = createClient({ } }); +export const getRadarrMovies = () => + RadarrApi.get('/api/v3/movie', { + params: {} + }).then((r) => r.data); + export const requestRadarrMovie = () => request(getRadarrMovie); export const getRadarrMovie = (tmdbId: string) => diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index a2f984f..7378947 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -7,6 +7,15 @@ import { } from '$env/static/private'; import { PUBLIC_JELLYFIN_API_KEY, PUBLIC_JELLYFIN_URL } from '$env/static/public'; +export type MissingEnvironmentVariables = { + RADARR_API_KEY: boolean; + RADARR_BASE_URL: boolean; + SONARR_API_KEY: boolean; + SONARR_BASE_URL: boolean; + PUBLIC_JELLYFIN_API_KEY: boolean; + PUBLIC_JELLYFIN_URL: boolean; +}; + export const load = (async () => { const isApplicationSetUp = !!RADARR_API_KEY && diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 26d19ae..baf0efe 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -5,6 +5,7 @@ import { setContext } from 'svelte'; import type { LayoutData } from './$types'; import { initialPlayerState } from './components/VideoPlayer/VideoPlayer'; + import SetupRequired from './components/SetupRequired/SetupRequired.svelte'; setContext('player', initialPlayerState); @@ -24,5 +25,5 @@ {:else} -
Application not set up
+ {/if} diff --git a/src/routes/components/Card/CardPlaceholder.svelte b/src/routes/components/Card/CardPlaceholder.svelte index 4c28101..91825b9 100644 --- a/src/routes/components/Card/CardPlaceholder.svelte +++ b/src/routes/components/Card/CardPlaceholder.svelte @@ -6,13 +6,10 @@
diff --git a/src/routes/components/SetupRequired/SetupRequired.svelte b/src/routes/components/SetupRequired/SetupRequired.svelte new file mode 100644 index 0000000..4a4c560 --- /dev/null +++ b/src/routes/components/SetupRequired/SetupRequired.svelte @@ -0,0 +1,16 @@ + + +
+

Welcome to Reiverr

+

+ It seems like the application is missing some environment variables that are necessary for the + application to function. Please provide the following environment variables: +

+
    + {#each Object.keys(missingEnvironmentVariables).filter((k) => missingEnvironmentVariables[k]) as variableName} + {variableName} + {/each} +
+
diff --git a/src/routes/components/SourceStats/RadarrStats.svelte b/src/routes/components/SourceStats/RadarrStats.svelte index 8801e17..782055a 100644 --- a/src/routes/components/SourceStats/RadarrStats.svelte +++ b/src/routes/components/SourceStats/RadarrStats.svelte @@ -1,27 +1,36 @@ -
-
-
-
-

Mac-Mini

- Radarr -
-
-
-

Movies

-
30
-
-
-

Space Taken

-
{formatSize(120_000_000_000)}
-
-
-

Space Left

-
{formatSize(50_000_000_000)}
-
-
-
-
+{#await statsRequest} + +{:then { moviesAmount }} + + + +{/await} diff --git a/src/routes/components/SourceStats/SonarrStats.svelte b/src/routes/components/SourceStats/SonarrStats.svelte index b852a00..058bf72 100644 --- a/src/routes/components/SourceStats/SonarrStats.svelte +++ b/src/routes/components/SourceStats/SonarrStats.svelte @@ -1,27 +1,37 @@ -
-
-
-
-

Mac-Mini

- Sonarr -
-
-
-

Movies

-
30
-
-
-

Space Taken

-
{formatSize(120_000_000_000)}
-
-
-

Space Left

-
{formatSize(50_000_000_000)}
-
-
-
-
+{#await statsRequest} + +{:then { moviesAmount }} + + + +{/await} diff --git a/src/routes/components/SourceStats/StatsContainer.svelte b/src/routes/components/SourceStats/StatsContainer.svelte new file mode 100644 index 0000000..317c3d7 --- /dev/null +++ b/src/routes/components/SourceStats/StatsContainer.svelte @@ -0,0 +1,48 @@ + + +
+
+ {#if large} + + {/if} +
+
+

{subtitle}

+ {title} +
+
+ {#each stats as { title, value }} +
+

{title}

+
{value}
+
+ {/each} +
+
+
diff --git a/src/routes/components/SourceStats/StatsPlaceholder.svelte b/src/routes/components/SourceStats/StatsPlaceholder.svelte new file mode 100644 index 0000000..faf1645 --- /dev/null +++ b/src/routes/components/SourceStats/StatsPlaceholder.svelte @@ -0,0 +1,12 @@ + + +
diff --git a/src/routes/components/Utils/WidthLimited.svelte b/src/routes/components/Utils/WidthLimited.svelte new file mode 100644 index 0000000..15649c4 --- /dev/null +++ b/src/routes/components/Utils/WidthLimited.svelte @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/routes/components/svgs/SonarrIcon.svelte b/src/routes/components/svgs/SonarrIcon.svelte index 973dcf1..9cf797a 100644 --- a/src/routes/components/svgs/SonarrIcon.svelte +++ b/src/routes/components/svgs/SonarrIcon.svelte @@ -1,4 +1,7 @@ - { }; }) satisfies PageServerLoad; -async function getLibraryInfo(): Promise {} +async function getLibraryInfo(): Promise { } function getLibraryItems(): [Promise, Promise, Promise] { - const radarrMovies = RadarrApi.get('/api/v3/movie', { - params: {} - }).then((r) => r.data); + const radarrMovies = getRadarrMovies(); const downloadingRadarrMovies = RadarrApi.get('/api/v3/queue', { params: { @@ -83,11 +81,11 @@ function getLibraryItems(): [Promise, Promise m?.movie?.tmdbId) ?.map( async (m) => - ({ - ...(await fetchCardProps(m.movie as any)), - progress: m.sizeleft && m.size ? ((m.size - m.sizeleft) / m.size) * 100 : 0, - completionTime: m.estimatedCompletionTime - } as DownloadingCardProps) + ({ + ...(await fetchCardProps(m.movie as any)), + progress: m.sizeleft && m.size ? ((m.size - m.sizeleft) / m.size) * 100 : 0, + completionTime: m.estimatedCompletionTime + } as DownloadingCardProps) ) || [] ); } diff --git a/src/routes/radarr/stats/+server.ts b/src/routes/radarr/stats/+server.ts new file mode 100644 index 0000000..a8af922 --- /dev/null +++ b/src/routes/radarr/stats/+server.ts @@ -0,0 +1,13 @@ +import { RadarrApi, getRadarrMovies } from '$lib/radarr/radarr'; +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from '@sveltejs/kit'; + +export type RadarrStatsDto = { + movies: Awaited>; +}; + +export const GET = (async () => { + const radarrMovies = await getRadarrMovies(); + + return json({ movies: radarrMovies }); +}) satisfies RequestHandler; diff --git a/src/routes/sources/+page.svelte b/src/routes/sources/+page.svelte index 2143ce6..cd2eafb 100644 --- a/src/routes/sources/+page.svelte +++ b/src/routes/sources/+page.svelte @@ -2,41 +2,14 @@ import RadarrIcon from '../components/svgs/RadarrIcon.svelte'; import SonarrIcon from '../components/svgs/SonarrIcon.svelte'; import { formatSize } from '$lib/utils.js'; + import RadarrStats from '../components/SourceStats/RadarrStats.svelte'; + import SonarrStats from '../components/SourceStats/SonarrStats.svelte';
-
(window.location.href = '/')} - > -
- -
-
-

Mac-Mini

- Radarr -
-
-
-

Movies

-
30
-
-
-

Space Taken

-
{formatSize(120_000_000_000)}
-
-
-

Space Left

-
{formatSize(50_000_000_000)}
-
-
-
-
+ +
@@ -46,6 +19,7 @@ variables.

+