completed transfer of search tab in Vue SFCs
This commit is contained in:
Roberto Tonino
parent
534da272d4
commit
a22e795efe
@ -33,136 +33,8 @@
|
||||
<div id="middle_section">
|
||||
<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
|
||||
<section id="content"><div id="container">
|
||||
<!-- <div id="v-app" style="height: 300px;"><app/></div> -->
|
||||
<div id="search_tab" class="main_tabcontent">
|
||||
<div class="tab">
|
||||
<button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
|
||||
<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
|
||||
<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
|
||||
<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
|
||||
<button class="search_tablinks" id="search_playlist_tab" onclick="changeTab(event, 'search', 'playlist_search')">Playlist</button>
|
||||
</div>
|
||||
<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">
|
||||
<h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
|
||||
<!-- Top result -->
|
||||
<div v-if="section == 'TOP_RESULT'" class="top_result">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="section == 'TRACK'">
|
||||
<table class="tracks_table">
|
||||
<tr v-for="track in results.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 v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
|
||||
<td class="breakline">{{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>
|
||||
</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" 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 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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="results.ORDER.every(section => section == 'TOP_RESULT' ? results[section].length == 0 : results[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">
|
||||
<h1>No Tracks found</h1>
|
||||
</div>
|
||||
<table class="tracks_table" v-if="results.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.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 v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
|
||||
<td class="breakline">{{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>
|
||||
</table>
|
||||
</div>
|
||||
<!-- ### Album Search Tab ### -->
|
||||
<div id="album_search" class="search_tabcontent">
|
||||
<div v-if="results.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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ALB_TITLE }}</p>
|
||||
<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ### Artist Search Tab ### -->
|
||||
<div id="artist_search" class="search_tabcontent">
|
||||
<div v-if="results.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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ART_NAME }}</p>
|
||||
<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ### Playlist Search Tab ### -->
|
||||
<div id="playlist_search" class="search_tabcontent">
|
||||
<div v-if="results.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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.TITLE }}</p>
|
||||
<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search Tab -->
|
||||
<div id="v-app"><app/></div>
|
||||
|
||||
<div id="home_tab" class="main_tabcontent">
|
||||
<h1>Home</h1>
|
||||
@ -464,7 +336,7 @@ <h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ rele
|
||||
<script type="text/javascript" src="/public/js/vendor/vue.min.js"></script>
|
||||
<script type="text/javascript" src="/public/js/vendor/lodash.min.js"></script>
|
||||
<script type="text/javascript" src="/public/js/vendor/toastify.js"></script>
|
||||
<!-- <script type="text/javascript" src="/public/js/app/v-app.js"></script> -->
|
||||
<script type="text/javascript" src="/public/js/app/v-app.js"></script>
|
||||
<script type="text/javascript" src="/public/js/app/app.js"></script>
|
||||
<script type="text/javascript" src="/public/js/app/tabs.js"></script>
|
||||
<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>
|
||||
|
||||
@ -1,44 +1,56 @@
|
||||
<template>
|
||||
<div id="search_tab-2" class="main_tabcontentZZZ">
|
||||
<div id="search_tab" class="main_tabcontent">
|
||||
<div class="tab">
|
||||
<button
|
||||
id="search_all_tab"
|
||||
class="search_tablinks"
|
||||
id="search_all_tab-2"
|
||||
onclick="changeTab(event, 'search', 'main_search')"
|
||||
>All</button>
|
||||
<button
|
||||
id="search_track_tab"
|
||||
class="search_tablinks"
|
||||
id="search_track_tab-2"
|
||||
onclick="changeTab(event, 'search', 'track_search')"
|
||||
>Tracks</button>
|
||||
<button
|
||||
id="search_album_tab"
|
||||
class="search_tablinks"
|
||||
id="search_album_tab-2"
|
||||
onclick="changeTab(event, 'search', 'album_search')"
|
||||
>Album</button>
|
||||
<button
|
||||
id="search_artist_tab"
|
||||
class="search_tablinks"
|
||||
id="search_artist_tab-2"
|
||||
onclick="changeTab(event, 'search', 'artist_search')"
|
||||
>Artist</button>
|
||||
<button
|
||||
id="search_playlist_tab"
|
||||
class="search_tablinks"
|
||||
id="search_playlist_tab-2"
|
||||
onclick="changeTab(event, 'search', 'playlist_search')"
|
||||
>Playlist</button>
|
||||
</div>
|
||||
<div id="search_tab_content">
|
||||
<the-main-search />
|
||||
<the-main-search></the-main-search>
|
||||
<the-track-search></the-track-search>
|
||||
<the-album-search></the-album-search>
|
||||
<the-artist-search></the-artist-search>
|
||||
<the-playlist-search></the-playlist-search>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const TheMainSearch = httpVueLoader('./search-tab/TheMainSearch.vue')
|
||||
const TheTrackSearch = httpVueLoader('./search-tab/TheTrackSearch.vue')
|
||||
const TheAlbumSearch = httpVueLoader('./search-tab/TheAlbumSearch.vue')
|
||||
const TheArtistSearch = httpVueLoader('./search-tab/TheArtistSearch.vue')
|
||||
const ThePlaylistSearch = httpVueLoader('./search-tab/ThePlaylistSearch.vue')
|
||||
|
||||
module.exports = {
|
||||
components: {
|
||||
TheMainSearch
|
||||
TheMainSearch,
|
||||
TheTrackSearch,
|
||||
TheAlbumSearch,
|
||||
TheArtistSearch,
|
||||
ThePlaylistSearch
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
64
public/js/app/components/search-tab/TheAlbumSearch.vue
Normal file
64
public/js/app/components/search-tab/TheAlbumSearch.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div id="album_search" class="search_tabcontent">
|
||||
<div v-if="results.data.length == 0">
|
||||
<h1>No Albums found</h1>
|
||||
</div>
|
||||
<div v-else class="release_grid">
|
||||
<div v-for="release in results.data" class="release">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ALB_TITLE }}</p>
|
||||
<p class="secondary-text">{{ 'by '+release.ART_NAME }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
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)
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
this.results = result.ALBUM
|
||||
this.query = result.QUERY
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
64
public/js/app/components/search-tab/TheArtistSearch.vue
Normal file
64
public/js/app/components/search-tab/TheArtistSearch.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div id="artist_search" class="search_tabcontent">
|
||||
<div v-if="results.data.length == 0">
|
||||
<h1>No Artists found</h1>
|
||||
</div>
|
||||
<div v-else class="release_grid">
|
||||
<div v-for="release in results.data" class="release">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ART_NAME }}</p>
|
||||
<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
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)
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
this.results = result.ARTIST
|
||||
this.query = result.QUERY
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,44 +1,38 @@
|
||||
<template>
|
||||
<div id="main_search-2" class="search_tabcontentZZZ">
|
||||
<div id="main_search" class="search_tabcontent">
|
||||
<template v-for="(section, index) in results.ORDER">
|
||||
<div
|
||||
class="search_section"
|
||||
v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)"
|
||||
:key="`section-${index}`"
|
||||
>
|
||||
<h1 @click="changeSearchTab(section)">{{ formatNames(section) }}</h1>
|
||||
<div v-if="section == 'TOP_RESULT'" class="top_result">
|
||||
<h1 @click="changeSearchTab(section)">{{ toTitleCase(section) }}</h1>
|
||||
<div v-if="section === 'TOP_RESULT'" class="top_result">
|
||||
<div class="cover_container">
|
||||
<img
|
||||
:src="topResultURL"
|
||||
:src="getTopResultImgURL2(results.TOP_RESULT)"
|
||||
:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"
|
||||
/>
|
||||
<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 : '')"
|
||||
@contextmenu="openQualityModal(event)"
|
||||
@click="addToQueue(event)"
|
||||
:data-link="topResult.buttonURL"
|
||||
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">{{ topResult.primaryText }}</p>
|
||||
<p class="secondary-text">{{ topResult.secondaryText }}</p>
|
||||
<span class="tag">{{ topResult.tag }}</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.TRACK.data.slice(0, 6)" :key="track.SNG_ID" class="track_row">
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<img
|
||||
class="rounded coverart"
|
||||
@ -46,27 +40,29 @@
|
||||
/>
|
||||
</td>
|
||||
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
|
||||
<td class="breakline">
|
||||
<span v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span>
|
||||
<td class="breakline artists___">
|
||||
<!-- <span v-for="artist in track.ARTISTS" :key="artist.ART_ID">{{artist.ART_NAME}}</span> -->
|
||||
<span>{{track.ARTISTS.map(a => a.ART_NAME).join(' ')}}</span>
|
||||
</td>
|
||||
<td class="breakline">{{track.ALB_TITLE}}</td>
|
||||
<td>{{convertDuration(track.DURATION)}}</td>
|
||||
<td
|
||||
class="clickable"
|
||||
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"
|
||||
@contextmenu="openQualityModal(event)"
|
||||
@click="addToQueue(event)"
|
||||
: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-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only">
|
||||
<div v-for="release in results[section].data.slice(0, 10)" class="release">
|
||||
</div>
|
||||
<!-- <div v-else-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only"> -->
|
||||
<div v-else class="release_grid firstrow_only">
|
||||
<div v-for="(release, index) in results[section].data.slice(0, 10)" :key="`release-${index}`" class="release">
|
||||
<div class="cover_container">
|
||||
<img
|
||||
v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'"
|
||||
@ -90,7 +86,7 @@
|
||||
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>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
@ -98,6 +94,7 @@
|
||||
>
|
||||
<h1>No results</h1>
|
||||
</div>
|
||||
<p>marco</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -113,7 +110,13 @@ module.exports = {
|
||||
TOP_RESULT: [],
|
||||
PLAYLIST: {}
|
||||
},
|
||||
topResultURL: ''
|
||||
topResult: {
|
||||
imgURL: '',
|
||||
buttonURL: '',
|
||||
primaryText: '',
|
||||
secondaryText: '',
|
||||
tag: ''
|
||||
}
|
||||
}),
|
||||
methods: {
|
||||
changeSearchTab(section) {
|
||||
@ -129,7 +132,7 @@ module.exports = {
|
||||
handleMainSearch(result) {
|
||||
this.results = result
|
||||
},
|
||||
formatNames(name) {
|
||||
toTitleCase(name) {
|
||||
if ('string' !== typeof name) {
|
||||
return
|
||||
}
|
||||
@ -151,50 +154,119 @@ module.exports = {
|
||||
|
||||
return name
|
||||
},
|
||||
getTopResultURL(result) {
|
||||
if (result.TOP_RESULT.length === 0) {
|
||||
this.topResultURL = ''
|
||||
getTopResultImgURL(results) {
|
||||
if (results.TOP_RESULT.length === 0) {
|
||||
this.topResult.imgURL = ''
|
||||
return
|
||||
}
|
||||
|
||||
let topResultType = result.TOP_RESULT[0].__TYPE__
|
||||
const topResult = results.TOP_RESULT[0]
|
||||
const topResultType = topResult.__TYPE__
|
||||
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + result.TOP_RESULT[0].ART_PICTURE
|
||||
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
|
||||
break
|
||||
case 'album':
|
||||
this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + result.TOP_RESULT[0].ALB_PICTURE
|
||||
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
|
||||
break
|
||||
case 'playlist':
|
||||
this.topResultURL =
|
||||
'https://e-cdns-images.dzcdn.net/images/' +
|
||||
result.TOP_RESULT[0].PICTURE_TYPE +
|
||||
'/' +
|
||||
result.TOP_RESULT[0].PLAYLIST_PICTURE
|
||||
this.topResult.imgURL =
|
||||
'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
|
||||
break
|
||||
default:
|
||||
this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
|
||||
this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
|
||||
break
|
||||
}
|
||||
|
||||
this.topResultURL += '/156x156-000000-80-0-0.jpg'
|
||||
this.topResult.imgURL += '/156x156-000000-80-0-0.jpg'
|
||||
},
|
||||
getTopResultImgURL2(topRes) {
|
||||
if (topRes.length === 0) {
|
||||
return ''
|
||||
}
|
||||
|
||||
// Testing purposes
|
||||
let idem =
|
||||
(result.TOP_RESULT[0].__TYPE__ == 'artist'
|
||||
? 'https://e-cdns-images.dzcdn.net/images/artist/' + result.TOP_RESULT[0].ART_PICTURE
|
||||
: result.TOP_RESULT[0].__TYPE__ == 'album'
|
||||
? 'https://e-cdns-images.dzcdn.net/images/cover/' + result.TOP_RESULT[0].ALB_PICTURE
|
||||
: result.TOP_RESULT[0].__TYPE__ == 'playlist'
|
||||
? 'https://e-cdns-images.dzcdn.net/images/' +
|
||||
result.TOP_RESULT[0].PICTURE_TYPE +
|
||||
'/' +
|
||||
result.TOP_RESULT[0].PLAYLIST_PICTURE
|
||||
: 'https://e-cdns-images.dzcdn.net/images/cover/') + '/156x156-000000-80-0-0.jpg'
|
||||
const topResult = topRes[0]
|
||||
const topResultType = topResult.__TYPE__
|
||||
let imgURL = ''
|
||||
|
||||
console.log(this.topResultURL)
|
||||
console.log(idem)
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
imgURL = 'https://e-cdns-images.dzcdn.net/images/artist/' + topResult.ART_PICTURE
|
||||
break
|
||||
case 'album':
|
||||
imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/' + topResult.ALB_PICTURE
|
||||
break
|
||||
case 'playlist':
|
||||
imgURL =
|
||||
'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
|
||||
break
|
||||
default:
|
||||
imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
|
||||
break
|
||||
}
|
||||
|
||||
imgURL += '/156x156-000000-80-0-0.jpg'
|
||||
|
||||
return imgURL
|
||||
},
|
||||
getTopResultButtonURL(results) {
|
||||
if (results.TOP_RESULT.length === 0) {
|
||||
this.topResult.buttonURL = ''
|
||||
return
|
||||
}
|
||||
|
||||
const topResult = results.TOP_RESULT[0]
|
||||
const topResultType = topResult.__TYPE__
|
||||
|
||||
this.topResult.buttonURL = 'https://deezer.com/' + topResultType + '/'
|
||||
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
this.topResult.buttonURL += topResult.ART_ID
|
||||
break
|
||||
case 'album':
|
||||
this.topResult.buttonURL += topResult.ALB_ID
|
||||
break
|
||||
case 'playlist':
|
||||
this.topResult.buttonURL += topResult.PLAYLIST_ID
|
||||
break
|
||||
default:
|
||||
this.topResult.buttonURL += ''
|
||||
break
|
||||
}
|
||||
},
|
||||
getTopResultText(results) {
|
||||
if (results.TOP_RESULT.length === 0) {
|
||||
this.topResult.primaryText = ''
|
||||
this.topResult.secondaryText = ''
|
||||
this.topResult.tag = ''
|
||||
return
|
||||
}
|
||||
|
||||
const topResult = results.TOP_RESULT[0]
|
||||
const topResultType = topResult.__TYPE__
|
||||
|
||||
this.topResult.tag = this.toTitleCase(topResultType)
|
||||
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
this.topResult.primaryText = topResult.ART_NAME
|
||||
this.topResult.secondaryText = numberWithDots(topResult.NB_FAN) + ' fans'
|
||||
break
|
||||
case 'album':
|
||||
this.topResult.primaryText = topResult.ALB_TITLE
|
||||
this.topResult.secondaryText = 'by ' + topResult.ART_NAME + ' - ' + topResult.NUMBER_TRACK + ' tracks'
|
||||
break
|
||||
case 'playlist':
|
||||
this.topResult.primaryText = topResult.TITLE
|
||||
this.topResult.secondaryText = 'by ' + topResult.PARENT_USERNAME + ' - ' + topResult.NB_SONG + ' tracks'
|
||||
break
|
||||
default:
|
||||
this.topResult.primaryText = ''
|
||||
this.topResult.secondaryText = ''
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -202,7 +274,9 @@ module.exports = {
|
||||
console.log('new', newRes)
|
||||
console.log('old', oldRes)
|
||||
|
||||
this.getTopResultURL(newRes)
|
||||
this.getTopResultImgURL(newRes)
|
||||
this.getTopResultButtonURL(newRes)
|
||||
this.getTopResultText(newRes)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -212,4 +286,7 @@ module.exports = {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.artists > :not(:last-child)::after {
|
||||
content: ' ';
|
||||
}
|
||||
</style>
|
||||
64
public/js/app/components/search-tab/ThePlaylistSearch.vue
Normal file
64
public/js/app/components/search-tab/ThePlaylistSearch.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div id="playlist_search" class="search_tabcontent">
|
||||
<div v-if="results.data.length == 0">
|
||||
<h1>No Playlists found</h1>
|
||||
</div>
|
||||
<div v-else class="release_grid">
|
||||
<div v-for="release in results.data" class="release">
|
||||
<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>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.TITLE }}</p>
|
||||
<p class="secondary-text">{{ release.NB_SONG+' tracks' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
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)
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
this.results = result.PLAYLIST
|
||||
this.query = result.QUERY
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
79
public/js/app/components/search-tab/TheTrackSearch.vue
Normal file
79
public/js/app/components/search-tab/TheTrackSearch.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div id="track_search" class="search_tabcontent">
|
||||
<div v-if="results.data.length === 0">
|
||||
<h1>No Tracks found</h1>
|
||||
</div>
|
||||
<table v-else class="tracks_table">
|
||||
<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.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 v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span>
|
||||
</td>
|
||||
<td class="breakline">{{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>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
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)
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
this.results = result.TRACK
|
||||
this.query = result.QUERY
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -19,6 +19,8 @@ function changeTab(evt, section, tabName) {
|
||||
if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
|
||||
settingsTab.settings = { ...lastSettings }
|
||||
}
|
||||
console.log( {tabName} );
|
||||
|
||||
document.getElementById(tabName).style.display = 'block'
|
||||
window[section + '_selected'] = tabName
|
||||
evt.currentTarget.className += ' active'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user