From 550e912c83241af37f99c2b16b0487019d90913c Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Sat, 9 May 2020 17:32:59 +0200
Subject: [PATCH] Added placeholder in search tab

---
 public/index.html | 391 +++++++++++++++++++++++-----------------------
 1 file changed, 198 insertions(+), 193 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3747011..5b4fc31 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,212 +50,217 @@
 				<section id="content">
 					<div id="container">
 						<div id="search_tab" class="main_tabcontent">
-							<div class="tab">
-								<button class="search_tablinks" id="search_all_tab">All</button>
-								<button class="search_tablinks" id="search_track_tab">Tracks</button>
-								<button class="search_tablinks" id="search_album_tab">Album</button>
-								<button class="search_tablinks" id="search_artist_tab">Artist</button>
-								<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
+							<div :class="{'hide': results.query != ''}">
+								<h2>Start searching!</h2>
 							</div>
-							<div id="search_tab_content">
-								<!-- ### Main Search Tab ### -->
-								<div id="main_search" class="search_tabcontent">
-									<template v-for="section in results.allTab.ORDER">
+							<div :class="{'hide': results.query == ''}">
+								<div class="tab">
+									<button class="search_tablinks" id="search_all_tab">All</button>
+									<button class="search_tablinks" id="search_track_tab">Tracks</button>
+									<button class="search_tablinks" id="search_album_tab">Album</button>
+									<button class="search_tablinks" id="search_artist_tab">Artist</button>
+									<button class="search_tablinks" id="search_playlist_tab">Playlist</button>
+								</div>
+								<div id="search_tab_content">
+									<!-- ### Main Search Tab ### -->
+									<div id="main_search" class="search_tabcontent">
+										<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 @click="changeSearchTab(section)">{{ names[section] }}</h1>
+												<!-- Top result -->
+												<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
+													:data-id="results.allTab.TOP_RESULT[0].id">
+													<div class="cover_container">
+														<img :src="results.allTab.TOP_RESULT[0].picture"
+															:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+														<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+															@click.stop="addToQueue" :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.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-else-if="section == 'TRACK'">
+													<table class="tracks_table">
+														<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"
+																	: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" @click="artistView" :data-id="artist.ART_ID"
+																	v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
+															</td>
+															<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
+																{{track.ALB_TITLE}}</td>
+															<td>{{convertDuration(track.DURATION)}}</td>
+															<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+																@click.stop="addToQueue" :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>
+													</table>
+												</div>
+												<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"
+														@click="artistView" :data-id="release.ART_ID">
+														<div class="cover_container">
+															<img class="circle coverart"
+																:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
+															<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+																@click.stop="addToQueue" :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">{{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"
+														@click="albumView" :data-id="release.ALB_ID">
+														<div class="cover_container">
+															<img class="rounded coverart"
+																:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
+															<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+																@click.stop="addToQueue" :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"
+														@click="playlistView" :data-id="release.PLAYLIST_ID">
+														<div class="cover_container">
+															<img class="rounded coverart"
+																: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" @contextmenu.prevent="openQualityModal"
+																@click.stop="addToQueue" :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="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
-											class="search_section">
-											<h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
-											<!-- Top result -->
-											<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
-												:data-id="results.allTab.TOP_RESULT[0].id">
+											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.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.trackTab.data.length > 0">
+											<tr>
+												<th style="width: 48px;"></th>
+												<th>Title</th>
+												<th>Artists</th>
+												<th>Album</th>
+												<th><i class="material-icons">timer</i></th>
+												<th style="width: 56px;"></th>
+											</tr>
+											<tr v-for="track in results.trackTab.data" class="track_row">
+												<td style="width: 48px; text-align: center;">
+													<a href="#" @click="playPausePreview"
+														:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview"><i
+															@mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
+															class="material-icons preview_controls">play_arrow</i><img class="rounded coverart"
+															:src="track.album.cover_small">
+												</td>
+												<td class="breakline">
+													{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
+												</td>
+												<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
+													{{track.artist.name}}</td>
+												<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
+													{{track.album.title}}</td>
+												<td>{{convertDuration(track.duration)}}</td>
+												<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+													@click.stop="addToQueue" :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.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.albumTab.data.length > 0">
+											<div v-for="release in results.albumTab.data" class="release clickable" @click="albumView"
+												:data-id="release.id">
 												<div class="cover_container">
-													<img :src="results.allTab.TOP_RESULT[0].picture"
-														:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
+													<img class="rounded coverart" :src="release.cover_medium">
 													<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-														@click.stop="addToQueue" :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.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-else-if="section == 'TRACK'">
-												<table class="tracks_table">
-													<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"
-																: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" @click="artistView" :data-id="artist.ART_ID"
-																v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
-														</td>
-														<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
-															{{track.ALB_TITLE}}</td>
-														<td>{{convertDuration(track.DURATION)}}</td>
-														<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-															@click.stop="addToQueue" :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>
-												</table>
-											</div>
-											<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"
-													@click="artistView" :data-id="release.ART_ID">
-													<div class="cover_container">
-														<img class="circle coverart"
-															:src="'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'">
-														<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-															@click.stop="addToQueue" :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">{{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"
-													@click="albumView" :data-id="release.ALB_ID">
-													<div class="cover_container">
-														<img class="rounded coverart"
-															:src="'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'">
-														<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-															@click.stop="addToQueue" :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"
-													@click="playlistView" :data-id="release.PLAYLIST_ID">
-													<div class="cover_container">
-														<img class="rounded coverart"
-															: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" @contextmenu.prevent="openQualityModal"
-															@click.stop="addToQueue" :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>
+														@click.stop="addToQueue" :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">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
 											</div>
 										</div>
-									</template>
-									<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.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.trackTab.data.length > 0">
-										<tr>
-											<th style="width: 48px;"></th>
-											<th>Title</th>
-											<th>Artists</th>
-											<th>Album</th>
-											<th><i class="material-icons">timer</i></th>
-											<th style="width: 56px;"></th>
-										</tr>
-										<tr v-for="track in results.trackTab.data" class="track_row">
-											<td style="width: 48px; text-align: center;">
-												<a href="#" @click="playPausePreview"
-													:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview"><i
-														@mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
-														class="material-icons preview_controls">play_arrow</i><img class="rounded coverart"
-														:src="track.album.cover_small">
-											</td>
-											<td class="breakline">
-												{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
-											</td>
-											<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
-												{{track.artist.name}}</td>
-											<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
-												{{track.album.title}}</td>
-											<td>{{convertDuration(track.duration)}}</td>
-											<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-												@click.stop="addToQueue" :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.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.albumTab.data.length > 0">
-										<div v-for="release in results.albumTab.data" class="release clickable" @click="albumView"
-											:data-id="release.id">
-											<div class="cover_container">
-												<img class="rounded coverart" :src="release.cover_medium">
-												<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-													@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
+									<!-- ### Artist Search Tab ### -->
+									<div id="artist_search" class="search_tabcontent">
+										<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.artistTab.data.length > 0">
+											<div v-for="release in results.artistTab.data" class="release clickable" @click="artistView"
+												:data-id="release.id">
+												<div class="cover_container">
+													<img class="circle coverart" :src="release.picture_medium">
+													<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+														@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+															class="material-icons">get_app</i></div>
+												</div>
+												<p class="primary-text">{{ release.name }}</p>
+												<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
 											</div>
-											<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.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.artistTab.data.length > 0">
-										<div v-for="release in results.artistTab.data" class="release clickable" @click="artistView"
-											:data-id="release.id">
-											<div class="cover_container">
-												<img class="circle coverart" :src="release.picture_medium">
-												<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-													@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
-											</div>
-											<p class="primary-text">{{ release.name }}</p>
-											<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
+									<!-- ### Playlist Search Tab ### -->
+									<div id="playlist_search" class="search_tabcontent">
+										<div v-if="!results.playlistTab.loaded">
+											<h1>Loading</h1>
 										</div>
-									</div>
-								</div>
-								<!-- ### Playlist Search Tab ### -->
-								<div id="playlist_search" class="search_tabcontent">
-									<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.playlistTab.data.length > 0">
-										<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
-											:data-id="release.id">
-											<div class="cover_container">
-												<img class="rounded coverart" :src="release.picture_medium">
-												<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-													@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-														class="material-icons">get_app</i></div>
+										<div v-else-if="results.playlistTab.data.length == 0">
+											<h1>No Playlists found</h1>
+										</div>
+										<div class="release_grid" v-if="results.playlistTab.data.length > 0">
+											<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
+												:data-id="release.id">
+												<div class="cover_container">
+													<img class="rounded coverart" :src="release.picture_medium">
+													<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+														@click.stop="addToQueue" :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">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
 											</div>
-											<p class="primary-text">{{ release.title }}</p>
-											<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
 										</div>
 									</div>
 								</div>