diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/List/Anime/AnimeListTemplate.svelte | 3 | ||||
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 19 | ||||
| -rw-r--r-- | src/lib/List/ListTitle.svelte | 4 |
3 files changed, 22 insertions, 4 deletions
diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte index ae7ee1f1..5d769640 100644 --- a/src/lib/List/Anime/AnimeListTemplate.svelte +++ b/src/lib/List/Anime/AnimeListTemplate.svelte @@ -34,6 +34,7 @@ export let limit: number | undefined = undefined; let lastUpdatedMedia = -1; let previousAnimeList: Media[]; +let previousCount: number | undefined; let pendingUpdate: number | null = null; let lastListSize = 8; @@ -74,6 +75,7 @@ onMount(async () => { {notYetReleased} {upcoming} bind:previousAnimeList + bind:previousCount bind:pendingUpdate {dummy} {disableFilter} @@ -97,6 +99,7 @@ onMount(async () => { {notYetReleased} {upcoming} bind:previousAnimeList + bind:previousCount bind:pendingUpdate {dummy} {disableFilter} diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 0bc88489..f2077d20 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -30,6 +30,7 @@ export let endTime: number; export let lastUpdatedMedia: number; export let completed = false; export let previousAnimeList: Media[]; +export let previousCount: number | undefined = undefined; export let pendingUpdate: number | null; export let upcoming = false; export let notYetReleased = false; @@ -37,6 +38,12 @@ export let dummy = false; export let disableFilter = false; export let limit: number | undefined = undefined; +// This list remounts on every revalidation (the {#await} branch swaps), +// which resets the count ticker's tween. Snapshot the count the user last +// saw so the ticker animates from it — ticking down when an item leaves, +// up when one arrives — instead of always counting up from zero. +const startCount = previousCount; + let showRoulette = false; let airingRefreshTimeout: ReturnType<typeof setTimeout> | undefined; let scheduledAiringAt: number | null = null; @@ -111,6 +118,13 @@ $: filteredMedia = ? media : media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]); +$: displayedCount = + $settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes + ? totalEpisodeDueCount + : filteredMedia.length; + +$: previousCount = displayedCount; + $: if (browser && !dummy && media && previousAnimeList !== media) previousAnimeList = media; @@ -241,9 +255,8 @@ const increment = (anime: Media, progress: number) => { <ListTitle time={endTime / 1000} - count={$settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes - ? totalEpisodeDueCount - : filteredMedia.length} + count={displayedCount} + start={startCount ?? 0} {title} hideTime={dummy} hideCount={dummy || media.length === 0} diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte index f24476fe..2ccb591d 100644 --- a/src/lib/List/ListTitle.svelte +++ b/src/lib/List/ListTitle.svelte @@ -6,6 +6,7 @@ import type { Title } from "./mediaTitle"; export let time: number | undefined = undefined; export let count = -1337; +export let start = 0; export let title: Title = { title: "Media List", hint: "This is a media list.", @@ -20,8 +21,9 @@ export let hideCount = false; {#if !hideCount} <span class="opaque list-title-count"> {#if count === -1337}...{:else}<NumberTicker + {start} end={count} - duration={Math.min(2500, Math.max(500, Math.abs(count) * 10))} + duration={Math.min(2500, Math.max(500, Math.abs(count - start) * 10))} />{/if} </span> {/if} |