added global alias for js folders, removed modules folder in js

src/js/components/LoadingPlaceholder.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+Vue.component('loading-placeholder', {
+	template: `<div class="loading_placeholder">
+		<span class="loading_placeholder__text">Loading...</span>
+		<div class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>`
+})

src/js/components/TestComponent.vue

@@ -0,0 +1,17 @@
+<template>
+	<div>Test</div>
+</template>
+
+<script>
+export default {
+	data: () => ({
+		test: 'super test'
+	}),
+	mounted() {
+		console.log('abcdefghi')
+	}
+}
+</script>
+
+<style>
+</style>

src/js/components/artist-tab.js

@@ -0,0 +1,97 @@
+import { isEmpty, orderBy } from 'lodash-es'
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+import { showView } from '@/js/tabs.js'
+
+const ArtistTab = new Vue({
+	data() {
+		return {
+			currentTab: '',
+			sortKey: 'release_date',
+			sortOrder: 'desc',
+			title: '',
+			image: '',
+			type: '',
+			link: '',
+			head: null,
+			body: null
+		}
+	},
+	methods: {
+		albumView: showView.bind(null, 'album'),
+		reset() {
+			this.title = 'Loading...'
+			this.image = ''
+			this.type = ''
+			this.currentTab = ''
+			this.sortKey = 'release_date'
+			this.sortOrder = 'desc'
+			this.link = ''
+			this.head = []
+			this.body = null
+		},
+		addToQueue(e) {
+			e.stopPropagation()
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		sortBy(key) {
+			if (key == this.sortKey) {
+				this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
+			} else {
+				this.sortKey = key
+				this.sortOrder = 'asc'
+			}
+		},
+		changeTab(tab) {
+			this.currentTab = tab
+		},
+		getCurrentTab() {
+			return this.currentTab
+		},
+		checkNewRelease(date) {
+			let g1 = new Date()
+			let g2 = new Date(date)
+			g2.setDate(g2.getDate() + 3)
+			g1.setHours(0, 0, 0, 0)
+
+			return g1.getTime() <= g2.getTime()
+		},
+		showArtist(data) {
+			const { name, picture_xl, id, releases } = data
+
+			this.title = name
+			this.image = picture_xl
+			this.type = 'Artist'
+			this.link = `https://www.deezer.com/artist/${id}`
+			if (this.currentTab === '') this.currentTab = Object.keys(releases)[0]
+			this.sortKey = 'release_date'
+			this.sortOrder = 'desc'
+			this.head = [
+				{ title: 'Title', sortKey: 'title' },
+				{ title: 'Release Date', sortKey: 'release_date' },
+				{ title: '', width: '32px' }
+			]
+			if (isEmpty(releases)) {
+				this.body = null
+			} else {
+				this.body = releases
+			}
+		}
+	},
+	computed: {
+		showTable() {
+			if (this.body) return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			else return []
+		}
+	},
+	mounted() {
+		socket.on('show_artist', this.showArtist)
+	}
+}).$mount('#artist_tab')
+
+export default ArtistTab

src/js/components/charts-tab.js

@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+import TrackPreview from '@/js/track-preview.js'
+import Utils from '@/js/utils.js'
+
+const ChartsTab = new Vue({
+	data() {
+		return {
+			country: '',
+			id: 0,
+			countries: [],
+			chart: []
+		}
+	},
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
+		convertDuration: Utils.convertDuration,
+		addToQueue(e) {
+			e.stopPropagation()
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		getTrackList(event) {
+			document.getElementById('content').scrollTo(0, 0)
+
+			const {
+				currentTarget: {
+					dataset: { title }
+				},
+				currentTarget: {
+					dataset: { id }
+				}
+			} = event
+
+			this.country = title
+			localStorage.setItem('chart', this.country)
+			this.id = id
+			socket.emit('getChartTracks', this.id)
+		},
+		setTracklist(data) {
+			this.chart = data
+		},
+		changeCountry() {
+			this.country = ''
+			this.id = 0
+		},
+		initCharts(data) {
+			this.countries = data
+			this.country = localStorage.getItem('chart') || ''
+
+			if (!this.country) return
+
+			let i = 0
+			for (; i < this.countries.length; i++) {
+				if (this.countries[i].title == this.country) break
+			}
+
+			if (i !== this.countries.length) {
+				this.id = this.countries[i].id
+				socket.emit('getChartTracks', this.id)
+			} else {
+				this.country = ''
+				localStorage.setItem('chart', this.country)
+			}
+		}
+	},
+	mounted() {
+		socket.on('init_charts', this.initCharts)
+		socket.on('setChartTracks', this.setTracklist)
+	}
+}).$mount('#charts_tab')
+
+export default ChartsTab

src/js/components/errors-tab.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+const ErrorsTab = new Vue({
+	data: () => ({
+		title: '',
+		errors: []
+	}),
+	methods: {
+		reset(){
+			this.title = ''
+			this.errors = []
+		},
+		showErrors(data){
+			this.title = data.artist+" - "+data.title
+			this.errors = data.errors
+		}
+	}
+}).$mount('#errors_tab')
+
+export default ErrorsTab

src/js/components/favorites-tab.js

@@ -0,0 +1,91 @@
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+import TrackPreview from '@/js/track-preview.js'
+import Utils from '@/js/utils.js'
+import { toast } from '@/js/toasts'
+
+const FavoritesTab = new Vue({
+	data() {
+		return {
+			tracks: [],
+			albums: [],
+			artists: [],
+			playlists: [],
+			spotifyPlaylists: []
+		}
+	},
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		playlistView: showView.bind(null, 'playlist'),
+		spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
+		convertDuration: Utils.convertDuration,
+		addToQueue(e) {
+			e.stopPropagation()
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		updated_userSpotifyPlaylists(data) {
+			this.spotifyPlaylists = data
+		},
+		updated_userPlaylists(data) {
+			this.playlists = data
+		},
+		updated_userAlbums(data) {
+			this.albums = data
+		},
+		updated_userArtist(data) {
+			this.artists = data
+		},
+		updated_userTracks(data) {
+			this.tracks = data
+		},
+		reloadTabs() {
+			this.$refs.reloadButton.classList.add('spin')
+			socket.emit('update_userFavorites')
+			if (localStorage.getItem('spotifyUser'))
+				socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
+		},
+		updated_userFavorites(data) {
+			const { tracks, albums, artists, playlists } = data
+			this.tracks = tracks
+			this.albums = albums
+			this.artists = artists
+			this.playlists = playlists
+
+			// Removing animation class only when the animation has completed an iteration
+			// Prevents animation ugly stutter
+			this.$refs.reloadButton.addEventListener(
+				'animationiteration',
+				() => {
+					this.$refs.reloadButton.classList.remove('spin')
+					toast('Refresh completed!', 'done', true)
+				},
+				{ once: true }
+			)
+		},
+		initFavorites(data) {
+			this.updated_userFavorites(data)
+			document.getElementById('favorites_playlist_tab').click()
+		}
+	},
+	mounted() {
+		socket.on('init_favorites', this.initFavorites)
+		socket.on('updated_userFavorites', this.updated_userFavorites)
+		socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
+		socket.on('updated_userPlaylists', this.updated_userPlaylists)
+		socket.on('updated_userAlbums', this.updated_userAlbums)
+		socket.on('updated_userArtist', this.updated_userArtist)
+		socket.on('updated_userTracks', this.updated_userTracks)
+	}
+}).$mount('#favorites_tab')
+
+export default FavoritesTab

src/js/components/home-tab.js

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+
+const HomeTab = new Vue({
+	data() {
+		return {
+			playlists: [],
+			albums: []
+		}
+	},
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		playlistView: showView.bind(null, 'playlist'),
+		openSettings() {
+			document.getElementById('main_settings_tablink').click()
+		},
+		addToQueue(e) {
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		initHome(data) {
+			const {
+				playlists: { data: playlistData },
+				albums: { data: albumData }
+			} = data
+
+			this.playlists = playlistData
+			this.albums = albumData
+		}
+	},
+	mounted() {
+		if (localStorage.getItem('arl')) {
+			this.$refs.notLogged.classList.add('hide')
+		}
+
+		socket.on('init_home', this.initHome)
+	}
+}).$mount('#home_tab')
+
+export default HomeTab

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

@@ -0,0 +1,79 @@
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Utils from '@/js/utils.js'
+
+const LinkAnalyzerTab = new Vue({
+	data() {
+		return {
+			title: '',
+			subtitle: '',
+			image: '',
+			data: {},
+			type: '',
+			link: '',
+			id: '0',
+			countries: []
+		}
+	},
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		convertDuration: Utils.convertDuration,
+		reset() {
+			this.title = 'Loading...'
+			this.subtitle = ''
+			this.image = ''
+			this.data = {}
+			this.type = ''
+			this.link = ''
+			this.countries = []
+		},
+		showTrack(data) {
+			const {
+				title,
+				title_version,
+				album: { cover_xl },
+				link,
+				available_countries,
+				id
+			} = data
+
+			this.title = title + (title_version && title.indexOf(title_version) == -1 ? ' ' + title_version : '')
+			this.image = cover_xl
+			this.type = 'track'
+			this.link = link
+			this.id = id
+
+			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) {
+			const { title, cover_xl, link, id } = data
+
+			this.title = title
+			this.image = cover_xl
+			this.type = 'album'
+			this.link = link
+			this.data = data
+			this.id = id
+		},
+		notSupported() {
+			this.link = 'error'
+		}
+	},
+	mounted() {
+		socket.on('analyze_track', this.showTrack)
+		socket.on('analyze_album', this.showAlbum)
+		socket.on('analyze_notSupported', this.notSupported)
+	}
+}).$mount('#analyzer_tab')
+
+export default LinkAnalyzerTab

