ChitoWarlock/KHIDownloader-Astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add search and album loaders

Browse source
This commit is contained in:
Jorge Vargas 2025-03-10 18:56:09 -06:00
parent 5daf2dc6b9
commit 108b37dfe3
2 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/Album.tsx
View file

@ -2,14 +2,17 @@ import { useEffect, useState } from 'react'
import { getTracks } from 'utils/search'
import type { AlbumRow, TrackRow } from 'utils/types'
import Loader from './Loader'
export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObject<number> }) {
const { album, lastReqRef } = props
const [open, setOpen] = useState(false)
return (
<div className='album' onClick={() => setOpen((o) => !o)}>
<div className='album'>
<div className='album-title' onClick={() => setOpen((o) => !o)}>
<h3>{album.name}</h3>
</div>
<TrackList url={album.url} open={open} lastReqRef={lastReqRef} />
</div>
)
@ -18,10 +21,16 @@ export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObj
function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObject<number> }) {
const { url, open, lastReqRef } = props
const [tracks, setTracks] = useState<TrackRow[] | null>(null)
const [loading, setLoading] = useState(false)
async function fetchTracks() {
try {
setLoading(true)
const tracks = await getTracks(url, lastReqRef)
setTracks(tracks)
} finally {
setLoading(false)
}
}
useEffect(() => {
@ -31,19 +40,26 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
if (!open) return null
return (
<div className='trackList'>
{tracks
? tracks.map((t, i) => (
<div className='album-open'>
{loading ? (
<div className='loader-container'>
<Loader show />
</div>
) : null}
{tracks && open ? (
<div className='track-list'>
{tracks.map((t, i) => (
<div className='track'>
<span className='track-name'>
<span className='track-number'>{(i + 1).toString().padStart(2, '0').slice(-2)}.</span>
<span className='track-number'>{(i + 1).toString().padStart(2, '0').slice(-2)}. </span>
<span>{t.name}</span>
</span>
<span className='format-tag'>FLAC/MP3</span>
<TrackDownload url={url} lastReqRef={lastReqRef} />
</div>
))
: null}
))}
</div>
) : null}
</div>
)
}

20
src/pages/index.astro
View file

@ -57,7 +57,7 @@ import Downloader from '../components/Downloader'
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
margin: auto;
}
@keyframes spin {
0% {
@ -81,13 +81,13 @@ import Downloader from '../components/Downloader'
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.album {
.album-title {
padding: 15px;
border-bottom: 1px solid #333;
cursor: pointer;
transition: background 0.2s;
}
.album:hover {
.album-title:hover {
background-color: #333;
}
.track {
@ -136,10 +136,7 @@ import Downloader from '../components/Downloader'
text-align: center;
color: #858585;
}
.album-title {
font-weight: 500;
margin-bottom: 4px;
color: #e0e0e0;
.album {
}
.album-meta {
display: flex;
@ -163,10 +160,15 @@ import Downloader from '../components/Downloader'
background-color: #563d7c;
}
.results h3 {
padding: 0 15px;
margin: 0 0 15px 0;
margin: 0;
font-size: 1.1em;
}
.album-open {
background-color: #4a4a4a;
}
.album-open .loader-container {
padding: 6px;
}
</style>
<body>