Implement individual song download

src/components/Album.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { getTracks } from 'utils/search'
+import { getDownloadUrl, getTracks } from 'utils/search'
 
 import type { AlbumRow, TrackRow } from 'utils/types'
 import Loader from './Loader'
@@ -49,13 +49,13 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
       {tracks && open ? (
         <div className='track-list'>
           {tracks.map((t, i) => (
-            <div className='track'>
+            <div className='track' key={i}>
               <span className='track-name'>
                 <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} />
+              <TrackDownload url={t.url} lastReqRef={lastReqRef} />
             </div>
           ))}
         </div>
@@ -65,5 +65,27 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
 }
 
 function TrackDownload(props: { url: string; lastReqRef: React.RefObject<number> }) {
-  return <button className='download-btn'>Download</button>
+  const { url, lastReqRef } = props
+  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) => (
-          <Album album={r} lastReqRef={lastReqRef} />
+        {results.map((r, i) => (
+          <Album album={r} lastReqRef={lastReqRef} key={i} />
         ))}
       </div>
     </>

src/pages/index.astro

@@ -117,6 +117,7 @@ import Downloader from '../components/Downloader'
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s;
+    font-size: 13px;
   }
   .download-btn:hover {
     background-color: #218838;
@@ -153,12 +154,20 @@ 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;
     font-size: 1.1em;

src/utils/search.ts

@@ -75,3 +75,31 @@ 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]
+  }
+}