From 6c49966c45bf67179e2aee2fc25c3e8b23d00d72 Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Sun, 19 Apr 2020 19:22:21 +0200
Subject: [PATCH] Started implementing track preview

---
 public/index.html       | 127 ++++++++++++++++----------
 public/js/app/search.js | 196 +++++++++++++++-------------------------
 public/js/app/tabs.js   |   6 +-
 3 files changed, 154 insertions(+), 175 deletions(-)

diff --git a/public/index.html b/public/index.html
index c5af2ec..e2e3ab6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,25 +33,24 @@
 						<div id="search_tab_content">
 							<!-- ### Main Search Tab ### -->
 							<div id="main_search" class="search_tabcontent">
-								<template v-for="section in results.ORDER">
-									<div v-if="(section != 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" class="search_section">
+								<template v-for="section in results.allTab.ORDER">
+									<div v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)" class="search_section">
 										<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 										<!-- Top result -->
-										<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.TOP_RESULT[0].__TYPE__.toLowerCase()+'View'](event)" v-bind:data-id="results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : ''">
+										<div v-if="section == 'TOP_RESULT'" class="top_result clickable" v-on:click="window[results.allTab.TOP_RESULT[0].type+'View'](event)" v-bind:data-id="results.allTab.TOP_RESULT[0].id">
 											<div class="cover_container">
-												<img v-bind:src="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + results.TOP_RESULT[0].ART_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + results.TOP_RESULT[0].ALB_PICTURE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'https://e-cdns-images.dzcdn.net/images/'+ results.TOP_RESULT[0].PICTURE_TYPE +'/' + results.TOP_RESULT[0].PLAYLIST_PICTURE :'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'"
-													v-bind:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
-													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+results.TOP_RESULT[0].__TYPE__+'/'+(results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_ID : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_ID : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
+												<img v-bind:src="results.allTab.TOP_RESULT[0].picture" v-bind:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="results.allTab.TOP_RESULT[0].link" class="download_overlay"><i class="material-icons">get_app</i></div>
 											</div>
 											<div class="info_box">
-												<p class="primary-text">{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}</p>
-												<p class="secondary-text">{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? numberWithDots(results.TOP_RESULT[0].NB_FAN) + ' fans' : results.TOP_RESULT[0].__TYPE__ == 'album' ? 'by '+results.TOP_RESULT[0].ART_NAME+' - '+results.TOP_RESULT[0].NUMBER_TRACK+' tracks' : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? 'by '+results.TOP_RESULT[0].PARENT_USERNAME+' - '+results.TOP_RESULT[0].NB_SONG+' tracks' : '' }}</p>
-												<span class="tag">{{ results.TOP_RESULT[0].__TYPE__.charAt(0).toUpperCase() + results.TOP_RESULT[0].__TYPE__.substring(1)}}</span>
+												<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
+												<p class="secondary-text">{{ results.allTab.TOP_RESULT[0].type == 'artist' ? numberWithDots(results.allTab.TOP_RESULT[0].nb_fan) + ' fans' : 'by '+results.allTab.TOP_RESULT[0].artist+' - '+results.allTab.TOP_RESULT[0].nb_song+' tracks'}}</p>
+												<span class="tag">{{ results.allTab.TOP_RESULT[0].type.charAt(0).toUpperCase() + results.allTab.TOP_RESULT[0].type.substring(1)}}</span>
 											</div>
 										</div>
-										<div v-if="section == 'TRACK'">
+										<div v-else-if="section == 'TRACK'">
 											<table class="tracks_table">
-												<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
+												<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
 													<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
 													<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
 													<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
@@ -61,28 +60,51 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
 												</tr>
 											</table>
 										</div>
-										<div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
-											<div v-for="release in results[section].data.slice(0, 10)" class="release clickable" v-on:click="window[section.toLowerCase()+'View'](event)" v-bind:data-id="section == 'ARTIST' ? release.ART_ID : section == 'ALBUM' ? release.ALB_ID : section == 'PLAYLIST' ? release.PLAYLIST_ID : ''">
+										<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.ARTIST.data.slice(0, 10)" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
 												<div class="cover_container">
