Added placeholder in search tab
This commit is contained in:
RemixDev
parent
77ea938bfe
commit
550e912c83
|
|
@ -50,212 +50,217 @@
|
||||||
<section id="content">
|
<section id="content">
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="search_tab" class="main_tabcontent">
|
<div id="search_tab" class="main_tabcontent">
|
||||||
<div class="tab">
|
<div :class="{'hide': results.query != ''}">
|
||||||
<button class="search_tablinks" id="search_all_tab">All</button>
|
<h2>Start searching!</h2>
|
||||||
<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>
|
||||||
<div id="search_tab_content">
|
<div :class="{'hide': results.query == ''}">
|
||||||
<!-- ### Main Search Tab ### -->
|
<div class="tab">
|
||||||
<div id="main_search" class="search_tabcontent">
|
<button class="search_tablinks" id="search_all_tab">All</button>
|
||||||
<template v-for="section in results.allTab.ORDER">
|
<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
|
<div
|
||||||
v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
|
v-if="results.allTab.ORDER.every(section => section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0)">
|
||||||
class="search_section">
|
<h1>No results</h1>
|
||||||
<h1 @click="changeSearchTab(section)">{{ names[section] }}</h1>
|
</div>
|
||||||
<!-- Top result -->
|
</div>
|
||||||
<div v-if="section == 'TOP_RESULT'" class="top_result clickable" @click="handleClickTopResult"
|
<!-- ### Track Search Tab ### -->
|
||||||
:data-id="results.allTab.TOP_RESULT[0].id">
|
<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">
|
<div class="cover_container">
|
||||||
<img :src="results.allTab.TOP_RESULT[0].picture"
|
<img class="rounded coverart" :src="release.cover_medium">
|
||||||
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"></img>
|
|
||||||
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||||
@click.stop="addToQueue" :data-link="results.allTab.TOP_RESULT[0].link"
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
||||||
class="download_overlay"><i class="material-icons">get_app</i></div>
|
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>
|
||||||
|
<p class="primary-text">{{ release.title }}</p>
|
||||||
|
<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
<!-- ### Artist Search Tab ### -->
|
||||||
<!-- ### Track Search Tab ### -->
|
<div id="artist_search" class="search_tabcontent">
|
||||||
<div id="track_search" class="search_tabcontent">
|
<div v-if="!results.artistTab.loaded">
|
||||||
<div v-if="!results.trackTab.loaded">
|
<h1>Loading</h1>
|
||||||
<h1>Loading</h1>
|
</div>
|
||||||
</div>
|
<div v-else-if="results.artistTab.data.length == 0">
|
||||||
<div v-else-if="results.trackTab.data.length == 0">
|
<h1>No Artists found</h1>
|
||||||
<h1>No Tracks found</h1>
|
</div>
|
||||||
</div>
|
<div class="release_grid" v-if="results.artistTab.data.length > 0">
|
||||||
<table class="tracks_table" v-if="results.trackTab.data.length > 0">
|
<div v-for="release in results.artistTab.data" class="release clickable" @click="artistView"
|
||||||
<tr>
|
:data-id="release.id">
|
||||||
<th style="width: 48px;"></th>
|
<div class="cover_container">
|
||||||
<th>Title</th>
|
<img class="circle coverart" :src="release.picture_medium">
|
||||||
<th>Artists</th>
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||||
<th>Album</th>
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
||||||
<th><i class="material-icons">timer</i></th>
|
class="material-icons">get_app</i></div>
|
||||||
<th style="width: 56px;"></th>
|
</div>
|
||||||
</tr>
|
<p class="primary-text">{{ release.name }}</p>
|
||||||
<tr v-for="track in results.trackTab.data" class="track_row">
|
<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="primary-text">{{ release.title }}</p>
|
|
||||||
<p class="secondary-text">{{ 'by '+release.artist.name+' - '+release.nb_tracks+' tracks' }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- ### Playlist Search Tab ### -->
|
||||||
<!-- ### Artist Search Tab ### -->
|
<div id="playlist_search" class="search_tabcontent">
|
||||||
<div id="artist_search" class="search_tabcontent">
|
<div v-if="!results.playlistTab.loaded">
|
||||||
<div v-if="!results.artistTab.loaded">
|
<h1>Loading</h1>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
<div v-else-if="results.playlistTab.data.length == 0">
|
||||||
</div>
|
<h1>No Playlists found</h1>
|
||||||
<!-- ### Playlist Search Tab ### -->
|
</div>
|
||||||
<div id="playlist_search" class="search_tabcontent">
|
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
|
||||||
<div v-if="!results.playlistTab.loaded">
|
<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
|
||||||
<h1>Loading</h1>
|
:data-id="release.id">
|
||||||
</div>
|
<div class="cover_container">
|
||||||
<div v-else-if="results.playlistTab.data.length == 0">
|
<img class="rounded coverart" :src="release.picture_medium">
|
||||||
<h1>No Playlists found</h1>
|
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||||
</div>
|
@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
|
||||||
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
|
class="material-icons">get_app</i></div>
|
||||||
<div v-for="release in results.playlistTab.data" class="release clickable" @click="playlistView"
|
</div>
|
||||||
:data-id="release.id">
|
<p class="primary-text">{{ release.title }}</p>
|
||||||
<div class="cover_container">
|
<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
|
||||||
<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>
|
</div>
|
||||||
<p class="primary-text">{{ release.title }}</p>
|
|
||||||
<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue