evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

completed transfer of search tab in Vue SFCs

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-17 21:16:59 +02:00
parent 534da272d4
commit a22e795efe
8 changed files with 431 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
public/index.html
View File

@ -33,136 +33,8 @@
<div id="middle_section"> <div id="middle_section">
<header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header> <header id="search"><input id="searchbar" type="text" name="searchbar" value="" placeholder="Search..."></header>
<section id="content"><div id="container"> <section id="content"><div id="container">
<!-- <div id="v-app" style="height: 300px;"><app/></div> --> <!-- Search Tab -->
<div id="search_tab" class="main_tabcontent"> <div id="v-app"><app/></div>
<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>
<div id="home_tab" class="main_tabcontent"> <div id="home_tab" class="main_tabcontent">
<h1>Home</h1> <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/vue.min.js"></script>
<script type="text/javascript" src="/public/js/vendor/lodash.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/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/app.js"></script>
<script type="text/javascript" src="/public/js/app/tabs.js"></script> <script type="text/javascript" src="/public/js/app/tabs.js"></script>
<script type="text/javascript" src="/public/js/app/stackedTabs.js"></script> <script type="text/javascript" src="/public/js/app/stackedTabs.js"></script>

28
public/js/app/components/TheSearchTab.vue
View File

@ -1,44 +1,56 @@
<template> <template>
<div id="search_tab-2" class="main_tabcontentZZZ"> <div id="search_tab" class="main_tabcontent">
<div class="tab"> <div class="tab">
<button <button
id="search_all_tab"
class="search_tablinks" class="search_tablinks"
id="search_all_tab-2"
onclick="changeTab(event, 'search', 'main_search')" onclick="changeTab(event, 'search', 'main_search')"
>All</button> >All</button>
<button <button
id="search_track_tab"
class="search_tablinks" class="search_tablinks"
id="search_track_tab-2"
onclick="changeTab(event, 'search', 'track_search')" onclick="changeTab(event, 'search', 'track_search')"
>Tracks</button> >Tracks</button>
<button <button
id="search_album_tab"
class="search_tablinks" class="search_tablinks"
id="search_album_tab-2"
onclick="changeTab(event, 'search', 'album_search')" onclick="changeTab(event, 'search', 'album_search')"
>Album</button> >Album</button>
<button <button
id="search_artist_tab"
class="search_tablinks" class="search_tablinks"
id="search_artist_tab-2"
onclick="changeTab(event, 'search', 'artist_search')" onclick="changeTab(event, 'search', 'artist_search')"
>Artist</button> >Artist</button>
<button <button
id="search_playlist_tab"
class="search_tablinks" class="search_tablinks"
id="search_playlist_tab-2"
onclick="changeTab(event, 'search', 'playlist_search')" onclick="changeTab(event, 'search', 'playlist_search')"
>Playlist</button> >Playlist</button>
</div> </div>
<div id="search_tab_content"> <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>
</div> </div>
</template> </template>
<script> <script>
const TheMainSearch = httpVueLoader('./search-tab/TheMainSearch.vue') 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 = { module.exports = {
components: { components: {
TheMainSearch TheMainSearch,
TheTrackSearch,
TheAlbumSearch,
TheArtistSearch,
ThePlaylistSearch
} }
} }
</script> </script>

64
public/js/app/components/search-tab/TheAlbumSearch.vue Normal file
View 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
View 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>

193
public/js/app/components/search-tab/TheMainSearch.vue
View File

