fix: Performance and ui fixes

src/lib/components/Card/Card.svelte

@@ -77,6 +77,7 @@
 			}
 		)}
 		style={`width: ${dimensions.width}px; height: ${dimensions.height}px;`}
+		focusOnClick
 		bind:hasFocus
 	>
 		<LazyImg

src/lib/components/EpisodeCard/TmdbEpisodeCard.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import EpisodeCard from './EpisodeCard.svelte';
-	import type { TmdbSeasonEpisode } from '../../apis/tmdb/tmdb-api';
+	import type { TmdbSeasonEpisode, TmdbSeries2 } from '../../apis/tmdb/tmdb-api';
 	import { TMDB_BACKDROP_SMALL } from '../../constants';
 
 	export let episode: TmdbSeasonEpisode;
+	export let series: TmdbSeries2 | undefined = undefined;
 	export let handlePlay: (() => void) | undefined;
 	export let isWatched = false;
 	export let playbackProgress = 0;
@@ -12,7 +13,7 @@
 <EpisodeCard
 	episodeNumber={episode.episode_number || -1}
 	episodeName={episode.name || ''}
-	backdropUrl={TMDB_BACKDROP_SMALL + episode.still_path}
+	backdropUrl={TMDB_BACKDROP_SMALL + (episode.still_path || series?.backdrop_path)}
 	{handlePlay}
 	{isWatched}
 	{playbackProgress}

src/lib/components/SeriesPage/EpisodeGrid.svelte

@@ -26,8 +26,6 @@
 	export let currentJellyfinEpisode: Promise<JellyfinItem | undefined>;
 	export let handleRequestSeason: (season: number) => Promise<any>;
 
-	console.log('ID IS: ', id);
-
 	let awaitedJellyfinEpisodes: JellyfinItem[] = [];
 	jellyfinEpisodes.then((episodes) => {
 		awaitedJellyfinEpisodes = episodes;
@@ -124,9 +122,10 @@
 				{@const jellyfinEpisodeId = jellyfinEpisode?.Id}
 				{#key episode.id}
 					<TmdbEpisodeCard
+						{episode}
+						series={$tmdbSeries}
 						on:mount={(e) => handleMountCard(e.detail, episode)}
 						on:enter={scrollIntoView({ top: 92, bottom: 128 })}
-						{episode}
 						handlePlay={jellyfinEpisodeId
 							? () => playerState.streamJellyfinId(jellyfinEpisodeId)
 							: undefined}

src/lib/components/StackRouter/StackRouter.ts

@@ -29,12 +29,23 @@ export type StackRouterStore = ReturnType<typeof useStackRouter>;
 
 type Indexes = { id: string; bottom: number; top: number };
 
-export function useStackRouter({ routes, notFound }: { routes: Route[]; notFound: Route }) {
+export function useStackRouter({
+	routes,
+	notFound,
+	maxDepth
+}: {
+	routes: Route[];
+	notFound: Route;
+	maxDepth?: number;
+}) {
 	const { initialPages, initialIndexes } = getInitialValues();
 	const indexes = writable<Indexes>(initialIndexes);
 	const pageStack = writable<Page[]>(initialPages);
 	const visibleStack = derived([indexes, pageStack], ([$indexes, $stack]) => {
-		return $stack.slice($indexes.bottom, $indexes.top + 1);
+		return $stack.slice(
+			maxDepth ? Math.max($indexes.bottom, $indexes.top - maxDepth + 1) : $indexes.bottom,
+			$indexes.top + 1
+		);
 	});
 
 	visibleStack.subscribe((v) => console.log('visibleStack', v));
@@ -229,7 +240,8 @@ export const defaultStackRouter = useStackRouter({
 		searchRoute,
 		manageRoute
 	],
-	notFound: notFoundRoute
+	notFound: notFoundRoute,
+	maxDepth: 3
 });
 // export const defaultStackRouter = useStackRouter({
 // 	'/': {