fix: Movie page margins

src/lib/components/HeroCarousel/HeroCarousel.svelte

@@ -34,7 +34,7 @@
 	}
 </script>
 
-<Container class="flex-1 flex relative">
+<Container class="flex-1 flex">
 	<HeroShowcaseBackground {urls} {index} />
 	<Container
 		revealStrategy={scrollWithOffset('up', 0)}
@@ -45,9 +45,7 @@
 		}}
 	/>
 	<div class="flex flex-1 z-10 p-4">
-		<SidebarMargin class="flex-1">
 		<slot />
-		</SidebarMargin>
 		<div class="flex flex-col justify-end ml-4">
 			<div class="flex flex-1 justify-end items-center">
 				<IconButton on:click={onNext}>

src/lib/components/HeroShowcase/HeroShowcase.svelte

@@ -6,6 +6,7 @@
 	import Card from '../Card/Card.svelte';
 	import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '../../constants';
 	import HeroCarousel from '../HeroCarousel/HeroCarousel.svelte';
+	import SidebarMargin from '../SidebarMargin.svelte';
 
 	export let items: Promise<ShowcaseItemProps[]> = Promise.resolve([]);
 
@@ -16,7 +17,7 @@
 	urls={items.then((items) => items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUrl}`))}
 	bind:index={showcaseIndex}
 >
-	<div class="h-full flex overflow-hidden z-10">
+	<SidebarMargin class="h-full flex-1 flex overflow-hidden z-10 relative">
 		{#await items}
 			<div class="flex-1 flex items-end">
 				<CardPlaceholder orientation="portrait" />
@@ -76,5 +77,5 @@
 		{:catch error}
 			<p>{error.message}</p>
 		{/await}
-	</div>
+	</SidebarMargin>
 </HeroCarousel>

src/lib/components/VideoPlayer/VideoPlayer.svelte

@@ -310,20 +310,6 @@
 		}
 	}
 
-	onMount(() => {
-		// Workaround because the paused state does not sync
-		// with the video element until a change is made
-		// paused = false;
-		// if (video && $playerState.jellyfinId) {
-		// 	if (video.src === '') fetchPlaybackInfo($playerState.jellyfinId);
-		// }
-	});
-
-	onDestroy(() => {
-		clearInterval(progressInterval);
-		if (fullscreen) exitFullscreen?.();
-	});
-
 	$: {
 		if (fullscreen && !getFullscreenElement?.()) {
 			if (reqFullscreenFunc) reqFullscreenFunc(videoWrapper);
@@ -368,6 +354,21 @@
 			mute = !mute;
 		}
 	}
+
+	onMount(() => {
+		// Workaround because the paused state does not sync
+		// with the video element until a change is made
+		// paused = false;
+		// if (video && $playerState.jellyfinId) {
+		// 	if (video.src === '') fetchPlaybackInfo($playerState.jellyfinId);
+		// }
+	});
+
+	onDestroy(() => {
+		console.log('Video destroyed');
+		clearInterval(progressInterval);
+		if (fullscreen) exitFullscreen?.();
+	});
 </script>
 
 <svelte:window on:keydown={handleShortcuts} />

src/lib/components/VideoPlayer/VideoPlayerModal.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-	import FullScreenModal from '../Modal/FullScreenModal.svelte';
+	import classNames from 'classnames';
+	import { modalStack } from '../Modal/modal.store';
+	import Container from '../../../Container.svelte';
 	import VideoPlayer from './VideoPlayer.svelte';
-	export let modalId: symbol;
+
 	export let id: string;
+	export let modalId: symbol;
+	export let hidden: boolean = false;
 </script>
 
-<FullScreenModal {modalId}>
+<Container
+	navigationActions={{}}
+	focusOnMount
+	trapFocus
+	class={classNames('fixed inset-0 bg-black overflow-auto', {
+		'opacity-0': hidden
+	})}
+>
 	<VideoPlayer jellyfinId={id} />
-</FullScreenModal>
+</Container>

src/lib/pages/MoviePage.svelte

@@ -7,7 +7,6 @@
 	import { DotFilled, Download, ExternalLink, File, Play, Plus } from 'radix-icons-svelte';
 	import Button from '../components/Button.svelte';
 	import { jellyfinApi } from '../apis/jellyfin/jellyfin-api';
-	import VideoPlayer from '../components/VideoPlayer/VideoPlayer.svelte';
 	import { radarrApi } from '../apis/radarr/radarr-api';
 	import { useActionRequests, useRequest } from '../stores/data.store';
 	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
@@ -38,7 +37,7 @@
 </script>
 
 <DetachedPage>
-	<div class="h-screen flex flex-col">
+	<div class="min-h-screen flex flex-col py-12 px-20 relative">
 		<HeroCarousel
 			bind:index={heroIndex}
 			urls={$movieDataP.then(
@@ -49,7 +48,7 @@
 						.slice(0, 5) || []
 			)}
 		>
-			<div class="h-full flex flex-col justify-end">
+			<div class="h-full flex-1 flex flex-col justify-end">
 				{#await $movieDataP then movie}
 					{#if movie}
 						<div

src/lib/pages/MoviesPage.svelte

@@ -17,7 +17,9 @@
 
 <Container focusOnMount class="flex flex-col">
 	<div class="flex flex-col h-screen">
+		<div class="flex-1 flex relative">
 			<HeroShowcase items={popularMovies.then(getShowcasePropsFromTmdb)} />
+		</div>
 		<div class="mt-8">
 			<Carousel>
 				<SidebarMargin slot="title" class="mx-4">