feat(landing): cover mode list demos

3 files changed, 50 insertions, 8 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index e60a8a8b..4b69711b 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -28,6 +28,7 @@
 	export let plannedOnly = false;
 	export let upcoming = false;
 	export let notYetReleased = false;
+	export let dummy = false;
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
@@ -46,7 +47,7 @@
 	});
 </script>
 
-{#if !$subsPlease}
+{#if !$subsPlease && !dummy}
 	<PlaceholderList count={lastListSize} {title} />
 {:else}
 	{#await animeLists}
@@ -63,6 +64,7 @@
 				{upcoming}
 				bind:previousAnimeList
 				bind:pendingUpdate
+				{dummy}
 			/>
 		{:else}
 			<PlaceholderList count={lastListSize} {title} />
@@ -84,6 +86,7 @@
 				subsPlease={$subsPlease}
 				bind:previousAnimeList
 				bind:pendingUpdate
+				{dummy}
 			/>
 		{/if}
 	{:catch}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 6988fde0..175b138c 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -31,6 +31,7 @@
 	export let subsPlease: SubsPlease | null = null;
 	export let upcoming = false;
 	export let notYetReleased = false;
+	export let dummy = false;
 
 	let keyCacher: NodeJS.Timeout;
 
@@ -74,7 +75,7 @@
 	onDestroy(() => clearInterval(keyCacher));
 </script>
 
-<ListTitle time={endTime / 1000} count={media.length} {title} />
+<ListTitle time={endTime / 1000} count={media.length} {title} hideTime={dummy} hideCount={dummy} />
 
 {#if media.length === 0}
 	No anime to display. <button on:click={() => (animeLists = cleanCache(user, $identity))}>
@@ -96,6 +97,7 @@
 						id={`anime-${anime.id}`}
 						pin={`anime-${anime.id}`}
 						content={anime ? mediaTitle(anime) : ''}
+						relative={dummy}
 					>
 						<div class="cover-card-image">
 							<a
@@ -132,7 +134,7 @@
 								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
 								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
 								on:click={() => {
-									if (pendingUpdate !== anime.id) {
+									if (!dummy && pendingUpdate !== anime.id) {
 										lastUpdatedMedia = anime.id;
 										pendingUpdate = anime.id;
 
@@ -213,7 +215,7 @@
 								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
 								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
 								on:click={() => {
-									if (pendingUpdate !== anime.id) {
+									if (!dummy && pendingUpdate !== anime.id) {
 										lastUpdatedMedia = anime.id;
 										pendingUpdate = anime.id;
 
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 70dae576..67e917b6 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -9,8 +9,15 @@
 	import { getNotificationsContext } from 'svelte-notifications';
 	import locale from '$stores/locale';
 	import identity from '$stores/identity';
+	import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
 
-	export let user: AniListAuthorisation;
+	export let user: AniListAuthorisation = {
+		accessToken: '',
+		refreshToken: '',
+		expiresIn: 0,
+		tokenType: ''
+	};
+	export let dummy = false;
 
 	const { addNotification } = getNotificationsContext();
 	let animeLists: Promise<Media[]>;
@@ -19,12 +26,41 @@
 
 	onMount(async () => {
 		startTime = performance.now();
-		animeLists = mediaListCollection(user, $identity, Type.Anime, $anime, $lastPruneTimes.anime, {
-			addNotification
-		});
+
+		if (dummy) {
+			animeLists = Promise.resolve(
+				sampleAnime
+					.filter(
+						(anime) =>
+							anime.episodes &&
+							!anime.tags.some((tag) => tag.name === 'Nudity') &&
+							!anime.tags.some((tag) => tag.name === 'Rape') &&
+							!anime.tags.some((tag) => tag.name === 'Tragedy') &&
+							!anime.tags.some((tag) => tag.name === 'Bondage') &&
+							!anime.genres.some((genre) => genre === 'Hentai') &&
+							anime.genres.some((genre) => genre === 'Comedy') &&
+							anime.status !== 'NOT_YET_RELEASED' &&
+							anime.episodes > 1
+					)
+					.sort(() => 0.5 - Math.random())
+					.map((anime) => {
+						anime.mediaListEntry.progress = Math.floor(Math.random() * (anime.episodes || 0)) + 1;
+						anime.status = 'FINISHED';
+
+						return anime;
+					})
+					.slice(0, 7) as unknown as Media[]
+			);
+		} else {
+			animeLists = mediaListCollection(user, $identity, Type.Anime, $anime, $lastPruneTimes.anime, {
+				addNotification
+			});
+		}
 	});
 
 	const cleanMedia = (anime: Media[]) => {
+		if (anime && dummy) return anime;
+
 		if (anime === undefined) return [];
 
 		const outdatedCompletedAnime = anime.filter(
@@ -56,4 +92,5 @@
 	{user}
 	title={$locale().lists.completed.anime}
 	completed
+	{dummy}
 />