feat: Implemented jellyfin api

src/lib/components/Card/JellyfinCard.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { jellyfinApi, type JellyfinItem } from '../../apis/jellyfin/jellyfin-api';
+	import Card from './Card.svelte';
+
+	export let item: JellyfinItem;
+
+	// 	return {
+	// 	tmdbId: Number(item.ProviderIds?.Tmdb) || 0,
+	// 	jellyfinId: item.Id,
+	// 	title: item.Name || undefined,
+	// 	subtitle: item.Genres?.join(', ') || undefined,
+	// 	backdropUrl: getJellyfinPosterUrl(item, 80),
+	// 	size: 'dynamic',
+	// 	...(item.Type === 'Movie' ? { type: 'movie' } : { type: 'series' }),
+	// 	orientation: 'portrait',
+	// 	rating: item.CommunityRating || undefined
+	// };
+</script>
+
+<Card
+	tmdbId={Number(item.ProviderIds?.Tmdb) || 0}
+	jellyfinId={item.Id}
+	title={item.Name || undefined}
+	subtitle={item.Genres?.join(', ') || undefined}
+	backdropUrl={jellyfinApi.getPosterUrl(item, 80)}
+	size="dynamic"
+	type={item.Type === 'Movie' ? 'movie' : 'series'}
+	orientation="portrait"
+	rating={item.CommunityRating || undefined}
+/>

src/lib/components/CardGrid.svelte

@@ -0,0 +1,3 @@
+<div class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+	<slot />
+</div>

src/lib/components/Carousel/Carousel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import IconButton from '../IconButton.svelte';
 	import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
 	import classNames from 'classnames';
@@ -13,14 +12,15 @@
 	export let scrollClass = '';
 </script>
 
-<div class={classNames('flex flex-col gap-4 group/carousel', $$restProps.class)}>
-	<div class={'flex justify-between items-center gap-4 ' + scrollClass}>
+<div class={classNames('flex flex-col group/carousel', $$restProps.class)}>
+	<div class={'flex justify-between items-center mb-2 ' + scrollClass}>
 		<slot name="title">
 			<div class="font-semibold text-xl">{heading}</div>
 		</slot>
 		<div
 			class={classNames(
-				'flex gap-2 sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
+				'flex gap-2 ml-4',
+				//'sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
 				{
 					hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
 				}
@@ -47,7 +47,7 @@
 		<Container horizontal>
 			<div
 				class={classNames(
-					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide p-1',
+					'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
 					scrollClass
 				)}
 				bind:this={carousel}
@@ -59,14 +59,12 @@
 		</Container>
 		{#if scrollX > 50}
 			<div
-				transition:fade={{ duration: 200 }}
 				class={'absolute inset-y-0 left-0 w-0 sm:w-16 md:w-24 bg-gradient-to-r ' +
 					gradientFromColor}
 			/>
 		{/if}
 		{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
 			<div
-				transition:fade={{ duration: 200 }}
 				class={'absolute inset-y-0 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' +
 					gradientFromColor}
 			/>

src/lib/components/HeroShowcase/HeroShowcase.svelte

@@ -125,7 +125,7 @@
 			{/await}
 		</div>
 	</div>
-	<Container class="z-10">
+	<Container class="z-10 pt-8">
 		<slot />
 	</Container>
 </Container>

src/lib/components/VideoPlayer/VideoPlayer.svelte

@@ -6,7 +6,7 @@
 		reportJellyfinPlaybackProgress,
 		reportJellyfinPlaybackStarted,
 		reportJellyfinPlaybackStopped
-	} from '../../apis/jellyfin/jellyfinApi';
+	} from '../../apis/jellyfin/jellyfin-api';
 	import getDeviceProfile from '../../apis/jellyfin/playback-profiles';
 	import { getQualities } from '../../apis/jellyfin/qualities';
 	import { settings } from '../../stores/settings.store';