Added clear and cancel queue buttons

public/css/style.css

@@ -427,3 +427,6 @@ input[type="text"], input[type="password"], input[type="number"]{
 	color: var(--primary-text);
 	margin-bottom: 8px;
 }
+.right{
+	float: right;
+}

public/index.html

@@ -359,6 +359,10 @@ <h1>Settings</h1>
 				</div>
 				<div id="download_tab">
 					<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
+					<div class="inline-flex right">
+						<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
+						<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
+					</div>
 					<div id="download_list" class=""></div>
 				</div>
 			</div>

public/js/app.js

@@ -67,7 +67,6 @@ function clickElement(button){
 }
 
 function sendAddToQueue(url, bitrate = null){
-	console.log(url)
 	socket.emit("addToQueue", {url: url, bitrate:bitrate})
 }
 

public/js/downloadList.js

@@ -1,23 +1,28 @@
 var queueList = {}
 var queue = []
+var queueComplete = []
 
 socket.on("init_downloadQueue", function(data){
+	console.log(data)
+	if (data.queueComplete.length){
+		data.queueComplete.forEach(item=>{
+			addToQueue(data.queueList[item])
+		})
+	}
 	if (data.currentItem){
 		addToQueue(data['queueList'][data.currentItem])
-		$('#bar_' + data.currentItem).removeClass('indeterminate').addClass('determinate')
-		$('#bar_' + data.currentItem).css('width', data['queueList'][data.currentItem].progress + '%')
-		if (queueList[data.currentItem].failed >= 1){
-			$("#download_"+data.currentItem+" .download_info_status").append(`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueList[data.currentItem].failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`)
-		}
 	}
-	data['queue'].forEach(item=>{
-		addToQueue(data['queueList'][item])
+	data.queue.forEach(item=>{
+		addToQueue(data.queueList[item])
 	})
 })
 
 function addToQueue(queueItem){
 	queueList[queueItem.uuid] = queueItem
-	queue.push(queueItem.uuid)
+	if ((queueItem.downloaded + queueItem.failed) == queueItem.size)
+		queueComplete.push(queueItem.uuid)
+	else
+		queue.push(queueItem.uuid)
 	$("#download_list").append(
 	`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
 		<div class="download_info">
@@ -35,6 +40,23 @@ function addToQueue(queueItem){
 			<i onclick="downloadAction(event)" class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
 		</div>
 	</div>`)
+	if (queueItem.progress>0){
+		$('#bar_' + queueItem.uuid).removeClass('indeterminate').addClass('determinate')
+	}
+	$('#bar_' +queueItem.uuid).css('width', queueItem.progress + '%')
+	if (queueItem.failed >= 1){
+		$("#download_"+queueItem.uuid+" .download_info_status").append(`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`)
+	}
+	if ((queueItem.downloaded + queueItem.failed) == queueItem.size){
+		let result_icon = $('#download_'+queueItem.uuid).find('.queue_icon')
+		if (queueItem.failed == 0){
+			result_icon.text("done")
+		}else if (queueItem.failed == queueItem.size){
+			result_icon.text("error")
+		}else{
+			result_icon.text("warning")
+		}
+	}
 }
 
 socket.on("addedToQueue", function(queueItem){
@@ -80,7 +102,7 @@ socket.on("finishDownload", function(uuid){
 		let index = queue.indexOf(uuid)
 		if (index > -1){
 			queue.splice(index, 1)
-			delete queueList[uuid]
+			queueComplete.push(uuid)
 		}
 		if (queue.length <= 0){
 			toast('All downloads completed!', 'done_all')
@@ -91,9 +113,25 @@ socket.on("finishDownload", function(uuid){
 socket.on("removedAllDownloads", function(){
 	queue = []
 	queueList = {}
+	queueComplete = []
 	$("#download_list").html("")
 })
 
+socket.on("removedFinishedDownloads", function(){
+	queueComplete.forEach((item) => {
+		$("#download_"+item).remove()
+	})
+	queueComplete = []
+})
+
+$("#clean_queue").on("click", function(){
+	socket.emit("removeFinishedDownloads")
+})
+
+$("#cancel_queue").on("click", function(){
+	socket.emit("cancelAllDownloads")
+})
+
 socket.on("updateQueue", function(update){
 	if (update.uuid && queue.indexOf(update.uuid) > -1){
 		if (update.downloaded){

public/js/init.js

@@ -9,8 +9,8 @@ toastsWithId = {}
 
 function toast(msg, icon=null, dismiss=true, id=null){
 	if (toastsWithId[id]){
-		toastObj = toastsWithId[id]
-		toastDOM = $(`div.toastify[toast_id=${id}]`)
+		let toastObj = toastsWithId[id]
+		let toastDOM = $(`div.toastify[toast_id=${id}]`)
 		if (msg){
 			toastDOM.find(".toast-message").html(msg)
 		}
@@ -21,6 +21,7 @@ function toast(msg, icon=null, dismiss=true, id=null){
 				icon = `<i class="material-icons">${icon}</i>`
 			toastDOM.find(".toast-icon").html(icon)
 		}
+		console.log(dismiss)
 		if (dismiss !== null && dismiss){
 			setTimeout(function(){
 				toastObj.hideToast()
@@ -34,7 +35,7 @@ function toast(msg, icon=null, dismiss=true, id=null){
 			icon = `<div class="circle-loader"></div>`
 		else
 			icon = `<i class="material-icons">${icon}</i>`
-		toastObj = Toastify({
+		let toastObj = Toastify({
 			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
 			duration: dismiss ? 3000 : 0,
 			gravity: 'bottom',

public/js/utils.js

@@ -1,11 +1,12 @@
 function isValidURL(text){
-	if (text.toLowerCase().startsWith("http"))
+	if (text.toLowerCase().startsWith("http")){
 		if (text.toLowerCase().indexOf("deezer.com") >= 0 || text.toLowerCase().indexOf("open.spotify.com") >= 0)
 			return true
-	else if (text.toLowerCase().startsWith("spotify:"))
+	}else if (text.toLowerCase().startsWith("spotify:"))
 		return true
 	return false
 }
+
 function convertDuration(duration) {
 	//convert from seconds only to mm:ss format
 	var mm, ss