Added progress bar

public/css/progressbar.css

@@ -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%;
+  }
+}

public/index.html

@@ -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>

public/js/app.js

@@ -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})
+		addToQueue: function(url){socket.emit("addToQueue", {url: url})}
-	console.log(url)}
 	}
 })
 

public/js/downloadList.js

@@ -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++