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

36
src/components/Album.tsx
View file

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

20
src/pages/index.astro
View file

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