Initial work on getting series working

src/lib/apis/radarr/radarrApi.ts

@@ -2,7 +2,7 @@ import createClient from 'openapi-fetch';
 import { log, request } from '$lib/utils';
 import type { paths } from '$lib/apis/radarr/radarr.generated';
 import type { components } from '$lib/apis/radarr/radarr.generated';
-import { fetchTmdbMovie } from '$lib/apis/tmdbApi';
+import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 import { PUBLIC_RADARR_API_KEY, PUBLIC_RADARR_BASE_URL } from '$env/static/public';
 
 export type RadarrMovie = components['schemas']['MovieResource'];
@@ -36,9 +36,9 @@ export const getRadarrMovies = (): Promise<RadarrMovie[]> =>
 		params: {}
 	}).then((r) => r.data || []);
 
-export const requestRadarrMovie = () => request(getRadarrMovie);
+export const requestRadarrMovie = () => request(getRadarrMovieByTmdbId);
 
-export const getRadarrMovie = (tmdbId: string): Promise<RadarrMovie | undefined> =>
+export const getRadarrMovieByTmdbId = (tmdbId: string): Promise<RadarrMovie | undefined> =>
 	RadarrApi.get('/api/v3/movie', {
 		params: {
 			query: {
@@ -47,11 +47,9 @@ export const getRadarrMovie = (tmdbId: string): Promise<RadarrMovie | undefined>
 		}
 	}).then((r) => r.data?.find((m) => (m.tmdbId as any) == tmdbId));
 
-export const requestAddRadarrMovie = () => request(addRadarrMovie);
-
 export const addRadarrMovie = async (tmdbId: string) => {
-	const tmdbMovie = await fetchTmdbMovie(tmdbId);
-	const radarrMovie = await getMovieByTmdbIdByTmdbId(tmdbId);
+	const tmdbMovie = await getTmdbMovie(tmdbId);
+	const radarrMovie = await lookupRadarrMovieByTmdbId(tmdbId);
 	console.log('fetched movies', tmdbMovie, radarrMovie);
 
 	if (radarrMovie?.id) throw new Error('Movie already exists');
@@ -94,15 +92,11 @@ export const cancelDownloadRadarrMovie = async (downloadId: number) => {
 	return deleteResponse.response.ok;
 };
 
-export const requestRadarrReleases = () => request(fetchRadarrReleases);
-
 export const fetchRadarrReleases = (movieId: string) =>
 	RadarrApi.get('/api/v3/release', { params: { query: { movieId: Number(movieId) } } }).then(
 		(r) => r.data
 	);
 
-export const requestDownloadRadarrMovie = () => request(downloadRadarrMovie);
-
 export const downloadRadarrMovie = (guid: string) =>
 	RadarrApi.post('/api/v3/release', {
 		params: {},
@@ -121,8 +115,6 @@ export const deleteRadarrMovie = (id: number) =>
 		}
 	}).then((res) => res.response.ok);
 
-export const requestRadarrQueuedById = () => request(getRadarrDownload);
-
 export const getRadarrDownloads = (): Promise<RadarrDownload[]> =>
 	RadarrApi.get('/api/v3/queue', {
 		params: {
@@ -132,10 +124,10 @@ export const getRadarrDownloads = (): Promise<RadarrDownload[]> =>
 		}
 	}).then((r) => (r.data?.records?.filter((record) => record.movie) as RadarrDownload[]) || []);
 
-export const getRadarrDownload = (id: string) =>
-	getRadarrDownloads().then((downloads) => downloads.find((d) => d.movie.id === Number(id)));
+export const getRadarrDownloadById = (radarrId: number) =>
+	getRadarrDownloads().then((downloads) => downloads.find((d) => d.movie.id === radarrId));
 
-const getMovieByTmdbIdByTmdbId = (tmdbId: string) =>
+const lookupRadarrMovieByTmdbId = (tmdbId: string) =>
 	RadarrApi.get('/api/v3/movie/lookup/tmdb', {
 		params: {
 			query: {

src/lib/apis/sonarr/sonarrApi.ts

@@ -1,6 +1,13 @@
 import createClient from 'openapi-fetch';
-import type { paths } from '$lib/apis/sonarr/sonarr.generated';
+import type { components, paths } from '$lib/apis/sonarr/sonarr.generated';
 import { PUBLIC_SONARR_API_KEY, PUBLIC_SONARR_BASE_URL } from '$env/static/public';
+import type { SeriesResource } from '$lib/types';
+
+export type SonarrSeries = components['schemas']['SeriesResource'];
+// export type MovieFileResource = components['schemas']['MovieFileResource'];
+export type SonarrReleaseResource = components['schemas']['ReleaseResource'];
+export type SonarrDownload = components['schemas']['QueueResource'] & { series: SonarrSeries };
+export type DiskSpaceInfo = components['schemas']['DiskSpaceResource'];
 
 export const SonarrApi = createClient<paths>({
 	baseUrl: PUBLIC_SONARR_BASE_URL,
@@ -8,3 +15,32 @@ export const SonarrApi = createClient<paths>({
 		'X-Api-Key': PUBLIC_SONARR_API_KEY
 	}
 });
+
+export const getSonarrSeries = (): Promise<SeriesResource[]> =>
+	SonarrApi.get('/api/v3/series', {
+		params: {}
+	}).then((r) => r.data || []);
+
+export const getSonarrSeriesByTvdbId = (tvdbId: number): Promise<SeriesResource | undefined> =>
+	SonarrApi.get('/api/v3/series', {
+		params: {
+			query: {
+				tvdbId: tvdbId
+			}
+		}
+	}).then((r) => r.data?.find((m) => m.tvdbId === tvdbId));
+
+export const getSonarrDownloads = (): Promise<SonarrDownload[]> =>
+	SonarrApi.get('/api/v3/queue', {
+		params: {
+			query: {
+				includeSeries: true
+			}
+		}
+	}).then((r) => (r.data?.records?.filter((record) => record.series) as SonarrDownload[]) || []);
+
+export const getRadarrDownloadById = (sonarrId: number) =>
+	getSonarrDownloads().then((downloads) => downloads.find((d) => d.series.id === sonarrId));
+
+export const getDiskSpace = (): Promise<DiskSpaceInfo[]> =>
+	SonarrApi.get('/api/v3/diskspace', {}).then((d) => d.data || []);

src/lib/apis/tmdb/tmdbApi.ts

@@ -1,6 +1,54 @@
 import axios from 'axios';
 import { PUBLIC_TMDB_API_KEY } from '$env/static/public';
 import { request } from '$lib/utils';
+import type { paths } from './tmdb.generated';
+import createClient from 'openapi-fetch';
+
+export const TmdbApiOpen = createClient<paths>({
+	baseUrl: 'https://api.themoviedb.org',
+	headers: {
+		Authorization: `Bearer ${PUBLIC_TMDB_API_KEY}`
+	}
+});
+
+export const getTmdbMovie = async (tmdbId: number) =>
+	await TmdbApiOpen.get('/3/movie/{movie_id}', {
+		params: {
+			path: {
+				movie_id: tmdbId
+			}
+		}
+	}).then((res) => res.data);
+
+export const getTmdbPopularMovies = () =>
+	TmdbApiOpen.get('/3/movie/popular', {
+		params: {}
+	}).then((res) => res.data?.results || []);
+
+export const getTmdbIdFromTvdbId = async (tvdbId: number) =>
+	TmdbApiOpen.get('/3/find/{external_id}', {
+		params: {
+			path: {
+				external_id: String(tvdbId)
+			},
+			query: {
+				external_source: 'tvdb_id'
+			}
+		}
+	})
+		.then((res) => res.data?.tv_results?.[0])
+		.then((res: any) => res?.id as number | undefined);
+
+export const getTmdbSeriesImages = async (tmdbId: number) =>
+	TmdbApiOpen.get('/3/tv/{series_id}/images', {
+		params: {
+			path: {
+				series_id: tmdbId
+			}
+		}
+	}).then((res) => res.data);
+
+// Deprecated hereon forward
 
 export const TmdbApi = axios.create({
 	baseURL: 'https://api.themoviedb.org/3',

src/lib/components/Card/CardProvider.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import type { TmdbMovie } from '$lib/apis/tmdbApi';
-	import { onMount } from 'svelte';
-	import { fetchTmdbMovie, fetchTmdbMovieImages } from '$lib/apis/tmdbApi';
-	import { TMDB_IMAGES } from '$lib/constants';
-	import { getJellyfinItemByTmdbId } from '$lib/apis/jellyfin/jellyfinApi';
-	import CardPlaceholder from './CardPlaceholder.svelte';
-	import Card from './Card.svelte';
-
-	export let tmdbId: string;
-
-	export let type: 'default' | 'download' | 'in-library' = 'default';
-
-	let tmdbMoviePromise: Promise<TmdbMovie>;
-	let jellyfinItemPromise;
-	let radarrItemPromise;
-	let backdropUrlPromise;
-
-	onMount(async () => {
-		if (!tmdbId) throw new Error('No tmdbId provided');
-
-		backdropUrlPromise = fetchTmdbMovieImages(String(tmdbId)).then(
-			(r) => TMDB_IMAGES + r.backdrops.filter((b) => b.iso_639_1 === 'en')[0].file_path
-		);
-		tmdbMoviePromise = fetchTmdbMovie(tmdbId);
-		if (type === 'in-library') jellyfinItemPromise = getJellyfinItemByTmdbId(tmdbId);
-		if (type === 'download')
-			radarrItemPromise = fetch(`/movie/${tmdbId}/radarr`).then((r) => r.json());
-	});
-</script>
-
-{#await Promise.all([tmdbMoviePromise, jellyfinItemPromise, backdropUrlPromise])}
-	<CardPlaceholder {...$$restProps} />
-{:then [tmdbMovie, jellyfinItem, backdropUrl]}
-	<Card {...$$restProps} {tmdbMovie} {backdropUrl} {jellyfinItem} />
-{:catch err}
-	Error
-{/await}

src/lib/components/Card/card.ts

@@ -1,6 +1,6 @@
 import type { RadarrMovie } from '$lib/apis/radarr/radarrApi';
-import { fetchTmdbMovieImages } from '$lib/apis/tmdbApi';
-import type { TmdbMovie } from '$lib/apis/tmdbApi';
+import { fetchTmdbMovieImages } from '$lib/apis/tmdb/tmdbApi';
+import type { TmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 
 export interface CardProps {
 	tmdbId: string;

src/lib/components/Navbar/TitleSearchModal.svelte

@@ -3,8 +3,8 @@
 	import ModalContent from '../Modal/ModalContent.svelte';
 	import { Cross1, Cross2, MagnifyingGlass } from 'radix-icons-svelte';
 	import IconButton from '../IconButton.svelte';
-	import { TmdbApi } from '$lib/apis/tmdbApi';
-	import type { MultiSearchResponse } from '$lib/apis/tmdbApi';
+	import { TmdbApi } from '$lib/apis/tmdb/tmdbApi';
+	import type { MultiSearchResponse } from '$lib/apis/tmdb/tmdbApi';
 	import { TMDB_IMAGES } from '$lib/constants';
 	import ModalHeader from '../Modal/ModalHeader.svelte';
 	import { onMount } from 'svelte';

src/lib/components/Poster/Poster.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { TmdbApi } from '$lib/apis/tmdbApi';
-	import type { TmdbMovie } from '$lib/apis/tmdbApi';
+	import { TmdbApi } from '$lib/apis/tmdb/tmdbApi';
+	import type { TmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 	import { getContext, onMount } from 'svelte';
 	import { TMDB_IMAGES } from '$lib/constants';
 	import { formatMinutesToTime } from '$lib/utils';

src/lib/components/ResourceDetails/LibraryDetails.svelte

@@ -10,14 +10,14 @@
 
 	let isRequestModalVisible = false;
 	export let tmdbId: string;
-	export let jellyfinStreamDisabled;
-	export let openJellyfinStream;
+	export let jellyfinStreamDisabled: boolean;
+	export let openJellyfinStream: () => void;
 
-	let response;
+	let response: Promise<any>;
 
 	const headerStyle = 'uppercase tracking-widest font-bold';
 
-	let refetchTimeout;
+	let refetchTimeout: NodeJS.Timeout;
 	let isRefetching = false;
 	async function refetch() {
 		console.log('refetching...');

src/lib/components/ResourceDetails/ResourceDetails.svelte

@@ -4,8 +4,8 @@
 	import { fade, fly } from 'svelte/transition';
 	import { TMDB_IMAGES } from '$lib/constants';
 	import Button from '$lib/components/Button.svelte';
-	import type { CastMember, TmdbMovie, Video } from '$lib/apis/tmdbApi';
-	import { fetchTmdbMovieCredits, fetchTmdbMovieVideos } from '$lib/apis/tmdbApi';
+	import type { CastMember, TmdbMovie, Video } from '$lib/apis/tmdb/tmdbApi';
+	import { fetchTmdbMovieCredits, fetchTmdbMovieVideos } from '$lib/apis/tmdb/tmdbApi';
 	import LibraryDetails from './LibraryDetails.svelte';
 	import { getJellyfinItemByTmdbId } from '$lib/apis/jellyfin/jellyfinApi';
 	import HeightHider from '../HeightHider.svelte';

src/lib/components/SourceStats/SonarrStats.svelte

@@ -4,6 +4,7 @@
 	import StatsPlaceholder from './StatsPlaceholder.svelte';
 	import StatsContainer from './StatsContainer.svelte';
 	import SonarrIcon from '../svgs/SonarrIcon.svelte';
+	import { PUBLIC_SONARR_BASE_URL } from '$env/static/public';
 
 	export let large = false;
 
@@ -25,6 +26,7 @@
 		{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) },

src/lib/stores/library.store.ts

@@ -1,17 +1,24 @@
+import { getJellyfinContinueWatching, type JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
 import {
 	getRadarrDownloads,
 	getRadarrMovies,
-	RadarrApi,
 	type RadarrDownload,
 	type RadarrMovie
 } from '$lib/apis/radarr/radarrApi';
-import type { CardProps } from '$lib/components/Card/card';
+import {
+	getSonarrDownloads,
+	getSonarrSeries,
+	type SonarrDownload,
+	type SonarrSeries
+} from '$lib/apis/sonarr/sonarrApi';
+import {
+	fetchTmdbMovieImages,
+	getTmdbIdFromTvdbId,
+	getTmdbSeriesImages
+} from '$lib/apis/tmdb/tmdbApi';
 import { writable } from 'svelte/store';
-import { fetchCardProps } from '$lib/components/Card/card';
-import { fetchTmdbMovieImages } from '$lib/apis/tmdbApi';
-import { getJellyfinContinueWatching, type JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
 
-export interface PlayableRadarrMovie extends RadarrMovie {
+interface PlayableItem {
 	cardBackdropUrl: string;
 	download?: {
 		progress: number;
@@ -23,15 +30,27 @@ export interface PlayableRadarrMovie extends RadarrMovie {
 	};
 }
 
+export interface PlayableRadarrMovie extends RadarrMovie, PlayableItem {}
+export interface PlayableSonarrSeries extends SonarrSeries, PlayableItem {
+	tmdbId?: number;
+}
+
 export interface Library {
 	movies: PlayableRadarrMovie[];
 	totalMovies: number;
-	getItem: (tmdbId: number) => PlayableRadarrMovie | undefined;
+	series: PlayableSonarrSeries[];
+	totalSeries: number;
+	getMovie: (tmdbId: number) => PlayableRadarrMovie | undefined;
+	getSeries: (tmdbId: number) => PlayableSonarrSeries | undefined;
 }
 
 async function getLibrary(): Promise<Library> {
 	const radarrMoviesPromise = getRadarrMovies();
 	const radarrDownloadsPromise = getRadarrDownloads();
+
+	const sonarrSeriesPromise = getSonarrSeries();
+	const sonarrDownloadsPromise = getSonarrDownloads();
+
 	const continueWatchingPromise = getJellyfinContinueWatching();
 
 	const movies: PlayableRadarrMovie[] = await radarrMoviesPromise.then(async (radarrMovies) => {
@@ -41,10 +60,20 @@ async function getLibrary(): Promise<Library> {
 		return getLibraryMovies(radarrMovies, radarrDownloads, continueWatching);
 	});
 
+	const series: PlayableSonarrSeries[] = await sonarrSeriesPromise.then(async (sonarrSeries) => {
+		const sonarrDownloads = await sonarrDownloadsPromise;
+		const continueWatching = await continueWatchingPromise;
+
+		return getLibrarySeries(sonarrSeries, sonarrDownloads, continueWatching);
+	});
+
 	return {
 		movies,
 		totalMovies: movies?.length || 0,
-		getItem: (tmdbId: number) => movies.find((m) => m.tmdbId === tmdbId)
+		series,
+		totalSeries: series?.length || 0,
+		getMovie: (tmdbId: number) => movies.find((m) => m.tmdbId === tmdbId),
+		getSeries: (tmdbId: number) => series.find((s) => s.tmdbId === tmdbId)
 	};
 }
 
@@ -61,12 +90,11 @@ async function getLibraryMovies(
 			(i) => i.ProviderIds?.Tmdb === String(m.tmdbId)
 		);
 
-		const downloadProgress = radarrDownload
-			? radarrDownload.sizeleft && radarrDownload.size
+		const downloadProgress =
+			radarrDownload?.sizeleft && radarrDownload?.size
 				? ((radarrDownload.size - radarrDownload.sizeleft) / radarrDownload.size) * 100
-				: 0
-			: undefined;
-		const completionTime = radarrDownload ? radarrDownload.estimatedCompletionTime : undefined;
+				: undefined;
+		const completionTime = radarrDownload?.estimatedCompletionTime || undefined;
 		const download =
 			downloadProgress && completionTime
 				? { progress: downloadProgress, completionTime }
@@ -80,12 +108,12 @@ async function getLibraryMovies(
 			length && watchingProgress ? { length, progress: watchingProgress } : undefined;
 
 		const backdropUrl = await fetchTmdbMovieImages(String(m.tmdbId)).then(
-			(r) => r.backdrops.filter((b) => b.iso_639_1 === 'en')[0].file_path
+			(r) => r.backdrops.find((b) => b.iso_639_1 === 'en')?.file_path
 		);
 
 		return {
 			...m,
-			cardBackdropUrl: backdropUrl,
+			cardBackdropUrl: backdropUrl || '',
 			download,
 			continueWatching
 		};
@@ -93,3 +121,51 @@ async function getLibraryMovies(
 
 	return await Promise.all(playableMoviesPromises);
 }
+
+async function getLibrarySeries(
+	sonarrSeries: SonarrSeries[],
+	sonarrDownloads: SonarrDownload[],
+	jellyfinContinueWatching: JellyfinItem[]
+): Promise<PlayableSonarrSeries[]> {
+	const playableSeriesPromises = sonarrSeries.map(async (s) => {
+		const sonarrDownload = sonarrDownloads.find((d) => d.series.tvdbId === s.tvdbId);
+		const jellyfinItem = jellyfinContinueWatching.find(
+			(i) => i.ProviderIds?.TvdbId === String(s.tvdbId)
+		);
+
+		const downloadProgress =
+			sonarrDownload?.sizeleft && sonarrDownload?.size
+				? ((sonarrDownload.size - sonarrDownload.sizeleft) / sonarrDownload.size) * 100
+				: undefined;
+		const completionTime = sonarrDownload?.estimatedCompletionTime || undefined;
+		const download =
+			downloadProgress && completionTime
+				? { progress: downloadProgress, completionTime }
+				: undefined;
+
+		const length = jellyfinItem?.RunTimeTicks
+			? jellyfinItem.RunTimeTicks / 10_000_000 / 60
+			: undefined;
+		const watchingProgress = jellyfinItem?.UserData?.PlayedPercentage;
+		const continueWatching =
+			length && watchingProgress ? { length, progress: watchingProgress } : undefined;
+
+		const tmdbId = s.tvdbId ? await getTmdbIdFromTvdbId(s.tvdbId) : undefined;
+
+		const backdropUrl = tmdbId
+			? await getTmdbSeriesImages(tmdbId).then(
+					(r) => r?.backdrops?.find((b) => b.iso_639_1 === 'en')?.file_path
+			  )
+			: undefined;
+
+		return {
+			...s,
+			tmdbId,
+			cardBackdropUrl: backdropUrl || '',
+			download,
+			continueWatching
+		};
+	});
+
+	return await Promise.all(playableSeriesPromises);
+}

src/lib/utils.ts

@@ -1,4 +1,4 @@
-import type { Genre } from '$lib/apis/tmdbApi';
+import type { Genre } from '$lib/apis/tmdb/tmdbApi';
 import { writable } from 'svelte/store';
 
 export function formatMinutesToTime(minutes: number) {

src/routes/+page.server.ts

@@ -1,26 +1,21 @@
-import { fetchTmdbMovie, TmdbApi } from '$lib/apis/tmdbApi';
-import type { TmdbMovie } from '$lib/apis/tmdbApi';
+import { getTmdbMovie, getTmdbPopularMovies, TmdbApi } from '$lib/apis/tmdb/tmdbApi';
+import type { TmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 import { getJellyfinContinueWatching } from '$lib/apis/jellyfin/jellyfinApi';
 import type { PageServerLoad } from './$types';
 
 export const load = (async () => {
-	const showcases = await TmdbApi.get('/movie/popular').then((res): TmdbMovie[] =>
-		res.data.results.slice(0, 5)
-	);
+	const showcases = (await getTmdbPopularMovies()).slice(0, 5);
 
 	const continueWatching = getJellyfinContinueWatching().then(async (items) => {
 		const itemsFiltered = items?.filter((i) => i.ProviderIds?.Tmdb);
 		if (!itemsFiltered?.length) return;
 
-		const firstMovie = await fetchTmdbMovie(String(itemsFiltered[0].ProviderIds?.Tmdb));
-
 		return {
 			items: itemsFiltered?.map((i) => ({
 				tmdbId: i.ProviderIds?.Tmdb,
 				progress: i.UserData?.PlayedPercentage,
 				length: (i.RunTimeTicks || 0) / 10_000_000 / 60
-			})),
-			backdrop: firstMovie.backdrop_path
+			}))
 		};
 	});
 

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fetchTmdbMovie } from '$lib/apis/tmdbApi';
+	import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 	import SmallPoster from '$lib/components/Poster/Poster.svelte';
 	import ResourceDetails from '$lib/components/ResourceDetails/ResourceDetails.svelte';
 	import { onMount } from 'svelte';
@@ -8,7 +8,7 @@
 	import { library } from '$lib/stores/library.store';
 
 	export let data: PageData;
-	let movies: ReturnType<typeof fetchTmdbMovie>[] = [];
+	let movies: ReturnType<typeof getTmdbMovie>[] = [];
 
 	let index = 0;
 
@@ -22,7 +22,7 @@
 
 	onMount(() => {
 		for (const showcase of data.showcases) {
-			movies = [...movies, fetchTmdbMovie(String(showcase.id))];
+			if (showcase.id) movies = [...movies, getTmdbMovie(showcase.id)];
 		}
 
 		library.subscribe((l) => console.log(l));

src/routes/discover/+page.server.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import { fetchTmdbMovie, fetchTmdbPopularMovies } from '$lib/apis/tmdbApi';
+import { fetchTmdbMovie, fetchTmdbPopularMovies } from '$lib/apis/tmdb/tmdbApi';
 import { fetchCardPropsTmdb } from '$lib/components/Card/card';
 
 export const load = (() => {

src/routes/discover/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fetchTmdbMovie, fetchTmdbPopularMovies } from '$lib/apis/tmdbApi';
+	import { getTmdbMovie, fetchTmdbPopularMovies, fetchTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 	import Card from '$lib/components/Card/Card.svelte';
 	import { fetchCardPropsTmdb } from '$lib/components/Card/card';
 	import Carousel from '$lib/components/Carousel/Carousel.svelte';
@@ -15,13 +15,15 @@
 		const popularMoviesPromise = fetchTmdbPopularMovies();
 
 		const popularMovies = await popularMoviesPromise
-			.then(async (movies) => {
+			.then(async (tmdbMovies) => {
 				const libraryData = await $library;
-				return movies.filter((m) => !libraryData.getItem(m.id));
+				return tmdbMovies.filter((m) => !libraryData.getMovie(m.id));
 			})
-			.then((movies) => {
+			.then((tmdbMovies) => {
 				return Promise.all(
-					movies.map(async (movie) => fetchCardPropsTmdb(await fetchTmdbMovie(String(movie.id))))
+					tmdbMovies.map(async (tmdbMovie) =>
+						fetchCardPropsTmdb(await fetchTmdbMovie(String(tmdbMovie.id)))
+					)
 				);
 			});
 

src/routes/library/+page.svelte

@@ -13,6 +13,12 @@
 		'grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5';
 	const headerStyle = 'uppercase tracking-widest font-bold';
 	const headerContaienr = 'flex items-center justify-between mt-2';
+
+	function sortByAdded(arr: any[]) {
+		return arr.sort((a, b) => ((a.added || '') > (b.added || '') ? -1 : 1));
+	}
+
+	console.log($library);
 </script>
 
 <div class="pt-24 pb-8 px-8 bg-black">
@@ -75,13 +81,22 @@
 				{/each}
 			</div>
 		{:then libraryData}
-			{@const downloading = libraryData.movies.filter((m) => !!m.download)}
-			{@const available = libraryData.movies.filter(
-				(m) => !m.download && m.movieFile && m.isAvailable
-			)}
-			{@const unavailable = libraryData.movies.filter(
-				(m) => !m.download && (!m.movieFile || !m.isAvailable)
-			)}
+			{@const downloading = sortByAdded([
+				...libraryData.movies.filter((m) => !!m.download),
+				...libraryData.series.filter((s) => !!s.download)
+			])}
+			{@const available = sortByAdded([
+				...libraryData.movies.filter((m) => !m.download && m.movieFile && m.isAvailable),
+				...libraryData.series.filter(
+					(s) => !s.download && s.seasons?.find((season) => !!season?.statistics?.episodeFileCount)
+				)
+			])}
+			{@const unavailable = sortByAdded([
+				...libraryData.movies.filter((m) => !m.download && (!m.movieFile || !m.isAvailable)),
+				...libraryData.series.filter(
+					(s) => !s.download && !s.seasons?.find((season) => !!season?.statistics?.episodeFileCount)
+				)
+			])}
 
 			{#if downloading.length > 0}
 				<div class={headerContaienr}>

src/routes/movie/[id]/+page.server.ts

@@ -1,8 +1,8 @@
-import { fetchTmdbMovie } from '$lib/apis/tmdbApi';
+import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ params }) => {
 	return {
-		movie: await fetchTmdbMovie(params.id)
+		movie: await getTmdbMovie(params.id)
 	};
 }) satisfies PageServerLoad;

src/routes/movie/[id]/+server.ts

@@ -1,7 +1,7 @@
 import { error, json } from '@sveltejs/kit';
 import type { RequestHandler } from '@sveltejs/kit';
 import { getJellyfinItemByTmdbId } from '$lib/apis/jellyfin/jellyfinApi';
-import { getRadarrMovie, getRadarrDownload } from '$lib/apis/radarr/radarrApi';
+import { getRadarrMovieByTmdbId, getRadarrDownloadById } from '$lib/apis/radarr/radarrApi';
 
 export const parseMovieId = (params: any) => {
 	const { id: tmdbId } = params;
@@ -15,9 +15,9 @@ export const GET = (async ({ params }) => {
 	const tmdbId = parseMovieId(params);
 
 	const jellyfinMoviePromise = getJellyfinItemByTmdbId(tmdbId);
-	const radarrMoviePromise = getRadarrMovie(tmdbId);
+	const radarrMoviePromise = getRadarrMovieByTmdbId(tmdbId);
 	const radarrMovieQueuedPromise = radarrMoviePromise.then((movie) =>
-		movie ? getRadarrDownload(String(movie.id)) : undefined
+		movie?.id ? getRadarrDownloadById(movie.id) : undefined
 	);
 
 	const [jellyfinItem, radarrMovie, radarrDownloads] = await Promise.all([

src/routes/movie/[id]/radarr/+server.ts

@@ -1,5 +1,5 @@
 import { parseMovieId } from '../+server';
-import { addRadarrMovie, getRadarrMovie } from '$lib/apis/radarr/radarrApi';
+import { addRadarrMovie, getRadarrMovieByTmdbId } from '$lib/apis/radarr/radarrApi';
 import { json } from '@sveltejs/kit';
 import type { RequestHandler } from '@sveltejs/kit';
 
@@ -15,7 +15,7 @@ export const POST = (async ({ params }) => {
 export const GET = (async ({ params }) => {
 	const tmdbId = parseMovieId(params);
 
-	const response = await getRadarrMovie(tmdbId);
+	const response = await getRadarrMovieByTmdbId(tmdbId);
 
 	return json(response);
 }) satisfies RequestHandler;