src/js/components/main-search.js

@@ -0,0 +1,182 @@
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+import TrackPreview from '@/js/track-preview.js'
+import Utils from '@/js/utils.js'
+
+const MainSearch = new Vue({
+	data: {
+		names: {
+			TOP_RESULT: 'Top Result',
+			TRACK: 'Tracks',
+			ARTIST: 'Artists',
+			ALBUM: 'Albums',
+			PLAYLIST: 'Playlists'
+		},
+		results: {
+			query: '',
+			allTab: {
+				ORDER: [],
+				TOP_RESULT: [],
+				ALBUM: {},
+				ARTIST: {},
+				TRACK: {},
+				PLAYLIST: {}
+			},
+			trackTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			albumTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			artistTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			},
+			playlistTab: {
+				data: [],
+				next: 0,
+				total: 0,
+				loaded: false
+			}
+		}
+	},
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		playlistView: showView.bind(null, 'playlist'),
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
+		handleClickTopResult(event) {
+			let topResultType = this.results.allTab.TOP_RESULT[0].type
+
+			switch (topResultType) {
+				case 'artist':
+					this.artistView(event)
+					break
+				case 'album':
+					this.albumView(event)
+					break
+				case 'playlist':
+					this.playlistView(event)
+					break
+
+				default:
+					break
+			}
+		},
+		changeSearchTab(section) {
+			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)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		numberWithDots: Utils.numberWithDots,
+		convertDuration: Utils.convertDuration,
+		search(type) {
+			socket.emit('search', {
+				term: this.results.query,
+				type: type,
+				start: this.results[type + 'Tab'].next,
+				nb: 30
+			})
+		},
+		scrolledSearch(type) {
+			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[currentTab].next,
+					nb: 30
+				})
+			}
+		},
+		handleMainSearch(result) {
+			// Hiding loading placeholder
+			document.getElementById('content').style.display = ''
+			document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
+
+			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 (nextResult) {
+				next = parseInt(nextResult.match(/index=(\d*)/)[1])
+			} else {
+				next = total
+			}
+
+			if (this.results[currentTab].total != total) {
+				this.results[currentTab].total = total
+			}
+
+			if (this.results[currentTab].next != next) {
+				this.results[currentTab].next = next
+				this.results[currentTab].data = this.results[currentTab].data.concat(data)
+			}
+
+			this.results[currentTab].loaded = true
+		}
+	},
+	mounted() {
+		socket.on('mainSearch', this.handleMainSearch)
+		socket.on('search', this.handleSearch)
+	}
+}).$mount('#search_tab')
+
+export default MainSearch

