moved content element to a Vue SFC
This commit is contained in:
Roberto Tonino
parent
5e81c205c8
commit
0cf3844b53
@ -41,298 +41,7 @@
|
|||||||
<input id="searchbar" autocomplete="off" type="search" name="searchbar" value=""
|
<input id="searchbar" autocomplete="off" type="search" name="searchbar" value=""
|
||||||
placeholder="Search something or paste a link..." autofocus>
|
placeholder="Search something or paste a link..." autofocus>
|
||||||
</header>
|
</header>
|
||||||
<section id="content">
|
<div id="content-placeholder"></div>
|
||||||
<div id="container">
|
|
||||||
<div id="search_tab" class="main_tabcontent">
|
|
||||||
<div :class="{'hide': results.query != ''}">
|
|
||||||
<h2>Start searching!</h2>
|
|
||||||
<p>
|
|
||||||
You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a
|
|
||||||
Deezer link
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div v-show="results.query !== ''">
|
|
||||||
<ul class="section-tabs">
|
|
||||||
<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
|
|
||||||
<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
|
|
||||||
<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
|
|
||||||
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
|
|
||||||
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
|
|
||||||
</ul>
|
|
||||||
<div id="search_tab_content">
|
|
||||||
<!-- ### Main Search Tab ### -->
|
|
||||||
<div id="main_search" class="search_tabcontent">
|
|
||||||
<template v-for="section in results.allTab.ORDER">
|
|
||||||
<section
|
|
||||||
v-if="(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || (results.allTab[section].length > 0)"
|
|
||||||
class="search_section">
|
|
||||||
<h2 @click="changeSearchTab(section)" class="search_header"
|
|
||||||
:class="{ top_result_header : section === 'TOP_RESULT'}">
|
|
||||||
{{ names[section] }}
|
|
||||||
</h2>
|
|
||||||
<!-- 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 aria-hidden="true" :src="results.allTab.TOP_RESULT[0].picture"
|
|
||||||
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'" />
|
|
||||||
<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="table table--tracks">
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
|
||||||
<td class="table__icon" aria-hidden="true">
|
|
||||||
<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="table__cell table__cell--large breakline">
|
|
||||||
<div class="table__cell-content table__cell-content--vertical-center">
|
|
||||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
|
||||||
explicit
|
|
||||||
</i>
|
|
||||||
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--medium table__cell--center breakline">
|
|
||||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
|
||||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="table__cell--medium table__cell--center breakline clickable"
|
|
||||||
@click="albumView" :data-id="track.ALB_ID">
|
|
||||||
{{track.ALB_TITLE}}
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--center">
|
|
||||||
{{convertDuration(track.DURATION)}}
|
|
||||||
</td>
|
|
||||||
<td class="table__cell--download table__cell--center clickable"
|
|
||||||
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
|
||||||
:data-link="'https://www.deezer.com/track/'+track.SNG_ID" role="button"
|
|
||||||
aria-label="download">
|
|
||||||
<i class="material-icons">
|
|
||||||
get_app
|
|
||||||
</i>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</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 aria-hidden="true" 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 aria-hidden="true" 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 inline-flex">
|
|
||||||
<i v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
|
|
||||||
class="material-icons explicit_icon">explicit</i>
|
|
||||||
{{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 aria-hidden="true" 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>
|
|
||||||
</section>
|
|
||||||
</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">
|
|
||||||
<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
|
|
||||||
<div v-else-if="results.trackTab.data.length == 0">
|
|
||||||
<h1>No Tracks found</h1>
|
|
||||||
</div>
|
|
||||||
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2">Title</th>
|
|
||||||
<th>Artists</th>
|
|
||||||
<th>Album</th>
|
|
||||||
<th>
|
|
||||||
<i class="material-icons">
|
|
||||||
timer
|
|
||||||
</i>
|
|
||||||
</th>
|
|
||||||
<th style="width: 56px;"></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="track in results.trackTab.data">
|
|
||||||
<td class="table__icon table__icon--big">
|
|
||||||
<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">
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--large breakline">
|
|
||||||
<div class="table__cell-content table__cell-content--vertical-center">
|
|
||||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
|
||||||
explicit
|
|
||||||
</i>
|
|
||||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
|
||||||
@click="artistView" :data-id="track.artist.id">
|
|
||||||
{{track.artist.name}}
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--medium table__cell--center breakline clickable"
|
|
||||||
@click="albumView" :data-id="track.album.id">
|
|
||||||
{{track.album.title}}
|
|
||||||
</td>
|
|
||||||
<td class="table__cell table__cell--small table__cell--center">
|
|
||||||
{{convertDuration(track.duration)}}
|
|
||||||
</td>
|
|
||||||
<td class="table__cell--download table__cell--center clickable"
|
|
||||||
@contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="track.link"
|
|
||||||
role="button" aria-label="download">
|
|
||||||
<i class="material-icons">
|
|
||||||
get_app
|
|
||||||
</i>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!-- ### Album Search Tab ### -->
|
|
||||||
<div id="album_search" class="search_tabcontent">
|
|
||||||
<base-loading-placeholder v-if="!results.albumTab.loaded"></base-loading-placeholder>
|
|
||||||
<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 aria-hidden="true" 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>
|
|
||||||
<p class="primary-text inline-flex">
|
|
||||||
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
|
||||||
{{ 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">
|
|
||||||
<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
|
|
||||||
<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 aria-hidden="true" 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>
|
|
||||||
<!-- ### Playlist Search Tab ### -->
|
|
||||||
<div id="playlist_search" class="search_tabcontent">
|
|
||||||
<base-loading-placeholder v-if="!results.playlistTab.loaded"></base-loading-placeholder>
|
|
||||||
<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 aria-hidden="true" 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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="home-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="charts-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="favorites-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="link-analyzer-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="settings-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="about-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="artist-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="tracklist-tab-placeholder"></div>
|
|
||||||
|
|
||||||
<div id="errors-tab-placeholder"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
|
<div id="search_placeholder" class="loading_placeholder loading_placeholder--hidden">
|
||||||
<span class="loading_placeholder__text">Searching...</span>
|
<span class="loading_placeholder__text">Searching...</span>
|
||||||
<div class="lds-ring">
|
<div class="lds-ring">
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -13,8 +13,10 @@ import TheAboutTab from '@components/TheAboutTab.vue'
|
|||||||
// Must be imported before settings tab at the moment
|
// Must be imported before settings tab at the moment
|
||||||
import TrackPreview from '@/js/track-preview.js'
|
import TrackPreview from '@/js/track-preview.js'
|
||||||
import TheSettingsTab from '@components/TheSettingsTab.vue'
|
import TheSettingsTab from '@components/TheSettingsTab.vue'
|
||||||
|
import TheContent from '@components/TheContent.vue'
|
||||||
|
|
||||||
import '@components/main-search.js'
|
// import '@components/main-search.js'
|
||||||
|
import TheMainSearch from '@components/TheMainSearch.vue'
|
||||||
import TracklistTab from '@components/TracklistTab.vue'
|
import TracklistTab from '@components/TracklistTab.vue'
|
||||||
|
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
@ -43,16 +45,7 @@ function startApp() {
|
|||||||
* by using the EventBus.
|
* by using the EventBus.
|
||||||
*/
|
*/
|
||||||
function mountComponents() {
|
function mountComponents() {
|
||||||
new Vue({ render: h => h(TheSidebar) }).$mount('#sidebar-placeholder')
|
new Vue({ render: h => h(TheContent) }).$mount('#content-placeholder')
|
||||||
new Vue({ render: h => h(ArtistTab) }).$mount('#artist-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheChartsTab) }).$mount('#charts-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheFavoritesTab) }).$mount('#favorites-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheHomeTab) }).$mount('#home-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheLinkAnalyzerTab) }).$mount('#link-analyzer-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheSettingsTab) }).$mount('#settings-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TracklistTab) }).$mount('#tracklist-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheAboutTab) }).$mount('#about-tab-placeholder')
|
|
||||||
new Vue({ render: h => h(TheErrorsTab) }).$mount('#errors-tab-placeholder')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function initClient() {
|
function initClient() {
|
||||||
|
|||||||
54
src/js/components/TheContent.vue
Normal file
54
src/js/components/TheContent.vue
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<section id="content">
|
||||||
|
<div id="container">
|
||||||
|
<TheSidebar />
|
||||||
|
<ArtistTab />
|
||||||
|
<TheChartsTab />
|
||||||
|
<TheFavoritesTab />
|
||||||
|
<TheErrorsTab />
|
||||||
|
<TheHomeTab />
|
||||||
|
<TheLinkAnalyzerTab />
|
||||||
|
<TheAboutTab />
|
||||||
|
<TheSettingsTab />
|
||||||
|
<TheMainSearch />
|
||||||
|
<TracklistTab />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ArtistTab from '@components/ArtistTab.vue'
|
||||||
|
import TracklistTab from '@components/TracklistTab.vue'
|
||||||
|
|
||||||
|
import TheSidebar from '@components/TheSidebar.vue'
|
||||||
|
import TheChartsTab from '@components/TheChartsTab.vue'
|
||||||
|
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
|
||||||
|
import TheErrorsTab from '@components/TheErrorsTab.vue'
|
||||||
|
import TheHomeTab from '@components/TheHomeTab.vue'
|
||||||
|
import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
|
||||||
|
import TheAboutTab from '@components/TheAboutTab.vue'
|
||||||
|
import TheSettingsTab from '@components/TheSettingsTab.vue'
|
||||||
|
import TheMainSearch from '@components/TheMainSearch.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
TheSidebar,
|
||||||
|
ArtistTab,
|
||||||
|
TheChartsTab,
|
||||||
|
TheFavoritesTab,
|
||||||
|
TheErrorsTab,
|
||||||
|
TheHomeTab,
|
||||||
|
TheLinkAnalyzerTab,
|
||||||
|
TheAboutTab,
|
||||||
|
TheSettingsTab,
|
||||||
|
TheMainSearch,
|
||||||
|
TracklistTab
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log('content montato!')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
652
src/js/components/TheMainSearch.vue
Normal file
652
src/js/components/TheMainSearch.vue
Normal file
@ -0,0 +1,652 @@
|
|||||||
|
<template>
|
||||||
|
<div id="search_tab" class="main_tabcontent">
|
||||||
|
<div :class="{ hide: results.query != '' }">
|
||||||
|
<h2>Start searching!</h2>
|
||||||
|
<p>
|
||||||
|
You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a Deezer link
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-show="results.query !== ''">
|
||||||
|
<ul class="section-tabs">
|
||||||
|
<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
|
||||||
|
<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
|
||||||
|
<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
|
||||||
|
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
|
||||||
|
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
|
||||||
|
</ul>
|
||||||
|
<div id="search_tab_content">
|
||||||
|
<!-- ### Main Search Tab ### -->
|
||||||
|
<div id="main_search" class="search_tabcontent">
|
||||||
|
<template v-for="section in results.allTab.ORDER">
|
||||||
|
<section
|
||||||
|
v-if="
|
||||||
|
(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) ||
|
||||||
|
results.allTab[section].length > 0
|
||||||
|
"
|
||||||
|
class="search_section"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
@click="changeSearchTab(section)"
|
||||||
|
class="search_header"
|
||||||
|
:class="{ top_result_header: section === 'TOP_RESULT' }"
|
||||||
|
>
|
||||||
|
{{ names[section] }}
|
||||||
|
</h2>
|
||||||
|
<!-- 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
|
||||||
|
aria-hidden="true"
|
||||||
|
:src="results.allTab.TOP_RESULT[0].picture"
|
||||||
|
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"
|
||||||
|
/>
|
||||||
|
<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="table table--tracks">
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
|
||||||
|
<td class="table__icon" aria-hidden="true">
|
||||||
|
<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="table__cell table__cell--large breakline">
|
||||||
|
<div class="table__cell-content table__cell-content--vertical-center">
|
||||||
|
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||||
|
explicit
|
||||||
|
</i>
|
||||||
|
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="table__cell table__cell--medium table__cell--center breakline">
|
||||||
|
<span
|
||||||
|
class="clickable"
|
||||||
|
@click="artistView"
|
||||||
|
:data-id="artist.ART_ID"
|
||||||
|
v-for="artist in track.ARTISTS"
|
||||||
|
>{{ artist.ART_NAME }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table__cell--medium table__cell--center breakline clickable"
|
||||||
|
@click="albumView"
|
||||||
|
:data-id="track.ALB_ID"
|
||||||
|
>
|
||||||
|
{{ track.ALB_TITLE }}
|
||||||
|
</td>
|
||||||
|
<td class="table__cell table__cell--center">
|
||||||
|
{{ convertDuration(track.DURATION) }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table__cell--download table__cell--center clickable"
|
||||||
|
@contextmenu.prevent="openQualityModal"
|
||||||
|
@click.stop="addToQueue"
|
||||||
|
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
|
||||||
|
role="button"
|
||||||
|
aria-label="download"
|
||||||
|
>
|
||||||
|
<i class="material-icons">
|
||||||
|
get_app
|
||||||
|
</i>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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
|
||||||
|
aria-hidden="true"
|
||||||
|
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
|
||||||
|
aria-hidden="true"
|
||||||
|
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 inline-flex">
|
||||||
|
<i
|
||||||
|
v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
|
||||||
|
class="material-icons explicit_icon"
|
||||||
|
>explicit</i
|
||||||
|
>
|
||||||
|
{{ 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
|
||||||
|
aria-hidden="true"
|
||||||
|
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>
|
||||||
|
</section>
|
||||||
|
</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">
|
||||||
|
<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
|
||||||
|
<div v-else-if="results.trackTab.data.length == 0">
|
||||||
|
<h1>No Tracks found</h1>
|
||||||
|
</div>
|
||||||
|
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">Title</th>
|
||||||
|
<th>Artists</th>
|
||||||
|
<th>Album</th>
|
||||||
|
<th>
|
||||||
|
<i class="material-icons">
|
||||||
|
timer
|
||||||
|
</i>
|
||||||
|
</th>
|
||||||
|
<th style="width: 56px;"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="track in results.trackTab.data">
|
||||||
|
<td class="table__icon table__icon--big">
|
||||||
|
<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" />
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="table__cell table__cell--large breakline">
|
||||||
|
<div class="table__cell-content table__cell-content--vertical-center">
|
||||||
|
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||||
|
explicit
|
||||||
|
</i>
|
||||||
|
{{
|
||||||
|
track.title +
|
||||||
|
(track.title_version && track.title.indexOf(track.title_version) == -1
|
||||||
|
? ' ' + track.title_version
|
||||||
|
: '')
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||||
|
@click="artistView"
|
||||||
|
:data-id="track.artist.id"
|
||||||
|
>
|
||||||
|
{{ track.artist.name }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||||
|
@click="albumView"
|
||||||
|
:data-id="track.album.id"
|
||||||
|
>
|
||||||
|
{{ track.album.title }}
|
||||||
|
</td>
|
||||||
|
<td class="table__cell table__cell--small table__cell--center">
|
||||||
|
{{ convertDuration(track.duration) }}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="table__cell--download table__cell--center clickable"
|
||||||
|
@contextmenu.prevent="openQualityModal"
|
||||||
|
@click.stop="addToQueue"
|
||||||
|
:data-link="track.link"
|
||||||
|
role="button"
|
||||||
|
aria-label="download"
|
||||||
|
>
|
||||||
|
<i class="material-icons">
|
||||||
|
get_app
|
||||||
|
</i>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- ### Album Search Tab ### -->
|
||||||
|
<div id="album_search" class="search_tabcontent">
|
||||||
|
<base-loading-placeholder v-if="!results.albumTab.loaded"></base-loading-placeholder>
|
||||||
|
<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 aria-hidden="true" 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>
|
||||||
|
<p class="primary-text inline-flex">
|
||||||
|
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
||||||
|
{{ 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">
|
||||||
|
<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
|
||||||
|
<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 aria-hidden="true" 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>
|
||||||
|
<!-- ### Playlist Search Tab ### -->
|
||||||
|
<div id="playlist_search" class="search_tabcontent">
|
||||||
|
<base-loading-placeholder v-if="!results.playlistTab.loaded"></base-loading-placeholder>
|
||||||
|
<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 aria-hidden="true" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { socket } from '@/js/socket.js'
|
||||||
|
import { showView } from '@/js/tabs.js'
|
||||||
|
import Downloads from '@/js/downloads.js'
|
||||||
|
import QualityModal from '@/js/quality-modal.js'
|
||||||
|
import TrackPreview from '@/js/track-preview.js'
|
||||||
|
import Utils from '@/js/utils.js'
|
||||||
|
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||||
|
import EventBus from '@/js/EventBus.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'the-main-search-tab',
|
||||||
|
components: {
|
||||||
|
BaseLoadingPlaceholder
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
names: {
|
||||||
|
TOP_RESULT: 'Top Result',
|
||||||
|
TRACK: 'Tracks',
|
||||||
|
ARTIST: 'Artists',
|
||||||
|
ALBUM: 'Albums',
|
||||||
|
PLAYLIST: 'Playlists'
|
||||||
|
},
|
||||||
|
results: {
|
||||||
|
query: '',
|
||||||
|
allTab: {
|
||||||
|
ORDER: [],
|
||||||
|
TOP_RESULT: [],
|
||||||
|
ALBUM: {},
|
||||||
|
ARTIST: {},
|
||||||
|
TRACK: {},
|
||||||
|
PLAYLIST: {}
|
||||||
|
},
|
||||||
|
trackTab: {
|
||||||
|
data: [],
|
||||||
|
next: 0,
|
||||||
|
total: 0,
|
||||||
|
loaded: false
|
||||||
|
},
|
||||||
|
albumTab: {
|
||||||
|
data: [],
|
||||||
|
next: 0,
|
||||||
|
total: 0,
|
||||||
|
loaded: false
|
||||||
|
},
|
||||||
|
artistTab: {
|
||||||
|
data: [],
|
||||||
|
next: 0,
|
||||||
|
total: 0,
|
||||||
|
loaded: false
|
||||||
|
},
|
||||||
|
playlistTab: {
|
||||||
|
data: [],
|
||||||
|
next: 0,
|
||||||
|
total: 0,
|
||||||
|
loaded: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
artistView: showView.bind(null, 'artist'),
|
||||||
|
albumView: showView.bind(null, 'album'),
|
||||||
|
playlistView: showView.bind(null, 'playlist'),
|
||||||
|
playPausePreview: TrackPreview.playPausePreview,
|
||||||
|
previewMouseEnter: TrackPreview.previewMouseEnter,
|
||||||
|
previewMouseLeave: TrackPreview.previewMouseLeave,
|
||||||
|
handleClickTopResult(event) {
|
||||||
|
let topResultType = this.results.allTab.TOP_RESULT[0].type
|
||||||
|
|
||||||
|
switch (topResultType) {
|
||||||
|
case 'artist':
|
||||||
|
this.artistView(event)
|
||||||
|
break
|
||||||
|
case 'album':
|
||||||
|
this.albumView(event)
|
||||||
|
break
|
||||||
|
case 'playlist':
|
||||||
|
this.playlistView(event)
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showNewResults(term, mainSelected) {
|
||||||
|
if (term !== this.results.query || mainSelected == 'search_tab') {
|
||||||
|
document.getElementById('search_tab_content').style.display = 'none'
|
||||||
|
socket.emit('mainSearch', { term })
|
||||||
|
|
||||||
|
// Showing loading placeholder
|
||||||
|
document.getElementById('content').style.display = 'none'
|
||||||
|
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
|
||||||
|
} else {
|
||||||
|
document.getElementById('search_tab_content').style.display = 'block'
|
||||||
|
document.getElementById('main_search_tablink').click()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkLoadMoreContent(searchSelected) {
|
||||||
|
if (this.results[searchSelected.split('_')[0] + 'Tab'].data.length !== 0) return
|
||||||
|
|
||||||
|
this.search(searchSelected.split('_')[0])
|
||||||
|
},
|
||||||
|
changeSearchTab(section) {
|
||||||
|
if (section === 'TOP_RESULT') return
|
||||||
|
|
||||||
|
let tabID
|
||||||
|
|
||||||
|
// Using the switch beacuse it's tricky to find refernces of the belo IDs
|
||||||
|
switch (section) {
|
||||||
|
case 'TRACK':
|
||||||
|
tabID = 'search_track_tab'
|
||||||
|
break
|
||||||
|
case 'ALBUM':
|
||||||
|
tabID = 'search_album_tab'
|
||||||
|
break
|
||||||
|
case 'ARTIST':
|
||||||
|
tabID = 'search_artist_tab'
|
||||||
|
break
|
||||||
|
case 'PLAYLIST':
|
||||||
|
tabID = 'search_playlist_tab'
|
||||||
|
break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(tabID).click()
|
||||||
|
},
|
||||||
|
addToQueue(e) {
|
||||||
|
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
openQualityModal(e) {
|
||||||
|
QualityModal.open(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
numberWithDots: Utils.numberWithDots,
|
||||||
|
convertDuration: Utils.convertDuration,
|
||||||
|
search(type) {
|
||||||
|
socket.emit('search', {
|
||||||
|
term: this.results.query,
|
||||||
|
type: type,
|
||||||
|
start: this.results[type + 'Tab'].next,
|
||||||
|
nb: 30
|
||||||
|
})
|
||||||
|
},
|
||||||
|
scrolledSearch(type) {
|
||||||
|
let currentTab = type + 'Tab'
|
||||||
|
|
||||||
|
if (this.results[currentTab].next < this.results[currentTab].total) {
|
||||||
|
socket.emit('search', {
|
||||||
|
term: this.results.query,
|
||||||
|
type: type,
|
||||||
|
start: this.results[currentTab].next,
|
||||||
|
nb: 30
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleMainSearch(result) {
|
||||||
|
// Hiding loading placeholder
|
||||||
|
document.getElementById('content').style.display = ''
|
||||||
|
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
|
||||||
|
|
||||||
|
let resetObj = { data: [], next: 0, total: 0, loaded: false }
|
||||||
|
|
||||||
|
this.results.allTab = result
|
||||||
|
this.results.trackTab = { ...resetObj }
|
||||||
|
this.results.albumTab = { ...resetObj }
|
||||||
|
this.results.artistTab = { ...resetObj }
|
||||||
|
this.results.playlistTab = { ...resetObj }
|
||||||
|
|
||||||
|
if (this.results.query == '') document.getElementById('search_all_tab').click()
|
||||||
|
|
||||||
|
this.results.query = result.QUERY
|
||||||
|
document.getElementById('search_tab_content').style.display = 'block'
|
||||||
|
document.getElementById('main_search_tablink').click()
|
||||||
|
},
|
||||||
|
handleSearch(result) {
|
||||||
|
const { next: nextResult, total, type, data } = result
|
||||||
|
|
||||||
|
let currentTab = type + 'Tab'
|
||||||
|
let next = 0
|
||||||
|
|
||||||
|
if (nextResult) {
|
||||||
|
next = parseInt(nextResult.match(/index=(\d*)/)[1])
|
||||||
|
} else {
|
||||||
|
next = total
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.results[currentTab].total != total) {
|
||||||
|
this.results[currentTab].total = total
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.results[currentTab].next != next) {
|
||||||
|
this.results[currentTab].next = next
|
||||||
|
this.results[currentTab].data = this.results[currentTab].data.concat(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.results[currentTab].loaded = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
EventBus.$on('mainSearch:scrolledSearch', this.scrolledSearch)
|
||||||
|
EventBus.$on('mainSearch:showNewResults', this.showNewResults)
|
||||||
|
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
|
||||||
|
|
||||||
|
socket.on('mainSearch', this.handleMainSearch)
|
||||||
|
socket.on('search', this.handleSearch)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -39,6 +39,7 @@
|
|||||||
<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
|
<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
|
||||||
<i v-if="appOnline" class="material-icons">wifi</i>
|
<i v-if="appOnline" class="material-icons">wifi</i>
|
||||||
<i v-else class="material-icons">
|
<i v-else class="material-icons">
|
||||||
|
<!-- wifi_off icon not working, maybe need to include it? -->
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<path d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
|
<path d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
|
||||||
<path
|
<path
|
||||||
@ -72,7 +73,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
#network-status {
|
#network-status {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@ -174,7 +174,6 @@ export default {
|
|||||||
albumView: showView.bind(null, 'album'),
|
albumView: showView.bind(null, 'album'),
|
||||||
playPausePreview: TrackPreview.playPausePreview,
|
playPausePreview: TrackPreview.playPausePreview,
|
||||||
reset() {
|
reset() {
|
||||||
console.log('tracklist tab reset')
|
|
||||||
this.title = 'Loading...'
|
this.title = 'Loading...'
|
||||||
this.image = ''
|
this.image = ''
|
||||||
this.metadata = ''
|
this.metadata = ''
|
||||||
|
|||||||
@ -1,186 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import { socket } from '@/js/socket.js'
|
|
||||||
import { showView } from '@/js/tabs.js'
|
|
||||||
import Downloads from '@/js/downloads.js'
|
|
||||||
import QualityModal from '@/js/quality-modal.js'
|
|
||||||
import TrackPreview from '@/js/track-preview.js'
|
|
||||||
import Utils from '@/js/utils.js'
|
|
||||||
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
|
||||||
|
|
||||||
const MainSearch = new Vue({
|
|
||||||
components: {
|
|
||||||
BaseLoadingPlaceholder
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
names: {
|
|
||||||
TOP_RESULT: 'Top Result',
|
|
||||||
TRACK: 'Tracks',
|
|
||||||
ARTIST: 'Artists',
|
|
||||||
ALBUM: 'Albums',
|
|
||||||
PLAYLIST: 'Playlists'
|
|
||||||
},
|
|
||||||
results: {
|
|
||||||
query: '',
|
|
||||||
allTab: {
|
|
||||||
ORDER: [],
|
|
||||||
TOP_RESULT: [],
|
|
||||||
ALBUM: {},
|
|
||||||
ARTIST: {},
|
|
||||||
TRACK: {},
|
|
||||||
PLAYLIST: {}
|
|
||||||
},
|
|
||||||
trackTab: {
|
|
||||||
data: [],
|
|
||||||
next: 0,
|
|
||||||
total: 0,
|
|
||||||
loaded: false
|
|
||||||
},
|
|
||||||
albumTab: {
|
|
||||||
data: [],
|
|
||||||
next: 0,
|
|
||||||
total: 0,
|
|
||||||
loaded: false
|
|
||||||
},
|
|
||||||
artistTab: {
|
|
||||||
data: [],
|
|
||||||
next: 0,
|
|
||||||
total: 0,
|
|
||||||
loaded: false
|
|
||||||
},
|
|
||||||
playlistTab: {
|
|
||||||
data: [],
|
|
||||||
next: 0,
|
|
||||||
total: 0,
|
|
||||||
loaded: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
artistView: showView.bind(null, 'artist'),
|
|
||||||
albumView: showView.bind(null, 'album'),
|
|
||||||
playlistView: showView.bind(null, 'playlist'),
|
|
||||||
playPausePreview: TrackPreview.playPausePreview,
|
|
||||||
previewMouseEnter: TrackPreview.previewMouseEnter,
|
|
||||||
previewMouseLeave: TrackPreview.previewMouseLeave,
|
|
||||||
handleClickTopResult(event) {
|
|
||||||
let topResultType = this.results.allTab.TOP_RESULT[0].type
|
|
||||||
|
|
||||||
switch (topResultType) {
|
|
||||||
case 'artist':
|
|
||||||
this.artistView(event)
|
|
||||||
break
|
|
||||||
case 'album':
|
|
||||||
this.albumView(event)
|
|
||||||
break
|
|
||||||
case 'playlist':
|
|
||||||
this.playlistView(event)
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeSearchTab(section) {
|
|
||||||
if (section === 'TOP_RESULT') return
|
|
||||||
|
|
||||||
let tabID
|
|
||||||
|
|
||||||
// Using the switch beacuse it's tricky to find refernces of the belo IDs
|
|
||||||
switch (section) {
|
|
||||||
case 'TRACK':
|
|
||||||
tabID = 'search_track_tab'
|
|
||||||
break
|
|
||||||
case 'ALBUM':
|
|
||||||
tabID = 'search_album_tab'
|
|
||||||
break
|
|
||||||
case 'ARTIST':
|
|
||||||
tabID = 'search_artist_tab'
|
|
||||||
break
|
|
||||||
case 'PLAYLIST':
|
|
||||||
tabID = 'search_playlist_tab'
|
|
||||||
break
|
|
||||||
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById(tabID).click()
|
|
||||||
},
|
|
||||||
addToQueue(e) {
|
|
||||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
|
||||||
},
|
|
||||||
openQualityModal(e) {
|
|
||||||
QualityModal.open(e.currentTarget.dataset.link)
|
|
||||||
},
|
|
||||||
numberWithDots: Utils.numberWithDots,
|
|
||||||
convertDuration: Utils.convertDuration,
|
|
||||||
search(type) {
|
|
||||||
socket.emit('search', {
|
|
||||||
term: this.results.query,
|
|
||||||
type: type,
|
|
||||||
start: this.results[type + 'Tab'].next,
|
|
||||||
nb: 30
|
|
||||||
})
|
|
||||||
},
|
|
||||||
scrolledSearch(type) {
|
|
||||||
let currentTab = type + 'Tab'
|
|
||||||
|
|
||||||
if (this.results[currentTab].next < this.results[currentTab].total) {
|
|
||||||
socket.emit('search', {
|
|
||||||
term: this.results.query,
|
|
||||||
type: type,
|
|
||||||
start: this.results[currentTab].next,
|
|
||||||
nb: 30
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleMainSearch(result) {
|
|
||||||
// Hiding loading placeholder
|
|
||||||
document.getElementById('content').style.display = ''
|
|
||||||
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
|
|
||||||
|
|
||||||
let resetObj = { data: [], next: 0, total: 0, loaded: false }
|
|
||||||
|
|
||||||
this.results.allTab = result
|
|
||||||
this.results.trackTab = { ...resetObj }
|
|
||||||
this.results.albumTab = { ...resetObj }
|
|
||||||
this.results.artistTab = { ...resetObj }
|
|
||||||
this.results.playlistTab = { ...resetObj }
|
|
||||||
|
|
||||||
if (this.results.query == '') document.getElementById('search_all_tab').click()
|
|
||||||
|
|
||||||
this.results.query = result.QUERY
|
|
||||||
document.getElementById('search_tab_content').style.display = 'block'
|
|
||||||
document.getElementById('main_search_tablink').click()
|
|
||||||
},
|
|
||||||
handleSearch(result) {
|
|
||||||
const { next: nextResult, total, type, data } = result
|
|
||||||
|
|
||||||
let currentTab = type + 'Tab'
|
|
||||||
let next = 0
|
|
||||||
|
|
||||||
if (nextResult) {
|
|
||||||
next = parseInt(nextResult.match(/index=(\d*)/)[1])
|
|
||||||
} else {
|
|
||||||
next = total
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.results[currentTab].total != total) {
|
|
||||||
this.results[currentTab].total = total
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.results[currentTab].next != next) {
|
|
||||||
this.results[currentTab].next = next
|
|
||||||
this.results[currentTab].data = this.results[currentTab].data.concat(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.results[currentTab].loaded = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
socket.on('mainSearch', this.handleMainSearch)
|
|
||||||
socket.on('search', this.handleSearch)
|
|
||||||
}
|
|
||||||
}).$mount('#search_tab')
|
|
||||||
|
|
||||||
export default MainSearch
|
|
||||||
@ -1,9 +1,8 @@
|
|||||||
import MainSearch from '@components/main-search.js'
|
|
||||||
import Utils from '@/js/utils.js'
|
import Utils from '@/js/utils.js'
|
||||||
import QualityModal from '@/js/quality-modal.js'
|
import QualityModal from '@/js/quality-modal.js'
|
||||||
import Downloads from '@/js/downloads.js'
|
import Downloads from '@/js/downloads.js'
|
||||||
import { socket } from '@/js/socket.js'
|
|
||||||
import Tabs from '@/js/tabs.js'
|
import Tabs from '@/js/tabs.js'
|
||||||
|
import EventBus from '@/js/EventBus.js'
|
||||||
|
|
||||||
function linkListeners() {
|
function linkListeners() {
|
||||||
document.getElementById('content').addEventListener('scroll', Utils.debounce(handleContentScroll, 100))
|
document.getElementById('content').addEventListener('scroll', Utils.debounce(handleContentScroll, 100))
|
||||||
@ -14,13 +13,13 @@ function linkListeners() {
|
|||||||
function handleContentScroll(event) {
|
function handleContentScroll(event) {
|
||||||
let contentElement = event.target
|
let contentElement = event.target
|
||||||
|
|
||||||
if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) {
|
if (contentElement.scrollTop + contentElement.clientHeight < contentElement.scrollHeight) return
|
||||||
if (
|
|
||||||
main_selected === 'search_tab' &&
|
if (
|
||||||
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
|
main_selected === 'search_tab' &&
|
||||||
) {
|
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
|
||||||
MainSearch.scrolledSearch(search_selected.split('_')[0])
|
) {
|
||||||
}
|
EventBus.$emit('mainSearch:scrolledSearch', search_selected.split('_')[0])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,17 +42,7 @@ function handleSearchBarKeyup(e) {
|
|||||||
} else {
|
} else {
|
||||||
if (term === '') return
|
if (term === '') return
|
||||||
|
|
||||||
if (term !== MainSearch.results.query || main_selected == 'search_tab') {
|
EventBus.$emit('mainSearch:showNewResults', term, main_selected)
|
||||||
document.getElementById('search_tab_content').style.display = 'none'
|
|
||||||
socket.emit('mainSearch', { term })
|
|
||||||
|
|
||||||
// Showing loading placeholder
|
|
||||||
document.getElementById('content').style.display = 'none'
|
|
||||||
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
|
|
||||||
} else {
|
|
||||||
document.getElementById('search_tab_content').style.display = 'block'
|
|
||||||
document.getElementById('main_search_tablink').click()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import TrackPreview from '@/js/track-preview.js'
|
import TrackPreview from '@/js/track-preview.js'
|
||||||
import MainSearch from '@components/main-search.js'
|
|
||||||
import { socket } from '@/js/socket.js'
|
import { socket } from '@/js/socket.js'
|
||||||
import EventBus from '@/js/EventBus'
|
import EventBus from '@/js/EventBus'
|
||||||
|
|
||||||
@ -230,12 +229,9 @@ function changeTab(sidebarEl, section, tabName) {
|
|||||||
// Check if you need to load more content in the search tab
|
// Check if you need to load more content in the search tab
|
||||||
if (
|
if (
|
||||||
main_selected == 'search_tab' &&
|
main_selected == 'search_tab' &&
|
||||||
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1 &&
|
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
|
||||||
MainSearch.results[search_selected.split('_')[0] + 'Tab'].data.length == 0
|
|
||||||
) {
|
) {
|
||||||
// console.log(search_selected.split('_')[0] + 'Tab')
|
EventBus.$emit('mainSearch:checkLoadMoreContent', search_selected)
|
||||||
|
|
||||||
MainSearch.search(search_selected.split('_')[0])
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user