Fixed request modal & video player issues,

src/lib/components/Carousel/Carousel.svelte

@@ -40,7 +40,7 @@
 
 	<div class="relative">
 		<div
-			class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide"
+			class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative scrollbar-hide p-1"
 			bind:this={carousel}
 			tabindex="-1"
 			on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}

src/lib/components/Carousel/UICarousel.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative')}
+	class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
 	style={`mask-image: linear-gradient(to right, transparent 0%, ${
 		fadeLeft ? '' : 'black 0%, '
 	}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}

src/lib/components/IconButton.svelte

@@ -10,7 +10,8 @@
 		{
 			'opacity-30 cursor-not-allowed pointer-events-none': disabled,
 			'cursor-pointer': !disabled
-		}
+		},
+		$$restProps.class
 	)}
 	on:click|stopPropagation
 >

src/lib/components/RequestModal/RequestModal.svelte

@@ -110,7 +110,9 @@
 		<div class="text-sm text-zinc-200 opacity-50 font-light p-4">Loading...</div>
 	{:then { releases, filtered, releasesSkipped }}
 		{#if showAllReleases ? releases?.length : filtered?.length}
-			<div class="flex flex-col divide-y divide-zinc-700 max-h-[60vh] overflow-y-scroll">
+			<div
+				class="flex flex-col divide-y divide-zinc-700 max-h-[60vh] overflow-y-scroll scrollbar-hide"
+			>
 				{#each showAllReleases ? releases : filtered as release}
 					<div>
 						<!-- svelte-ignore a11y-click-events-have-key-events -->

src/lib/components/RequestModal/SeriesRequestModal.svelte

@@ -20,7 +20,8 @@
 				seasonPack: {
 					sonarrId,
 					seasonNumber
-				}
+				},
+				groupId: modalId
 			},
 			modalId
 		);

src/lib/components/VideoPlayer/VideoPlayer.svelte

@@ -18,7 +18,7 @@
 
 	export let modalId: Symbol;
 
-	let uiVisible = false;
+	let uiVisible = true;
 
 	let video: HTMLVideoElement;
 	let mouseMovementTimeout: NodeJS.Timeout;
@@ -37,7 +37,15 @@
 					return;
 				}
 
+				video.poster = item?.BackdropImageTags?.length
+					? `http://jellyfin.home/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
+					: '';
+
 				if (!directPlay) {
+					if (!Hls.isSupported()) {
+						throw new Error('HLS is not supported');
+					}
+
 					const hls = new Hls();
 
 					hls.loadSource(PUBLIC_JELLYFIN_URL + playbackUri);
@@ -76,32 +84,31 @@
 	}
 
 	function handleMouseMove() {
-		uiVisible = true;
-		clearTimeout(mouseMovementTimeout);
-		mouseMovementTimeout = setTimeout(() => {
-			uiVisible = false;
-		}, 2000);
+		// uiVisible = true;
+		// clearTimeout(mouseMovementTimeout);
+		// mouseMovementTimeout = setTimeout(() => {
+		// 	uiVisible = false;
+		// }, 2000);
 	}
 
 	onDestroy(() => clearInterval(progressInterval));
 
 	$: {
 		if (video && $playerState.jellyfinId) {
-			if (!Hls.isSupported()) {
-				throw new Error('HLS is not supported');
-			}
-
 			if (video.src === '') fetchPlaybackInfo($playerState.jellyfinId);
 		}
 	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="bg-black w-screen h-screen relative" on:mousemove={handleMouseMove}>
+<div
+	class="bg-black w-screen h-screen relative flex items-center justify-center"
+	on:mousemove={handleMouseMove}
+>
 	<!-- svelte-ignore a11y-media-has-caption -->
-	<video controls bind:this={video} class="w-full h-full inset-0" />
+	<video controls bind:this={video} class="sm:w-full sm:h-full" />
 	<div
-		class={classNames('absolute top-4 right-8 transition-opacity', {
+		class={classNames('absolute top-4 right-8 transition-opacity z-50', {
 			'opacity-0': !uiVisible,
 			'opacity-100': uiVisible
 		})}