removed httpVueLoader, moved Vue instances in different files, moved socket in different file, other minor code changes

public/js/modules/artist-tab.js

@@ -0,0 +1,90 @@
+import { socket } from './socket.js'
+
+export const ArtistTab = new Vue({
+	el: '#artist_tab',
+	data: {
+		currentTab: '',
+		sortKey: 'release_date',
+		sortOrder: 'desc',
+		title: '',
+		image: '',
+		type: '',
+		link: '',
+		head: null,
+		body: null
+	},
+	methods: {
+		addToQueue(e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal(e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		moreInfo(url, e) {
+			if (e) e.preventDefault()
+			showTrackListSelective(url, true)
+		},
+		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
+		},
+		checkNewRelease(date) {
+			var g1 = new Date()
+			var g2 = new Date(date)
+			g2.setDate(g2.getDate() + 3)
+			g1.setHours(0, 0, 0, 0)
+			if (g1.getTime() <= g2.getTime()) {
+				return true
+			} else {
+				return false
+			}
+		}
+	},
+	computed: {
+		showTable() {
+			if (this.body) return _.orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
+			else return []
+		}
+	}
+})
+
+export function resetArtistTab() {
+	ArtistTab.title = 'Loading...'
+	ArtistTab.image = ''
+	ArtistTab.type = ''
+	ArtistTab.currentTab = ''
+	ArtistTab.sortKey = 'release_date'
+	ArtistTab.sortOrder = 'desc'
+	ArtistTab.link = ''
+	ArtistTab.head = []
+	ArtistTab.body = null
+}
+
+socket.on('show_artist', data => {
+	ArtistTab.title = data.name
+	ArtistTab.image = data.picture_xl
+	ArtistTab.type = 'Artist'
+	ArtistTab.link = `https://www.deezer.com/artist/${data.id}`
+	ArtistTab.currentTab = Object.keys(data.releases)[0]
+	ArtistTab.sortKey = 'release_date'
+	ArtistTab.sortOrder = 'desc'
+	ArtistTab.head = [
+		{ title: 'Title', sortKey: 'title' },
+		{ title: 'Release Date', sortKey: 'release_date' },
+		{ title: '', width: '32px' }
+	]
+	if (_.isEmpty(data.releases)) {
+		ArtistTab.body = null
+	} else {
+		ArtistTab.body = data.releases
+	}
+})

public/js/modules/main-search.js

@@ -0,0 +1,110 @@
+import { socket } from './socket.js'
+
+export 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: {
+		changeSearchTab(section) {
+			if (section != 'TOP_RESULT') {
+				document.getElementById(`search_${section.toLowerCase()}_tab`).click()
+			}
+		},
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		numberWithDots(x) {
+			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+		},
+		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
+		}
+	}
+}).$mount('#search_tab')
+
+socket.on('mainSearch', result => {
+	let resetObj = { data: [], next: 0, total: 0, loaded: false }
+	MainSearch.results.allTab = result
+	MainSearch.results.query = result.QUERY
+	MainSearch.results.trackTab = { ...resetObj }
+	MainSearch.results.albumTab = { ...resetObj }
+	MainSearch.results.artistTab = { ...resetObj }
+	MainSearch.results.playlistTab = { ...resetObj }
+	document.getElementById('search_all_tab').click()
+	document.getElementById('search_tab_content').style.display = 'block'
+	document.getElementById('main_search_tablink').click()
+})
+
+socket.on('search', result => {
+	let next = 0
+
+	if (result.next) {
+		next = parseInt(result.next.match(/index=(\d*)/)[1])
+	} else {
+		next = result.total
+	}
+
+	if (MainSearch.results[result.type + 'Tab'].total != result.total) {
+		MainSearch.results[result.type + 'Tab'].total = result.total
+	}
+
+	if (MainSearch.results[result.type + 'Tab'].next != next) {
+		MainSearch.results[result.type + 'Tab'].next = next
+		MainSearch.results[result.type + 'Tab'].data = MainSearch.results[result.type + 'Tab'].data.concat(result.data)
+	}
+	MainSearch.results[result.type + 'Tab'].loaded = true
+})

public/js/modules/search-tab/main-search.js

@@ -1,74 +0,0 @@
-export const MainSearch = new Vue({
-	el: '#search_tab',
-	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: {
-		changeSearchTab(section) {
-			if (section != 'TOP_RESULT') clickElement('search_' + section.toLowerCase() + '_tab')
-		},
-		addToQueue: function (e) {
-			e.stopPropagation()
-			sendAddToQueue(e.currentTarget.dataset.link)
-		},
-		openQualityModal: function (e) {
-			e.preventDefault()
-			openQualityModal(e.currentTarget.dataset.link)
-		},
-		numberWithDots(x) {
-			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
-		},
-		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
-		}
-	}
-})

public/js/modules/settings-tab.js

