From a4e10491e746b8942be406ab70f32a0a852c9107 Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Fri, 13 Feb 2026 17:39:51 +0200
Subject: [PATCH] feat: use new data fetching in MoviePage

---
 .../StackRouter/stack-router.store.ts         |   1 -
 .../TitlePages/MoviePage/MoviePage.svelte     |  92 ++++------
 .../TitlePages/SeriesPage/SeriesPage.svelte   |  14 +-
 frontend/src/lib/stores/movie-data.store.ts   | 158 ++++++++++++++++++
 4 files changed, 195 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/lib/stores/movie-data.store.ts

diff --git a/frontend/src/lib/components/StackRouter/stack-router.store.ts b/frontend/src/lib/components/StackRouter/stack-router.store.ts
index d3285ac..265c78a 100644
--- a/frontend/src/lib/components/StackRouter/stack-router.store.ts
+++ b/frontend/src/lib/components/StackRouter/stack-router.store.ts
@@ -214,7 +214,6 @@ export function useStackRouter({
 	};
 	// Only updates when historyState changes
 	const visibleStack: Writable<Array<CompStackPage>> = writable([]);
-	visibleStack.subscribe(console.log);
 
 	initializeFromUrl();
 
diff --git a/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte b/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
index c2b4b74..08e1d36 100644
--- a/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
+++ b/frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
@@ -3,41 +3,28 @@
 	import Button from '$lib/components/Button/Button.svelte';
 	import TmdbCard from '$lib/components/Card/TmdbCard.svelte';
 	import Carousel from '$lib/components/Carousel/Carousel.svelte';
-	import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
+	import { backgroundContext } from '$lib/components/GlobalBackground/BackgroundStack';
 	import HeroCarousel from '$lib/components/HeroShowcase/HeroCarousel.svelte';
 	import TmdbPersonCard from '$lib/components/PersonCard/TmdbPersonCard.svelte';
 	import { PLATFORM_WEB } from '$lib/constants';
 	import { scrollIntoView } from '$lib/selectable';
 	import { localSettings } from '$lib/stores/localstorage.store';
+	import { useMovieContext } from '$lib/stores/movie-data.store';
 	import { setScrollContext } from '$lib/stores/scroll.store';
 	import { setUiVisibilityContext } from '$lib/stores/ui-visibility.store';
-	import { movieUserDataContext } from '$lib/stores/user-data/title-user-data.store';
 	import { tmdbApi } from '$lib/stores/user.store';
 	import { formatMinutesToTime, formatThousands } from '$lib/utils';
-	import { Bookmark, Check, ExternalLink, Minus, Play, Video } from 'radix-icons-svelte';
+	import { Bookmark, Check, ExternalLink, Minus, Video } from 'radix-icons-svelte';
 	import { onDestroy } from 'svelte';
 	import type { TitleInfoProperty } from '../HeroTitleInfo';
 	import HeroTitleInfo from '../HeroTitleInfo.svelte';
 
 	export let id: string;
 
-	const background = createBackgroundPage({ backgroundMediaId: id, videoMediaId: id });
-	const {
-		tmdbId,
-		tmdbMovie,
-		inLibrary,
-		progress,
-		handleAddToLibrary,
-		handleRemoveFromLibrary,
-		isWatched,
-		toggleIsWatched,
-		autoplayCandidate,
-		autoplayStream,
-		unsubscribe
-	} = movieUserDataContext.createContext(id);
-	// const { componentStack } = titlePageContext.createContext();
-
-	// componentStack.push({ component: MoviePageDetails, props: {} });
+	const background = backgroundContext.createContext({ backgroundMediaId: id, videoMediaId: id });
+	const { movieData, inLibrary, isWatched, setInLibrary, setWatched, unsubscribe } =
+		useMovieContext(id).createContext();
+	const { promise: tmdbMovie } = movieData;
 
 	$tmdbMovie.then(async (movie) => {
 		const backgrounds =
@@ -65,7 +52,7 @@
 	let trailerId: string | undefined;
 	let titleProperties: TitleInfoProperty[] = [];
 
-	$: recommendations = tmdbApi.v3.movieRecommendations(Number(tmdbId)).then((r) => r.data.results);
+	$: recommendations = tmdbApi.v3.movieRecommendations(Number(id)).then((r) => r.data.results);
 
 	$tmdbMovie.then(async (movie) => {
 		trailerId = movie?.videos?.results?.find(
@@ -81,7 +68,7 @@
 		if (movie?.vote_average) {
 			titleProperties.push({
 				label: `${movie.vote_average.toFixed(1)} TMDB (${formatThousands(movie.vote_count ?? 0)})`,
-				href: `https://www.themoviedb.org/movie/${movie.id}`
+				href: `https://www.themoviedb.org/movie/${id}`
 			});
 		}
 
@@ -101,19 +88,9 @@
 		titleProperties = titleProperties;
 	});
 	$: if ($localSettings.autoplayTrailers && trailerId) {
-		background?.playYoutubeVideo({ tmdbId, videoId: trailerId, onBackground: true });
+		background.playYoutubeVideo({ tmdbId: id, videoId: trailerId, onBackground: true });
 	}
 
-	function openEpisodeMenu() {
-		// 	componentStack.create(ActionsMenu, {
-		// 		tmdbId
-		// 	});
-	}
-
-	onDestroy(() => {
-		unsubscribe();
-	});
-
 	onDestroy(() => {
 		unsubscribe();
 	});
@@ -135,19 +112,10 @@
 				{/if}
 			{/await}
 			<Container direction="horizontal" class="flex mt-8 space-x-4" focusOnMount>
-				<Button
-					action={autoplayStream}
-					secondaryAction={openEpisodeMenu}
-					disabled={!$autoplayCandidate.candidate}
-				>
-					Play
-					<Play size={19} slot="icon" />
-				</Button>
-
 				{#if trailerId}
 					<Button
 						on:clickOrSelect={() =>
-							trailerId && background?.playYoutubeVideo({ tmdbId, videoId: trailerId })}
+							trailerId && background.playYoutubeVideo({ tmdbId: id, videoId: trailerId })}
 					>
 						<Video slot="icon" size={19} />
 						Play Trailer
@@ -155,24 +123,20 @@
 				{/if}
 
 				{#if !$inLibrary}
-					<Button action={handleAddToLibrary} icon={Bookmark}>Add to Library</Button>
+					<Button action={() => setInLibrary(true)} icon={Bookmark}>Add to Library</Button>
 				{:else}
-					<Button action={handleRemoveFromLibrary} icon={Minus}>Remove from Library</Button>
+					<Button action={() => setInLibrary(false)} icon={Minus}>Remove from Library</Button>
 				{/if}
 
-				<Button action={toggleIsWatched}>
-					{#if $isWatched}
-						Mark as Unwatched
-					{:else}
-						Mark as Watched
-					{/if}
-					<Check slot="icon" size={19} />
-				</Button>
+				{#if $isWatched}
+					<Button action={() => setWatched(false)} icon={Check}>Mark as Unwatched</Button>
+				{:else}
+					<Button action={() => setWatched(true)} icon={Check}>Mark as Watched</Button>
+				{/if}
 
 				{#if PLATFORM_WEB}
 					<Button
-						on:clickOrSelect={() =>
-							window.open('https://www.themoviedb.org/movie/' + tmdbId, '_blank')}
+						on:clickOrSelect={() => window.open('https://www.themoviedb.org/movie/' + id, '_blank')}
 					>
 						Open In TMDB
 						<ExternalLink size={19} slot="icon-after" />
@@ -192,12 +156,14 @@
 				</Carousel>
 			{/await}
 			{#await recommendations then recommendations}
-				<Carousel scrollClass="px-32" class="mb-16">
-					<div slot="header">Recommendations</div>
-					{#each recommendations || [] as recommendation}
-						<TmdbCard item={recommendation} on:enter={scrollIntoView({ left: 128 })} />
-					{/each}
-				</Carousel>
+				{#if recommendations?.length}
+					<Carousel scrollClass="px-32" class="mb-16">
+						<div slot="header">Recommendations</div>
+						{#each recommendations as recommendation}
+							<TmdbCard item={recommendation} on:enter={scrollIntoView({ left: 128 })} />
+						{/each}
+					</Carousel>
+				{/if}
 			{/await}
 		</Container>
 		{#await $tmdbMovie then movie}
@@ -208,7 +174,7 @@
 						<div class="mb-8">
 							<h2 class="uppercase text-sm font-semibold text-zinc-500 mb-0.5">Directed By</h2>
 							<div>
-								{movie?.credits.crew
+								{movie?.credits?.crew
 									?.filter((c) => c.job === 'Director')
 									?.map((c) => c.name)
 									.join(', ')}
@@ -217,7 +183,7 @@
 						<div class="mb-8">
 							<h2 class="uppercase text-sm font-semibold text-zinc-500 mb-0.5">Written By</h2>
 							<div>
-								{movie?.credits.crew
+								{movie?.credits?.crew
 									?.filter((c) => c.job === 'Writer')
 									?.map((c) => c.name)
 									.join(', ')}
diff --git a/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte b/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
index 9d4628f..ba814e2 100644
--- a/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
+++ b/frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
@@ -395,12 +395,14 @@
 			</Carousel>
 		{/await}
 		{#await recommendations then recommendations}
-			<Carousel scrollClass="px-32" class="mb-8" on:enter={scrollIntoView({ top: 64 + 32 })}>
-				<div slot="header">Recommendations</div>
-				{#each recommendations || [] as recommendation (recommendation.id)}
-					<TmdbCard item={recommendation} on:enter={scrollIntoView({ left: 128 })} />
-				{/each}
-			</Carousel>
+			{#if recommendations?.length}
+				<Carousel scrollClass="px-32" class="mb-8" on:enter={scrollIntoView({ top: 64 + 32 })}>
+					<div slot="header">Recommendations</div>
+					{#each recommendations as recommendation (recommendation.id)}
+						<TmdbCard item={recommendation} on:enter={scrollIntoView({ left: 128 })} />
+					{/each}
+				</Carousel>
+			{/if}
 		{/await}
 		{#await $tmdbSeries then series}
 			<Container
diff --git a/frontend/src/lib/stores/movie-data.store.ts b/frontend/src/lib/stores/movie-data.store.ts
new file mode 100644
index 0000000..e41b811
--- /dev/null
+++ b/frontend/src/lib/stores/movie-data.store.ts
@@ -0,0 +1,158 @@
+import type { MovieUserDataDto, TmdbMovieFull } from '$lib/apis/reiverr/reiverr.openapi';
+import { useComponentStack } from '$lib/components/StackRouter/stack-router.store';
+import { createStoreContext, waitFor } from '$lib/utils';
+import { tick } from 'svelte';
+import { derived, get, writable } from 'svelte/store';
+import { awaitAppInitialization, reiverrApi, user } from './user.store';
+
+type DataState = 'loading' | 'refreshing' | 'ready' | 'error';
+
+/**
+ * A store for fetching data with the ability to make it stale and refetch automatically when the component page comes to front
+ */
+function useData<TResponse>(fetchData: () => Promise<TResponse>) {
+	const componentStack = useComponentStack();
+
+	const data = writable<TResponse | undefined>(undefined);
+	const isLoading = writable(true);
+	const promise = writable(
+		createPromise().then((d) => {
+			data.set(d);
+			isLoading.set(false);
+			return d;
+		})
+	);
+
+	async function createPromise() {
+		return awaitAppInitialization().then(() => fetchData());
+	}
+
+	let unsubToStaleWatcher: (() => void) | undefined;
+	const resolves: ((v: unknown) => void)[] = [];
+	function setStale(timeout = 1500) {
+		const out = new Promise((resolve) => {
+			let t: ReturnType<typeof setTimeout>;
+
+			const f = (v: unknown) => {
+				clearTimeout(t);
+				resolve(v);
+			};
+
+			resolves.push(f);
+
+			t = setTimeout(() => {
+				resolves.splice(resolves.indexOf(f), 1).forEach((r) => r(undefined));
+			}, timeout);
+		});
+
+		// Hack because hasFocusWithin is still true when new page mounts
+		tick().then(() => {
+			unsubToStaleWatcher?.();
+			unsubToStaleWatcher = waitFor(
+				componentStack.hasFocusWithin,
+				(isFocused) => !!isFocused,
+				() => {
+					const p = fetchData();
+					resolves.splice(0).forEach((r) => r(p));
+					return p;
+				}
+			).unsubscribe;
+		});
+
+		return out;
+	}
+
+	return {
+		data,
+		isLoading,
+		promise,
+		setStale,
+		unsubscribeEarly: () => {
+			unsubToStaleWatcher?.();
+			resolves.splice(0).forEach((r) => r(undefined));
+		}
+	};
+}
+
+export const useMovieContext = (tmdbId: string) =>
+	createStoreContext(`movie-${tmdbId}`, () => useMovieData(tmdbId));
+
+function useMovieData(tmdbId: string) {
+	const previous = useMovieContext(tmdbId).getContext();
+
+	const componentStack = useComponentStack();
+
+	const inLibrary = writable(false);
+	const isWatched = writable(false);
+	const progress = writable(0);
+
+	const movieData = useData(async () => {
+		const data = await reiverrApi.metadata.getMovie(tmdbId).then((r) => r.data.tmdbMovie);
+		return data;
+	});
+
+	const userData = useData(async () => {
+		const data = await reiverrApi.users
+			.getMovieUserData(get(user)?.id as string, tmdbId)
+			.then((r) => r.data);
+
+		inLibrary.set(data.inLibrary);
+		isWatched.set(data.playState?.watched ?? false);
+		progress.set(data.playState?.progress ?? 0);
+
+		return data;
+	});
+
+	async function setWatched(watched: boolean) {
+		const userId = get(user)?.id;
+
+		if (!userId) {
+			console.error('Set watched: No user ID');
+			return;
+		}
+
+		await reiverrApi.users.updateMoviePlayStateByTmdbId(userId, tmdbId, {
+			watched
+		});
+
+		return setUserDataStale();
+	}
+
+	async function setInLibrary(state: boolean) {
+		const userId = get(user)?.id;
+
+		if (!userId) {
+			console.error('Add to library: No user ID');
+			return;
+		}
+
+		const success = await reiverrApi.library
+			.updateLibraryItem(userId, tmdbId, { mediaType: 'movie', inLibrary: state })
+			.then((r) => r.data.success);
+
+		if (success) {
+			inLibrary.set(state);
+			previous.inLibrary?.set(state);
+		}
+	}
+
+	function setUserDataStale() {
+		previous.setStale?.();
+		return userData.setStale();
+	}
+
+	return {
+		componentStack,
+		movieData,
+		inLibrary,
+		isWatched,
+		progress,
+		setInLibrary,
+		setWatched,
+		setStale: setUserDataStale,
+		unsubscribe: () => {
+			movieData.unsubscribeEarly();
+			userData.unsubscribeEarly();
+		}
+	};
+}