evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added progress bar

Browse Source
This commit is contained in:
RemixDev 2020-04-10 23:04:05 +02:00
parent c9b3588105
commit 4fafed97a9
4 changed files with 119 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
public/css/progressbar.css Normal file
View File

@ -0,0 +1,110 @@
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: var(--secondary-background);
border-radius: 2px;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
}
.progress .determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--accent-color);
-webkit-transition: width .3s linear;
transition: width .3s linear;
}
.progress .indeterminate {
background-color: var(--accent-color);
}
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}

3
public/index.html
View File

@ -5,6 +5,7 @@
<title>deemix</title>
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
<link rel="stylesheet" type="text/css" href="/public/css/darkMode.css" name="darkMode" disabled/>
<link rel="stylesheet" type="text/css" href="/public/css/progressbar.css">
<link rel="stylesheet" type="text/css" href="/public/css/animate.css">
<link rel="stylesheet" type="text/css" href="/public/css/material-icons.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
@ -62,7 +63,7 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<td><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td>{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px;" class="clickable"100%><i class="material-icons">get_app</i></td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px;" class="clickable"><i class="material-icons">get_app</i></td>
</tr>
</table>
</div>

3
public/js/app.js
View File

@ -114,8 +114,7 @@ var mainSearch = new Vue({
if (section != "TOP_RESULT")
clickElement('search_'+section.toLowerCase()+'_tab')
},
addToQueue: function(url){socket.emit("addToQueue", {url: url})
console.log(url)}
addToQueue: function(url){socket.emit("addToQueue", {url: url})}
}
})

7
public/js/downloadList.js
View File

@ -16,16 +16,21 @@ socket.on("addedToQueue", function(queueItem){
<span class="download_line"><span class="queue_downloaded">0</span>/${queueItem.size}</span>
</div>
</div>
<div class="download_bar progress" id="bar-uuid"></div>
<div class="download_bar progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
</div>`)
})
socket.on("startDownload", function(uuid){
$('#bar_' + uuid).removeClass('indeterminate').addClass('determinate')
})
socket.on("updateQueue", function(update){
if (update.uuid && queue.indexOf(update.uuid) > -1){
console.log(update)
if (update.downloaded){
queueList[update.uuid].downloaded++
$("#download_"+update.uuid+" .queue_downloaded").text(queueList[update.uuid].downloaded)
$('#bar_' + update.uuid).css('width', ((queueList[update.uuid].downloaded + queueList[update.uuid].failed) / queueList[update.uuid].size)*100 + '%')
}
if (update.failed){
queueList[update.uuid].failed++