pagination
This commit is contained in:
parent
79eb457248
commit
f5a413cd99
|
@ -12,8 +12,13 @@
|
|||
|
||||
let loading = false;
|
||||
|
||||
let searchAlbums = [];
|
||||
let total;
|
||||
let next;
|
||||
let query;
|
||||
|
||||
async function search(event) {
|
||||
const query = event.target.value;
|
||||
query = event.target.value;
|
||||
|
||||
searchAlbums = [];
|
||||
loading = true;
|
||||
|
@ -24,14 +29,33 @@
|
|||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
loading = false;
|
||||
searchAlbums = data;
|
||||
searchAlbums = data.data;
|
||||
total = data.total;
|
||||
next = data.next;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let searchAlbums = [];
|
||||
async function searchMore() {
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
let url = dev ? (new URL('http://localhost:4500/api/search')) : (new URL('/api/search', window.location.origin));
|
||||
url.searchParams.set('search', query);
|
||||
url.searchParams.set('index', next);
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
loading = false;
|
||||
searchAlbums = [...searchAlbums, ...data.data];
|
||||
total = data.total;
|
||||
next = data.next;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<SvelteToast options={{
|
||||
|
@ -45,15 +69,21 @@
|
|||
<span class="main">
|
||||
<Header/>
|
||||
<Search onChange={search}/>
|
||||
{#if loading}
|
||||
<Loading/>
|
||||
{/if}
|
||||
{#if searchAlbums.length > 0}
|
||||
<div class="albums">
|
||||
{#each searchAlbums as album, i}
|
||||
<Album title={album.title} id={album.id} cover={album.cover} artist={album.artist}/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if total > searchAlbums.length}
|
||||
<div style="padding: 1.5em">
|
||||
<button on:click={searchMore}>Load more</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if loading}
|
||||
<Loading/>
|
||||
{/if}
|
||||
</span>
|
||||
</main>
|
||||
|
|
|
@ -23,6 +23,14 @@ body {
|
|||
color: rgb(151, 151, 255);
|
||||
filter: drop-shadow( 0px 0px 2px #8383F3);
|
||||
}
|
||||
button {
|
||||
background-color: #161627;
|
||||
color: #fff;
|
||||
border-color: #161627;
|
||||
}
|
||||
button:hover {
|
||||
border-color: rgb(131, 131, 243);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
|
@ -40,6 +48,14 @@ body {
|
|||
color: #f484b6;
|
||||
filter: drop-shadow( 0px 0px 2px #f484b6);
|
||||
}
|
||||
button {
|
||||
background-color: #ffffff;
|
||||
color: #1e1e2d;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #ea74ac;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -57,4 +73,14 @@ body {
|
|||
.link {
|
||||
cursor: pointer;
|
||||
transition: 0.1s color ease-out;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-width: 2px;
|
||||
border-radius: 8px;
|
||||
border-style: solid;
|
||||
font-size: large;
|
||||
padding: 0.25em;
|
||||
transition: 0.1s border-color ease-out;
|
||||
}
|
|
@ -24,13 +24,15 @@ router.get('/api/album', async (req, res) => {
|
|||
id: album.id,
|
||||
title: album.title,
|
||||
link: album.link,
|
||||
releaseDate: album.release_date,
|
||||
explicitCover: album.explicit_content_cover,
|
||||
tracks: album.tracks.data.map(t => {
|
||||
return {
|
||||
id: t.id,
|
||||
title: t.title,
|
||||
duration: t.duration,
|
||||
link: t.link,
|
||||
artist: t.artist.name,
|
||||
artist: t.artist.name
|
||||
};
|
||||
})
|
||||
});
|
||||
|
|
|
@ -12,19 +12,22 @@ router.get('/api/search', async (req, res) => {
|
|||
if (Array.isArray(req.query.search)) req.query.search = req.query.search.join('');
|
||||
req.query.search = req.query.search as string;
|
||||
|
||||
let s: [Album];
|
||||
let s: DeezerResponse<[Album]>;
|
||||
try {
|
||||
s = searchcache[req.query.search] || (await deezerInstance.api.search_album(req.query.search, {
|
||||
s = searchcache[req.query.search+'/'+req.query.index] || (await deezerInstance.api.search_album(req.query.search, {
|
||||
limit: config.limits.searchLimit || 15,
|
||||
})).data;
|
||||
index: parseInt(req.query.index as string) || undefined
|
||||
}));
|
||||
} catch(err) {
|
||||
logger.error((err as Error).toString());
|
||||
return res.sendStatus(500);
|
||||
}
|
||||
if (!searchcache[req.query.search]) searchcache[req.query.search] = s;
|
||||
searchcache[req.query.search+'/'+req.query.index] = s;
|
||||
|
||||
let format = s.map(s => {
|
||||
return {
|
||||
let format = {
|
||||
next: s.next && s.next.split('=').pop(), // dumb workaround of having to use regexes because i hate regexes
|
||||
total: s.total,
|
||||
data: s.data.map(s => ({
|
||||
id: s.id,
|
||||
title: s.title,
|
||||
cover: s.md5_image,
|
||||
|
@ -32,8 +35,8 @@ router.get('/api/search', async (req, res) => {
|
|||
id: s.artist.id,
|
||||
name: s.artist.name
|
||||
},
|
||||
};
|
||||
});
|
||||
}))
|
||||
};
|
||||
|
||||
res.send(format);
|
||||
});
|
||||
|
|
|
@ -10,7 +10,7 @@ import { deezerInstance } from './deemix';
|
|||
|
||||
export const port = config.server.port || 4500;
|
||||
|
||||
export let searchcache: Record<string, [Album]> = {};
|
||||
export let searchcache: Record<string, DeezerResponse<[Album]>> = {};
|
||||
export let albumcache: Record<string, Album> = {};
|
||||
export let trackcache: Record<string, Track> = {};
|
||||
|
||||
|
|
Loading…
Reference in New Issue