continued js refactor: added downloads.js, quality-modal.js, stacke-tabs.js, minor improvements

public/js/modules/artist-tab.js

@@ -1,4 +1,7 @@
 import { socket } from './socket.js'
+import { albumView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
 export const ArtistTab = new Vue({
 	el: '#artist_tab',
@@ -14,13 +17,14 @@ export const ArtistTab = new Vue({
 		body: null
 	},
 	methods: {
+		albumView,
 		addToQueue(e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		moreInfo(url, e) {
 			if (e) e.preventDefault()
@@ -54,6 +58,9 @@ export const ArtistTab = new Vue({
 			if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
 			else return []
 		}
+	},
+	mounted() {
+		console.log('artist tab mounted')
 	}
 })
 

public/js/modules/downloads.js

@@ -0,0 +1,247 @@
+import { socket } from './socket.js'
+import { toast } from './toasts.js'
+
+let queueList = {}
+let queue = []
+let queueComplete = []
+
+const downloadListEl = document.getElementById('download_list')
+
+function linkListeners() {
+	downloadListEl.addEventListener('click', handleListClick)
+	document.getElementById('toggle_download_tab').addEventListener('click', toggleDownloadTab)
+}
+
+function sendAddToQueue(url, bitrate = null) {
+	if (url.indexOf(';') !== -1) {
+		let urls = url.split(';')
+		urls.forEach(url => {
+			socket.emit('addToQueue', { url: url, bitrate: bitrate })
+		})
+	} else if (url != '') {
+		socket.emit('addToQueue', { url: url, bitrate: bitrate })
+	}
+}
+
+function addToQueue(queueItem, current = false) {
+	queueList[queueItem.uuid] = queueItem
+	if (queueItem.downloaded + queueItem.failed == queueItem.size) {
+		queueComplete.push(queueItem.uuid)
+	} else {
+		queue.push(queueItem.uuid)
+	}
+	$(downloadListEl).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 + ' .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')
+		}
+	}
+}
+
+function initQueue(data) {
+	if (data.queueComplete.length) {
+		data.queueComplete.forEach(item => {
+			addToQueue(data.queueList[item])
+		})
+	}
+	if (data.currentItem) {
+		addToQueue(data['queueList'][data.currentItem], true)
+	}
+	data.queue.forEach(item => {
+		addToQueue(data.queueList[item])
+	})
+}
+
+function startDownload(uuid) {
+	$('#bar_' + uuid)
+		.removeClass('indeterminate')
+		.addClass('determinate')
+}
+
+socket.on('startDownload', startDownload)
+
+function handleListClick(event) {
+	if (!event.target.matches('.queue_icon[data-uuid]')) {
+		return
+	}
+
+	let icon = event.target.innerText
+	let uuid = $(event.target).data('uuid')
+
+	switch (icon) {
+		case 'remove':
+			socket.emit('removeFromQueue', uuid)
+			break
+		default:
+	}
+}
+
+// Show/Hide Download Tab
+function toggleDownloadTab(ev) {
+	ev.preventDefault()
+
+	let isHidden = document.querySelector('#download_tab_container').classList.toggle('tab_hidden')
+
+	localStorage.setItem('downloadTabOpen', !isHidden)
+}
+
+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]
+	}
+}
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+socket.on('removedFromQueue', removeFromQueue)
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+// 4. queueComplete
+// 5. toast
+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 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)
+
+// Needs:
+// 1. socket
+// 2. queueComplete
+// 3. queue
+// 4. queueList
+
+function removeAllDownloads(currentItem) {
+	queueComplete = []
+	if (currentItem == '') {
+		queue = []
+		queueList = {}
+		$(downloadListEl).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)
+
+// Needs:
+// 1. socket
+// 2. queueComplete
+function removedFinishedDownloads() {
+	queueComplete.forEach(item => {
+		$('#download_' + item).remove()
+	})
+	queueComplete = []
+}
+
+socket.on('removedFinishedDownloads', removedFinishedDownloads)
+
+// Needs:
+// 1. socket
+// 2. queue
+// 3. queueList
+function updateQueue(update) {
+	if (update.uuid && queue.indexOf(update.uuid) > -1) {
+		if (update.downloaded) {
+			queueList[update.uuid].downloaded++
+			$('#download_' + update.uuid + ' .queue_downloaded').text(
+				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+			)
+		}
+		if (update.failed) {
+			queueList[update.uuid].failed++
+			$('#download_' + update.uuid + ' .queue_downloaded').text(
+				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+			)
+			if (queueList[update.uuid].failed == 1) {
+				$('#download_' + update.uuid + ' .download_info_status').append(
+					`<span class="secondary-text inline-flex"><span class="download_slim_separator">(</span><span class="queue_failed">1</span> <i class="material-icons">error_outline</i><span class="download_slim_separator">)</span></span>`
+				)
+			} else {
+				$('#download_' + update.uuid + ' .queue_failed').text(queueList[update.uuid].failed)
+			}
+		}
+		if (update.progress) {
+			queueList[update.uuid].progress = update.progress
+			$('#bar_' + update.uuid).css('width', update.progress + '%')
+		}
+	}
+}
+
+socket.on('updateQueue', updateQueue)
+
+export default {
+	linkListeners,
+	sendAddToQueue,
+	addToQueue
+}

public/js/modules/main-search.js

@@ -1,6 +1,9 @@
 import { socket } from './socket.js'
+import { artistView, albumView, playlistView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
-export const MainSearch = new Vue({
+const MainSearch = new Vue({
 	data: {
 		names: {
 			TOP_RESULT: 'Top Result',
@@ -46,6 +49,27 @@ export const MainSearch = new Vue({
 		}
 	},
 	methods: {
+		artistView,
+		albumView,
+		playlistView,
+		handleClickTopResult(event) {
+			let topResultType = this.results.allTab.TOP_RESULT[0].type
+
+			switch (topResultType) {
+				case 'artist':
+					artistView(event)
+					break
+				case 'album':
+					albumView(event)
+					break
+				case 'playlist':
+					playlistView(event)
+					break
+
+				default:
+					break
+			}
+		},
 		changeSearchTab(section) {
 			if (section != 'TOP_RESULT') {
 				document.getElementById(`search_${section.toLowerCase()}_tab`).click()
@@ -53,11 +77,11 @@ export const MainSearch = new Vue({
 		},
 		addToQueue: function (e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal: function (e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		numberWithDots(x) {
 			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
@@ -72,7 +96,28 @@ export const MainSearch = new Vue({
 				ss = '0' + ss
 			}
 			return mm + ':' + ss
+		},
+		search(type) {
+			socket.emit('search', {
+				term: this.results.query,
+				type: type,
+				start: this.results[type + 'Tab'].next,
+				nb: 30
+			})
+		},
+		scrolledSearch(type) {
+			if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) {
+				socket.emit('search', {
+					term: this.results.query,
+					type: type,
+					start: this.results[type + 'Tab'].next,
+					nb: 30
+				})
+			}
 		}
+	},
+	mounted() {
+		console.log('main search mounted')
 	}
 }).$mount('#search_tab')
 
@@ -108,3 +153,5 @@ socket.on('search', result => {
 	}
 	MainSearch.results[result.type + 'Tab'].loaded = true
 })
+
+export default MainSearch

public/js/modules/quality-modal.js

@@ -0,0 +1,47 @@
+import Downloads from './downloads.js'
+
+const QualityModal = {
+	// Defaults
+	open: false,
+	url: ''
+}
+
+function init() {
+	QualityModal.element = document.getElementById('modal_quality')
+
+	linkListeners()
+}
+
+function open(link) {
+	QualityModal.url = link
+	QualityModal.element.style.display = 'block'
+	QualityModal.element.classList.add('animated', 'fadeIn')
+}
+
+function linkListeners() {
+	QualityModal.element.addEventListener('click', handleClick)
+	QualityModal.element.addEventListener('webkitAnimationEnd', handleAnimationEnd)
+}
+
+function handleClick(event) {
+	QualityModal.element.classList.add('animated', 'fadeOut')
+
+	if (!event.target.matches('.quality-button')) {
+		return
+	}
+
+	let bitrate = event.target.dataset.qualityValue
+
+	Downloads.sendAddToQueue(QualityModal.url, bitrate)
+}
+
+function handleAnimationEnd() {
+	QualityModal.element.classList.remove('animated', QualityModal.open ? 'fadeOut' : 'fadeIn')
+	QualityModal.element.style.display = QualityModal.open ? 'none' : 'block'
+	QualityModal.open = !QualityModal.open
+}
+
+export default {
+	init,
+	open
+}

public/js/modules/settings-tab.js

@@ -5,7 +5,7 @@ import { socket } from './socket.js'
 window.lastSettings = {}
 window.lastCredentials = {}
 
-export const SettingsTab = new Vue({
+const SettingsTab = new Vue({
 	data() {
 		return {
 			settings: { tags: {} },
@@ -25,8 +25,6 @@ export const SettingsTab = new Vue({
 			toast('ARL copied to clipboard', 'assignment')
 		},
 		saveSettings() {
-			console.log(socket)
-
 			lastSettings = { ...SettingsTab.settings }
 			lastCredentials = { ...SettingsTab.spotifyFeatures }
 			socket.emit('saveSettings', lastSettings, lastCredentials)
@@ -59,3 +57,5 @@ function loadSettings(settings, spotifyCredentials) {
 	SettingsTab.settings = settings
 	SettingsTab.spotifyFeatures = spotifyCredentials
 }
+
+export default SettingsTab

public/js/modules/stacked-tabs.js

@@ -0,0 +1,26 @@
+import { resetArtistTab } from './artist-tab.js'
+import { resetTracklistTab } from './tracklist-tab.js'
+import { socket } from './socket.js'
+
+export function artistView(ev) {
+	let id = ev.currentTarget.dataset.id
+	resetArtistTab()
+	socket.emit('getTracklist', { type: 'artist', id: id })
+	showTab('artist', id)
+}
+
+export function albumView(ev) {
+	let id = ev.currentTarget.dataset.id
+	console.log('album view', id)
+	resetTracklistTab()
+	socket.emit('getTracklist', { type: 'album', id: id })
+	showTab('album', id)
+}
+
+export function playlistView(ev) {
+	let id = ev.currentTarget.dataset.id
+	console.log('playlist view', id)
+	resetTracklistTab()
+	socket.emit('getTracklist', { type: 'playlist', id: id })
+	showTab('playlist', id)
+}

public/js/modules/toasts.js

@@ -1,3 +1,5 @@
+import { socket } from './socket.js'
+
 let toastsWithId = {}
 
 export const toast = function (msg, icon = null, dismiss = true, id = null) {
@@ -33,4 +35,8 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
 			$(toastObj.toastElement).attr('toast_id', id)
 		}
 	}
-}
+}
+
+socket.on('toast', data => {
+	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
+})

public/js/modules/tracklist-tab.js

@@ -1,4 +1,7 @@
 import { socket } from './socket.js'
+import { artistView, albumView } from './stacked-tabs.js'
+import Downloads from './downloads.js'
+import QualityModal from './quality-modal.js'
 
 export const TracklistTab = new Vue({
 	el: '#tracklist_tab',
@@ -15,13 +18,15 @@ export const TracklistTab = new Vue({
 		body: []
 	},
 	methods: {
+		artistView,
+		albumView,
 		addToQueue: function (e) {
 			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal: function (e) {
 			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
+			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		toggleAll: function (e) {
 			this.body.forEach(item => {
@@ -50,6 +55,9 @@ export const TracklistTab = new Vue({
 			}
 			return mm + ':' + ss
 		}
+	},
+	mounted() {
+		console.log('tracklist tab mounted')
 	}
 })