diff --git a/src/components/Album.tsx b/src/components/Album.tsx index a5ada66..58104ea 100644 --- a/src/components/Album.tsx +++ b/src/components/Album.tsx @@ -1,18 +1,15 @@ import { useEffect, useState } from 'react' -import { getDownloadUrl, getTracks } from 'utils/search' +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 }) { const { album, lastReqRef } = props const [open, setOpen] = useState(false) return ( -
-
setOpen((o) => !o)}> -

{album.name}

-
+
setOpen((o) => !o)}> +

{album.name}

) @@ -21,16 +18,10 @@ export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObj function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObject }) { const { url, open, lastReqRef } = props const [tracks, setTracks] = useState(null) - const [loading, setLoading] = useState(false) async function fetchTracks() { - try { - setLoading(true) - const tracks = await getTracks(url, lastReqRef) - setTracks(tracks) - } finally { - setLoading(false) - } + const tracks = await getTracks(url, lastReqRef) + setTracks(tracks) } useEffect(() => { @@ -40,52 +31,23 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj if (!open) return null return ( -
- {loading ? ( -
- -
- ) : null} - {tracks && open ? ( -
- {tracks.map((t, i) => ( -
+
+ {tracks + ? tracks.map((t, i) => ( +
- {(i + 1).toString().padStart(2, '0').slice(-2)}. + {(i + 1).toString().padStart(2, '0').slice(-2)}. {t.name} FLAC/MP3 - +
- ))} -
- ) : null} + )) + : null}
) } function TrackDownload(props: { url: string; lastReqRef: React.RefObject }) { - const { url, lastReqRef } = props - const [downloadUrl, setDownloadUrl] = useState() - const [loading, setLoading] = useState(false) - - async function fetchUrl() { - try { - setLoading(true) - const dlUrl = await getDownloadUrl(url, lastReqRef) - setDownloadUrl(dlUrl) - } finally { - setLoading(false) - } - } - - return downloadUrl ? ( - - Download - - ) : ( - - ) + return } diff --git a/src/components/Downloader.tsx b/src/components/Downloader.tsx index 9f2aaaa..13feb1c 100644 --- a/src/components/Downloader.tsx +++ b/src/components/Downloader.tsx @@ -53,8 +53,8 @@ export default function Downloader() {
) : null}
- {results.map((r, i) => ( - + {results.map((r) => ( + ))}
diff --git a/src/pages/index.astro b/src/pages/index.astro index a4a7a43..bd07ed1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -57,7 +57,7 @@ import Downloader from '../components/Downloader' width: 30px; height: 30px; animation: spin 1s linear infinite; - margin: auto; + margin: 20px 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-title { + .album { padding: 15px; border-bottom: 1px solid #333; cursor: pointer; transition: background 0.2s; } - .album-title:hover { + .album:hover { background-color: #333; } .track { @@ -117,7 +117,6 @@ import Downloader from '../components/Downloader' border-radius: 4px; cursor: pointer; transition: background 0.2s; - font-size: 13px; } .download-btn:hover { background-color: #218838; @@ -137,7 +136,10 @@ import Downloader from '../components/Downloader' text-align: center; color: #858585; } - .album { + .album-title { + font-weight: 500; + margin-bottom: 4px; + color: #e0e0e0; } .album-meta { display: flex; @@ -154,30 +156,17 @@ import Downloader from '../components/Downloader' display: flex; gap: 8px; } - a.download-btn { - text-decoration: none; - } .download-btn.flac { background-color: #6f42c1; } .download-btn.flac:hover { background-color: #563d7c; } - .download-btn .loader { - height: 8px; - width: 8px; - margin: 2px 8px; - } .results h3 { - margin: 0; + padding: 0 15px; + margin: 0 0 15px 0; font-size: 1.1em; } - .album-open { - background-color: #4a4a4a; - } - .album-open .loader-container { - padding: 6px; - } diff --git a/src/utils/search.ts b/src/utils/search.ts index 1b0eaef..4679e0a 100644 --- a/src/utils/search.ts +++ b/src/utils/search.ts @@ -67,7 +67,7 @@ export async function getTracks(url: string, lastReqRef: React.RefObject : `https://downloads.khinsider.com${link.attr('href')}` tracks.push({ - name: link.first().text().trim(), + name: link.text().trim(), url: trackUrl, format: link.attr('href')!.toLowerCase().endsWith('.flac') ? 'flac' : 'mp3' }) @@ -75,31 +75,3 @@ export async function getTracks(url: string, lastReqRef: React.RefObject return tracks } - -export async function getDownloadUrl(trackPageUrl: string, lastReqRef: React.RefObject) { - const trackPageHtml = await (await politeFetch(trackPageUrl, lastReqRef)).text() - const $ = cheerio.load(trackPageHtml) - - const audioLinks: string[] = [] - - $('a[href$=".mp3"], a[href$=".flac"]').each((index, link) => { - let href = $(link).attr('href') - if (!href) return - - href = decodeURIComponent(href) - if (!href.startsWith('http')) { - href = `https://downloads.khinsider.com${href}` - } - audioLinks.push(href) - }) - - const flacLinks = audioLinks.filter((link) => link.endsWith('.flac')) - if (flacLinks.length > 0) { - return flacLinks[0] - } - - const mp3Links = audioLinks.filter((link) => link.endsWith('.mp3')) - if (mp3Links.length > 0) { - return mp3Links[0] - } -}