Jellyfin playback state synchronation

src/routes/components/Poster/Poster.svelte

@@ -34,6 +34,7 @@
 		streamFetching = true;
 		getJellyfinItemByTmdbId(tmdbId).then((item: any) => {
 			if (item.Id) streamJellyfinId(item.Id);
+			streamFetching = false;
 		});
 	}
 </script>
@@ -54,6 +55,7 @@
 		<div class="w-full h-full hover:bg-darken transition-all flex">
 			<div
 				class="opacity-0 group-hover:opacity-100 transition-opacity p-2 flex flex-col justify-between flex-1 cursor-pointer"
+				on:click={() => (window.location.href = '/' + type + '/' + tmdbId)}
 			>
 				<div>
 					<h1 class="font-bold text-lg tracking-wide">
@@ -73,9 +75,10 @@
 				<div class="flex flex-col gap-2">
 					<button
 						class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-2.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
-						on:click={stream}>Stream</button
+						on:click|stopPropagation={stream}>Stream</button
 					>
 					<a
+						on:click|stopPropagation
 						href={'/' + type + '/' + tmdbId}
 						class="border-2 border-white cursor-pointer transition-colors px-8 py-2.5 uppercase tracking-widest font-semibold text-xs hover:bg-amber-400 hover:text-black text-center"
 						>Details</a

src/routes/components/VideoPlayer/VideoPlayer.svelte

@@ -1,31 +1,68 @@
 <script lang="ts">
-	import { fetchJellyfinPlaybackUrl } from '$lib/jellyfin/jellyfin';
+	import {
+		getJellyfinItem,
+		getJellyfinPlaybackInfo,
+		reportJellyfinPlaybackProgress,
+		reportJellyfinPlaybackStarted,
+		reportJellyfinPlaybackStopped
+	} from '$lib/jellyfin/jellyfin';
 	import Hls from 'hls.js';
 	import Modal from '../Modal/Modal.svelte';
 	import IconButton from '../IconButton.svelte';
 	import { Cross2 } from 'radix-icons-svelte';
 	import classNames from 'classnames';
-	import { getContext } from 'svelte';
+	import { getContext, onDestroy } from 'svelte';
 	import { PUBLIC_JELLYFIN_URL } from '$env/static/public';
+	import getDeviceProfile from '$lib/jellyfin/playback-profiles';
 
 	const { playerState, close } = getContext('player');
 
 	let video: HTMLVideoElement;
 
-	const fetchPlaybackInfo = (id: string) =>
-		fetchJellyfinPlaybackUrl(id).then((uri) => {
-			if (!uri) return;
+	let stopCallback;
 
-			const hls = new Hls();
+	let progressInterval;
+	onDestroy(() => clearInterval(progressInterval));
 
-			hls.loadSource(PUBLIC_JELLYFIN_URL + uri);
-			hls.attachMedia(video);
-			video.play();
-		});
+	const fetchPlaybackInfo = (itemId: string) =>
+		getJellyfinPlaybackInfo(itemId, getDeviceProfile()).then(
+			async ({ playbackUrl: uri, playSessionId: sessionId, mediaSourceId }) => {
+				if (!uri || !sessionId) return;
+
+				const item = await getJellyfinItem(itemId);
+
+				const hls = new Hls();
+
+				hls.loadSource(PUBLIC_JELLYFIN_URL + uri);
+				hls.attachMedia(video);
+				video.play().then(() => {
+					console.log(item);
+					if (item?.UserData?.PlaybackPositionTicks) {
+						console.log('Setting time');
+						video.currentTime = item?.UserData?.PlaybackPositionTicks / 10_000_000;
+					}
+				});
+				await reportJellyfinPlaybackStarted(itemId, sessionId, mediaSourceId);
+				progressInterval = setInterval(() => {
+					reportJellyfinPlaybackProgress(
+						itemId,
+						sessionId,
+						video?.paused == true,
+						video?.currentTime * 10_000_000
+					);
+				}, 5000);
+				stopCallback = () => {
+					reportJellyfinPlaybackStopped(itemId, sessionId, video?.currentTime * 10_000_000);
+				};
+			}
+		);
 
 	function handleClose() {
 		close();
 		video?.pause();
+		clearInterval(progressInterval);
+		stopCallback?.();
+		playerState.set({ visible: false, jellyfinId: '' });
 	}
 
 	let uiVisible = false;
@@ -47,7 +84,7 @@
 				throw new Error('HLS is not supported');
 			}
 
-			fetchPlaybackInfo(state.jellyfinId);
+			if (video.src === '') fetchPlaybackInfo(state.jellyfinId);
 		}
 	}
 </script>