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);