moved downloads logic to Vue (except for 1 function) and basic tested

src/js/app.js

@@ -11,7 +11,6 @@ import TrackPreview from '@/js/track-preview.js'
 import $ from 'jquery'
 import { socket } from '@/js/socket.js'
 import { toast } from '@/js/toasts.js'
-import Downloads from '@/js/downloads.js'
 import { init as initTabs } from '@/js/tabs.js'
 
 /* ===== App initialization ===== */
@@ -19,7 +18,6 @@ import { init as initTabs } from '@/js/tabs.js'
 function startApp() {
 	mountApp()
 
-	Downloads.init()
 	initTabs()
 	TrackPreview.init()
 }

src/js/components/TheDownloadTab.vue

@@ -24,16 +24,30 @@
 </template>
 
 <script>
+import $ from 'jquery'
 import { socket } from '@/js/socket.js'
+import { toast } from '@/js/toasts.js'
 
 const tabMinWidth = 250
 const tabMaxWidth = 500
 
 export default {
 	data: () => ({
-		cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300
+		cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
+		queue: [],
+		queueList: {},
+		queueComplete: []
 	}),
 	mounted() {
+		socket.on('startDownload', this.startDownload)
+		socket.on('init_downloadQueue', this.initQueue)
+		socket.on('addedToQueue', this.addToQueue)
+		socket.on('updateQueue', this.updateQueue)
+		socket.on('removedFromQueue', this.removeFromQueue)
+		socket.on('finishDownload', this.finishDownload)
+		socket.on('removedAllDownloads', this.removeAllDownloads)
+		socket.on('removedFinishedDownloads', this.removedFinishedDownloads)
+
 		// Check if download tab has slim entries
 		if ('true' === localStorage.getItem('slimDownloads')) {
 			this.$refs.list.classList.add('slim')
@@ -80,8 +94,171 @@ export default {
 				default:
 			}
 		},
+		initQueue(data) {
+			const { queue: initQueue, queueComplete: initQueueComplete, currentItem, queueList: initQueueList } = data
+
+			if (initQueueComplete.length) {
+				initQueueComplete.forEach(item => {
+					initQueueList[item].init = true
+					this.addToQueue(initQueueList[item])
+				})
+			}
+
+			if (currentItem) {
+				initQueueList[currentItem].init = true
+				this.addToQueue(initQueueList[currentItem], true)
+			}
+
+			initQueue.forEach(item => {
+				initQueueList[item].init = true
+				this.addToQueue(initQueueList[item])
+			})
+		},
+		addToQueue(queueItem, current = false) {
+			this.queueList[queueItem.uuid] = queueItem
+
+			if (queueItem.downloaded + queueItem.failed == queueItem.size) {
+				if (this.queueComplete.indexOf(queueItem.uuid) == -1) {
+					this.queueComplete.push(queueItem.uuid)
+				}
+			} else {
+				if (this.queue.indexOf(queueItem.uuid) == -1) {
+					this.queue.push(queueItem.uuid)
+				}
+			}
+
+			let queueDOM = document.getElementById('download_' + queueItem.uuid)
+
+			if (typeof queueDOM == 'undefined' || queueDOM == null) {
+				$(this.$refs.list).append(
+					`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
+						<div class="download_info">
+							<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
+							<div class="download_info_data">
+								<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
+								<span class="secondary-text">${queueItem.artist}</span>
+							</div>
+							<div class="download_info_status">
+								<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
+						queueItem.size
+					}</span>
+							</div>
+						</div>
+						<div class="download_bar">
+							<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
+							<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
+						</div>
+					</div>`
+				)
+			}
+
+			if (queueItem.progress > 0 || current) {
+				this.startDownload(queueItem.uuid)
+			}
+
+			$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
+
+			if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) {
+				$('#download_' + queueItem.uuid + ' .download_info_status').append(
+					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">${queueItem.failed}</span><i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
+				)
+			}
+
+			if (queueItem.downloaded + queueItem.failed == queueItem.size) {
+				let resultIcon = $('#download_' + queueItem.uuid).find('.queue_icon')
+
+				if (queueItem.failed == 0) {
+					resultIcon.text('done')
+				} else {
+					let failedButton = $('#download_' + queueItem.uuid).find('.queue_failed_button')
+
+					resultIcon.addClass('clickable')
+					failedButton.addClass('clickable')
+
+					resultIcon.bind('click', { item: queueItem }, this.showErrorsTab)
+					failedButton.bind('click', { item: queueItem }, this.showErrorsTab)
+
+					if (queueItem.failed >= queueItem.size) {
+						resultIcon.text('error')
+					} else {
+						resultIcon.text('warning')
+					}
+				}
+			}
+
+			if (!queueItem.init) {
+				toast(`${queueItem.title} added to queue`, 'playlist_add_check')
+			}
+		},
+		updateQueue(update) {
+			// downloaded and failed default to false?
+			const { uuid, downloaded, failed, progress, error, data } = update
+
+			if (uuid && this.queue.indexOf(uuid) > -1) {
+				if (downloaded) {
+					this.queueList[uuid].downloaded++
+					$('#download_' + uuid + ' .queue_downloaded').text(
+						this.queueList[uuid].downloaded + this.queueList[uuid].failed
+					)
+				}
+
+				if (failed) {
+					this.queueList[uuid].failed++
+					$('#download_' + uuid + ' .queue_downloaded').text(
+						this.queueList[uuid].downloaded + this.queueList[uuid].failed
+					)
+					if (this.queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
+						$('#download_' + uuid + ' .download_info_status').append(
+							`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">1</span> <i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
+						)
+					} else {
+						$('#download_' + uuid + ' .queue_failed').text(this.queueList[uuid].failed)
+					}
+
+					this.queueList[uuid].errors.push({ message: error, data: data })
+				}
+
+				if (progress) {
+					this.queueList[uuid].progress = progress
+					$('#bar_' + uuid).css('width', progress + '%')
+				}
+			}
+		},
+		removeFromQueue(uuid) {
+			let index = this.queue.indexOf(uuid)
+
+			if (index > -1) {
+				this.queue.splice(index, 1)
+				$(`#download_${this.queueList[uuid].uuid}`).remove()
+				delete this.queueList[uuid]
+			}
+		},
+		removeAllDownloads(currentItem) {
+			this.queueComplete = []
+
+			if (currentItem == '') {
+				this.queue = []
+				this.queueList = {}
+				$(listEl).html('')
+			} else {
+				this.queue = [currentItem]
+				let tempQueueItem = this.queueList[currentItem]
+				this.queueList = {}
+				this.queueList[currentItem] = tempQueueItem
+
+				$('.download_object').each(function(index) {
+					if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
+				})
+			}
+		},
+		removedFinishedDownloads() {
+			this.queueComplete.forEach(item => {
+				$('#download_' + item).remove()
+			})
+
+			this.queueComplete = []
+		},
 		toggleDownloadTab(clickEvent) {
-			console.log('toggle')
 			this.setTabWidth()
 
 			this.$refs.container.style.transition = 'all 250ms ease-in-out'
@@ -101,6 +278,43 @@ export default {
 		cancelQueue() {
 			socket.emit('cancelAllDownloads')
 		},
+		finishDownload(uuid) {
+			if (this.queue.indexOf(uuid) > -1) {
+				toast(`${this.queueList[uuid].title} finished downloading.`, 'done')
+
+				$('#bar_' + uuid).css('width', '100%')
+
+				let resultIcon = $('#download_' + uuid).find('.queue_icon')
+
+				if (this.queueList[uuid].failed == 0) {
+					resultIcon.text('done')
+				} else {
+					let failedButton = $('#download_' + uuid).find('.queue_failed_button')
+
+					resultIcon.addClass('clickable')
+					failedButton.addClass('clickable')
+
+					resultIcon.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
+					failedButton.bind('click', { item: this.queueList[uuid] }, this.showErrorsTab)
+
+					if (this.queueList[uuid].failed >= this.queueList[uuid].size) {
+						resultIcon.text('error')
+					} else {
+						resultIcon.text('warning')
+					}
+				}
+
+				let index = this.queue.indexOf(uuid)
+				if (index > -1) {
+					this.queue.splice(index, 1)
+					this.queueComplete.push(uuid)
+				}
+
+				if (this.queue.length <= 0) {
+					toast('All downloads completed!', 'done_all')
+				}
+			}
+		},
 		openDownloadsFolder() {
 			if (window.clientMode) {
 				socket.emit('openDownloadsFolder')
@@ -120,6 +334,14 @@ export default {
 		},
 		startDrag() {
 			document.addEventListener('mousemove', this.handleDrag)
+		},
+		startDownload(uuid) {
+			$('#bar_' + uuid)
+				.removeClass('indeterminate')
+				.addClass('determinate')
+		},
+		showErrorsTab(clickEvent) {
+			this.$root.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
 		}
 	}
 }

src/js/components/TheErrorsTab.vue

@@ -43,6 +43,7 @@ export default {
 	},
 	mounted() {
 		EventBus.$on('showTabErrors', this.showErrors)
+		this.$root.$on('showTabErrors', this.showErrors)
 	}
 }
 </script>

src/js/components/TheFavoritesTab.vue

@@ -215,7 +215,6 @@ export default {
 				target: { id }
 			} = event
 			let selectedTab = null
-			console.log(id)
 
 			switch (id) {
 				case 'favorites_playlist_tab':

src/js/downloads.js

@@ -1,229 +1,11 @@
-import $ from 'jquery'
 import { socket } from '@/js/socket.js'
-import { toast } from '@/js/toasts.js'
-import EventBus from '@/js/EventBus'
-
-/* ===== Locals ===== */
-
-let queueList = {}
-let queue = []
-let queueComplete = []
-let listEl
-
-function init() {
-	// Find download DOM elements
-	listEl = document.getElementById('download_list')
-}
 
 function sendAddToQueue(url, bitrate = null) {
 	if (url != '') {
-		socket.emit('addToQueue', { url: url, bitrate: bitrate })
+		socket.emit('addToQueue', { url: url, bitrate: bitrate }, () => {})
 	}
 }
 
-function _addToQueue(queueItem, current = false) {
-	queueList[queueItem.uuid] = queueItem
-	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
-		if (queueComplete.indexOf(queueItem.uuid) == -1) queueComplete.push(queueItem.uuid)
-	} else {
-		if (queue.indexOf(queueItem.uuid) == -1) queue.push(queueItem.uuid)
-	}
-	let queueDOM = document.getElementById('download_' + queueItem.uuid)
-	if (typeof queueDOM == 'undefined' || queueDOM == null) {
-		$(listEl).append(
-			`<div class="download_object" id="download_${queueItem.uuid}" data-deezerid="${queueItem.id}">
-			<div class="download_info">
-				<img width="75px" class="rounded coverart" src="${queueItem.cover}" alt="Cover ${queueItem.title}"/>
-				<div class="download_info_data">
-					<span class="download_line">${queueItem.title}</span> <span class="download_slim_separator"> - </span>
-					<span class="secondary-text">${queueItem.artist}</span>
-				</div>
-				<div class="download_info_status">
-					<span class="download_line"><span class="queue_downloaded">${queueItem.downloaded + queueItem.failed}</span>/${
-				queueItem.size
-			}</span>
-				</div>
-			</div>
-			<div class="download_bar">
-				<div class="progress"><div id="bar_${queueItem.uuid}" class="indeterminate"></div></div>
-				<i class="material-icons queue_icon" data-uuid="${queueItem.uuid}">remove</i>
-			</div>
-		</div>`
-		)
-	}
-	if (queueItem.progress > 0 || current) {
-		$('#bar_' + queueItem.uuid)
-			.removeClass('indeterminate')
-			.addClass('determinate')
-	}
-	$('#bar_' + queueItem.uuid).css('width', queueItem.progress + '%')
-	if (queueItem.failed >= 1 && $('#download_' + queueItem.uuid + ' .queue_failed').length == 0) {
-		$('#download_' + queueItem.uuid + ' .download_info_status').append(
-			`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">${
-				queueItem.failed
-			}</span><i class="material-icons">error_outline</i></span><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 {
-			let failed_button = $('#download_' + queueItem.uuid).find('.queue_failed_button')
-			result_icon.addClass('clickable')
-			failed_button.addClass('clickable')
-			result_icon.bind('click', { item: queueItem }, showErrorsTab)
-			failed_button.bind('click', { item: queueItem }, showErrorsTab)
-			if (queueItem.failed >= queueItem.size) {
-				result_icon.text('error')
-			} else {
-				result_icon.text('warning')
-			}
-		}
-	}
-	if (!queueItem.init) toast(`${queueItem.title} added to queue`, 'playlist_add_check')
-}
-
-// ? Temporary?
-function showErrorsTab(clickEvent) {
-	EventBus.$emit('showTabErrors', clickEvent.data.item, clickEvent.target)
-}
-
-function _initQueue(data) {
-	const { queue, queueComplete, currentItem, queueList } = data
-
-	if (queueComplete.length) {
-		queueComplete.forEach(item => {
-			queueList[item].init = true
-			_addToQueue(queueList[item])
-		})
-	}
-
-	if (currentItem) {
-		queueList[currentItem].init = true
-		_addToQueue(queueList[currentItem], true)
-	}
-
-	queue.forEach(item => {
-		queueList[item].init = true
-		_addToQueue(queueList[item])
-	})
-}
-
-function _startDownload(uuid) {
-	$('#bar_' + uuid)
-		.removeClass('indeterminate')
-		.addClass('determinate')
-}
-
-socket.on('startDownload', _startDownload)
-
-socket.on('init_downloadQueue', _initQueue)
-socket.on('addedToQueue', _addToQueue)
-
-function _removeFromQueue(uuid) {
-	let index = queue.indexOf(uuid)
-	if (index > -1) {
-		queue.splice(index, 1)
-		$(`#download_${queueList[uuid].uuid}`).remove()
-		delete queueList[uuid]
-	}
-}
-
-socket.on('removedFromQueue', _removeFromQueue)
-
-function _finishDownload(uuid) {
-	if (queue.indexOf(uuid) > -1) {
-		toast(`${queueList[uuid].title} finished downloading.`, 'done')
-		$('#bar_' + uuid).css('width', '100%')
-		let result_icon = $('#download_' + uuid).find('.queue_icon')
-		if (queueList[uuid].failed == 0) {
-			result_icon.text('done')
-		} else {
-			let failed_button = $('#download_' + uuid).find('.queue_failed_button')
-			result_icon.addClass('clickable')
-			failed_button.addClass('clickable')
-			result_icon.bind('click', { item: queueList[uuid] }, showErrorsTab)
-			failed_button.bind('click', { item: queueList[uuid] }, showErrorsTab)
-			if (queueList[uuid].failed >= queueList[uuid].size) {
-				result_icon.text('error')
-			} else {
-				result_icon.text('warning')
-			}
-		}
-
-		let index = queue.indexOf(uuid)
-		if (index > -1) {
-			queue.splice(index, 1)
-			queueComplete.push(uuid)
-		}
-		if (queue.length <= 0) {
-			toast('All downloads completed!', 'done_all')
-		}
-	}
-}
-
-socket.on('finishDownload', _finishDownload)
-
-function _removeAllDownloads(currentItem) {
-	queueComplete = []
-	if (currentItem == '') {
-		queue = []
-		queueList = {}
-		$(listEl).html('')
-	} else {
-		queue = [currentItem]
-		let tempQueueItem = queueList[currentItem]
-		queueList = {}
-		queueList[currentItem] = tempQueueItem
-		$('.download_object').each(function(index) {
-			if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
-		})
-	}
-}
-
-socket.on('removedAllDownloads', _removeAllDownloads)
-
-function _removedFinishedDownloads() {
-	queueComplete.forEach(item => {
-		$('#download_' + item).remove()
-	})
-	queueComplete = []
-}
-
-socket.on('removedFinishedDownloads', _removedFinishedDownloads)
-
-function _updateQueue(update) {
-	// downloaded and failed default to false?
-	const { uuid, downloaded, failed, progress } = update
-
-	if (uuid && queue.indexOf(uuid) > -1) {
-		if (downloaded) {
-			queueList[uuid].downloaded++
-			$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
-		}
-		if (failed) {
-			queueList[uuid].failed++
-			$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
-			if (queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
-				$('#download_' + uuid + ' .download_info_status').append(
-					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed_button inline-flex"><span class="queue_failed">1</span> <i class="material-icons">error_outline</i></span><span class="download_slim_separator">)</span></span>`
-				)
-			} else {
-				$('#download_' + uuid + ' .queue_failed').text(queueList[uuid].failed)
-			}
-			queueList[uuid].errors.push({ message: update.error, data: update.data })
-		}
-		if (progress) {
-			queueList[uuid].progress = progress
-			$('#bar_' + uuid).css('width', progress + '%')
-		}
-	}
-}
-
-socket.on('updateQueue', _updateQueue)
-
 export default {
-	init,
 	sendAddToQueue
 }

src/js/tabs.js

@@ -45,7 +45,6 @@ export function showView(viewType, event) {
  */
 export function changeTab(sidebarEl, section, tabName) {
 	// console.error('CHANGE TAB')
-	// console.log(Array.from(arguments))
 	window.windows_stack = []
 	window.currentStack = {}