diff options
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 44 |
1 files 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> |