feat: Popular series hero carousel

src/lib/apis/tmdb/tmdb-api.ts

@@ -156,6 +156,15 @@ export class TmdbApi implements Api<paths> {
 			})
 			.then((res) => res.data);
 
+	getPopularSeries = () =>
+		TmdbApiOpen.GET('/3/tv/popular', {
+			params: {
+				query: {
+					language: get(settings)?.language
+				}
+			}
+		}).then((res) => res.data?.results || []);
+
 	// OTHER
 }
 
@@ -178,7 +187,7 @@ const getTmdbCache = async (
 		else {
 			const backdropUri = await fn();
 			if (backdropUri) {
-				cache.put(String(tmdbId), new Response(backdropUri));
+				await cache.put(String(tmdbId), new Response(backdropUri));
 			}
 			return backdropUri;
 		}
@@ -325,15 +334,6 @@ export const getTmdbMoviePoster = async (tmdbId: number) =>
 
 /** Discover */
 
-export const getTmdbPopularSeries = () =>
-	TmdbApiOpen.GET('/3/tv/popular', {
-		params: {
-			query: {
-				language: get(settings)?.language
-			}
-		}
-	}).then((res) => res.data?.results || []);
-
 export const getTmdbNetworkSeries = (networkId: number) =>
 	TmdbApiOpen.GET('/3/discover/tv', {
 		params: {

src/lib/components/HeroShowcase/HeroShowcase.ts

@@ -19,7 +19,7 @@ export type ShowcaseItemProps = {
 	url?: string;
 };
 
-export async function getShowcasePropsFromTmdb(
+export async function getShowcasePropsFromTmdbMovie(
 	response: Awaited<ReturnType<typeof tmdbApi.getPopularMovies>>
 ): Promise<ShowcaseItemProps[]> {
 	return response.slice(0, 10).map((movie) => ({
@@ -36,3 +36,21 @@ export async function getShowcasePropsFromTmdb(
 		overview: movie.overview || ''
 	}));
 }
+
+export async function getShowcasePropsFromTmdbSeries(
+	response: Awaited<ReturnType<typeof tmdbApi.getPopularSeries>>
+): Promise<ShowcaseItemProps[]> {
+	return response.slice(0, 10).map((movie) => ({
+		title: movie.name || '',
+		posterUrl: movie.poster_path || '',
+		backdropUrl: movie.backdrop_path || '',
+		rating: movie.vote_average?.toFixed(1) || '0',
+		genres: [], //(movie as any)?.genres?.map((genre: any) => genre?.name),
+		year: movie.first_air_date ? new Date(movie.first_air_date).getFullYear() : undefined,
+		runtime: formatMinutesToTime((movie as any).runtime || 0),
+		ratingSource: 'tmdb',
+		trailerUrl: '',
+		url: `https://www.themoviedb.org/movie/${movie.id}`,
+		overview: movie.overview || ''
+	}));
+}

src/lib/pages/BrowseSeriesPage.svelte

@@ -12,7 +12,10 @@
 	import { _ } from 'svelte-i18n';
 	import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
 	import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
-	import { getShowcasePropsFromTmdb } from '../components/HeroShowcase/HeroShowcase';
+	import {
+		getShowcasePropsFromTmdbMovie,
+		getShowcasePropsFromTmdbSeries
+	} from '../components/HeroShowcase/HeroShowcase';
 	import { scrollIntoView } from '../selectable';
 	import SidebarMargin from '../components/SidebarMargin.svelte';
 
@@ -77,7 +80,7 @@
 <Container focusOnMount>
 	<div class="flex flex-col h-screen">
 		<div class="flex-1 flex relative px-20">
-			<HeroShowcase items={tmdbApi.getPopularMovies().then(getShowcasePropsFromTmdb)} />
+			<HeroShowcase items={tmdbApi.getPopularSeries().then(getShowcasePropsFromTmdbSeries)} />
 		</div>
 		<div class="mt-8">
 			<Carousel scrollClass="">

src/lib/pages/MoviesPage.svelte

@@ -2,7 +2,7 @@
 	import Container from '../../Container.svelte';
 	import HeroShowcase from '../components/HeroShowcase/HeroShowcase.svelte';
 	import { tmdbApi } from '../apis/tmdb/tmdb-api';
-	import { getShowcasePropsFromTmdb } from '../components/HeroShowcase/HeroShowcase';
+	import { getShowcasePropsFromTmdbMovie } from '../components/HeroShowcase/HeroShowcase';
 	import Carousel from '../components/Carousel/Carousel.svelte';
 	import SidebarMargin from '../components/SidebarMargin.svelte';
 	import { _ } from 'svelte-i18n';
@@ -19,7 +19,7 @@
 <Container focusOnMount class="flex flex-col">
 	<div class="flex flex-col h-screen">
 		<div class="flex-1 flex relative px-20">
-			<HeroShowcase items={popularMovies.then(getShowcasePropsFromTmdb)} />
+			<HeroShowcase items={popularMovies.then(getShowcasePropsFromTmdbMovie)} />
 		</div>
 		<div class="mt-8">
 			<Carousel>