diff --git a/public/index.html b/public/index.html
index cb0582a..63f9bb0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,6 +31,10 @@
.catch(console.error);
}
+ function formatTime(s) {
+ return Math.floor(s / 60).toString().padStart(2, '0') + ':' + (s % 60).toString().padStart(2, '0');
+ }
+
const search = document.getElementById('album-search');
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
search.addEventListener('change', async (e) => {
@@ -39,10 +43,9 @@
document.getElementById('progress-bar-wrapper').innerHTML = '';
document.getElementById('albums').innerHTML = '
';
const d = await axios.get('/api/search', {params: {search: e.target.value}});
- console.log(d);
document.getElementById('albums').innerHTML = d.data.map(d =>
- `
${d.title}by ${d.artist.name}![](https://img.icons8.com/material-sharp/48/000000/download--v1.png)
`
- ).join('
\n');
+ `
${d.title}by ${d.artist.name}![](https://img.icons8.com/material-sharp/48/000000/download--v1.png)
`
+ ).join('
');
if (d.data.length === 0) return document.getElementById('albums').innerHTML = 'Not found!';
@@ -51,13 +54,11 @@
let id = c.id.split('-')[1];
c.children[5].onclick = (a) => {
let coverArt
- console.log(id);
document.getElementById('albums').innerHTML = '';
document.getElementById('progress-album').innerHTML = '';
const ws = new WebSocket('wss://deemix.oat.zone/api/album?id=' + id);
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} `;
@@ -66,7 +67,6 @@
document.getElementById('progress-bar-wrapper').innerHTML = `
`
}
} else if (d.key === 'coverArt') {
- console.log(d.data);
coverArt = d.data;
} else if (d.key === 'download') {
download(d.data);
@@ -74,6 +74,14 @@
}
}
}
+ let id = c.id.split('-')[1];
+ if (document.getElementById('album-bottom-' + id)) {
+ document.getElementById('album-bottom-' + id).innerHTML = '';
+ const album = await axios.get('/api/album', {params: {id: id}});
+ document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
+ `${d.artist} - ${d.title}${formatTime(d.duration)}
`
+ ).join('');
+ }
}
});
};
@@ -117,7 +125,7 @@
margin: 2px;
background-color: #161627;
font-size: large;
- border-radius: 10px;
+ border-radius: 10px 10px 0px 0px;
box-shadow: 0px 0px 12px #000;
transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
border-left: 0rem solid rgb(131, 131, 243);
@@ -170,6 +178,14 @@
.album:hover .album-image-wrapper {
border: 0px solid rgba(0, 0, 0, 0);
}
+ .link {
+ color:rgb(131, 131, 243);
+ cursor: pointer;
+ transition: 0.1s color ease-out;
+ }
+ .link:hover {
+ color:rgb(151, 151, 263);
+ }
.album-download {
position: relative;
top: 20px;
@@ -228,6 +244,39 @@
background-color: rgb(131, 131, 243);
border-radius: 10px;
}
+
+ .album-bottom {
+ padding: 0px;
+ margin-left: 2px;
+ margin-right: 2px;
+ background-color: #112;
+ border-radius: 0px 0px 10px 10px;
+ transition: 0.1s border-left ease-out;
+ border-left: 0rem solid rgb(131, 131, 243);
+ }
+ .album:hover .album-bottom {
+ border-left: 0.25rem solid rgb(131, 131, 243);
+ }
+ .track {
+ padding: 10px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ margin: none;
+ border-bottom: 3px solid #0a0a0f;
+ display: flex;
+ justify-content: space-between;
+ font-size: large;
+ transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
+ border-left: 0rem solid rgb(131, 131, 243);
+ }
+ .track:nth-last-child(1) {
+ border-bottom: none;
+ border-radius: 0px 0px 15px 15px;
+ }
+ .track:hover {
+ background-color: #161627;
+ border-left: 0.25rem solid rgb(131, 131, 243);
+ }