feat: on:enter events and library scrollIntoView

src/lib/components/Card/Card.svelte

@@ -35,6 +35,7 @@
 			navigate(`${type}/${tmdbId || tvdbId}`);
 		}
 	}}
+	on:enter
 	class={classNames(
 		'relative flex rounded-xl selectable group hover:text-inherit flex-shrink-0 overflow-hidden text-left cursor-pointer',
 		{

src/lib/components/Card/JellyfinCard.svelte

@@ -15,4 +15,5 @@
 	type={item.Type === 'Movie' ? 'movie' : 'series'}
 	orientation="portrait"
 	rating={item.CommunityRating || undefined}
+	on:enter
 />

src/lib/components/SeriesPage/EpisodeCarousel.svelte

@@ -103,9 +103,10 @@
 					let:hasFocus
 					class="mx-2"
 					on:click={() => focusFirstEpisodeOf(season)}
-					handleFocus={(s, options) => {
-						scrollIntoView({ horizontal: 64 })(s);
-						if (options.setFocusedElement) focusFirstEpisodeOf(season);
+					on:enter={(event) => {
+						console.log(event);
+						scrollIntoView({ horizontal: 64 })(event);
+						if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
 					}}
 					bind:this={containers[`season-${season.season_number}`]}
 				>
@@ -129,10 +130,10 @@
 					<Container
 						class="mx-2"
 						bind:this={containers[`episode-${episode.id}`]}
-						handleFocus={(s, options) => {
-							scrollIntoView({ left: 64 + 16 })(s);
+						on:enter={(event) => {
+							scrollIntoView({ left: 64 + 16 })(event);
 							selectedTmdbEpisode = episode;
-							if (options.setFocusedElement) focusSeasonOf(episode);
+							if (event.detail.options.setFocusedElement) focusSeasonOf(episode);
 						}}
 						focusOnClick
 					>

src/lib/components/SeriesPage/SeriesPage.svelte

@@ -56,7 +56,7 @@
 	<ScrollHelper bind:scrollTop />
 	<Container
 		class="h-screen flex flex-col py-12 px-20 relative"
-		handleFocus={scrollIntoView({ top: 0 })}
+		on:enter={scrollIntoView({ top: 0 })}
 		handleNavigateOut={{
 			down: () => episodesSelectable?.focusChildren(1)
 		}}
@@ -190,7 +190,7 @@
 			</div>
 		</HeroCarousel>
 	</Container>
-	<Container handleFocus={scrollIntoView({ vertical: 64 })} bind:container={episodesSelectable}>
+	<Container on:enter={scrollIntoView({ vertical: 64 })} bind:container={episodesSelectable}>
 		<EpisodeCarousel
 			id={Number(id)}
 			tmdbSeries={tmdbSeriesData}