replaced 'artistView', 'albumView', 'playlistView' and 'spotifyPlaylistView' with an unique function that is binded properly; replaced a lot of declarations and property chains with destructuring synthax

rollup.config.js

@@ -4,8 +4,8 @@ import replace from '@rollup/plugin-replace'
 import alias from '@rollup/plugin-alias'
 import { terser } from 'rollup-plugin-terser'
 
-// 'npm run watch:js' -> 'production' is false
+// 'rollup -c' -> 'production' is false
-// 'npm run build:js' -> 'production' is true
+// 'rollup -c -w' -> 'production' is true
 const production = !process.env.ROLLUP_WATCH
 
 export default {

src/js/app.js

@@ -19,7 +19,8 @@ function startApp() {
 	Search.linkListeners()
 	TrackPreview.init()
 }
-function initClient(){
+
+function initClient() {
 	window.clientMode = true
 	document.querySelector(`#open_downloads_folder`).classList.remove('hide')
 }

src/js/modules/components/artist-tab.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import { socket } from '../socket.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
-import { albumView } from '../tabs.js'
+import { showView } from '../tabs.js'
 
 const ArtistTab = new Vue({
 	data() {
@@ -20,7 +20,7 @@ const ArtistTab = new Vue({
 		}
 	},
 	methods: {
-		albumView,
+		albumView: showView.bind(null, 'album'),
 		reset() {
 			this.title = 'Loading...'
 			this.image = ''
@@ -59,11 +59,13 @@ const ArtistTab = new Vue({
 			return g1.getTime() <= g2.getTime()
 		},
 		showArtist(data) {
-			this.title = data.name
+			const { name, picture_xl, id, releases } = data
-			this.image = data.picture_xl
+
+			this.title = name
+			this.image = picture_xl
 			this.type = 'Artist'
-			this.link = `https://www.deezer.com/artist/${data.id}`
+			this.link = `https://www.deezer.com/artist/${id}`
-			this.currentTab = Object.keys(data.releases)[0]
+			this.currentTab = Object.keys(releases)[0]
 			this.sortKey = 'release_date'
 			this.sortOrder = 'desc'
 			this.head = [
@@ -71,10 +73,10 @@ const ArtistTab = new Vue({
 				{ title: 'Release Date', sortKey: 'release_date' },
 				{ title: '', width: '32px' }
 			]
-			if (_.isEmpty(data.releases)) {
+			if (_.isEmpty(releases)) {
 				this.body = null
 			} else {
-				this.body = data.releases
+				this.body = releases
 			}
 		}
 	},

src/js/modules/components/charts-tab.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { artistView, albumView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -16,8 +16,8 @@ const ChartsTab = new Vue({
 		}
 	},
 	methods: {
-		artistView,
+		artistView: showView.bind(null, 'artist'),
-		albumView,
+		albumView: showView.bind(null, 'album'),
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
@@ -29,12 +29,21 @@ const ChartsTab = new Vue({
 		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
-		getTrackList(e) {
+		getTrackList(event) {
 			document.getElementById('content').scrollTo(0, 0)
 
-			this.country = e.currentTarget.dataset.title
+			const {
+				currentTarget: {
+					dataset: { title }
+				},
+				currentTarget: {
+					dataset: { id }
+				}
+			} = event
+
+			this.country = title
 			localStorage.setItem('chart', this.country)
-			this.id = e.currentTarget.dataset.id
+			this.id = id
 			socket.emit('getChartTracks', this.id)
 		},
 		setTracklist(data) {

src/js/modules/components/favorites-tab.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { playlistView, artistView, albumView, spotifyPlaylistView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -17,10 +17,10 @@ const FavoritesTab = new Vue({
 		}
 	},
 	methods: {
-		playlistView,
+		artistView: showView.bind(null, 'artist'),
-		artistView,
+		albumView: showView.bind(null, 'album'),
-		albumView,
+		playlistView: showView.bind(null, 'playlist'),
-		spotifyPlaylistView,
+		spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
@@ -48,10 +48,12 @@ const FavoritesTab = new Vue({
 			this.tracks = data
 		},
 		initFavorites(data) {
-			this.tracks = data.tracks
+			const { tracks, albums, artists, playlists } = data
-			this.albums = data.albums
+
-			this.artists = data.artists
+			this.tracks = tracks
-			this.playlists = data.playlists
+			this.albums = albums
+			this.artists = artists
+			this.playlists = playlists
 			document.getElementById('favorites_playlist_tab').click()
 		}
 	},

src/js/modules/components/home-tab.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { artistView, albumView, playlistView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -14,10 +14,10 @@ const HomeTab = new Vue({
 		}
 	},
 	methods: {
-		artistView,
+		artistView: showView.bind(null, 'artist'),
-		albumView,
+		albumView: showView.bind(null, 'album'),
-		playlistView,
+		playlistView: showView.bind(null, 'playlist'),
-		openSettings(e) {
+		openSettings() {
 			document.getElementById('main_settings_tablink').click()
 		},
 		addToQueue(e) {

src/js/modules/components/link-analyzer-tab.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { albumView, artistView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Utils from '../utils.js'
 
 const LinkAnalyzerTab = new Vue({
@@ -16,8 +16,8 @@ const LinkAnalyzerTab = new Vue({
 		}
 	},
 	methods: {
-		albumView,
+		artistView: showView.bind(null, 'artist'),
-		artistView,
+		albumView: showView.bind(null, 'album'),
 		convertDuration: Utils.convertDuration,
 		reset() {
 			this.title = 'Loading...'
@@ -45,7 +45,6 @@ const LinkAnalyzerTab = new Vue({
 			this.data = data
 		},
 		showAlbum(data) {
-			console.log(data)
 			this.title = data.title
 			this.image = data.cover_xl
 			this.type = 'album'

src/js/modules/components/main-search.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { artistView, albumView, playlistView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -52,9 +52,9 @@ const MainSearch = new Vue({
 		}
 	},
 	methods: {
-		artistView,
+		artistView: showView.bind(null, 'artist'),
-		albumView,
+		albumView: showView.bind(null, 'album'),
-		playlistView,
+		playlistView: showView.bind(null, 'playlist'),
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
@@ -90,7 +90,6 @@ const MainSearch = new Vue({
 		numberWithDots: Utils.numberWithDots,
 		convertDuration: Utils.convertDuration,
 		search(type) {
-			console.log('searcho')
 			socket.emit('search', {
 				term: this.results.query,
 				type: type,

src/js/modules/components/tracklist-tab.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import Vue from 'vue'
 import { socket } from '../socket.js'
-import { albumView, artistView } from '../tabs.js'
+import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
@@ -20,8 +20,8 @@ const TracklistTab = new Vue({
 		body: []
 	}),
 	methods: {
-		artistView,
+		artistView: showView.bind(null, 'artist'),
-		albumView,
+		albumView: showView.bind(null, 'album'),
 		playPausePreview: TrackPreview.playPausePreview,
 		reset() {
 			this.title = 'Loading...'

src/js/modules/downloads.js

@@ -48,10 +48,11 @@ function linkListeners() {
 		socket.emit('cancelAllDownloads')
 	})
 
-	document.getElementById('open_downloads_folder').addEventListener('click', ()=>{
+	document.getElementById('open_downloads_folder').addEventListener('click', () => {
 		if (window.clientMode) socket.emit('openDownloadsFolder')
 	})
 
+	// Downloads tab drag handling
 	dragHandlerEl.addEventListener('mousedown', event => {
 		event.preventDefault()
 
@@ -160,16 +161,20 @@ function addToQueue(queueItem, current = false) {
 }
 
 function initQueue(data) {
-	if (data.queueComplete.length) {
+	const { queue, queueComplete, currentItem, queueList } = data
-		data.queueComplete.forEach(item => {
+
-			addToQueue(data.queueList[item])
+	if (queueComplete.length) {
+		queueComplete.forEach(item => {
+			addToQueue(queueList[item])
 		})
 	}
-	if (data.currentItem) {
+
-		addToQueue(data['queueList'][data.currentItem], true)
+	if (currentItem) {
+		addToQueue(queueList[currentItem], true)
 	}
-	data.queue.forEach(item => {
+
-		addToQueue(data.queueList[item])
+	queue.forEach(item => {
+		addToQueue(queueList[item])
 	})
 }
 
@@ -182,12 +187,14 @@ function startDownload(uuid) {
 socket.on('startDownload', startDownload)
 
 function handleListClick(event) {
-	if (!event.target.matches('.queue_icon[data-uuid]')) {
+	const { target } = event
+
+	if (!target.matches('.queue_icon[data-uuid]')) {
 		return
 	}
 
-	let icon = event.target.innerText
+	let icon = target.innerText
-	let uuid = $(event.target).data('uuid')
+	let uuid = $(target).data('uuid')
 
 	switch (icon) {
 		case 'remove':
@@ -198,8 +205,8 @@ function handleListClick(event) {
 }
 
 // Show/Hide Download Tab
-function toggleDownloadTab(ev) {
+function toggleDownloadTab(clickEvent) {
-	ev.preventDefault()
+	clickEvent.preventDefault()
 
 	setTabWidth()
 
@@ -283,29 +290,28 @@ function removedFinishedDownloads() {
 socket.on('removedFinishedDownloads', removedFinishedDownloads)
 
 function updateQueue(update) {
-	if (update.uuid && queue.indexOf(update.uuid) > -1) {
+	// downloaded and failed default to false?
-		if (update.downloaded) {
+	const { uuid, downloaded, failed, progress } = update
-			queueList[update.uuid].downloaded++
+
-			$('#download_' + update.uuid + ' .queue_downloaded').text(
+	if (uuid && queue.indexOf(uuid) > -1) {
-				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+		if (downloaded) {
-			)
+			queueList[uuid].downloaded++
+			$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
 		}
-		if (update.failed) {
+		if (failed) {
-			queueList[update.uuid].failed++
+			queueList[uuid].failed++
-			$('#download_' + update.uuid + ' .queue_downloaded').text(
+			$('#download_' + uuid + ' .queue_downloaded').text(queueList[uuid].downloaded + queueList[uuid].failed)
-				queueList[update.uuid].downloaded + queueList[update.uuid].failed
+			if (queueList[uuid].failed == 1 && $('#download_' + uuid + ' .queue_failed').length == 0) {
-			)
+				$('#download_' + uuid + ' .download_info_status').append(
-			if (queueList[update.uuid].failed == 1 && $('#download_' + update.uuid + ' .queue_failed').length == 0) {
-				$('#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)
+				$('#download_' + uuid + ' .queue_failed').text(queueList[uuid].failed)
 			}
 		}
-		if (update.progress) {
+		if (progress) {
-			queueList[update.uuid].progress = update.progress
+			queueList[uuid].progress = progress
-			$('#bar_' + update.uuid).css('width', update.progress + '%')
+			$('#bar_' + uuid).css('width', progress + '%')
 		}
 	}
 }

src/js/modules/quality-modal.js

@@ -3,7 +3,8 @@ import Downloads from './downloads.js'
 const QualityModal = {
 	// Defaults
 	open: false,
-	url: ''
+	url: '',
+	element: null
 }
 
 function init() {
@@ -24,13 +25,15 @@ function linkListeners() {
 }
 
 function handleClick(event) {
+	const { target } = event
+
 	QualityModal.element.classList.add('animated', 'fadeOut')
 
-	if (!event.target.matches('.quality-button')) {
+	if (!target.matches('.quality-button')) {
 		return
 	}
 
-	let bitrate = event.target.dataset.qualityValue
+	let bitrate = target.dataset.qualityValue
 
 	Downloads.sendAddToQueue(QualityModal.url, bitrate)
 }

src/js/modules/search.js

@@ -45,7 +45,7 @@ function handleSearchBarKeyup(e) {
 
 		if (term !== MainSearch.results.query || main_selected == 'search_tab') {
 			document.getElementById('search_tab_content').style.display = 'none'
-			socket.emit('mainSearch', { term: term })
+			socket.emit('mainSearch', { term })
 		} else {
 			document.getElementById('search_tab_content').style.display = 'block'
 			document.getElementById('main_search_tablink').click()

src/js/modules/tabs.js

@@ -20,42 +20,32 @@ let currentStack = {}
 // Exporting this function out of the default export
 // because it's used in components that are needed
 // in this file too
-export function artistView(ev) {
+export function showView(viewType, event) {
-	let id = ev.currentTarget.dataset.id
+	const {
+		currentTarget: {
+			dataset: { id }
+		}
+	} = event
+
+	switch (viewType) {
+		case 'artist':
 			ArtistTab.reset()
-	socket.emit('getTracklist', { type: 'artist', id: id })
+			break
-	showTab('artist', id)
+		case 'album':
-}
+		case 'playlist':
-
+		case 'spotifyplaylist':
-// Exporting this function out of the default export
-// because it's used in components that are needed
-// in this file too
-export function albumView(ev) {
-	let id = ev.currentTarget.dataset.id
 			TracklistTab.reset()
-	socket.emit('getTracklist', { type: 'album', id: id })
+			break
-	showTab('album', id)
-}
 
-// Exporting this function out of the default export
+		default:
-// because it's used in components that are needed
+			break
-// in this file too
+	}
-export function playlistView(ev) {
-	let id = ev.currentTarget.dataset.id
-	TracklistTab.reset()
-	socket.emit('getTracklist', { type: 'playlist', id: id })
-	showTab('playlist', id)
-}
 
-export function spotifyPlaylistView(ev) {
+	socket.emit('getTracklist', { type: viewType, id })
-	let id = ev.currentTarget.dataset.id
+	showTab(viewType, id)
-	TracklistTab.reset()
-	socket.emit('getTracklist', { type: 'spotifyplaylist', id: id })
-	showTab('spotifyplaylist', id)
 }
 
 function analyzeLink(link) {
-	console.log('Analyzing: ' + link)
 	LinkAnalyzerTab.reset()
 	socket.emit('analyzeLink', link)
 }
@@ -80,8 +70,10 @@ function linkListeners() {
  * @since		0.1.0
  */
 function handleSidebarClick(event) {
-	const wantToChangeTab = event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks')
+	const { target } = event
-	const wantToChangeTheme = event.target.matches('.theme_toggler')
+
+	const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
+	const wantToChangeTheme = target.matches('.theme_toggler')
 
 	if (!(wantToChangeTab || wantToChangeTheme)) return
 
@@ -89,10 +81,10 @@ function handleSidebarClick(event) {
 	let targetID
 
 	if (wantToChangeTab) {
-		sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
+		sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
 		targetID = sidebarEl.id
 	} else {
-		sidebarEl = event.target
+		sidebarEl = target
 		targetID = 'theme_toggler'
 	}
 
@@ -122,10 +114,13 @@ function handleSidebarClick(event) {
 			document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
 			sidebarEl.classList.add('theme_toggler--active')
 
-			let themeColor = sidebarEl.dataset.themeVariant
+			const {
-			document.documentElement.setAttribute('data-theme', themeColor)
+				dataset: { themeVariant }
+			} = sidebarEl
 
-			localStorage.setItem('selectedTheme', themeColor)
+			document.documentElement.setAttribute('data-theme', themeVariant)
+
+			localStorage.setItem('selectedTheme', themeVariant)
 
 			document.querySelectorAll('*').forEach(el => {
 				el.style.transition = 'all 200ms ease-in-out'
@@ -147,23 +142,26 @@ function handleSidebarClick(event) {
 }
 
 function handleSearchTabClick(event) {
-	let targetID = event.target.id
+	const {
+		target,
+		target: { id }
+	} = event
 
-	switch (targetID) {
+	switch (id) {
 		case 'search_all_tab':
-			changeTab(event.target, 'search', 'main_search')
+			changeTab(target, 'search', 'main_search')
 			break
 		case 'search_track_tab':
-			changeTab(event.target, 'search', 'track_search')
+			changeTab(target, 'search', 'track_search')
 			break
 		case 'search_album_tab':
-			changeTab(event.target, 'search', 'album_search')
+			changeTab(target, 'search', 'album_search')
 			break
 		case 'search_artist_tab':
-			changeTab(event.target, 'search', 'artist_search')
+			changeTab(target, 'search', 'artist_search')
 			break
 		case 'search_playlist_tab':
-			changeTab(event.target, 'search', 'playlist_search')
+			changeTab(target, 'search', 'playlist_search')
 			break
 
 		default:
@@ -172,20 +170,23 @@ function handleSearchTabClick(event) {
 }
 
 function handleFavoritesTabClick(event) {
-	let targetID = event.target.id
+	const {
+		target,
+		target: { id }
+	} = event
 
-	switch (targetID) {
+	switch (id) {
 		case 'favorites_playlist_tab':
-			changeTab(event.target, 'favorites', 'playlist_favorites')
+			changeTab(target, 'favorites', 'playlist_favorites')
 			break
 		case 'favorites_album_tab':
-			changeTab(event.target, 'favorites', 'album_favorites')
+			changeTab(target, 'favorites', 'album_favorites')
 			break
 		case 'favorites_artist_tab':
-			changeTab(event.target, 'favorites', 'artist_favorites')
+			changeTab(target, 'favorites', 'artist_favorites')
 			break
 		case 'favorites_track_tab':
-			changeTab(event.target, 'favorites', 'track_favorites')
+			changeTab(target, 'favorites', 'track_favorites')
 			break
 
 		default:
@@ -242,7 +243,7 @@ function showTab(type, id, back = false) {
 
 	window.tab = type == 'artist' ? 'artist_tab' : 'tracklist_tab'
 
-	currentStack = { type: type, id: id }
+	currentStack = { type, id }
 	let tabcontent = document.getElementsByClassName('main_tabcontent')
 
 	for (let i = 0; i < tabcontent.length; i++) {
@@ -256,15 +257,18 @@ function backTab() {
 	if (windows_stack.length == 1) {
 		document.getElementById(`main_${main_selected}link`).click()
 	} else {
-		let tabObj = windows_stack.pop()
+		// Retrieving tab type and tab id
-		if (tabObj.type == 'artist') {
+		let { type, id } = windows_stack.pop()
+
+		if (type === 'artist') {
 			ArtistTab.reset()
 		} else {
 			TracklistTab.reset()
 		}
-		socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
+		socket.emit('getTracklist', { type, id })
-		showTab(tabObj.type, tabObj.id, true)
+		showTab(type, id, true)
 	}
+
 	TrackPreview.stopStackedTabsPreview()
 }
 
@@ -278,8 +282,6 @@ function init() {
 export default {
 	init,
 	changeTab,
-	artistView,
+	showView,
-	albumView,
-	playlistView,
 	analyzeLink
 }

src/js/modules/toasts.js

@@ -41,5 +41,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
 }
 
 socket.on('toast', data => {
-	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
+	const { msg, icon, dismiss, id } = data
+
+	toast(msg, icon || null, dismiss !== undefined ? dismiss : true, id || null)
 })

src/js/modules/track-preview.js

@@ -55,8 +55,9 @@ function previewMouseEnter(e) {
 	$(e.currentTarget).css({ opacity: 1 })
 }
 
-function previewMouseLeave(e) {
+function previewMouseLeave(event) {
-	let obj = e.currentTarget
+	const { currentTarget: obj } = event
+
 	if (($(obj).parent().attr('playing') && preview_stopped) || !$(obj).parent().attr('playing')) {
 		$(obj).css({ opacity: 0 }, 200)
 	}
@@ -65,7 +66,9 @@ function previewMouseLeave(e) {
 // on click event
 function playPausePreview(e) {
 	e.preventDefault()
-	let obj = e.currentTarget
+
+	const { currentTarget: obj } = event
+
 	var icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
 	if ($(obj).attr('playing')) {
 		if (preview_track.paused) {