src/js/components/settings-tab.js

@@ -0,0 +1,142 @@
+import Vue from 'vue'
+import { toast } from '@/js/toasts.js'
+import { socket } from '@/js/socket.js'
+import TestComponent from '@components/TestComponent.vue'
+
+const SettingsTab = new Vue({
+	components: {
+		TestComponent
+	},
+	data: () => ({
+		settings: { tags: {} },
+		lastSettings: {},
+		spotifyFeatures: {},
+		lastCredentials: {},
+		defaultSettings: {},
+		lastUser: '',
+		spotifyUser: '',
+		slimDownloads: false,
+		previewVolume: window.vol,
+		accountNum: 0,
+		accounts: []
+	}),
+	computed: {
+		changeSlimDownloads: {
+			get() {
+				return this.slimDownloads
+			},
+			set(wantSlimDownloads) {
+				this.slimDownloads = wantSlimDownloads
+				document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
+				localStorage.setItem('slimDownloads', wantSlimDownloads)
+			}
+		}
+	},
+	methods: {
+		copyARLtoClipboard() {
+			let copyText = this.$refs.loginInput
+
+			copyText.setAttribute('type', 'text')
+			copyText.select()
+			copyText.setSelectionRange(0, 99999)
+			document.execCommand('copy')
+			copyText.setAttribute('type', 'password')
+
+			toast('ARL copied to clipboard', 'assignment')
+		},
+		updateMaxVolume() {
+			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
+		},
+		saveSettings() {
+			this.lastSettings = { ...this.settings }
+			this.lastCredentials = { ...this.spotifyFeatures }
+			let changed = false
+			if (this.lastUser != this.spotifyUser) {
+				// force cloning without linking
+				this.lastUser = (' ' + this.spotifyUser).slice(1)
+				localStorage.setItem('spotifyUser', this.lastUser)
+				changed = true
+			}
+
+			socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
+		},
+		loadSettings(settings, spotifyCredentials, defaults = null) {
+			if (defaults) {
+				this.defaultSettings = { ...defaults }
+			}
+
+			this.lastSettings = { ...settings }
+			this.lastCredentials = { ...spotifyCredentials }
+			this.settings = settings
+			this.spotifyFeatures = spotifyCredentials
+		},
+		login() {
+			let arl = this.$refs.loginInput.value.trim()
+			if (arl != '' && arl != localStorage.getItem('arl')) {
+				socket.emit('login', arl, true, this.accountNum)
+			}
+		},
+		changeAccount() {
+			socket.emit('changeAccount', this.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
+		},
+		logout() {
+			socket.emit('logout')
+		},
+		initSettings(settings, credentials, defaults) {
+			this.loadSettings(settings, credentials, defaults)
+			toast('Settings loaded!', 'settings')
+		},
+		updateSettings(settings, credentials) {
+			this.loadSettings(settings, credentials)
+			toast('Settings updated!', 'settings')
+		},
+		resetSettings() {
+			this.settings = { ...this.defaultSettings }
+		}
+	},
+	mounted() {
+		this.$refs.loggedInInfo.classList.add('hide')
+
+		if (localStorage.getItem('arl')) {
+			this.$refs.loginInput.value = localStorage.getItem('arl').trim()
+		}
+		if (localStorage.getItem('accountNum')) {
+			this.accountNum = localStorage.getItem('accountNum')
+		}
+
+		let spotifyUser = localStorage.getItem('spotifyUser')
+
+		if (spotifyUser) {
+			this.lastUser = spotifyUser
+			this.spotifyUser = spotifyUser
+			socket.emit('update_userSpotifyPlaylists', spotifyUser)
+		}
+
+		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
+
+		let volume = parseInt(localStorage.getItem('previewVolume'))
+		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)
+		socket.on('familyAccounts', this.initAccounts)
+	}
+}).$mount('#settings_tab')
+
+export default SettingsTab

src/js/components/tracklist-tab.js

@@ -0,0 +1,146 @@
+import { isEmpty } from 'lodash-es'
+import Vue from 'vue'
+import { socket } from '@/js/socket.js'
+import { showView } from '@/js/tabs.js'
+import Downloads from '@/js/downloads.js'
+import QualityModal from '@/js/quality-modal.js'
+import TrackPreview from '@/js/track-preview.js'
+import Utils from '@/js/utils.js'
+
+const TracklistTab = new Vue({
+	data: () => ({
+		title: '',
+		metadata: '',
+		release_date: '',
+		label: '',
+		explicit: false,
+		image: '',
+		type: '',
+		link: '',
+		body: []
+	}),
+	methods: {
+		artistView: showView.bind(null, 'artist'),
+		albumView: showView.bind(null, 'album'),
+		playPausePreview: TrackPreview.playPausePreview,
+		reset() {
+			this.title = 'Loading...'
+			this.image = ''
+			this.metadata = ''
+			this.label = ''
+			this.release_date = ''
+			this.explicit = false
+			this.type = ''
+			this.body = []
+		},
+		addToQueue(e) {
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		toggleAll(e) {
+			this.body.forEach(item => {
+				if (item.type == 'track') {
+					item.selected = e.currentTarget.checked
+				}
+			})
+		},
+		selectedLinks() {
+			var selected = []
+			if (this.body) {
+				this.body.forEach(item => {
+					if (item.type == 'track' && item.selected)
+						selected.push(this.type == 'Spotify Playlist' ? item.uri : item.link)
+				})
+			}
+			return selected.join(';')
+		},
+		convertDuration: Utils.convertDuration,
+		showAlbum(data) {
+			const {
+				id: albumID,
+				title: albumTitle,
+				explicit_lyrics,
+				label: albumLabel,
+				artist: { name: artistName },
+				tracks: albumTracks,
+				tracks: { length: numberOfTracks },
+				release_date,
+				cover_xl
+			} = data
+
+			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 = albumTracks
+			}
+		},
+		showPlaylist(data) {
+			const {
+				id: playlistID,
+				title: playlistTitle,
+				picture_xl: playlistCover,
+				creation_date,
+				creator: { name: creatorName },
+				tracks: playlistTracks,
+				tracks: { length: numberOfTracks }
+			} = data
+
+			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 = 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 = 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 ${ownerName} • ${numberOfTracks} songs`
+
+			if (isEmpty(playlistTracks)) {
+				this.body = null
+			} else {
+				this.body = playlistTracks
+			}
+		}
+	},
+	mounted() {
+		socket.on('show_album', this.showAlbum)
+		socket.on('show_playlist', this.showPlaylist)
+		socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
+	}
+}).$mount('#tracklist_tab')
+
+export default TracklistTab