deemixer/public/js/app/search.js

// Load more content when the search page is at the end
$('#content').on('scroll', function () {
	if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
		if (
			main_selected == 'search_tab' &&
			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
		) {
			scrolledSearch(search_selected.split('_')[0])
		}
	}
})

function search(type) {
	query = MainSearch.results.query
	socket.emit('search', {
		term: query,
		type: type,
		start: MainSearch.results[type + 'Tab'].next,
		nb: 30
	})
}

function scrolledSearch(type) {
	query = MainSearch.results.query
	if (MainSearch.results[type + 'Tab'].next < MainSearch.results[type + 'Tab'].total) {
		socket.emit('search', {
			term: query,
			type: type,
			start: MainSearch.results[type + 'Tab'].next,
			nb: 30
		})
	}
}

function searchUpdate(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
}

socket.on('search', function (result) {
	searchUpdate(result)
})

function clickElement(button) {
	return document.getElementById(button).click()
}

function sendAddToQueue(url, bitrate = null) {
	if (url.indexOf(';') != -1) {
		urls = url.split(';')
		urls.forEach(url => {
			socket.emit('addToQueue', { url: url, bitrate: bitrate })
		})
	} else if (url != '') {
		socket.emit('addToQueue', { url: url, bitrate: bitrate })
	}
}

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)
		}
	}
})

console.log(MainSearch)

// Search section
$('#searchbar').keyup(function (e) {
	if (e.keyCode == 13) {
		let term = this.value
		if (isValidURL(term)) {
			if (e.ctrlKey) {
				openQualityModal(term)
			} else {
				sendAddToQueue(term)
			}
		} else {
			if (term != MainSearch.query || main_selected == 'search_tab') {
				document.getElementById('search_tab_content').style.display = 'none'
				socket.emit('mainSearch', { term: term })
			} else {
				document.getElementById('search_all_tab').click()
				document.getElementById('search_tab_content').style.display = 'block'
				document.getElementById('main_search_tablink').click()
			}
		}
	}
})

function mainSearchHandler(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('mainSearch', function (result) {
	mainSearchHandler(result)
})