Reworked front resource details page to support tv series

2023-07-11 20:32:29 +03:00
parent 75b250258c
commit e544eff886
12 changed files with 300 additions and 145 deletions
--- a/src/lib/apis/tmdb/tmdbApi.ts
+++ b/src/lib/apis/tmdb/tmdbApi.ts
@@ -1,9 +1,20 @@
 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 type { operations, paths } from './tmdb.generated';
 import createClient from 'openapi-fetch';

+export type SeriesDetails =
+	operations['tv-series-details']['responses']['200']['content']['application/json'];
+export interface SeriesDetailsFull extends SeriesDetails {
+	videos: {
+		results: Video[];
+	};
+	credits: {
+		cast: CastMember[];
+	};
+}
+
 export const TmdbApiOpen = createClient<paths>({
 	baseUrl: 'https://api.themoviedb.org',
 	headers: {
@@ -16,9 +27,12 @@ export const getTmdbMovie = async (tmdbId: number) =>
 		params: {
 			path: {
 				movie_id: tmdbId
+			},
+			query: {
+				append_to_response: 'videos,credits'
 			}
 		}
-	}).then((res) => res.data);
+	}).then((res) => res.data as TmdbMovieFull | undefined);

 export const getTmdbPopularMovies = () =>
 	TmdbApiOpen.get('/3/movie/popular', {
@@ -39,6 +53,18 @@ export const getTmdbIdFromTvdbId = async (tvdbId: number) =>
 		.then((res) => res.data?.tv_results?.[0])
 		.then((res: any) => res?.id as number | undefined);

+export const getTmdbSeries = async (tmdbId: number): Promise<SeriesDetailsFull | undefined> =>
+	await TmdbApiOpen.get('/3/tv/{series_id}', {
+		params: {
+			path: {
+				series_id: tmdbId
+			},
+			query: {
+				append_to_response: 'videos,credits'
+			}
+		}
+	}).then((res) => res.data as SeriesDetailsFull | undefined);
+
 export const getTmdbSeriesImages = async (tmdbId: number) =>
 	TmdbApiOpen.get('/3/tv/{series_id}/images', {
 		params: {
@@ -75,13 +101,17 @@ export const fetchTmdbPopularMovies = () =>
 export const requestTmdbPopularMovies = () => request(fetchTmdbPopularMovies, null);

 export interface TmdbMovieFull extends TmdbMovie {
-	videos: Video[];
-	images: {
-		backdrops: Backdrop[];
-		logos: Logo[];
-		posters: Poster[];
+	videos: {
+		results: Video[];
+	};
+	// images: {
+	// 	backdrops: Backdrop[];
+	// 	logos: Logo[];
+	// 	posters: Poster[];
+	// };
+	credits: {
+		cast: CastMember[];
 	};
-	credits: CastMember[];
 }

 export type MovieDetailsResponse = TmdbMovie;
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -11,7 +11,7 @@
 	export let href: string | undefined = undefined;
 	export let target: string | undefined = undefined;

-	let buttonStyle;
+	let buttonStyle: string;
 	$: buttonStyle = classNames(
 		'border-2 border-white transition-all uppercase tracking-widest text-xs whitespace-nowrap',
 		{
@@ -27,9 +27,9 @@
 		}
 	);

-	const handleClick = (event) => {
+	const handleClick = (event: MouseEvent) => {
 		if (href) {
-			if (target === '_blank') window.open(href, target).focus();
+			if (target === '_blank') window.open(href, target)?.focus();
 			else window.open(href, target as string);
 		} else {
 			dispatch('click', event);
@@ -37,6 +37,7 @@
 	};
 </script>

+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <button class={buttonStyle} on:click={handleClick} on:mouseover on:mouseleave {disabled}>
 	<slot />
 </button>
--- a/src/lib/components/ResourceDetails/LibraryDetails.svelte
+++ b/src/lib/components/ResourceDetails/LibraryDetails.svelte
@@ -9,7 +9,7 @@
 	import { log } from '$lib/utils.js';

 	let isRequestModalVisible = false;
-	export let tmdbId: string;
+	export let tmdbId: number;
 	export let jellyfinStreamDisabled: boolean;
 	export let openJellyfinStream: () => void;

--- a/src/lib/components/ResourceDetails/ResourceDetails.svelte
+++ b/src/lib/components/ResourceDetails/ResourceDetails.svelte
@@ -1,20 +1,40 @@
 <script lang="ts">
-	import { ChevronDown, Clock } from 'radix-icons-svelte';
-	import classNames from 'classnames';
-	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/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';
+	import type { CastMember, Video } from '$lib/apis/tmdb/tmdbApi';
+	import Button from '$lib/components/Button.svelte';
+	import { TMDB_IMAGES } from '$lib/constants';
+	import { formatMinutesToTime } from '$lib/utils';
+	import classNames from 'classnames';
+	import { ChevronDown, Clock, Play, TriangleRight } from 'radix-icons-svelte';
 	import { getContext } from 'svelte';
+	import { fade, fly } from 'svelte/transition';
+	import HeightHider from '../HeightHider.svelte';
 	import type { PlayerState } from '../VideoPlayer/VideoPlayer';
+	import LibraryDetails from './LibraryDetails.svelte';
+	import IconButton from '../IconButton.svelte';
+
+	export let tmdbId: number;
+	export let type: 'movie' | 'tv';
+
+	export let title: string;
+	export let reason = 'Popular Now';
+	export let releaseDate: Date | undefined = undefined;
+	export let endDate: Date | undefined = undefined;
+	export let seasons: number = 0;
+	export let tagline: string;
+	export let overview: string;
+	export let backdropPath: string;
+
+	export let genres: string[];
+	export let runtime: number;
+	export let tmdbRating: number;
+	export let starring: CastMember[];
+
+	export let lastEpisode:
+		| { backdropPath: string; name: string; episodeTag: string; runtime: number }
+		| undefined = undefined;

-	export let movie: TmdbMovie;
 	export let videos: Video[];
-	export let castMembers: CastMember[];
 	export let showDetails = false;
 	export let trailer = true;

@@ -25,8 +45,8 @@
 	let streamButtonDisabled = true;
 	let jellyfinId: string;

-	let video: Video;
-	$: video = videos?.filter((v) => v.site === 'YouTube' && v.type === 'Trailer')?.[0];
+	let video: Video | undefined;
+	$: video = videos?.find((v) => v.site === 'YouTube' && v.type === 'Trailer');

 	let opacityStyle: string;
 	$: opacityStyle =
@@ -48,10 +68,10 @@
 		'November',
 		'December'
 	];
-	const releaseDate = new Date(movie.release_date);
 	const { playerState, close, streamJellyfinId } = getContext<PlayerState>('player');

 	function openTrailer() {
+		if (!video) return;
 		window
 			?.open(
 				'https://www.youtube.com/watch?v=' +
@@ -69,13 +89,11 @@
 		return { duration: 200, delay: 500 + fadeIndex * 50 };
 	};

-	// onMount(() => {});
-
 	let timeout: NodeJS.Timeout;
 	$: {
 		fadeIndex = 0;
 		streamButtonDisabled = true;
-		if (movie) {
+		if (tmdbId) {
 			showTrailer = false;
 			if (timeout) clearTimeout(timeout);

@@ -86,15 +104,7 @@
 				}
 			}, 2500);

-			fetchTmdbMovieVideos(String(movie.id)).then((result) => {
-				videos = result;
-			});
-
-			fetchTmdbMovieCredits(String(movie.id)).then((result) => {
-				castMembers = result;
-			});
-
-			getJellyfinItemByTmdbId(String(movie.id)).then((r) => {
+			getJellyfinItemByTmdbId(String(tmdbId)).then((r) => {
 				if (!r) return;
 				streamButtonDisabled = !r;
 				if (r.Id) jellyfinId = r.Id;
@@ -111,10 +121,10 @@
 		out:fade={{ duration }}
 		in:fade={{ delay: duration, duration }}
 	>
-		{#key video?.key + movie.id}
+		{#key (video?.key || '') + tmdbId}
 			<div
 				class="absolute inset-0 bg-center bg-cover transition-[background-image] duration-500 delay-500"
-				style={"background-image: url('" + TMDB_IMAGES + movie.backdrop_path + "');"}
+				style={"background-image: url('" + TMDB_IMAGES + backdropPath + "');"}
 				transition:fade
 			/>
 			<div class="youtube-container absolute h-full scale-[150%] hidden sm:block" transition:fade>
@@ -135,7 +145,7 @@
 				{/if}
 			</div>
 		{/key}
-		{#key movie.id}
+		{#key tmdbId}
 			<div
 				class={classNames(
 					'bg-gradient-to-b from-darken via-20% via-transparent transition-opacity absolute inset-0 z-[1]',
@@ -147,7 +157,7 @@
 			/>
 			<div
 				class={classNames(
-					'h-full w-full px-16 pb-8 pt-32',
+					'h-full w-full px-8 xl:px-16 pb-8 pt-32',
 					'grid grid-cols-[1fr_max-content] grid-rows-[1fr_min-content] gap-x-16 gap-y-8 relative z-[2]',
 					'transition-colors',
 					{
@@ -158,19 +168,29 @@
 			>
 				<div class="flex flex-col justify-self-start min-w-0 row-span-full">
 					<div class="relative" style={opacityStyle} in:fly={{ x: -20, duration, delay: 400 }}>
-						<h2 class="text-zinc-300 text-sm self-end">
-							<span class="font-bold uppercase tracking-wider"
-								>{monthNames[releaseDate.getMonth()]}</span
-							>
-							{releaseDate.getFullYear()}
+						<h2 class="text-zinc-300 text-sm self-end uppercase">
+							{#if seasons}
+								{#if endDate}
+									<span class="font-medium">Ended</span>
+									<span class="font-bold">{endDate.getFullYear()}</span>
+								{:else if releaseDate}
+									<span class="font-medium">Since</span>
+									<span class="font-bold">{releaseDate.getFullYear()}</span>
+								{/if}
+							{:else if releaseDate}
+								<span class="font-bold uppercase tracking-wider"
+									>{monthNames[releaseDate.getMonth()]}</span
+								>
+								{releaseDate.getFullYear()}
+							{/if}
 						</h2>
 						<h2
 							class="tracking-wider font-display font-extrabold text-amber-300 absolute opacity-10 text-8xl -ml-6 mt-8"
 						>
-							<slot name="reason">Popular Now</slot>
+							<slot name="reason">{reason}</slot>
 						</h2>
 						<h1 class="uppercase text-8xl font-bold font-display z-[1] relative">
-							{movie.original_title}
+							{title}
 						</h1>
 					</div>
 					<div
@@ -178,11 +198,11 @@
 						style={opacityStyle}
 						in:fly={{ x: -20, duration, delay: 600 }}
 					>
-						<div class="text-xl font-semibold tracking-wider">{movie.tagline}</div>
+						<div class="text-xl font-semibold tracking-wider">{tagline}</div>
 						<div
 							class="tracking-wider text-zinc-200 font-light leading-6 pl-4 border-l-2 border-zinc-300"
 						>
-							{movie.overview}
+							{overview}
 						</div>
 					</div>
 					<div class="flex gap-6 mt-10" in:fly={{ x: -20, duration, delay: 600 }}>
@@ -219,58 +239,103 @@
 						>
 					</div>
 				</div>
-				<div class="flex flex-col gap-6 max-w-[14rem] row-span-full" style={opacityStyle}>
-					<h3 class="text-xs tracking-wide uppercase" in:fade={getFade()}>Details</h3>
-					<div class="flex flex-col gap-1">
-						<div class="tracking-widest font-extralight text-sm" in:fade={getFade()}>
-							{movie.genres.map((g) => g.name.charAt(0).toUpperCase() + g.name.slice(1)).join(', ')}
-						</div>
-						<div class="flex gap-1.5 items-center" in:fade={getFade()}>
-							<Clock size={14} />
-							<div class="tracking-widest font-extralight text-sm">
-								{Math.floor(movie.runtime / 60)}h {movie.runtime % 60}m
+				<div
+					class="flex flex-col gap-6 justify-between 2xl:w-96 xl:w-80 lg:w-64 w-52 row-span-full"
+					style={opacityStyle}
+				>
+					<div class="flex flex-col gap-6">
+						<h3 class="text-xs tracking-wide uppercase" in:fade={getFade()}>Details</h3>
+						<div class="flex flex-col gap-1 text-sm tracking-widest font-extralight">
+							<div in:fade={getFade()}>
+								{genres.map((g) => g.charAt(0).toUpperCase() + g.slice(1)).join(', ')}
+							</div>
+							{#if seasons}
+								<a href={`https://www.themoviedb.org/tv/${tmdbId}/seasons`} target="_blank"
+									>{seasons} Season{seasons > 1 ? 's' : ''}</a
+								>
+							{/if}
+							{#if runtime}
+								<div class="flex gap-1.5 items-center" in:fade={getFade()}>
+									<Clock size={14} />
+									<div>
+										{formatMinutesToTime(runtime)}
+									</div>
+								</div>
+							{/if}
+							<div in:fade={getFade()}>
+								Currently <b>Streaming</b>
+							</div>
+							<a
+								href={`https://www.themoviedb.org/${type}/${tmdbId}`}
+								target="_blank"
+								in:fade={getFade()}
+							>
+								<b>{tmdbRating.toFixed(1)}</b> TMDB
+							</a>
+							<div class="flex mt-4" in:fade={getFade()}>
+								<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
+									><g
+										><path d="M0 0h24v24H0z" fill="none" /><path
+											d="M11.29 3.814l2.02 5.707.395 1.116.007-4.81.01-4.818h4.27L18 11.871c.003 5.98-.003 10.89-.015 10.9-.012.009-.209 0-.436-.027-.989-.118-2.29-.236-3.34-.282a14.57 14.57 0 0 1-.636-.038c-.003-.004-.273-.762-.776-2.184v-.004l-2.144-6.061-.34-.954-.008 4.586c-.006 4.365-.01 4.61-.057 4.61-.163 0-1.57.09-2.04.136-.308.027-.926.09-1.37.145-.446.051-.816.085-.823.078C6.006 22.77 6 17.867 6 11.883V1.002h.005V1h4.288l.028.08c.007.016.065.176.157.437l.641 1.778.173.496-.001.023z"
+											fill-rule="evenodd"
+											fill="currentColor"
+										/></g
+									></svg
+								>
 							</div>
 						</div>
-						<div class="tracking-widest font-extralight text-sm" in:fade={getFade()}>
-							Currently <b>Streaming</b>
-						</div>
-						<a
-							href={'https://www.themoviedb.org/movie/' + movie.id}
-							target="_blank"
-							class="tracking-widest font-extralight text-sm"
-							in:fade={getFade()}
-						>
-							<b>{movie.vote_average.toFixed(1)}</b> TMDB
-						</a>
-						<div class="flex mt-4" in:fade={getFade()}>
-							<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
-								><g
-									><path d="M0 0h24v24H0z" fill="none" /><path
-										d="M11.29 3.814l2.02 5.707.395 1.116.007-4.81.01-4.818h4.27L18 11.871c.003 5.98-.003 10.89-.015 10.9-.012.009-.209 0-.436-.027-.989-.118-2.29-.236-3.34-.282a14.57 14.57 0 0 1-.636-.038c-.003-.004-.273-.762-.776-2.184v-.004l-2.144-6.061-.34-.954-.008 4.586c-.006 4.365-.01 4.61-.057 4.61-.163 0-1.57.09-2.04.136-.308.027-.926.09-1.37.145-.446.051-.816.085-.823.078C6.006 22.77 6 17.867 6 11.883V1.002h.005V1h4.288l.028.08c.007.016.065.176.157.437l.641 1.778.173.496-.001.023z"
-										fill-rule="evenodd"
-										fill="currentColor"
-									/></g
-								></svg
-							>
-						</div>
-					</div>
-					{#if castMembers?.length > 0}
-						<h3 class="text-xs tracking-wide uppercase" in:fade={getFade()}>Starring</h3>
-						<div class="flex flex-col gap-1">
-							{#each castMembers.slice(0, 5) as a}
+						{#if starring?.length > 0}
+							<h3 class="text-xs tracking-wide uppercase" in:fade={getFade()}>Starring</h3>
+							<div class="flex flex-col gap-1 text-sm tracking-widest font-extralight">
+								{#each starring.slice(0, 5) as a}
+									<a
+										href={'https://www.themoviedb.org/person/' + a.id}
+										target="_blank"
+										in:fade={getFade()}>{a.name}</a
+									>
+								{/each}
 								<a
-									href={'https://www.themoviedb.org/person/' + a.id}
+									href={`https://www.themoviedb.org/${type}/${tmdbId}/cast`}
 									target="_blank"
-									class="tracking-widest font-extralight text-sm"
-									in:fade={getFade()}>{a.name}</a
+									in:fade={getFade()}>View all...</a
 								>
-							{/each}
-							<a
-								href={'https://www.themoviedb.org/movie/' + movie.id + '/cast'}
-								target="_blank"
-								class="tracking-widest font-extralight text-sm"
-								in:fade={getFade()}>View all...</a
+							</div>
+						{/if}
+					</div>
+					{#if lastEpisode}
+						<div
+							class="aspect-video bg-center bg-cover bg-no-repeat rounded overflow-hidden transition-all cursor-pointer group shadow-lg relative"
+							style={"background-image: url('" + TMDB_IMAGES + lastEpisode.backdropPath + "');"}
+						>
+							<div
+								class="opacity-100 group-hover:opacity-0 flex flex-col justify-between p-2 xl:p-3 xl:px-3 bg-darken h-full transition-opacity"
 							>
+								<div class="flex justify-between items-center">
+									<div class="text-xs xl:text-sm font-medium text-zinc-300 uppercase">
+										{lastEpisode.episodeTag}
+									</div>
+									<div class="text-xs xl:text-sm font-medium text-zinc-300">
+										{lastEpisode.runtime} min
+									</div>
+								</div>
+								<div>
+									<div class="text-xs xl:text-sm text-zinc-300 font-medium tracking-wide">
+										Next Episode
+									</div>
+									<div class="font-semibold xl:text-lg">
+										{lastEpisode.name}
+									</div>
+								</div>
+							</div>
+							<div class="absolute inset-0 flex items-center justify-center">
+								<div
+									class="backdrop-blur-lg rounded-full p-1 bg-[#00000044] opacity-0 group-hover:opacity-100 transition-opacity"
+								>
+									<IconButton>
+										<TriangleRight size={30} />
+									</IconButton>
+								</div>
+							</div>
 						</div>
 					{/if}
 				</div>
@@ -282,11 +347,11 @@

 <HeightHider duration={1000} visible={detailsVisible}>
 	<div bind:this={localDetailsTop} />
-	{#key movie.id}
+	{#key tmdbId}
 		<LibraryDetails
 			openJellyfinStream={() => jellyfinId && streamJellyfinId(jellyfinId)}
 			jellyfinStreamDisabled={streamButtonDisabled}
-			tmdbId={String(movie.id)}
+			{tmdbId}
 		/>
 	{/key}
 </HeightHider>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,53 +1,58 @@
 <script lang="ts">
-	import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
+	import { getTmdbMovie, type TmdbMovieFull } 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';
 	import type { PageData } from './$types';
 	import ResourceDetailsControls from './ResourceDetailsControls.svelte';
 	import { library } from '$lib/stores/library.store';

 	export let data: PageData;
-	let movies: ReturnType<typeof getTmdbMovie>[] = [];
+	const moviesPromise = Promise.all(
+		data.showcases.map((showcase) => showcase.id && getTmdbMovie(showcase.id))
+	).then((movies) => movies.filter((m): m is TmdbMovieFull => !!m));

 	let index = 0;

-	function onNext() {
-		index = (index + 1) % movies.length;
+	$: console.log(moviesPromise);
+
+	async function onNext() {
+		index = (index + 1) % (await moviesPromise).length;
 	}

-	function onPrevious() {
-		index = (index - 1 + movies.length) % movies.length;
+	async function onPrevious() {
+		index = (index - 1 + (await moviesPromise).length) % (await moviesPromise).length;
 	}
-
-	onMount(() => {
-		for (const showcase of data.showcases) {
-			if (showcase.id) movies = [...movies, getTmdbMovie(showcase.id)];
-		}
-
-		library.subscribe((l) => console.log(l));
-	});
 </script>

-{#if movies[index]}
-	{#await Promise.all(movies)}
-		<div class="h-screen" />
-	{:then awaitedMovies}
-		<ResourceDetails movie={awaitedMovies[index]}>
-			<ResourceDetailsControls
-				slot="page-controls"
-				{onNext}
-				{onPrevious}
-				{index}
-				length={movies.length}
-			/>
-		</ResourceDetails>
-	{:catch err}
-		Error occurred {JSON.stringify(err)}
-	{/await}
-{:else}
+{#await moviesPromise}
 	<div class="h-screen" />
-{/if}
+{:then movies}
+	{@const movie = movies[index]}
+	<ResourceDetails
+		type="movie"
+		tmdbId={movie?.id || 0}
+		title={movie?.title || ''}
+		releaseDate={new Date(movie?.release_date || Date.now())}
+		tagline={movie?.tagline || ''}
+		overview={movie?.overview || ''}
+		genres={movie?.genres?.map((g) => g.name || '') || []}
+		runtime={movie?.runtime || 0}
+		tmdbRating={movie?.vote_average || 0}
+		starring={movie?.credits?.cast?.slice(0, 5)}
+		videos={movie.videos?.results || []}
+		backdropPath={movie?.backdrop_path || ''}
+	>
+		<ResourceDetailsControls
+			slot="page-controls"
+			{onNext}
+			{onPrevious}
+			{index}
+			length={movies.length}
+		/>
+	</ResourceDetails>
+{:catch err}
+	Error occurred {JSON.stringify(err)}
+{/await}

 {#await $library then libraryData}
 	{#if libraryData.movies.filter((movie) => movie.continueWatching).length}
--- a/src/routes/movie/[id]/+page.server.ts
+++ b/src/routes/movie/[id]/+page.server.ts
@@ -3,6 +3,6 @@ import type { PageServerLoad } from './$types';

 export const load = (async ({ params }) => {
 	return {
-		movie: await getTmdbMovie(params.id)
+		movie: await getTmdbMovie(Number(params.id))
 	};
 }) satisfies PageServerLoad;
--- a/src/routes/movie/[id]/+page.svelte
+++ b/src/routes/movie/[id]/+page.svelte
@@ -1,9 +1,24 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 	import ResourceDetails from '$lib/components/ResourceDetails/ResourceDetails.svelte';
+	import type { PageData } from './$types';
 	export let data: PageData;
 </script>

 {#if data.movie}
-	<ResourceDetails movie={data.movie} showDetails={true} />
+	{@const movie = data.movie}
+	<ResourceDetails
+		tmdbId={movie?.id || 0}
+		type="movie"
+		title={movie?.title || ''}
+		releaseDate={new Date(movie?.release_date || Date.now())}
+		tagline={movie?.tagline || ''}
+		overview={movie?.overview || ''}
+		genres={movie?.genres?.map((g) => g.name || '') || []}
+		runtime={movie?.runtime || 0}
+		tmdbRating={movie?.vote_average || 0}
+		starring={movie?.credits?.cast?.slice(0, 5)}
+		videos={movie.videos?.results || []}
+		backdropPath={movie?.backdrop_path || ''}
+		showDetails={true}
+	/>
 {/if}
--- a/src/routes/series/[id]/+page.svelte
+++ b/src/routes/series/[id]/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ResourceDetails from '$lib/components/ResourceDetails/ResourceDetails.svelte';
+	import type { PageData } from './$types';
+	export let data: PageData;
+	console.log(data.series);
+</script>
+
+{#if data.series}
+	{@const series = data.series}
+	{@const lastEpisode = series.last_episode_to_air}
+	<ResourceDetails
+		tmdbId={series.id || 0}
+		type="tv"
+		title={series.name || ''}
+		releaseDate={new Date(series.first_air_date || Date.now())}
+		endDate={series.last_air_date && !series.in_production
+			? new Date(series.last_air_date)
+			: undefined}
+		seasons={series.seasons?.length || 0}
+		tagline={series.tagline || ''}
+		overview={series.overview || ''}
+		backdropPath={series.backdrop_path || ''}
+		genres={series.genres?.map((g) => g.name || '') || []}
+		runtime={series.episode_run_time?.[0] || 0}
+		tmdbRating={series.vote_average || 0}
+		starring={series.credits?.cast || []}
+		videos={series.videos?.results || []}
+		showDetails={true}
+		lastEpisode={lastEpisode?.still_path && lastEpisode?.name
+			? {
+					backdropPath: lastEpisode.still_path,
+					name: lastEpisode.name,
+					runtime: lastEpisode.runtime || 0,
+					episodeTag:
+						(lastEpisode.season_number ? `S${lastEpisode.season_number}` : '') +
+						(lastEpisode.episode_number ? `E${lastEpisode.episode_number}` : '')
+			  }
+			: undefined}
+	/>
+{/if}
--- a/src/routes/series/[id]/+page.ts
+++ b/src/routes/series/[id]/+page.ts
@@ -0,0 +1,8 @@
+import { getTmdbSeries } from '$lib/apis/tmdb/tmdbApi';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+	return {
+		series: await getTmdbSeries(Number(params.id))
+	};
+}) satisfies PageLoad;
--- a/src/routes/show/[id]/+page.svelte
+++ b/src/routes/show/[id]/+page.svelte
@@ -1,6 +0,0 @@
-<script lang="ts">
-	import type { PageData } from './$types';
-	export let data: PageData;
-</script>
-
-<div>TV Show of {data.tmdbId}</div>
--- a/src/routes/show/[id]/+page.ts
+++ b/src/routes/show/[id]/+page.ts
@@ -1,3 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load = (({ params }) => ({ tmdbId: params.id })) satisfies PageLoad;
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -17,7 +17,7 @@ const config = {
 	vitePlugin: {
 		experimental: {
 			inspector: {
-				toggleKeyCombo: 'meta',
+				// toggleKeyCombo: 'meta',
 				holdMode: true
 			}
 		}