-													<img v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:src="(section == 'ARTIST' ? 'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE : section == 'ALBUM' ? 'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE : section == 'PLAYLIST' ? 'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE : 'https://e-cdns-images.dzcdn.net/images/cover/' ) + '/156x156-000000-80-0-0.jpg'">
-													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/'+(section == 'ARTIST' ? 'artist/'+release.ART_ID : section == 'ALBUM' ? 'album/'+release.ALB_ID : section == 'PLAYLIST' ? 'playlist/'+release.PLAYLIST_ID : '')" class="download_overlay"><i class="material-icons">get_app</i></div>
+													<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
 												</div>
-												<p class="primary-text">{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}</p>
-												<p class="secondary-text">{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}</p>
+												<p class="primary-text">{{release.ART_NAME}}</p>
+												<p class="secondary-text">{{numberWithDots(release.NB_FAN) + ' fans'}}</p>
+											</div>
+										</div>
+										<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.ALBUM.data.slice(0, 10)" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
+												<div class="cover_container">
+													<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
+												</div>
+												<p class="primary-text">{{release.ALB_TITLE}}</p>
+												<p class="secondary-text">{{release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks'}}</p>
+											</div>
+										</div>
+										<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
+											<div v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
+												<div class="cover_container">
+													<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
+													<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
+												</div>
+												<p class="primary-text">{{ release.TITLE }}</p>
+												<p class="secondary-text">{{release.NB_SONG+' tracks'}}</p>
 											</div>
 										</div>
 									</div>
 								</template>
-								<div v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[section].data.length == 0)">
+								<div v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">
 									<h1>No results</h1>
 								</div>
 							</div>
 							<!-- ### Track Search Tab ### -->
 							<div id="track_search" class="search_tabcontent">
-								<div v-if="results.data.length == 0">
+								<div v-if="!results.trackTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.trackTab.data.length == 0">
 									<h1>No Tracks found</h1>
 								</div>
-								<table class="tracks_table" v-if="results.data.length > 0">
+								<table class="tracks_table" v-if="results.trackTab.data.length > 0">
 									<tr>
 										<th style="width: 48px;"></th>
 										<th>Title</th>
@@ -91,61 +113,70 @@ <h1>No Tracks found</h1>
 										<th><i class="material-icons">timer</i></th>
 										<th style="width: 56px;"></th>
 									</tr>
-									<tr v-for="track in results.data" class="track_row">
-										<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
-										<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
-										<td class="breakline"><span class="clickable" v-on:click="artistView(event)" v-bind:data-id="artist.ART_ID" v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
-										<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.ALB_ID">{{track.ALB_TITLE}}</td>
-										<td>{{convertDuration(track.DURATION)}}</td>
-										<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
+									<tr v-for="track in results.trackTab.data" class="track_row">
+										<td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="track.album.cover_small"></td>
+										<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
+										<td class="breakline" class="clickable" v-on:click="artistView(event)" v-bind:data-id="track.artist.id">{{track.artist.name}}</td>
+										<td class="breakline clickable" v-on:click="albumView(event)" v-bind:data-id="track.album.id">{{track.album.title}}</td>
+										<td>{{convertDuration(track.duration)}}</td>
+										<td role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="track.link" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
 									</tr>
 								</table>
 							</div>
 							<!-- ### Album Search Tab ### -->
 							<div id="album_search" class="search_tabcontent">
-								<div v-if="results.data.length == 0">
+								<div v-if="!results.albumTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.albumTab.data.length == 0">
 									<h1>No Albums found</h1>
 								</div>
-								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.ALB_ID">
+								<div class="release_grid" v-if="results.albumTab.data.length > 0">
+									<div v-for="release in results.albumTab.data" class="release clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
 										<div class="cover_container">
-											<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
-											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/album/'+release.ALB_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
+											<img class="rounded coverart" v-bind:src="release.cover_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i class="material-icons">get_app</i></div>
 										</div>
-										<p class="primary-text">{{ release.ALB_TITLE }}</p>
-										<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
+										<p class="primary-text">{{ release.title }}</p>
+										<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
 									</div>
 								</div>
 							</div>
 							<!-- ### Artist Search Tab ### -->
 							<div id="artist_search" class="search_tabcontent">
-								<div v-if="results.data.length == 0">
+								<div v-if="!results.artistTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.artistTab.data.length == 0">
 									<h1>No Artists found</h1>
 								</div>
-								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.ART_ID">
+								<div class="release_grid" v-if="results.artistTab.data.length > 0">
+									<div v-for="release in results.artistTab.data" class="release clickable" v-on:click="artistView(event)" v-bind:data-id="release.id">
 										<div class="cover_container">
-											<img class="circle coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
-											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/artist/'+release.ART_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
+											<img class="circle coverart" v-bind:src="release.picture_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i class="material-icons">get_app</i></div>
 										</div>
-										<p class="primary-text">{{ release.ART_NAME }}</p>
-										<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
+										<p class="primary-text">{{ release.name }}</p>
+										<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
 									</div>
 								</div>
 							</div>
 							<!-- ### Playlist Search Tab ### -->
 							<div id="playlist_search" class="search_tabcontent">
-								<div v-if="results.data.length == 0">
+								<div v-if="!results.playlistTab.loaded">
+									<h1>Loading</h1>
+								</div>
+								<div v-else-if="results.playlistTab.data.length == 0">
 									<h1>No Playlists found</h1>
 								</div>
-								<div class="release_grid" v-if="results.data.length > 0">
-									<div v-for="release in results.data" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.PLAYLIST_ID">
+								<div class="release_grid" v-if="results.playlistTab.data.length > 0">
+									<div v-for="release in results.playlistTab.data" class="release clickable" v-on:click="playlistView(event)" v-bind:data-id="release.id">
 										<div class="cover_container">
-											<img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/'+ release.PICTURE_TYPE +'/' + release.PLAYLIST_PICTURE + '/156x156-000000-80-0-0.jpg'">
-											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="'https://www.deezer.com/playlist/'+release.PLAYLIST_ID" class="download_overlay"><i class="material-icons">get_app</i></div>
+											<img class="rounded coverart" v-bind:src="release.picture_medium">
+											<div role="button" aria-label="download" v-on:contextmenu="openQualityModal(event)" v-on:click="addToQueue(event)" v-bind:data-link="release.link" class="download_overlay"><i class="material-icons">get_app</i></div>
 										</div>
-										<p class="primary-text">{{ release.TITLE }}</p>
-										<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
+										<p class="primary-text">{{ release.title }}</p>
+										<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
 									</div>
 								</div>
 							</div>
diff --git a/public/js/app/search.js b/public/js/app/search.js
index 5a79bf0..d538cbe 100644
--- a/public/js/app/search.js
+++ b/public/js/app/search.js
@@ -5,43 +5,43 @@ $('#content').on('scroll', function () {
 			main_selected == 'search_tab' &&
 			['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
 		) {
-			scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
+			scrolledSearch(search_selected.split('_')[0])
 		}
 	}
 })
 
