From 93c530e5e75f16ad268941c99f573fd52e2ed8ea Mon Sep 17 00:00:00 2001 From: "Jill \"oatmealine\" Monoids" Date: Wed, 20 Oct 2021 17:41:10 +0300 Subject: [PATCH] updated download screen --- public/index.css | 21 +++++++++++ public/index.js | 97 ++++++++++++++++++++++++++---------------------- src/index.js | 8 ++-- 3 files changed, 78 insertions(+), 48 deletions(-) diff --git a/public/index.css b/public/index.css index eba7bed..0eda3e3 100644 --- a/public/index.css +++ b/public/index.css @@ -82,6 +82,9 @@ .slider { background-color: rgb(131, 131, 243); } + #progress-state { + background-color: #0a0a0f; + } } @media (prefers-color-scheme: light) { body { @@ -167,6 +170,9 @@ #git { filter: invert(100%); } + #progress-state { + background-color: #fafafa; + } } body { @@ -397,4 +403,19 @@ input:checked + .slider:before { } #header-left > * { margin-right: 16px; +} + +#progress-state { + font-family: monospace; + font-size: 12px; + max-height: 50px; + border-radius: 10px; + overflow: auto; + width: 60%; + margin-top: 5px; + padding: 2px; +} + +.album-downloading { + border-radius: 10px; } \ No newline at end of file diff --git a/public/index.js b/public/index.js index 3296985..14d6bb5 100644 --- a/public/index.js +++ b/public/index.js @@ -28,7 +28,7 @@ function setTheme(theme) { if (e.constructor != CSSMediaRule) return; if (e.originalConditionText) e.conditionText = e.originalConditionText; else e.originalConditionText = e.conditionText - if (theme == "system") return + if (theme === 'system') return let match = e.conditionText.match(/prefers-color-scheme:\s*(light|dark)/i) if (!match) return; e.conditionText = e.conditionText.replace(match[0], (match[1].toLowerCase() == theme ? 'min' : 'max') + '-width: 0') @@ -36,9 +36,56 @@ function setTheme(theme) { } function getWebsocketLocation() { - return window.window.location.replace('https://', 'wss://').replace('http://', 'ws://'); + return window.window.location.toString().replace('https://', 'wss://').replace('http://', 'ws://'); } +function addlog(log, text) { + log += `
${text}`; + log = log.split('
').slice(-3).join('
'); + if (log.startsWith('
')) log = log.replace('
', ''); + return log; +} + +function startDownload(id, isAlbum) { + let log = ''; + + let coverArt; + let title; + let artist; + + let type = isAlbum ? 'album' : 'track' + document.getElementById('albums').innerHTML = ''; + document.getElementById('progress-album').innerHTML = '
'; + const ws = new WebSocket(`${getWebsocketLocation()}api/${type}?id=${id}`); + ws.onmessage = (m) => { + const d = JSON.parse(m.data); + console.log(d); + if (d.key === 'downloadInfo') { + log = addlog(log, `[${d.data.data.title}] ${d.data.state}`); + } else if (d.key === 'updateQueue') { + if (d.data.progress) { + document.getElementById('progress-bar-wrapper').innerHTML = `
` + } + } else if (d.key === 'coverArt') { + log = addlog(log, 'Fetched cover art'); + coverArt = d.data; + } else if (d.key === 'metadata') { + log = addlog(log, 'Fetched metadata'); + title = d.data.title; + artist = d.data.artist; + } else if (d.key === 'download') { + download(d.data); + } else if (d.key === 'finishDownload') { + //change(); + return; + } + + document.getElementById('progress-album').innerHTML = `
${title || ''}
by ${artist || ''}
${log || ''}
`; + } +} + +let change; // fuck off js + window.onload = () => { // dirty theme hacks :tm: @@ -72,7 +119,7 @@ window.onload = () => { const search = document.getElementById('album-search'); search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]); - async function change() { + change = async () => { const value = document.getElementById('album-search').value; if (value === '') return document.getElementById('albums').innerHTML = ''; document.getElementById('progress-album').innerHTML = ''; @@ -89,25 +136,7 @@ window.onload = () => { if (c.children[5]) { let id = c.id.split('-')[1]; c.children[5].onclick = (a) => { - let coverArt - document.getElementById('albums').innerHTML = ''; - document.getElementById('progress-album').innerHTML = '
'; - const ws = new WebSocket(getWebsocketLocation() + 'api/album?id=' + id); - ws.onmessage = (m) => { - const d = JSON.parse(m.data); - - 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); - } - } + startDownload(id, true); } } let id = c.id.split('-')[1]; @@ -121,29 +150,7 @@ window.onload = () => { 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(getWebsocketLocation() + '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(); - } - } + startDownload(trackId, false); } } } diff --git a/src/index.js b/src/index.js index 6cc9190..6eb5e7f 100644 --- a/src/index.js +++ b/src/index.js @@ -97,7 +97,7 @@ app.ws('/api/album', async (ws, req) => { }, 1000 * 60 * 60 /* 1 hour */); } - ws.send(JSON.stringify({key, data})); + if (data.state !== 'tagging' && data.state !== 'getAlbumArt' && data.state !== 'getTags') ws.send(JSON.stringify({key, data})); //console.log(`[${key}] ${inspect(data)}`); } }; @@ -110,6 +110,7 @@ app.ws('/api/album', async (ws, req) => { } listener.send('coverArt', album.cover_medium); + listener.send('metadata', {id: album.id, title: album.title, artist: album.artist.name}); let dlObj = await deemix.generateDownloadObject(deezerInstance, 'https://www.deezer.com/album/' + req.query.id, deezer.TrackFormats.FLAC); deemixDownloader = new deemix.downloader.Downloader(deezerInstance, dlObj, deemixSettings, listener); @@ -135,8 +136,8 @@ app.ws('/api/track', async (ws, req) => { }, 1000 * 60 * 60 /* 1 hour */); } - ws.send(JSON.stringify({key, data})); - console.log(`[${key}] ${inspect(data)}`); + if (data.state !== 'tagging' && data.state !== 'getAlbumArt' && data.state !== 'getTags') ws.send(JSON.stringify({key, data})); + //console.log(`[${key}] ${inspect(data)}`); } }; @@ -148,6 +149,7 @@ app.ws('/api/track', async (ws, req) => { } listener.send('coverArt', track.album.cover_medium); + listener.send('metadata', {id: track.id, title: track.title, artist: track.artist.name}); let dlObj = await deemix.generateDownloadObject(deezerInstance, 'https://www.deezer.com/track/' + req.query.id, deezer.TrackFormats.FLAC); deemixDownloader = new deemix.downloader.Downloader(deezerInstance, dlObj, deemixSettings, listener);