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<number> }) {
   const { album, lastReqRef } = props
   const [open, setOpen] = useState(false)
 
   return (
-    <div className='album'>
+    <div className='album' onClick={() => setOpen((o) => !o)}>
-      <div className='album-title' onClick={() => setOpen((o) => !o)}>
+      <h3>{album.name}</h3>
-        <h3>{album.name}</h3>
-      </div>
       <TrackList url={album.url} open={open} lastReqRef={lastReqRef} />
     </div>
   )
@@ -21,16 +18,10 @@ 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 {
+    const tracks = await getTracks(url, lastReqRef)
-      setLoading(true)
+    setTracks(tracks)
-      const tracks = await getTracks(url, lastReqRef)
-      setTracks(tracks)
-    } finally {
-      setLoading(false)
-    }
   }
 
   useEffect(() => {
@@ -40,52 +31,23 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
   if (!open) return null
 
   return (
-    <div className='album-open'>
+    <div className='trackList'>
-      {loading ? (
+      {tracks
-        <div className='loader-container'>
+        ? tracks.map((t, i) => (
-          <Loader show />
+            <div className='track'>
-        </div>
-      ) : null}
-      {tracks && open ? (
-        <div className='track-list'>
-          {tracks.map((t, i) => (
-            <div className='track' key={i}>
               <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={t.url} lastReqRef={lastReqRef} />
+              <TrackDownload url={url} lastReqRef={lastReqRef} />
             </div>
-          ))}
+          ))
-        </div>
+        : null}
-      ) : null}
     </div>
   )
 }
 
 function TrackDownload(props: { url: string; lastReqRef: React.RefObject<number> }) {
-  const { url, lastReqRef } = props
+  return <button className='download-btn'>Download</button>
-  const [downloadUrl, setDownloadUrl] = useState<string>()
-  const [loading, setLoading] = useState(false)
-
-  async function fetchUrl() {
-    try {
-      setLoading(true)
-      const dlUrl = await getDownloadUrl(url, lastReqRef)
-      setDownloadUrl(dlUrl)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return downloadUrl ? (
-    <a className='download-btn' href={downloadUrl} target='_blank' rel='noopener noreferrer' download>
-      Download
-    </a>
-  ) : (
-    <button className='download-btn' disabled={loading} onClick={fetchUrl}>
-      {loading ? <Loader show /> : 'Download'}
-    </button>
-  )
 }

src/components/Downloader.tsx

@@ -53,8 +53,8 @@ export default function Downloader() {
         </div>
       ) : null}
       <div className='results'>
-        {results.map((r, i) => (
+        {results.map((r) => (
-          <Album album={r} lastReqRef={lastReqRef} key={i} />
+          <Album album={r} lastReqRef={lastReqRef} />
         ))}
       </div>
     </>

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;
-  }
 </style>
 
 <body>

src/utils/search.ts

@@ -67,7 +67,7 @@ export async function getTracks(url: string, lastReqRef: React.RefObject<number>
       : `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<number>
 
   return tracks
 }
-
-export async function getDownloadUrl(trackPageUrl: string, lastReqRef: React.RefObject<number>) {
-  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]
-  }
-}