fix: continue watching shows watched items

src/lib/components/VideoPlayer/TmdbVideoPlayerModal.svelte

@@ -228,7 +228,7 @@
 			} else {
 				movieUserDataStore.refresh(tmdbId);
 			}
-			libraryItemsDataStore.refresh();
+			libraryItemsDataStore.refreshIn(1500);
 		});
 	});
 </script>

src/lib/pages/MoviesHomePage.svelte

@@ -15,7 +15,9 @@
 	const libraryContinueWatching = derived(libraryData, (libraryData) => {
 		if (!libraryData) return [];
 
-		const movies = libraryData.filter((i) => i.mediaType === 'Movie' && i.playStates?.length);
+		const movies = libraryData.filter(
+			(i) => i.mediaType === 'Movie' && i.playStates?.length && !i.watched
+		);
 
 		movies.sort((a, b) => {
 			const aMax = Math.max(
@@ -30,6 +32,7 @@
 
 		return movies.map((i) => i.metadata);
 	});
+	$: libraryContinueWatchingKey = $libraryContinueWatching && Symbol();
 
 	const popularMovies = tmdbApi.getPopularMovies();
 
@@ -92,9 +95,11 @@
 		{#if $libraryContinueWatching.length}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Continue Watching</span>
-				{#each $libraryContinueWatching as item}
-					<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-				{/each}
+				{#key libraryContinueWatchingKey}
+					{#each $libraryContinueWatching as item (item.id)}
+						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
+					{/each}
+				{/key}
 			</Carousel>
 		{/if}
 

src/lib/pages/SeriesHomePage.svelte

@@ -17,7 +17,9 @@
 	const libraryContinueWatching = derived(libraryData, (libraryData) => {
 		if (!libraryData) return [];
 
-		const series = libraryData.filter((i) => i.mediaType === 'Series' && i.playStates?.length);
+		const series = libraryData.filter(
+			(i) => i.mediaType === 'Series' && i.playStates?.length && !i.watched
+		);
 
 		series.sort((a, b) => {
 			const aMax = Math.max(
@@ -32,6 +34,7 @@
 
 		return series.map((i) => i.metadata);
 	});
+	$: libraryContinueWatchingKey = $libraryContinueWatching && Symbol();
 
 	const nowStreaming = getNowStreaming();
 	const upcomingSeries = fetchUpcomingSeries();
@@ -86,9 +89,11 @@
 		{#if $libraryContinueWatching.length}
 			<Carousel scrollClass="px-32" on:enter={scrollIntoView({ vertical: 128 })}>
 				<span slot="header">Continue Watching</span>
-				{#each $libraryContinueWatching as item}
-					<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
-				{/each}
+				{#key libraryContinueWatchingKey}
+					{#each $libraryContinueWatching as item (item.id)}
+						<TmdbCard on:enter={scrollIntoView({ horizontal: 128 })} size="lg" {item} />
+					{/each}
+				{/key}
 			</Carousel>
 		{/if}
 

src/lib/stores/data.store.ts

@@ -28,7 +28,7 @@ export function useRequest<TResponse>(fn: () => Promise<TResponse>) {
 	}
 
 	let updateTimeout: NodeJS.Timeout;
-	function refreshIn(ms = 1000) {
+	function refreshIn(ms = 1500) {
 		return new Promise((resolve) => {
 			clearTimeout(updateTimeout);
 			updateTimeout = setTimeout(() => {
@@ -97,10 +97,19 @@ export function useRequestsStore<TArgs extends Array<unknown>, TResponse>(
 		}
 	};
 
+	const refreshIn = async (ms: number, ...args: TArgs) => {
+		const request = requests.get(JSON.stringify(args))?.request;
+
+		if (request) {
+			return request.refreshIn(ms);
+		}
+	};
+
 	return {
 		subscribe,
 		get: _get,
-		refresh
+		refresh,
+		refreshIn
 	};
 }
 

src/lib/stores/media-user-data.store.ts

@@ -116,7 +116,7 @@ function useUserLibrary(
 			.then((r) => r.data.success);
 		if (success) {
 			inLibrary.set(true);
-			libraryItemsDataStore.refresh();
+			libraryItemsDataStore.refreshIn(1500);
 		}
 	}
 
@@ -133,7 +133,7 @@ function useUserLibrary(
 			.then((r) => r.data.success);
 		if (success) {
 			inLibrary.set(false);
-			libraryItemsDataStore.refresh();
+			libraryItemsDataStore.refreshIn(1500);
 		}
 	}
 
@@ -164,7 +164,7 @@ function useIsWatched(
 
 		return toggleFn(userId, !watched)
 			.then(async (r) => {
-				await libraryItemsDataStore.refresh();
+				await libraryItemsDataStore.refreshIn(1500);
 				return r;
 			})
 			.finally(() => {
@@ -255,7 +255,7 @@ export function useSeriesUserData(tmdbId: string) {
 			})
 			.then(async (states) => {
 				await seriesUserDataStore.refresh(tmdbId);
-				await libraryItemsDataStore.refresh();
+				await libraryItemsDataStore.refreshIn(1500);
 				return states;
 			});
 	}