@@ -0,0 +1,61 @@
+import { toast } from './toasts.js'
+import { socket } from './socket.js'
+
+// Globals
+window.lastSettings = {}
+window.lastCredentials = {}
+
+export const SettingsTab = new Vue({
+	data() {
+		return {
+			settings: { tags: {} },
+			spotifyFeatures: {}
+		}
+	},
+	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')
+		},
+		saveSettings() {
+			console.log(socket)
+
+			lastSettings = { ...SettingsTab.settings }
+			lastCredentials = { ...SettingsTab.spotifyFeatures }
+			socket.emit('saveSettings', lastSettings, lastCredentials)
+		},
+		login() {
+			let arl = this.$refs.loginInput.value
+			if (arl != '' && arl != localStorage.getItem('arl')) {
+				socket.emit('login', arl, true)
+			}
+		},
+		logout() {
+			socket.emit('logout')
+		}
+	}
+}).$mount('#settings_tab')
+
+socket.on('init_settings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings loaded!', 'settings')
+})
+
+socket.on('updateSettings', function (settings, credentials) {
+	loadSettings(settings, credentials)
+	toast('Settings updated!', 'settings')
+})
+
+function loadSettings(settings, spotifyCredentials) {
+	lastSettings = { ...settings }
+	lastCredentials = { ...spotifyCredentials }
+	SettingsTab.settings = settings
+	SettingsTab.spotifyFeatures = spotifyCredentials
+}

public/js/modules/socket.js

@@ -0,0 +1 @@
+export const socket = io.connect(window.location.href)

public/js/modules/toasts.js

@@ -0,0 +1,36 @@
+let toastsWithId = {}
+
+export const toast = function (msg, icon = null, dismiss = true, id = null) {
+	if (toastsWithId[id]) {
+		let toastObj = toastsWithId[id]
+		let toastDOM = $(`div.toastify[toast_id=${id}]`)
+		if (msg) {
+			toastDOM.find('.toast-message').html(msg)
+		}
+		if (icon) {
+			if (icon == 'loading') icon = `<div class="circle-loader"></div>`
+			else icon = `<i class="material-icons">${icon}</i>`
+			toastDOM.find('.toast-icon').html(icon)
+		}
+		if (dismiss !== null && dismiss) {
+			setTimeout(function () {
+				toastObj.hideToast()
+				delete toastsWithId[id]
+			}, 3000)
+		}
+	} else {
+		if (icon == null) icon = ''
+		else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
+		else icon = `<i class="material-icons">${icon}</i>`
+		let toastObj = Toastify({
+			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
+			duration: dismiss ? 3000 : 0,
+			gravity: 'bottom',
+			position: 'left'
+		}).showToast()
+		if (id) {
+			toastsWithId[id] = toastObj
+			$(toastObj.toastElement).attr('toast_id', id)
+		}
+	}
+}

public/js/modules/tracklist-tab.js

@@ -0,0 +1,111 @@
+import { socket } from './socket.js'
+
+export const TracklistTab = new Vue({
+	el: '#tracklist_tab',
+	data: {
+		title: '',
+		metadata: '',
+		release_date: '',
+		label: '',
+		explicit: false,
+		image: '',
+		type: '',
+		link: '',
+		head: null,
+		body: []
+	},
+	methods: {
+		addToQueue: function (e) {
+			e.stopPropagation()
+			sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			openQualityModal(e.currentTarget.dataset.link)
+		},
+		toggleAll: function (e) {
+			this.body.forEach(item => {
+				if (item.type == 'track') {
+					item.selected = e.currentTarget.checked
+				}
+			})
+		},
+		selectedLinks: function () {
+			var selected = []
+			if (this.body) {
+				this.body.forEach(item => {
+					if (item.type == 'track' && item.selected) selected.push(item.link)
+				})
+			}
+			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
+		}
+	}
+})
+
+export function resetTracklistTab() {
+	TracklistTab.title = 'Loading...'
+	TracklistTab.image = ''
+	TracklistTab.metadata = ''
+	TracklistTab.label = ''
+	TracklistTab.release_date = ''
+	TracklistTab.explicit = false
+	TracklistTab.type = ''
+	TracklistTab.head = []
+	TracklistTab.body = []
+}
+
+socket.on('show_album', data => {
+	TracklistTab.type = 'Album'
+	TracklistTab.link = `https://www.deezer.com/album/${data.id}`
+	TracklistTab.title = data.title
+	TracklistTab.explicit = data.explicit_lyrics
+	TracklistTab.label = data.label
+	TracklistTab.metadata = `${data.artist.name} • ${data.tracks.length} songs`
+	TracklistTab.release_date = data.release_date.substring(0, 10)
+	TracklistTab.image = data.cover_xl
+	TracklistTab.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' }
+	]
+	if (_.isEmpty(data.tracks)) {
+		TracklistTab.body = null
+	} else {
+		TracklistTab.body = data.tracks
+	}
+})
+
+socket.on('show_playlist', data => {
+	TracklistTab.type = 'Playlist'
+	TracklistTab.link = `https://www.deezer.com/playlist/${data.id}`
+	TracklistTab.title = data.title
+	TracklistTab.image = data.picture_xl
+	TracklistTab.release_date = data.creation_date.substring(0, 10)
+	TracklistTab.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
+	TracklistTab.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)) {
+		TracklistTab.body = null
+	} else {
+		TracklistTab.body = data.tracks
+	}
+})