@ -1,44 +1,38 @@
<template> <template>
<div id="main_search-2" class="search_tabcontentZZZ"> <div id="main_search" class="search_tabcontent">
<template v-for="(section, index) in results.ORDER"> <template v-for="(section, index) in results.ORDER">
<div <div
class="search_section" class="search_section"
v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)" v-if="(section !== 'TOP_RESULT' && results[section].data.length > 0) || (results[section].length > 0)"
:key="`section-${index}`" :key="`section-${index}`"
> >
<h1 @click="changeSearchTab(section)">{{ formatNames(section) }}</h1> <h1 @click="changeSearchTab(section)">{{ toTitleCase(section) }}</h1>
<div v-if="section == 'TOP_RESULT'" class="top_result"> <div v-if="section === 'TOP_RESULT'" class="top_result">
<div class="cover_container"> <div class="cover_container">
<img <img
:src="topResultURL" :src="getTopResultImgURL2(results.TOP_RESULT)"
:class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'" :class="(results.TOP_RESULT[0].__TYPE__ == 'artist' ? 'circle' : 'rounded') + ' coverart'"
/> />
<div <div
role="button" role="button"
aria-label="download" aria-label="download"
v-on:contextmenu="openQualityModal(event)" @contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)" @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 : '')" :data-link="topResult.buttonURL"
class="download_overlay" class="download_overlay"
> >
<i class="material-icons">get_app</i> <i class="material-icons">get_app</i>
</div> </div>
</div> </div>
<div class="info_box"> <div class="info_box">
<p <p class="primary-text">{{ topResult.primaryText }}</p>
class="primary-text" <p class="secondary-text">{{ topResult.secondaryText }}</p>
>{{ 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> <span class="tag">{{ topResult.tag }}</span>
<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> </div>
<!-- <div v-if="section == 'TRACK'"> <div v-else-if="section === 'TRACK'">
<table class="tracks_table"> <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;"> <td style="width: 48px; text-align: center;">
<img <img
class="rounded coverart" class="rounded coverart"
@ -46,27 +40,29 @@
/> />
</td> </td>
<td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td> <td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td class="breakline"> <td class="breakline artists___">
<span v-for="artist in track.ARTISTS">{{artist.ART_NAME}}</span> <!-- <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>
<td class="breakline">{{track.ALB_TITLE}}</td> <td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td> <td>{{convertDuration(track.DURATION)}}</td>
<td <td
class="clickable"
role="button" role="button"
aria-label="download" aria-label="download"
v-on:contextmenu="openQualityModal(event)" @contextmenu="openQualityModal(event)"
v-on:click="addToQueue(event)" @click="addToQueue(event)"
v-bind:data-link="'https://www.deezer.com/track/'+track.SNG_ID" :data-link="'https://www.deezer.com/track/' + track.SNG_ID"
style="width: 56px; text-align: center;" style="width: 56px; text-align: center;"
class="clickable"
> >
<i class="material-icons">get_app</i> <i class="material-icons">get_app</i>
</td> </td>
</tr> </tr>
</table> </table>
</div>--> </div>
<!-- <div v-if="section != 'TRACK' && section != 'TOP_RESULT'" class="release_grid firstrow_only"> <!-- <div v-else-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 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"> <div class="cover_container">
<img <img
v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'" v-bind:class="(section == 'ARTIST' ? 'circle' : 'rounded') + ' coverart'"
@ -90,7 +86,7 @@
class="secondary-text" 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> >{{ 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>
</div> </div>
</template> </template>
<div <div
@ -98,6 +94,7 @@
> >
<h1>No results</h1> <h1>No results</h1>
</div> </div>
<p>marco</p>
</div> </div>
</template> </template>
@ -113,7 +110,13 @@ module.exports = {
TOP_RESULT: [], TOP_RESULT: [],
PLAYLIST: {} PLAYLIST: {}
}, },
topResultURL: '' topResult: {
imgURL: '',
buttonURL: '',
primaryText: '',
secondaryText: '',
tag: ''
}
}), }),
methods: { methods: {
changeSearchTab(section) { changeSearchTab(section) {
@ -129,7 +132,7 @@ module.exports = {
handleMainSearch(result) { handleMainSearch(result) {
this.results = result this.results = result
}, },
formatNames(name) { toTitleCase(name) {
if ('string' !== typeof name) { if ('string' !== typeof name) {
return return
} }
@ -151,50 +154,119 @@ module.exports = {
return name return name
}, },
getTopResultURL(result) { getTopResultImgURL(results) {
if (result.TOP_RESULT.length === 0) { if (results.TOP_RESULT.length === 0) {
this.topResultURL = '' this.topResult.imgURL = ''
return return
} }
let topResultType = result.TOP_RESULT[0].__TYPE__ const topResult = results.TOP_RESULT[0]
const topResultType = topResult.__TYPE__
switch (topResultType) { switch (topResultType) {
case 'artist': 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 break
case 'album': 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 break
case 'playlist': case 'playlist':
this.topResultURL = this.topResult.imgURL =
'https://e-cdns-images.dzcdn.net/images/' + 'https://e-cdns-images.dzcdn.net/images/' + topResult.PICTURE_TYPE + '/' + topResult.PLAYLIST_PICTURE
result.TOP_RESULT[0].PICTURE_TYPE +
'/' +
result.TOP_RESULT[0].PLAYLIST_PICTURE
break break
default: default:
this.topResultURL = 'https://e-cdns-images.dzcdn.net/images/cover/' this.topResult.imgURL = 'https://e-cdns-images.dzcdn.net/images/cover/'
break 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 const topResult = topRes[0]
let idem = const topResultType = topResult.__TYPE__
(result.TOP_RESULT[0].__TYPE__ == 'artist' let imgURL = ''
? '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'
console.log(this.topResultURL) switch (topResultType) {
console.log(idem) 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: { watch: {
@ -202,7 +274,9 @@ module.exports = {
console.log('new', newRes) console.log('new', newRes)
console.log('old', oldRes) console.log('old', oldRes)
this.getTopResultURL(newRes) this.getTopResultImgURL(newRes)
this.getTopResultButtonURL(newRes)
this.getTopResultText(newRes)
} }
}, },
mounted() { mounted() {
@ -212,4 +286,7 @@ module.exports = {
</script> </script>
<style> <style>
.artists > :not(:last-child)::after {
content: ' ';
}
</style> </style>

64
public/js/app/components/search-tab/ThePlaylistSearch.vue Normal file
View 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
View 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>

2
public/js/app/tabs.js
View File

@ -19,6 +19,8 @@ function changeTab(evt, section, tabName) {
if (tabName == 'settings_tab' && main_selected != 'settings_tab') { if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
settingsTab.settings = { ...lastSettings } settingsTab.settings = { ...lastSettings }
} }
console.log( {tabName} );
document.getElementById(tabName).style.display = 'block' document.getElementById(tabName).style.display = 'block'
window[section + '_selected'] = tabName window[section + '_selected'] = tabName
evt.currentTarget.className += ' active' evt.currentTarget.className += ' active'