feat: Implement video player & playback

src/App.svelte

@@ -66,6 +66,7 @@
 
 		<Router>
 			<Route path="movies/movie/:id" component={MoviePage} />
+			<Route path="library/movie/:id" component={MoviePage} />
 		</Router>
 
 		<ModalStack />

src/lib/components/VideoPlayer/VideoPlayer.ts

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import { modalStack } from '../Modal/modal.store';
-import VideoPlayer from './VideoPlayer.svelte';
 import { jellyfinItemsStore } from '../../stores/data.store';
+import VideoPlayerModal from './VideoPlayerModal.svelte';
 
 const initialValue = { visible: false, jellyfinId: '' };
 export type PlayerStateValue = typeof initialValue;
@@ -13,7 +13,7 @@ function createPlayerState() {
 		...store,
 		streamJellyfinId: (id: string) => {
 			store.set({ visible: true, jellyfinId: id });
-			modalStack.create(VideoPlayer, {}); // FIXME
+			modalStack.create(VideoPlayerModal, { id });
 		},
 		close: () => {
 			store.set({ visible: false, jellyfinId: '' });

src/lib/components/VideoPlayer/VideoPlayerModal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import FullScreenModal from '../Modal/FullScreenModal.svelte';
+	import VideoPlayer from './VideoPlayer.svelte';
+	export let modalId: symbol;
+	export let id: string;
+</script>
+
+<FullScreenModal {modalId}>
+	<VideoPlayer jellyfinId={id} />
+</FullScreenModal>

src/lib/pages/MoviePage.svelte

@@ -13,6 +13,7 @@
 	import DetachedPage from '../components/DetachedPage/DetachedPage.svelte';
 	import { modalStack } from '../components/Modal/modal.store';
 	import RequestModal from '../components/RequestModal/RadarrRequestModal.svelte';
+	import { playerState } from '../components/VideoPlayer/VideoPlayer';
 
 	export let id: string;
 
@@ -85,7 +86,9 @@
 				{#await Promise.all([$jellyfinItemP, $radarrItemP]) then [jellyfinItem, radarrItem]}
 					<Container direction="horizontal" class="flex mt-8 gap-2">
 						{#if jellyfinItem}
-							<Button on:click={() => (playbackId = jellyfinItem.Id || '')}>
+							<Button
+								on:click={() => jellyfinItem.Id && playerState.streamJellyfinId(jellyfinItem.Id)}
+							>
 								Play
 								<Play size={19} slot="icon" />
 							</Button>
@@ -124,9 +127,4 @@
 			</div>
 		</HeroCarousel>
 	</div>
-	<div>
-		{#if playbackId}
-			<VideoPlayer jellyfinId={playbackId} />
-		{/if}
-	</div>
 </DetachedPage>