From 73221b69b72d30aca081c5b1133f15abf28da6c8 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 29 Dec 2023 21:29:54 -0800
Subject: feat(wrapped): media sort options

---
 src/lib/Tools/Wrapped.svelte | 44 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 6f64c9d5..384562a2 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -59,6 +59,7 @@
 	let highestRatedMediaPercentage = true;
 	let highestRatedGenreTagPercentage = true;
 	let genreTagsSort = SortOptions.SCORE;
+	let mediaSort = SortOptions.SCORE;
 
 	$: {
 		if (browser && mounted) {
@@ -80,6 +81,8 @@
 				'highestRatedGenreTagPercentage',
 				highestRatedGenreTagPercentage.toString()
 			);
+			$page.url.searchParams.set('genreTagsSort', genreTagsSort.toString());
+			$page.url.searchParams.set('mediaSort', mediaSort.toString());
 
 			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
 		}
@@ -92,6 +95,8 @@
 		highestRatedMediaPercentage = highestRatedMediaPercentage;
 		highestRatedGenreTagPercentage = highestRatedGenreTagPercentage;
 		topGenresTags = topGenresTags;
+		genreTagsSort = genreTagsSort;
+		mediaSort = mediaSort;
 
 		update().then(updateWidth).catch(updateWidth);
 	}
@@ -137,6 +142,16 @@
 				return 'Most Common';
 		}
 	})();
+	$: mediaTitle = (() => {
+		switch (mediaSort) {
+			case SortOptions.SCORE:
+				return 'Highest Rated';
+			case SortOptions.MINUTES_WATCHED:
+				return 'Most Watched';
+			case SortOptions.COUNT:
+				return 'Most Common';
+		}
+	})();
 
 	const updateWidth = () => {
 		const wrappedContainer = document.querySelector('#wrapped') as HTMLElement;
@@ -196,7 +211,9 @@
 			'genreTagCount',
 			'disableActivityHistory',
 			'highestRatedMediaPercentage',
-			'highestRatedGenreTagPercentage'
+			'highestRatedGenreTagPercentage',
+			'genreTagsSort',
+			'mediaSort'
 		]);
 
 		if (browser) {
@@ -214,6 +231,8 @@
 				$page.url.searchParams.get('highestRatedMediaPercentage') === 'true';
 			highestRatedGenreTagPercentage =
 				$page.url.searchParams.get('highestRatedGenreTagPercentage') === 'true';
+			// genreTagsSort = parseInt($page.url.searchParams.get('genreTagsSort') || '0', 10);
+			// mediaSort = parseInt($page.url.searchParams.get('mediaSort') || '0', 10);
 		}
 
 		if (user !== undefined) {
@@ -256,9 +275,17 @@
 						item.mediaListEntry?.completedAt.year === currentYear)
 			)
 			.sort((a, b) => {
-				if (a.mediaListEntry?.score === undefined) return 1;
-				else if (b.mediaListEntry?.score === undefined) return -1;
-				else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+				switch (mediaSort) {
+					case SortOptions.MINUTES_WATCHED:
+						if (a.duration === undefined) return 1;
+						else if (b.duration === undefined) return -1;
+						else return b.duration - a.duration;
+					case SortOptions.SCORE:
+					default:
+						if (a.mediaListEntry?.score === undefined) return 1;
+						else if (b.mediaListEntry?.score === undefined) return -1;
+						else return b.mediaListEntry?.score - a.mediaListEntry?.score;
+				}
 			});
 		mangaList = (
 			await mediaListCollection(
@@ -503,7 +530,7 @@
 										/>
 									</a>
 									<div>
-										<b>Highest Rated Anime</b>
+										<b>{mediaTitle} Anime</b>
 										<ol>
 											{#each animeList?.slice(0, highestRatedCount) as anime}
 												<li>
@@ -530,7 +557,7 @@
 										/>
 									</a>
 									<div>
-										<b>Highest Rated Manga</b>
+										<b>{mediaTitle} Manga</b>
 										<ol>
 											{#each mangaList?.slice(0, highestRatedCount) as manga}
 												<li>
@@ -698,6 +725,11 @@
 							<a href={'#'} on:click={pruneFullYear}>Refresh data</a>
 						</SettingHint><br />
 						<p />
+						<select bind:value={mediaSort}>
+							<option value={SortOptions.SCORE}>Score</option>
+							<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched</option>
+						</select>
+						Anime and manga sort<br />
 						<select bind:value={genreTagsSort}>
 							<option value={SortOptions.SCORE}>Score</option>
 							<option value={SortOptions.MINUTES_WATCHED}>Minutes Watched</option>
-- 
cgit v1.2.3