fix: Movie page margins

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>