Working episode playback

src/lib/components/Carousel/Carousel.svelte

@@ -7,7 +7,7 @@
 	let scrollX: number;
 </script>
 
-<div class="flex justify-between items-center mx-8">
+<div class="flex justify-between items-center mx-8 gap-4">
 	<slot name="title" />
 	<div class="flex gap-2">
 		<IconButton>

src/lib/components/Carousel/CarouselPlaceholderItems.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import CardPlaceholder from '../Card/CardPlaceholder.svelte';
-	export let type: 'dynamic' | 'md' | 'large' = 'md';
+	export let size: 'dynamic' | 'md' | 'large' = 'md';
 </script>
 
 {#each Array(10) as _, i (i)}
-	<CardPlaceholder {type} />
+	<CardPlaceholder {size} />
 {/each}

src/lib/components/Carousel/UICarousel.svelte

@@ -1,7 +1,35 @@
 <script lang="ts">
 	import classNames from 'classnames';
+	import { onMount } from 'svelte';
+
+	let element: HTMLDivElement;
+	let scrollX = 0;
+	let maxScrollX = 0;
+	let fadeLeft = false;
+	let fadeRight = true;
+
+	$: {
+		fadeLeft = scrollX > 10;
+		fadeRight = scrollX < maxScrollX - 10;
+	}
+
+	function updateScrollPosition() {
+		scrollX = element.scrollLeft;
+		maxScrollX = element.scrollWidth - element.clientWidth;
+	}
+
+	onMount(() => {
+		updateScrollPosition();
+	});
 </script>
 
-<div class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide')}>
+<div
+	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide')}
+	style={`mask-image: linear-gradient(to right, transparent 0%, ${
+		fadeLeft ? '' : 'black 0%, '
+	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
+	on:scroll={updateScrollPosition}
+	bind:this={element}
+>
 	<slot />
 </div>