From a36ee4dbc92e70aa3ec16af35b8c5e5da1370e87 Mon Sep 17 00:00:00 2001 From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com> Date: Thu, 5 May 2022 01:07:31 +0200 Subject: [PATCH] feat: allow changing search parameters for preset values, improve performance on infinite scrolling [a lot] --- src/renderer/src/lib/pages/home/Cards.svelte | 3 +- .../src/lib/pages/home/Gallery.svelte | 18 +++--- src/renderer/src/lib/pages/home/Home.svelte | 60 ++++++++++++------- src/renderer/src/lib/pages/home/Search.svelte | 11 ++-- src/renderer/src/modules/anilist.js | 2 +- 5 files changed, 55 insertions(+), 39 deletions(-) diff --git a/src/renderer/src/lib/pages/home/Cards.svelte b/src/renderer/src/lib/pages/home/Cards.svelte index 2302adf..7b0ec7e 100644 --- a/src/renderer/src/lib/pages/home/Cards.svelte +++ b/src/renderer/src/lib/pages/home/Cards.svelte @@ -6,10 +6,11 @@ function viewMedia(media) { $view = media } + export let length = 5 {#await cards} - {#each Array(5) as _} + {#each Array(length) as _}
diff --git a/src/renderer/src/lib/pages/home/Gallery.svelte b/src/renderer/src/lib/pages/home/Gallery.svelte index 9e610f2..a84f185 100644 --- a/src/renderer/src/lib/pages/home/Gallery.svelte +++ b/src/renderer/src/lib/pages/home/Gallery.svelte @@ -6,13 +6,16 @@ let loading = true async function update(med) { loading = true - await med - if (med === media) loading = false + const index = med.length - 1 + await med[index] + if (index === med.length - 1) loading = false }
- + {#each media as cards, i (i)} + + {/each}
diff --git a/src/renderer/src/lib/pages/home/Home.svelte b/src/renderer/src/lib/pages/home/Home.svelte index e1c53a8..b13127f 100644 --- a/src/renderer/src/lib/pages/home/Home.svelte +++ b/src/renderer/src/lib/pages/home/Home.svelte @@ -8,31 +8,46 @@ import { resolveFileMedia } from '@/modules/anime.js' import { getRSSContent, getReleasesRSSurl } from '@/lib/RSSView.svelte' - let media = null + let media = [] let search = {} export let current = null let page = 1 let canScroll = true let hasNext = true + let container = null + + function sanitiseObject(object) { + const safe = {} + for (const [key, value] of Object.entries(object)) { + if (value) safe[key] = value + } + return safe + } async function infiniteScroll() { if (current && canScroll && hasNext && this.scrollTop + this.clientHeight > this.scrollHeight - 800) { canScroll = false - const res = await sections[current].load(++page) - media = media.then(old => { - return old.concat(res) - }) + const res = sections[current].load(++page) + media.push(res) + media = media + await res canScroll = hasNext } } $: load(current) - function load(current) { + async function load(current) { + console.log(current) if (sections[current]) { page = 1 - media = sections[current].load(1) + canScroll = false + const res = sections[current].load(1) + media = [res] + await res + canScroll = hasNext } else { - media = null + if (container) container.scrollTop = 0 + media = [] canScroll = true lastDate = null search = { @@ -80,6 +95,7 @@ continue: { title: 'Continue Watching', load: (page = 1, perPage = 50) => { + if (perPage !== 5) search.sort = 'UPDATED_TIME_DESC' return alRequest({ method: 'UserLists', status_in: 'CURRENT', page }).then(res => { hasNext = res?.data?.Page.pageInfo.hasNextPage return res?.data?.Page.mediaList @@ -95,12 +111,14 @@ title: 'New Releases', releases: true, load: (page = 1, perPage = 20, force = true) => { + if (perPage !== 5) search.sort = 'START_DATE_DESC' return releasesCards(page, perPage, force) } }, planning: { title: 'Your List', load: (page = 1, perPage = 50) => { + if (perPage !== 5) search.sort = 'UPDATED_TIME_DESC' return alRequest({ method: 'UserLists', page, perPage, status_in: 'PLANNING' }).then(res => { hasNext = res?.data?.Page.pageInfo.hasNextPage return res?.data?.Page.mediaList @@ -111,10 +129,8 @@ trending: { title: 'Trending Now', load: (page = 1, perPage = 50) => { - if (perPage !== 5) { - search.sort = 'TRENDING_DESC' - } - return alRequest({ method: 'Search', page, perPage, sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + if (perPage !== 5) search.sort = 'TRENDING_DESC' + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, romance: { @@ -124,7 +140,7 @@ search.sort = 'TRENDING_DESC' search.genre = 'romance' } - return alRequest({ method: 'Search', page, perPage, genre: 'Romance', sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, action: { @@ -134,7 +150,7 @@ search.sort = 'TRENDING_DESC' search.genre = 'action' } - return alRequest({ method: 'Search', page, perPage, genre: 'Action', sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, adventure: { @@ -144,7 +160,7 @@ search.sort = 'TRENDING_DESC' search.genre = 'adventure' } - return alRequest({ method: 'Search', page, perPage, genre: 'Adventure', sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, fantasy: { @@ -154,7 +170,7 @@ search.sort = 'TRENDING_DESC' search.genre = 'fantasy' } - return alRequest({ method: 'Search', page, perPage, genre: 'Fantasy', sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, comedy: { @@ -164,7 +180,7 @@ search.sort = 'TRENDING_DESC' search.genre = 'comedy' } - return alRequest({ method: 'Search', page, perPage, genre: 'Comedy', sort: 'TRENDING_DESC' }).then(res => processMedia(res)) + return alRequest({ method: 'Search', page, perPage, ...sanitiseObject(search) }).then(res => processMedia(res)) } }, schedule: { @@ -200,10 +216,8 @@ const opts = { method: 'Search', page, - perPage - } - for (const [key, value] of Object.entries(search)) { - if (value) opts[key] = value + perPage, + ...sanitiseObject(search) } return alRequest(opts).then(res => processMedia(res)) } @@ -211,10 +225,10 @@ } -
+
- {#if media} + {#if media.length} {:else}
diff --git a/src/renderer/src/lib/pages/home/Search.svelte b/src/renderer/src/lib/pages/home/Search.svelte index 8aca109..4120076 100644 --- a/src/renderer/src/lib/pages/home/Search.svelte +++ b/src/renderer/src/lib/pages/home/Search.svelte @@ -16,13 +16,14 @@ } function input() { if (!searchTimeout) { - if (Object.values(search).filter(v => v).length) media = new Promise(() => {}) + if (Object.values(search).filter(v => v).length) media = [new Promise(() => {})] } else { clearTimeout(searchTimeout) } searchTimeout = setTimeout(() => { + const old = current current = null - if (Object.values(search).filter(v => v).length) current = 'search' + if (Object.values(search).filter(v => v).length) current = old || 'search' searchTimeout = null }, 500) } @@ -135,11 +136,13 @@ +
- +
diff --git a/src/renderer/src/modules/anilist.js b/src/renderer/src/modules/anilist.js index 9dbb9bf..58f40a1 100644 --- a/src/renderer/src/modules/anilist.js +++ b/src/renderer/src/modules/anilist.js @@ -342,7 +342,7 @@ query ($page: Int, $perPage: Int, $sort: [MediaSort], $type: MediaType, $search: pageInfo { hasNextPage }, - media(type: $type, search: $search, sort: $sort, status: $status, season: $season, seasonYear: $year, genre: $genre, format: $format, isAdult: false) { + media(type: $type, search: $search, sort: $sort, status: $status, season: $season, seasonYear: $year, genre: $genre, format: $format) { ${queryObjects} } }