Series page: Next episode focus, mobile styling

src/lib/components/Carousel/Carousel.svelte

@@ -40,13 +40,13 @@
 	{#if scrollX > 50}
 		<div
 			transition:fade={{ duration: 200 }}
-			class={'absolute inset-y-4 left-0 w-8 sm:w-16 md:w-24 bg-gradient-to-r ' + gradientFromColor}
+			class={'absolute inset-y-4 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-4 right-0 w-8 sm:w-16 md:w-24 bg-gradient-to-l ' + gradientFromColor}
+			class={'absolute inset-y-4 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' + gradientFromColor}
 		/>
 	{/if}
 </div>

src/lib/components/EpisodeCard/EpisodeCard.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { TMDB_BACKDROP_SMALL } from '$lib/constants';
 	import classNames from 'classnames';
-	import { DotsHorizontal, TriangleRight } from 'radix-icons-svelte';
+	import { Check, CheckCircled, DotsHorizontal, TriangleRight } from 'radix-icons-svelte';
 	import { fade } from 'svelte/transition';
 	import IconButton from '../IconButton.svelte';
+	import { onMount } from 'svelte';
 
 	export let backdropPath: string;
 
@@ -12,6 +13,7 @@
 	export let episodeNumber: string | undefined = undefined;
 	export let runtime = 0;
 	export let progress = 0;
+	export let watched = false;
 
 	export let handlePlay: (() => void) | undefined = undefined;
 
@@ -36,10 +38,10 @@
 	<div
 		class={classNames('flex flex-col justify-between h-full group-hover:opacity-0 transition-all', {
 			'px-2 lg:px-3 pt-2': true,
-			' pb-4 lg:pb-6': progress,
+			'pb-4 lg:pb-6': progress,
 			'pb-2': !progress,
 			'bg-gradient-to-t from-darken': !!handlePlay,
-			'bg-darken': !handlePlay
+			'bg-darken': !handlePlay || watched
 		})}
 	>
 		<div class="flex justify-between items-center">
@@ -73,7 +75,11 @@
 					{/if}
 				</div>
 			</slot>
-			<slot name="right-bottom" />
+			<slot name="right-bottom">
+				{#if watched}
+					<Check size={20} class="opacity-80" />
+				{/if}
+			</slot>
 		</div>
 	</div>
 	<div class="absolute inset-0 flex items-center justify-center">

src/lib/components/VideoPlayer/VideoPlayer.ts

@@ -1,3 +1,4 @@
+import { library } from '$lib/stores/library.store';
 import { writable } from 'svelte/store';
 
 const initialValue = { visible: false, jellyfinId: '' };
@@ -13,6 +14,7 @@ function createPlayerState() {
 		},
 		close: () => {
 			store.set({ visible: false, jellyfinId: '' });
+			library.refresh();
 		}
 	};
 }