diff --git a/public/index.html b/public/index.html index c01e8fb..90594c9 100644 --- a/public/index.html +++ b/public/index.html @@ -58,12 +58,14 @@ const search = document.getElementById('album-search'); search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]); - search.addEventListener('change', async (e) => { - if (e.target.value === '') return document.getElementById('albums').innerHTML = ''; + + async function change(e) { + const value = document.getElementById('album-search').value; + if (value === '') return document.getElementById('albums').innerHTML = ''; document.getElementById('progress-album').innerHTML = ''; document.getElementById('progress-bar-wrapper').innerHTML = ''; document.getElementById('albums').innerHTML = '
'; - const d = await axios.get('/api/search', {params: {search: e.target.value}}); + const d = await axios.get('/api/search', {params: {search: value}}); document.getElementById('albums').innerHTML = d.data.map(d => `
${d.title}
by ${d.artist.name}
` ).join('
'); @@ -102,9 +104,40 @@ document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d => `
${d.artist} - ${d.title} ${formatTime(d.duration)}
` ).join(''); + for (track of document.getElementById('album-bottom-' + id).children) { + let trackId = track.id.split('-')[1]; + track.children[1].children[0].onclick = () => { + console.log(trackId); + + let coverArt + document.getElementById('albums').innerHTML = ''; + document.getElementById('progress-album').innerHTML = '
'; + const ws = new WebSocket('wss://deemix.oat.zone/api/track?id=' + trackId); + ws.onmessage = (m) => { + const d = JSON.parse(m.data); + console.log(d); + + if (d.key === 'downloadInfo') { + document.getElementById('progress-album').innerHTML = `
${d.data.data.title}
by ${d.data.data.artist}
${d.data.state}
`; + } else if (d.key === 'updateQueue') { + if (d.data.progress) { + document.getElementById('progress-bar-wrapper').innerHTML = `
` + } + } else if (d.key === 'coverArt') { + coverArt = d.data; + } else if (d.key === 'download') { + download(d.data); + } else if (d.key === 'finishDownload') { + change(); + } + } + } + } } } - }); + } + + search.addEventListener('change', change); };