-function scrolledSearch(vueTab) {
-	query = vueTab.query
-	if (vueTab.results.next < vueTab.results.total) {
+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: vueTab.query,
-			type: vueTab.type,
-			start: vueTab.results.next,
-			nb: vueTab.nb
+			term: query,
+			type: type,
+			start: MainSearch.results[type+"Tab"].next,
+			nb: 30
 		})
 	}
 }
 
 function searchUpadate(result) {
-	vueTab = null
-	switch (result.type) {
-		case 'TRACK':
-			vueTab = trackSearch
-			break
-		case 'ALBUM':
-			vueTab = albumSearch
-			break
-		case 'ARTIST':
-			vueTab = artistSearch
-			break
-		case 'PLAYLIST':
-			vueTab = playlistSearch
-			break
-	}
-	if (vueTab && vueTab.results.next != result.next) {
-		vueTab.results.next = result.next
-		vueTab.results.data = vueTab.results.data.concat(result.data)
+	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) {
 	searchUpadate(result)
@@ -63,24 +63,48 @@ function sendAddToQueue(url, bitrate = null) {
 }
 
 let MainSearch = new Vue({
-	el: '#main_search',
-	data() {
-		return {
-			names: {
-				TOP_RESULT: 'Top Result',
-				TRACK: 'Tracks',
-				ARTIST: 'Artists',
-				ALBUM: 'Albums',
-				PLAYLIST: 'Playlists'
-			},
-			results: {
-				QUERY: '',
+	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: {},
-				TOP_RESULT: [],
 				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
 			}
 		}
 	},
@@ -93,84 +117,10 @@ let MainSearch = new Vue({
 	}
 })
 
-var trackSearch = new Vue({
-	el: '#track_search',
-	data: {
-		type: 'TRACK',
-		nb: 40,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	},
-	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
-	}
-})
-
-var albumSearch = new Vue({
-	el: '#album_search',
-	data: {
-		type: 'ALBUM',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	},
-	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
-	}
-})
-
-var artistSearch = new Vue({
-	el: '#artist_search',
-	data: {
-		type: 'ARTIST',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	},
-	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
-	}
-})
-
-var playlistSearch = new Vue({
-	el: '#playlist_search',
-	data: {
-		type: 'PLAYLIST',
-		nb: 20,
-		query: '',
-		results: {
-			data: [],
-			next: 0,
-			total: 0
-		}
-	},
-	methods: {
-		addToQueue: function(e){e.stopPropagation(); sendAddToQueue(e.currentTarget.dataset.link)},
-		openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)}
-	}
-})
-
-let term = null
-
 // Search section
 $("#searchbar").keyup(function(e){
   if(e.keyCode == 13){
-    term = this.value
+    let term = this.value
     if (isValidURL(term)){
       if (e.ctrlKey){
         openQualityModal(term);
@@ -178,7 +128,7 @@ $("#searchbar").keyup(function(e){
         sendAddToQueue(term);
       }
     }else{
-			if (term != MainSearch.results.QUERY || main_selected == 'search_tab'){
+			if (term != MainSearch.query || main_selected == 'search_tab'){
 				document.getElementById("search_tab_content").style.display = "none";
 				socket.emit("mainSearch", {term: term});
 			}else{
@@ -191,15 +141,13 @@ $("#searchbar").keyup(function(e){
 })
 
 function mainSearchHandler(result) {
-	MainSearch.results = result
-	trackSearch.results = result.TRACK
-	albumSearch.results = result.ALBUM
-	artistSearch.results = result.ARTIST
-	playlistSearch.results = result.PLAYLIST
-	trackSearch.query = result.QUERY
-	albumSearch.query = result.QUERY
-	artistSearch.query = result.QUERY
-	playlistSearch.query = result.QUERY
+	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()
diff --git a/public/js/app/tabs.js b/public/js/app/tabs.js
index 3aa62e9..2583115 100644
--- a/public/js/app/tabs.js
+++ b/public/js/app/tabs.js
@@ -28,11 +28,11 @@ function changeTab(evt, section, tabName) {
 
 	// Check if you need to load more content in the search tab
 	if (
-		document.getElementById('content').offsetHeight >= document.getElementById('content').scrollHeight &&
 		main_selected == 'search_tab' &&
-		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
+		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
+		MainSearch.results[search_selected.split('_')[0]+"Tab"].data.length == 0
 	) {
-		scrolledSearch(window[search_selected.split('_')[0] + 'Search'])
+		search(search_selected.split('_')[0])
 	}
 }