finished using destructuring synthax when useful

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

@@ -3,8 +3,8 @@ import { socket } from '../socket.js'
 import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
-import TrackPreview from '../track-preview.js'
-import Utils from '../utils.js'
+// import TrackPreview from '../track-preview.js'
+// import Utils from '../utils.js'
 
 const HomeTab = new Vue({
 	data() {
@@ -21,15 +21,19 @@ const HomeTab = new Vue({
 			document.getElementById('main_settings_tablink').click()
 		},
 		addToQueue(e) {
-			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		initHome(data) {
-			this.playlists = data.playlists.data
-			this.albums = data.albums.data
+			const {
+				playlists: { data: playlistData },
+				albums: { data: albumData }
+			} = data
+
+			this.playlists = playlistData
+			this.albums = albumData
 		}
 	},
 	mounted() {

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

@@ -29,26 +29,36 @@ const LinkAnalyzerTab = new Vue({
 			this.countries = []
 		},
 		showTrack(data) {
-			this.title =
-				data.title +
-				(data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '')
-			this.image = data.album.cover_xl
+			const {
+				title,
+				title_version,
+				album: { cover_xl },
+				link,
+				available_countries
+			} = data
+
+			this.title = title + (title_version && title.indexOf(title_version) == -1 ? ' ' + title_version : '')
+			this.image = cover_xl
 			this.type = 'track'
-			this.link = data.link
-			data.available_countries.forEach(cc => {
+			this.link = link
+
+			available_countries.forEach(cc => {
 				let temp = []
 				let chars = [...cc].map(c => c.charCodeAt() + 127397)
 				temp.push(String.fromCodePoint(...chars))
 				temp.push(Utils.COUNTRIES[cc])
 				this.countries.push(temp)
 			})
+
 			this.data = data
 		},
 		showAlbum(data) {
-			this.title = data.title
-			this.image = data.cover_xl
+			const { title, cover_xl, link } = data
+
+			this.title = title
+			this.image = cover_xl
 			this.type = 'album'
-			this.link = data.link
+			this.link = link
 			this.data = data
 		}
 	},

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

@@ -77,9 +77,30 @@ const MainSearch = new Vue({
 			}
 		},
 		changeSearchTab(section) {
-			if (section != 'TOP_RESULT') {
-				document.getElementById(`search_${section.toLowerCase()}_tab`).click()
+			if (section === 'TOP_RESULT') return
+
+			let tabID
+
+			// Using the switch beacuse it's tricky to find refernces of the belo IDs
+			switch (section) {
+				case 'TRACK':
+					tabID = 'search_track_tab'
+					break
+				case 'ALBUM':
+					tabID = 'search_album_tab'
+					break
+				case 'ARTIST':
+					tabID = 'search_artist_tab'
+					break
+				case 'PLAYLIST':
+					tabID = 'search_playlist_tab'
+					break
+
+				default:
+					break
 			}
+
+			document.getElementById(tabID).click()
 		},
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
@@ -98,45 +119,54 @@ const MainSearch = new Vue({
 			})
 		},
 		scrolledSearch(type) {
-			if (this.results[type + 'Tab'].next < this.results[type + 'Tab'].total) {
+			let currentTab = type + 'Tab'
+
+			if (this.results[currentTab].next < this.results[currentTab].total) {
 				socket.emit('search', {
 					term: this.results.query,
 					type: type,
-					start: this.results[type + 'Tab'].next,
+					start: this.results[currentTab].next,
 					nb: 30
 				})
 			}
 		},
 		handleMainSearch(result) {
 			let resetObj = { data: [], next: 0, total: 0, loaded: false }
+
 			this.results.allTab = result
 			this.results.trackTab = { ...resetObj }
 			this.results.albumTab = { ...resetObj }
 			this.results.artistTab = { ...resetObj }
 			this.results.playlistTab = { ...resetObj }
+
 			if (this.results.query == '') document.getElementById('search_all_tab').click()
+
 			this.results.query = result.QUERY
 			document.getElementById('search_tab_content').style.display = 'block'
 			document.getElementById('main_search_tablink').click()
 		},
 		handleSearch(result) {
+			const { next: nextResult, total, type, data } = result
+
+			let currentTab = type + 'Tab'
 			let next = 0
 
-			if (result.next) {
-				next = parseInt(result.next.match(/index=(\d*)/)[1])
+			if (nextResult) {
+				next = parseInt(nextResult.match(/index=(\d*)/)[1])
 			} else {
-				next = result.total
+				next = total
 			}
 
-			if (this.results[result.type + 'Tab'].total != result.total) {
-				this.results[result.type + 'Tab'].total = result.total
+			if (this.results[currentTab].total != total) {
+				this.results[currentTab].total = total
 			}
 
-			if (this.results[result.type + 'Tab'].next != next) {
-				this.results[result.type + 'Tab'].next = next
-				this.results[result.type + 'Tab'].data = this.results[result.type + 'Tab'].data.concat(result.data)
+			if (this.results[currentTab].next != next) {
+				this.results[currentTab].next = next
+				this.results[currentTab].data = this.results[currentTab].data.concat(data)
 			}
-			this.results[result.type + 'Tab'].loaded = true
+
+			this.results[currentTab].loaded = true
 		}
 	},
 	mounted() {

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

@@ -40,7 +40,7 @@ const SettingsTab = new Vue({
 
 			toast('ARL copied to clipboard', 'assignment')
 		},
-		updateMaxVolume(){
+		updateMaxVolume() {
 			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
 		},
 		saveSettings() {
@@ -72,17 +72,17 @@ const SettingsTab = new Vue({
 				socket.emit('login', arl, true, this.accountNum)
 			}
 		},
-		changeAccount(){
+		changeAccount() {
 			socket.emit('changeAccount', this.accountNum)
 		},
-		accountChanged(user, accountNum){
+		accountChanged(user, accountNum) {
 			this.$refs.username.innerText = user.name
 			this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
 			this.accountNum = accountNum
 			localStorage.setItem('accountNum', this.accountNum)
 		},
-		initAccounts(accounts){
-			this.accounts = accounts;
+		initAccounts(accounts) {
+			this.accounts = accounts
 		},
 		logout() {
 			socket.emit('logout')
@@ -120,13 +120,12 @@ const SettingsTab = new Vue({
 		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
 
 		let volume = parseInt(localStorage.getItem('previewVolume'))
-		if (isNaN(volume)){
+		if (isNaN(volume)) {
 			volume = 80
 			localStorage.setItem('previewVolume', volume)
 		}
 		window.vol.preview_max_volume = volume
 
-
 		socket.on('init_settings', this.initSettings)
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)

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

@@ -5,6 +5,7 @@ import { showView } from '../tabs.js'
 import Downloads from '../downloads.js'
 import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
+import Utils from '../utils.js'
 
 const TracklistTab = new Vue({
 	data: () => ({
@@ -16,7 +17,6 @@ const TracklistTab = new Vue({
 		image: '',
 		type: '',
 		link: '',
-		head: null,
 		body: []
 	}),
 	methods: {
@@ -31,11 +31,9 @@ const TracklistTab = new Vue({
 			this.release_date = ''
 			this.explicit = false
 			this.type = ''
-			this.head = []
 			this.body = []
 		},
 		addToQueue(e) {
-			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
 		openQualityModal(e) {
@@ -58,83 +56,83 @@ const TracklistTab = new Vue({
 			}
 			return selected.join(';')
 		},
-		convertDuration(duration) {
-			//convert from seconds only to mm:ss format
-			let mm, ss
-			mm = Math.floor(duration / 60)
-			ss = duration - mm * 60
-			//add leading zero if ss < 0
-			if (ss < 10) {
-				ss = '0' + ss
-			}
-			return mm + ':' + ss
-		},
+		convertDuration: Utils.convertDuration,
 		showAlbum(data) {
-			this.type = 'Album'
-			this.link = `https://www.deezer.com/album/${data.id}`
-			this.title = data.title
-			this.explicit = data.explicit_lyrics
-			this.label = data.label
-			this.metadata = `${data.artist.name} • ${data.tracks.length} songs`
-			this.release_date = data.release_date.substring(0, 10)
-			this.image = data.cover_xl
-			this.head = [
-				{ title: '<i class="material-icons">music_note</i>', width: '24px' },
-				{ title: '#' },
-				{ title: 'Song' },
-				{ title: 'Artist' },
-				{ title: '<i class="material-icons">timer</i>', width: '40px' }
-			]
+			const {
+				id: albumID,
+				title: albumTitle,
+				explicit_lyrics,
+				label: albumLabel,
+				artist: { name: artistName },
+				tracks: albumTracks,
+				tracks: { length: numberOfTracks },
+				release_date,
+				cover_xl
+			} = data
 
-			if (_.isEmpty(data.tracks)) {
+			this.type = 'Album'
+			this.link = `https://www.deezer.com/album/${albumID}`
+			this.title = albumTitle
+			this.explicit = explicit_lyrics
+			this.label = albumLabel
+			this.metadata = `${artistName} • ${numberOfTracks} songs`
+			this.release_date = release_date.substring(0, 10)
+			this.image = cover_xl
+
+			if (_.isEmpty(albumTracks)) {
 				this.body = null
 			} else {
-				this.body = data.tracks
+				this.body = albumTracks
 			}
 		},
 		showPlaylist(data) {
-			this.type = 'Playlist'
-			this.link = `https://www.deezer.com/playlist/${data.id}`
-			this.title = data.title
-			this.image = data.picture_xl
-			this.release_date = data.creation_date.substring(0, 10)
-			this.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
-			this.head = [
-				{ title: '<i class="material-icons">music_note</i>', width: '24px' },
-				{ title: '#' },
-				{ title: 'Song' },
-				{ title: 'Artist' },
-				{ title: 'Album' },
-				{ title: '<i class="material-icons">timer</i>', width: '40px' }
-			]
+			const {
+				id: playlistID,
+				title: playlistTitle,
+				picture_xl: playlistCover,
+				creation_date,
+				creator: { name: creatorName },
+				tracks: playlistTracks,
+				tracks: { length: numberOfTracks }
+			} = data
 
-			if (_.isEmpty(data.tracks)) {
+			this.type = 'Playlist'
+			this.link = `https://www.deezer.com/playlist/${playlistID}`
+			this.title = playlistTitle
+			this.image = playlistCover
+			this.release_date = creation_date.substring(0, 10)
+			this.metadata = `by ${creatorName} • ${numberOfTracks} songs`
+
+			if (_.isEmpty(playlistTracks)) {
 				this.body = null
 			} else {
-				this.body = data.tracks
+				this.body = playlistTracks
 			}
 		},
 		showSpotifyPlaylist(data) {
+			const {
+				uri: playlistURI,
+				name: playlistName,
+				images,
+				images: { length: numberOfImages },
+				owner: { display_name: ownerName },
+				tracks: playlistTracks,
+				tracks: { length: numberOfTracks }
+			} = data
+
 			this.type = 'Spotify Playlist'
-			this.link = data.uri
-			this.title = data.name
-			this.image = data.images.length
-				? data.images[0].url
+			this.link = playlistURI
+			this.title = playlistName
+			this.image = numberOfImages
+				? images[0].url
 				: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg'
 			this.release_date = ''
-			this.metadata = `by ${data.owner.display_name} • ${data.tracks.length} songs`
-			this.head = [
-				{ title: '<i class="material-icons">music_note</i>', width: '24px' },
-				{ title: '#' },
-				{ title: 'Song' },
-				{ title: 'Artist' },
-				{ title: 'Album' },
-				{ title: '<i class="material-icons">timer</i>', width: '40px' }
-			]
-			if (_.isEmpty(data.tracks)) {
+			this.metadata = `by ${ownerName} • ${numberOfTracks} songs`
+
+			if (_.isEmpty(playlistTracks)) {
 				this.body = null
 			} else {
-				this.body = data.tracks
+				this.body = playlistTracks
 			}
 		}
 	},

src/js/modules/utils.js

@@ -12,11 +12,11 @@ function isValidURL(text) {
 }
 
 function convertDuration(duration) {
-	// convert from seconds only to mm:ss format
+	// Convert from seconds only to mm:ss format
 	let mm, ss
 	mm = Math.floor(duration / 60)
 	ss = duration - mm * 60
-	//add leading zero if ss < 0
+	// Add leading zero if ss < 0
 	if (ss < 10) {
 		ss = '0' + ss
 	}