242 lines
11 KiB
HTML
242 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>deemix.oat.zone</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
|
|
<script>
|
|
window.onload = () => {
|
|
const placeholders = [
|
|
'xilent - we are dust',
|
|
'joyryde - brave',
|
|
'phaseone - the risen ep',
|
|
'blanke & godlands - hellraiser',
|
|
'camellia - blackmagik blazing',
|
|
't+pazolite - without permission',
|
|
'the brig - vindicate',
|
|
'bossfight - next wave'
|
|
];
|
|
|
|
function download(url) {
|
|
console.log(url);
|
|
fetch(url)
|
|
.then(response => response.blob())
|
|
.then(blob => {
|
|
const link = document.createElement("a");
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = url.split('/').pop();
|
|
link.target = '_blank';
|
|
link.click();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
const search = document.getElementById('album-search');
|
|
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
|
|
search.addEventListener('change', async (e) => {
|
|
document.getElementById('progress-album').innerHTML = '';
|
|
document.getElementById('progress-bar-wrapper').innerHTML = '';
|
|
document.getElementById('albums').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
|
const d = await axios.get('http://localhost:4500/api/search', {params: {search: e.target.value}});
|
|
console.log(d);
|
|
document.getElementById('albums').innerHTML = d.data.map(d =>
|
|
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div>`
|
|
).join('<br>\n');
|
|
for (c of document.getElementById('albums').children) {
|
|
if (c.children[5]) {
|
|
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 = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
|
const ws = new WebSocket('ws://localhost:4500/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 = `<div class="album" id="album-${d.data.data.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${d.data.data.title}</span><br><span class="small">by ${d.data.data.artist}</span><br><span class="small" id="progress-state">${d.data.state}</span></div>`;
|
|
} else if (d.key === 'updateQueue') {
|
|
if (d.data.progress) {
|
|
document.getElementById('progress-bar-wrapper').innerHTML = `<br><div id="progress-bar"><div id="progress-bar-inner" style="height:100%;width:${d.data.progress}%"></div></div>`
|
|
}
|
|
} else if (d.key === 'coverArt') {
|
|
console.log(d.data);
|
|
coverArt = d.data;
|
|
} else if (d.key === 'download') {
|
|
download('http://localhost:4500' + d.data);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #0a0a0f;
|
|
color: #fff;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
#main {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
input {
|
|
margin: 5px;
|
|
width: 550px;
|
|
max-width: 98%;
|
|
padding: 15px;
|
|
font-size: x-large;
|
|
border: none;
|
|
background-color: #112;
|
|
color: #fff;
|
|
border-radius: 7px;
|
|
box-shadow: 0px 0px 15px #000;
|
|
border-bottom: 0rem solid rgb(131, 131, 243);
|
|
transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
|
|
}
|
|
|
|
input:focus, input:hover {
|
|
border-bottom: 0.25rem solid rgb(131, 131, 243);
|
|
background-color: #161626;
|
|
}
|
|
|
|
.album {
|
|
padding: 15px;
|
|
margin: 2px;
|
|
background-color: #161627;
|
|
font-size: large;
|
|
border-radius: 10px;
|
|
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);
|
|
height: 96px;
|
|
}
|
|
.album:hover {
|
|
border-left: 0.25rem solid rgb(131, 131, 243);
|
|
background-color: #181829;
|
|
}
|
|
.small {
|
|
font-size: medium;
|
|
color: #888;
|
|
}
|
|
.big {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#albums {
|
|
margin-top: 20px;
|
|
width: 600px;
|
|
max-width: 98%;
|
|
}
|
|
#progress {
|
|
width: 600px;
|
|
max-width: 98%;
|
|
}
|
|
.album-image {
|
|
width: auto;
|
|
height: 100%;
|
|
border-radius: 10px;
|
|
border: 0px solid rgb(131, 131, 243);
|
|
transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
|
|
margin: none;
|
|
padding: none;
|
|
box-shadow: 0px 0px 0px #000;
|
|
}
|
|
.album:hover .album-image {
|
|
border: 2px solid rgb(131, 131, 243);
|
|
box-shadow: 0px 0px 30px #000;
|
|
}
|
|
.album-image-wrapper {
|
|
border: 2px solid rgba(0, 0, 0, 0);
|
|
transition: 0.1s border ease-out;
|
|
float: right;
|
|
max-height: 100%;
|
|
width: 96px;
|
|
padding: none;
|
|
margin: none;
|
|
}
|
|
.album:hover .album-image-wrapper {
|
|
border: 0px solid rgba(0, 0, 0, 0);
|
|
}
|
|
.album-download {
|
|
position: relative;
|
|
top: 20px;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
transition: 0.1s filter ease-out;
|
|
filter: invert(100%);
|
|
}
|
|
.album-download:hover {
|
|
filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
|
|
}
|
|
.lds-ring {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.lds-ring div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 8px;
|
|
border: 8px solid #fed;
|
|
border-radius: 50%;
|
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: #fed transparent transparent transparent;
|
|
}
|
|
.lds-ring div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.lds-ring div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.lds-ring div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes lds-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#progress-bar {
|
|
background-color: #161627;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
height: 12px;
|
|
}
|
|
#progress-bar-inner {
|
|
background-color: rgb(131, 131, 243);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<span id="main">
|
|
<input type="search" id="album-search" name="q">
|
|
<div id="progress"><div id="progress-album"></div><div id="progress-bar-wrapper"></div></div>
|
|
<div id="albums"><div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/6a1d32f0417bb637ab690c6aa140abb5/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">The Risen EP</span><br><span class="small">by Phaseone</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/7305784fa30507f10c45814cc29acf07/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Scars EP</span><br><span class="small">by Dirtyphonics</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/7caad9d265bd66ca9e9ea6bd6b163ac5/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Touching The Stars</span><br><span class="small">by Phaseone</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/ded1430ebbecfc33e96a90e67624948e/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Dreamscape</span><br><span class="small">by Phaseone</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/c955807762a467505ecd47fd1f93c0e8/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Crash & Burn</span><br><span class="small">by PhaseOne, Northlane</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/db4667686d283fe1ac511de6e5a72eb0/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Double Up EP</span><br><span class="small">by In Hearts Wake</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div><br>
|
|
<div class="album"><span class="album-image-wrapper"><img class="album-image" src="https://e-cdns-images.dzcdn.net/images/cover/5ebd20c93cb10ca88c56f3ab07ccba10/128x128-000000-80-0-0.jpg" width="128" height="128"></span><span class="big">Dead Line EP</span><br><span class="small">by Phaseone</span><br><img class="album-download" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png" width="48" height="48"></div></div>
|
|
</span>
|
|
</body>
|
|
</html> |