Fully working sonarr integration

src/lib/components/SourceStats/RadarrStats.svelte

@@ -11,18 +11,25 @@
 
 	async function fetchStats() {
 		const discSpacePromise = getDiskSpace();
-		const { movies } = await $library;
-		const availableMovies = movies.filter(
-			(movie) => !movie.download && movie.isAvailable && movie.hasFile
+		const { itemsArray } = await $library;
+		const availableMovies = itemsArray.filter(
+			(item) =>
+				!item.download &&
+				item.radarrMovie &&
+				item.radarrMovie.isAvailable &&
+				item.radarrMovie.movieFile
 		);
 
 		const diskSpaceInfo =
 			(await discSpacePromise).find((disk) => disk.path === '/') || (await discSpacePromise)[0];
 
-		const spaceOccupied = availableMovies.reduce((acc, movie) => acc + (movie.sizeOnDisk || 0), 0);
+		const spaceOccupied = availableMovies.reduce(
+			(acc, movie) => acc + (movie.radarrMovie?.sizeOnDisk || 0),
+			0
+		);
 
 		return {
-			moviesAmount: availableMovies.length,
+			moviesCount: availableMovies.length,
 			spaceLeft: diskSpaceInfo.freeSpace || 0,
 			spaceOccupied,
 			spaceTotal: diskSpaceInfo.totalSpace || 0
@@ -32,14 +39,14 @@
 
 {#await fetchStats()}
 	<StatsPlaceholder {large} />
-{:then { moviesAmount, spaceLeft, spaceOccupied, spaceTotal }}
+{:then { moviesCount, spaceLeft, spaceOccupied, spaceTotal }}
 	<StatsContainer
 		{large}
 		title="Radarr"
 		subtitle="Movies Provider"
 		href={PUBLIC_RADARR_BASE_URL}
 		stats={[
-			{ title: 'Movies', value: String(moviesAmount) },
+			{ title: 'Movies', value: String(moviesCount) },
 			{ title: 'Space Taken', value: formatSize(spaceOccupied) },
 			{ title: 'Space Left', value: formatSize(spaceLeft) }
 		]}

src/lib/components/SourceStats/SonarrStats.svelte

@@ -5,33 +5,54 @@
 	import StatsContainer from './StatsContainer.svelte';
 	import SonarrIcon from '../svgs/SonarrIcon.svelte';
 	import { PUBLIC_SONARR_BASE_URL } from '$env/static/public';
+	import { getDiskSpace } from '$lib/apis/sonarr/sonarrApi';
+	import { library } from '$lib/stores/library.store';
 
 	export let large = false;
 
-	let statsRequest: Promise<{ moviesAmount: number }> = new Promise((_) => {}) as any;
+	async function fetchStats() {
+		const discSpacePromise = getDiskSpace();
+		const { itemsArray } = await $library;
+		const availableSeries = itemsArray.filter(
+			(item) => item.sonarrSeries && item.sonarrSeries.statistics?.episodeFileCount
+		);
 
-	onMount(() => {
-		statsRequest = fetch('/radarr/stats')
-			.then((res) => res.json())
-			.then((data) => ({
-				moviesAmount: data?.movies?.length
-			}));
-	});
+		const diskSpaceInfo =
+			(await discSpacePromise).find((disk) => disk.path === '/') || (await discSpacePromise)[0];
+
+		const spaceOccupied = availableSeries.reduce(
+			(acc, series) => acc + (series.sonarrSeries?.statistics?.sizeOnDisk || 0),
+			0
+		);
+
+		const episodesCount = availableSeries.reduce(
+			(acc, series) => acc + (series.sonarrSeries?.statistics?.episodeFileCount || 0),
+			0
+		);
+
+		return {
+			episodesCount,
+			spaceLeft: diskSpaceInfo.freeSpace || 0,
+			spaceOccupied,
+			spaceTotal: diskSpaceInfo.totalSpace || 0
+		};
+	}
 </script>
 
-{#await statsRequest}
+{#await fetchStats()}
 	<StatsPlaceholder {large} />
-{:then { moviesAmount }}
+{:then { episodesCount, spaceLeft, spaceOccupied, spaceTotal }}
 	<StatsContainer
 		{large}
 		title="Sonarr"
 		subtitle="Shows Provider"
 		href={PUBLIC_SONARR_BASE_URL}
 		stats={[
-			{ title: 'Movies', value: String(moviesAmount) },
-			{ title: 'Space Taken', value: formatSize(120_000_000_000) },
-			{ title: 'Space Left', value: formatSize(50_000_000_000) }
+			{ title: 'Episodes', value: String(episodesCount) },
+			{ title: 'Space Taken', value: formatSize(spaceOccupied) },
+			{ title: 'Space Left', value: formatSize(spaceLeft) }
 		]}
+		fillPercentage={((spaceTotal - spaceLeft) / spaceTotal) * 100}
 		color="#8aacfd21"
 	>
 		<SonarrIcon slot="icon" class="absolute opacity-20 p-4 h-full inset-y-0 right-2" />