re-organized main search methods, changed Utils export

public/js/modules/main-search.js

@@ -57,13 +57,13 @@ const MainSearch = new Vue({
 
 			switch (topResultType) {
 				case 'artist':
-					artistView(event)
+					this.artistView(event)
 					break
 				case 'album':
-					albumView(event)
+					this.albumView(event)
 					break
 				case 'playlist':
-					playlistView(event)
+					this.playlistView(event)
 					break
 
 				default:
@@ -114,41 +114,43 @@ const MainSearch = new Vue({
 					nb: 30
 				})
 			}
+		},
+		handleMainSearch(result) {
+			let resetObj = { data: [], next: 0, total: 0, loaded: false }
+			this.results.allTab = result
+			this.results.query = result.QUERY
+			this.results.trackTab = { ...resetObj }
+			this.results.albumTab = { ...resetObj }
+			this.results.artistTab = { ...resetObj }
+			this.results.playlistTab = { ...resetObj }
+			document.getElementById('search_all_tab').click()
+			document.getElementById('search_tab_content').style.display = 'block'
+			document.getElementById('main_search_tablink').click()
+		},
+		handleSearch(result) {
+			let next = 0
+
+			if (result.next) {
+				next = parseInt(result.next.match(/index=(\d*)/)[1])
+			} else {
+				next = result.total
+			}
+
+			if (this.results[result.type + 'Tab'].total != result.total) {
+				this.results[result.type + 'Tab'].total = result.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)
+			}
+			this.results[result.type + 'Tab'].loaded = true
 		}
+	},
+	mounted() {
+		socket.on('mainSearch', this.handleMainSearch)
+		socket.on('search', this.handleSearch)
 	}
 }).$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
-})
-
 export default MainSearch

public/js/modules/search.js

@@ -1,5 +1,5 @@
 import MainSearch from './main-search.js'
-import * as Utils from './utils.js'
+import Utils from './utils.js'
 import QualityModal from './quality-modal.js'
 import Downloads from './downloads.js'
 import { socket } from './socket.js'

public/js/modules/tracklist-tab.js

@@ -4,7 +4,6 @@ import Downloads from './downloads.js'
 import QualityModal from './quality-modal.js'
 
 const TracklistTab = new Vue({
-	el: '#tracklist_tab',
 	data: {
 		title: '',
 		metadata: '',
@@ -116,6 +115,6 @@ const TracklistTab = new Vue({
 		socket.on('show_album', this.showAlbum)
 		socket.on('show_playlist', this.showPlaylist)
 	}
-})
+}).$mount('#tracklist_tab')
 
 export default TracklistTab

public/js/modules/utils.js

@@ -1,4 +1,4 @@
-export function isValidURL(text) {
+function isValidURL(text) {
 	if (text.toLowerCase().startsWith('http')) {
 		if (text.toLowerCase().indexOf('deezer.com') >= 0 || text.toLowerCase().indexOf('open.spotify.com') >= 0)
 			return true
@@ -6,7 +6,7 @@ export function isValidURL(text) {
 	return false
 }
 
-export function convertDuration(duration) {
+function convertDuration(duration) {
 	//convert from seconds only to mm:ss format
 	let mm, ss
 	mm = Math.floor(duration / 60)
@@ -18,7 +18,7 @@ export function convertDuration(duration) {
 	return mm + ':' + ss
 }
 
-export function convertDurationSeparated(duration) {
+function convertDurationSeparated(duration) {
 	let hh, mm, ss
 	mm = Math.floor(duration / 60)
 	hh = Math.floor(mm / 60)
@@ -29,7 +29,7 @@ export function convertDurationSeparated(duration) {
 
 // On scroll event, returns currentTarget = null
 // Probably on other events too
-export function debounce(func, wait, immediate) {
+function debounce(func, wait, immediate) {
 	var timeout
 	return function () {
 		var context = this
@@ -44,3 +44,10 @@ export function debounce(func, wait, immediate) {
 		if (callNow) func.apply(context, args)
 	}
 }
+
+export default {
+	isValidURL,
+	convertDuration,
+	convertDurationSeparated,
+	debounce
+}