Refactored and cleaned up SeriesPage data fetching

src/lib/components/Card/Card.svelte

@@ -55,7 +55,7 @@
 		)}
 		on:click={() => {
 			if (openInModal) {
-				openTitleModal(tmdbId, type);
+				openTitleModal({ type, id: tmdbId, provider: 'tmdb' });
 			} else {
 				window.location.href = `/${type}/${tmdbId}`;
 			}

src/lib/components/EpisodeCard/EpisodeCard.svelte

@@ -28,6 +28,7 @@
 		if (!jellyfinId) return;
 
 		watched = true;
+		progress = 0;
 		setJellyfinItemWatched(jellyfinId).finally(() => jellyfinItemsStore.refreshIn(5000));
 	}
 

src/lib/components/LazyImg.svelte

@@ -12,17 +12,21 @@
 </script>
 
 <div
-	class={classNames('transition-opacity duration-300', {
-		'opacity-0': !loaded,
-		'opacity-100': loaded
-	})}
+	class={classNames(
+		'transition-opacity duration-300',
+		{
+			'opacity-0': !loaded,
+			'opacity-100': loaded
+		},
+		$$restProps.class
+	)}
 >
 	<img
 		{src}
 		{alt}
-		class={classNames($$restProps.class)}
 		style="object-fit: cover; width: 100%; height: 100%;"
 		loading="lazy"
 		on:load={handleLoad}
 	/>
+	<slot />
 </div>

src/lib/components/Poster/Poster.svelte

@@ -6,9 +6,11 @@
 	import { playerState } from '../VideoPlayer/VideoPlayer';
 	import LazyImg from '../LazyImg.svelte';
 	import { Star } from 'radix-icons-svelte';
+	import { openTitleModal } from '$lib/stores/modal.store';
 
 	export let tmdbId: number | undefined = undefined;
 	export let tvdbId: number | undefined = undefined;
+	export let openInModal = true;
 	export let jellyfinId: string = '';
 	export let type: TitleType = 'movie';
 	export let backdropUrl: string;
@@ -22,10 +24,20 @@
 	export let orientation: 'portrait' | 'landscape' = 'landscape';
 </script>
 
-<a
-	href={tmdbId || tvdbId ? `/${type}/${tmdbId || tvdbId}` : '#'}
+<button
+	on:click={() => {
+		if (openInModal) {
+			if (tmdbId) {
+				openTitleModal({ type, id: tmdbId, provider: 'tmdb' });
+			} else if (tvdbId) {
+				openTitleModal({ type, id: tvdbId, provider: 'tvdb' });
+			}
+		} else {
+			window.location.href = tmdbId || tvdbId ? `/${type}/${tmdbId || tvdbId}` : '#';
+		}
+	}}
 	class={classNames(
-		'relative flex shadow-lg rounded-xl selectable group hover:text-inherit flex-shrink-0 overflow-hidden',
+		'relative flex shadow-lg rounded-xl selectable group hover:text-inherit flex-shrink-0 overflow-hidden text-left',
 		{
 			'aspect-video': orientation === 'landscape',
 			'aspect-[2/3]': orientation === 'portrait',
@@ -40,9 +52,19 @@
 	)}
 >
 	<LazyImg src={backdropUrl} class="absolute inset-0 group-hover:scale-105 transition-transform" />
+	<div
+		class="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity bg-black"
+		style="filter: blur(50px); transform: scale(3);"
+	>
+		<LazyImg src={backdropUrl} />
+	</div>
+	<!-- <div
+		style={`background-image: url(${backdropUrl}); background-size: cover; background-position: center; filter: blur(50px); transform: scale(3);`}
+		class="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity bg-black"
+	/> -->
 	<div
 		class={classNames(
-			'flex-1 flex flex-col justify-between bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition-opacity z-[1]',
+			'flex-1 flex flex-col justify-between bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity z-[1]',
 			{
 				'py-2 px-3': true
 			}
@@ -95,4 +117,4 @@
 			<ProgressBar {progress} />
 		</div>
 	{/if}
-</a>
+</button>

src/lib/components/TitlePageLayout/TitlePageLayout.svelte

@@ -6,6 +6,7 @@
 	import Carousel from '../Carousel/Carousel.svelte';
 	import CarouselPlaceholderItems from '../Carousel/CarouselPlaceholderItems.svelte';
 	import IconButton from '../IconButton.svelte';
+	import LazyImg from '../LazyImg.svelte';
 
 	export let isModal = false;
 	export let handleCloseModal: () => void = () => {};
@@ -33,7 +34,30 @@
 
 <svelte:window bind:outerHeight={windowHeight} />
 
+<!-- Desktop -->
 <div
+	style={'height: ' + imageHeight.toFixed() + 'px'}
+	class={classNames('hidden sm:block inset-x-0 bg-center bg-cover bg-stone-950', {
+		absolute: isModal,
+		fixed: !isModal
+	})}
+>
+	<LazyImg src={TMDB_IMAGES_ORIGINAL + getBackdropUri(backdropUriCandidates)} class="h-full">
+		<div class="absolute inset-0 bg-darken" />
+	</LazyImg>
+</div>
+
+<!-- Mobile -->
+<div
+	style={'height: ' + imageHeight.toFixed() + 'px'}
+	class="sm:hidden fixed inset-x-0 bg-center bg-cover bg-stone-950"
+>
+	<LazyImg src={TMDB_IMAGES_ORIGINAL + posterPath} class="h-full">
+		<div class="absolute inset-0 bg-darken" />
+	</LazyImg>
+</div>
+
+<!-- <div
 	style={"background-image: url('" +
 		TMDB_IMAGES_ORIGINAL +
 		getBackdropUri(backdropUriCandidates) +
@@ -46,9 +70,9 @@
 	})}
 >
 	<div class="absolute inset-0 bg-darken" />
-</div>
+</div> -->
 
-<div
+<!-- <div
 	style={"background-image: url('" +
 		TMDB_IMAGES_ORIGINAL +
 		posterPath +
@@ -58,7 +82,7 @@
 	class="sm:hidden fixed inset-x-0 bg-center bg-cover bg-stone-950"
 >
 	<div class="absolute inset-0 bg-darken" />
-</div>
+</div> -->
 
 <div
 	class={classNames('flex flex-col relative z-[1]', {

src/lib/components/TitlePageLayout/TitlePageModal.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import type { TitleType } from '$lib/types';
+	import type { TitleId } from '$lib/types';
 	import { fly } from 'svelte/transition';
 	import MoviePage from '../../../routes/movie/[id]/MoviePage.svelte';
 	import SeriesPage from '../../../routes/series/[id]/SeriesPage.svelte';
 	import { modalStack } from '../../stores/modal.store';
 
-	export let tmdbId: number;
-	export let type: TitleType;
+	export let titleId: TitleId;
 	export let modalId: symbol;
 
 	function handleCloseModal() {
@@ -22,10 +21,10 @@
 		in:fly|global={{ y: 20, duration: 200, delay: 200 }}
 		out:fly|global={{ y: 20, duration: 200 }}
 	>
-		{#if type === 'movie'}
-			<MoviePage {tmdbId} isModal={true} {handleCloseModal} />
+		{#if titleId.type === 'movie'}
+			<MoviePage tmdbId={titleId.id} isModal={true} {handleCloseModal} />
 		{:else}
-			<SeriesPage {tmdbId} isModal={true} {handleCloseModal} />
+			<SeriesPage {titleId} isModal={true} {handleCloseModal} />
 		{/if}
 	</div>
 </div>

src/lib/components/TitleShowcase/TitleShowcase.svelte

@@ -123,7 +123,11 @@
 			out:fade|global={{ duration: ANIMATION_DURATION }}
 		>
 			<div class="flex gap-4 items-center">
-				<Button size="lg" type="primary" on:click={() => openTitleModal(tmdbId, type)}>
+				<Button
+					size="lg"
+					type="primary"
+					on:click={() => openTitleModal({ type, id: tmdbId, provider: 'tmdb' })}
+				>
 					<span>{$_('titleShowcase.details')}</span><ChevronRight size={20} />
 				</Button>
 				{#if trailerId}