fnished moving search tabs in components
This commit is contained in:
Roberto Tonino
parent
5695f4ecd6
commit
139ef91b6e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,29 +1,11 @@
|
||||
<template>
|
||||
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick" ref="root">
|
||||
<div :class="{ hide: results.query != '' }">
|
||||
<div v-show="!showSearchTab">
|
||||
<h2>{{ $t('search.startSearching') }}</h2>
|
||||
<p>{{ $t('search.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-show="results.query !== ''">
|
||||
<ul class="section-tabs">
|
||||
<li class="section-tabs__tab search_tablinks" id="search_all_tab">
|
||||
{{ $t('globals.listTabs.all') }}
|
||||
</li>
|
||||
<li class="section-tabs__tab search_tablinks" id="search_track_tab">
|
||||
{{ $tc('globals.listTabs.track', 2) }}
|
||||
</li>
|
||||
<li class="section-tabs__tab search_tablinks" id="search_album_tab">
|
||||
{{ $tc('globals.listTabs.album', 2) }}
|
||||
</li>
|
||||
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
|
||||
{{ $tc('globals.listTabs.artist', 2) }}
|
||||
</li>
|
||||
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">
|
||||
{{ $tc('globals.listTabs.playlist', 2) }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-show="showSearchTab">
|
||||
<ul class="section-tabs">
|
||||
<li
|
||||
class="section-tabs__tab"
|
||||
@ -36,419 +18,15 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<template v-if="currentTab.name !== ''">
|
||||
<component :is="currentTab.component" :results="results"></component>
|
||||
</template>
|
||||
|
||||
<div id="search_tab_content" v-show="showSearchTab">
|
||||
<!-- ### 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' }"
|
||||
>
|
||||
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
|
||||
</h2>
|
||||
<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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="results.allTab.TOP_RESULT[0].link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">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'
|
||||
? $t('search.fans', { n: $n(results.allTab.TOP_RESULT[0].nb_fan) })
|
||||
: $t('globals.by', { artist: results.allTab.TOP_RESULT[0].artist }) +
|
||||
' - ' +
|
||||
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
|
||||
}}
|
||||
</p>
|
||||
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
|
||||
role="button"
|
||||
aria-label="download"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')"> 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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="'https://deezer.com/artist/' + release.ART_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ART_NAME }}</p>
|
||||
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="'https://deezer.com/album/' + release.ALB_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">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 + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
|
||||
</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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.TITLE }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</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>{{ $t('search.noResults') }}</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>{{ $t('search.noResultsTrack') }}</h1>
|
||||
</div>
|
||||
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
|
||||
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
|
||||
<th>{{ $tc('globals.listTabs.album', 1) }}</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"
|
||||
:title="$t('globals.play_hint')"
|
||||
>
|
||||
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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="track.link"
|
||||
role="button"
|
||||
aria-label="download"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')"> 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>{{ $t('search.noResultsAlbum') }}</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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">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">
|
||||
{{
|
||||
$t('globals.by', { artist: release.artist.name }) +
|
||||
' - ' +
|
||||
$tc('globals.listTabs.trackN', release.nb_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>{{ $t('search.noResultsArtist') }}</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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.name }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</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>{{ $t('search.noResultsPlaylist') }}</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"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
release.nb_tracks
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component
|
||||
:is="currentTab.component"
|
||||
:results="results"
|
||||
@add-to-queue="addToQueue"
|
||||
@artist-view="artistView"
|
||||
@album-view="albumView"
|
||||
@playlist-view="playlistView"
|
||||
@change-search-tab="changeSearchTab"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -477,7 +55,6 @@ export default {
|
||||
const $tc = this.$tc.bind(this)
|
||||
|
||||
return {
|
||||
showSearchTab: false,
|
||||
currentTab: {
|
||||
name: '',
|
||||
component: {}
|
||||
@ -485,22 +62,27 @@ export default {
|
||||
tabs: [
|
||||
{
|
||||
name: $t('globals.listTabs.all'),
|
||||
searchType: 'all',
|
||||
component: ResultsAll
|
||||
},
|
||||
{
|
||||
name: $tc('globals.listTabs.track', 2),
|
||||
searchType: 'track',
|
||||
component: ResultsTracks
|
||||
},
|
||||
{
|
||||
name: $tc('globals.listTabs.album', 2),
|
||||
searchType: 'album',
|
||||
component: ResultsAlbums
|
||||
},
|
||||
{
|
||||
name: $tc('globals.listTabs.artist', 2),
|
||||
searchType: 'artist',
|
||||
component: ResultsArtists
|
||||
},
|
||||
{
|
||||
name: $tc('globals.listTabs.playlist', 2),
|
||||
searchType: 'playlist',
|
||||
component: ResultsPlaylists
|
||||
}
|
||||
],
|
||||
@ -541,22 +123,26 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showSearchTab() {
|
||||
return this.results.query !== ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
scrolledSearchType: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.currentTab = this.tabs[0]
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
|
||||
|
||||
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
|
||||
socket.on('mainSearch', this.handleMainSearch)
|
||||
socket.on('search', this.handleSearch)
|
||||
|
||||
this.$on('artistView', this.artistView)
|
||||
this.$on('albumView', this.albumView)
|
||||
this.$on('playlistView', this.playlistView)
|
||||
},
|
||||
methods: {
|
||||
artistView: showView.bind(null, 'artist'),
|
||||
@ -571,6 +157,20 @@ export default {
|
||||
previewMouseLeave(e) {
|
||||
EventBus.$emit('trackPreview:previewMouseLeave', e)
|
||||
},
|
||||
changeSearchTab(sectionName) {
|
||||
sectionName = sectionName.toLowerCase()
|
||||
|
||||
let newTab = this.tabs.find(tab => {
|
||||
return tab.searchType === sectionName
|
||||
})
|
||||
|
||||
if (!newTab) {
|
||||
console.error(`No tab ${sectionName} found`)
|
||||
return
|
||||
}
|
||||
|
||||
this.currentTab = newTab
|
||||
},
|
||||
handleSearchTabClick(event) {
|
||||
const {
|
||||
target,
|
||||
@ -624,17 +224,17 @@ export default {
|
||||
}
|
||||
},
|
||||
showNewResults(term, mainSelected) {
|
||||
console.log('show new results')
|
||||
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
|
||||
|
||||
if (needToPerformNewSearch) {
|
||||
this.showSearchTab = false
|
||||
// this.showSearchTab = false
|
||||
socket.emit('mainSearch', { term })
|
||||
|
||||
// Showing loading placeholder
|
||||
this.$root.$emit('updateSearchLoadingState', true)
|
||||
} else {
|
||||
this.showSearchTab = true
|
||||
// document.getElementById('main_search_tablink').click()
|
||||
// this.showSearchTab = true
|
||||
}
|
||||
},
|
||||
checkLoadMoreContent(searchSelected) {
|
||||
@ -642,38 +242,14 @@ export default {
|
||||
|
||||
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) {
|
||||
console.log('add to queue')
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
numberWithDots: Utils.numberWithDots,
|
||||
convertDuration: Utils.convertDuration,
|
||||
search(type) {
|
||||
console.log('search')
|
||||
socket.emit('search', {
|
||||
term: this.results.query,
|
||||
type: type,
|
||||
@ -694,6 +270,7 @@ export default {
|
||||
}
|
||||
},
|
||||
handleMainSearch(result) {
|
||||
console.log('handle main search', result)
|
||||
// Hiding loading placeholder
|
||||
this.$root.$emit('updateSearchLoadingState', false)
|
||||
|
||||
@ -704,16 +281,10 @@ export default {
|
||||
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) {
|
||||
console.log('handle search', result)
|
||||
const { next: nextResult, total, type, data } = result
|
||||
|
||||
let currentTab = type + 'Tab'
|
||||
@ -742,6 +313,9 @@ export default {
|
||||
if (!newType) return
|
||||
|
||||
this.scrolledSearch(newType)
|
||||
},
|
||||
currentTab(newTab) {
|
||||
this.search(newTab.searchType)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,51 @@
|
||||
<template>
|
||||
<h2>Results Albums</h2>
|
||||
<div id="album_search" class="search_tabcontent">
|
||||
<BaseLoadingPlaceholder v-if="!results.albumTab.loaded" />
|
||||
<div v-else-if="results.albumTab.data.length == 0">
|
||||
<h1>{{ $t('search.noResultsAlbum') }}</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.stop="$emit('album-view', $event)"
|
||||
: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"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">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">
|
||||
{{
|
||||
$t('globals.by', { artist: release.artist.name }) +
|
||||
' - ' +
|
||||
$tc('globals.listTabs.trackN', release.nb_tracks)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,7 +8,7 @@
|
||||
class="search_section"
|
||||
>
|
||||
<h2
|
||||
@click="changeSearchTab(section)"
|
||||
@click="$emit('change-search-tab', section)"
|
||||
class="search_header"
|
||||
:class="{ top_result_header: section === 'TOP_RESULT' }"
|
||||
>
|
||||
@ -18,7 +18,7 @@
|
||||
<div
|
||||
v-if="section == 'TOP_RESULT'"
|
||||
class="top_result clickable"
|
||||
@click="handleClickTopResult"
|
||||
@click.stop="$emit(`${topResultType}-view`, $event)"
|
||||
:data-id="results.allTab.TOP_RESULT[0].id"
|
||||
>
|
||||
<div class="cover_container">
|
||||
@ -30,7 +30,7 @@
|
||||
<div
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="addToQueue"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="results.allTab.TOP_RESULT[0].link"
|
||||
class="download_overlay"
|
||||
>
|
||||
@ -70,13 +70,19 @@
|
||||
</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
|
||||
class="clickable"
|
||||
@click.stop="$emit('artist-view', $event)"
|
||||
:data-id="artist.ART_ID"
|
||||
v-for="artist in track.ARTISTS"
|
||||
:key="artist.ART_ID"
|
||||
>
|
||||
{{ artist.ART_NAME }}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class="table__cell--medium table__cell--center breakline clickable"
|
||||
@click="albumView"
|
||||
@click.stop="$emit('album-view', $event)"
|
||||
:data-id="track.ALB_ID"
|
||||
>
|
||||
{{ track.ALB_TITLE }}
|
||||
@ -86,7 +92,7 @@
|
||||
</td>
|
||||
<td
|
||||
class="table__cell--download table__cell--center clickable"
|
||||
@click.stop="addToQueue"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@ -101,7 +107,7 @@
|
||||
<div
|
||||
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
|
||||
class="release clickable"
|
||||
@click="artistView"
|
||||
@click.stop="$emit('artist-view', $event)"
|
||||
:data-id="release.ART_ID"
|
||||
>
|
||||
<div class="cover_container">
|
||||
@ -115,7 +121,7 @@
|
||||
<div
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="addToQueue"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/artist/' + release.ART_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
@ -130,7 +136,7 @@
|
||||
<div
|
||||
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
|
||||
class="release clickable"
|
||||
@click="albumView"
|
||||
@click.stop="$emit('album-view', $event)"
|
||||
:data-id="release.ALB_ID"
|
||||
>
|
||||
<div class="cover_container">
|
||||
@ -144,7 +150,7 @@
|
||||
<div
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="addToQueue"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/album/' + release.ALB_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
@ -168,7 +174,7 @@
|
||||
<div
|
||||
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
|
||||
class="release clickable"
|
||||
@click="playlistView"
|
||||
@click.stop="$emit('playlist-view', $event)"
|
||||
:data-id="release.PLAYLIST_ID"
|
||||
>
|
||||
<div class="cover_container">
|
||||
@ -186,7 +192,7 @@
|
||||
<div
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="addToQueue"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
|
||||
class="download_overlay"
|
||||
>
|
||||
@ -199,7 +205,7 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<div v-if="test">
|
||||
<div v-if="noResults">
|
||||
<h1>{{ $t('search.noResults') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
@ -210,7 +216,10 @@ import { convertDuration } from '@/utils/utils'
|
||||
export default {
|
||||
props: ['results'],
|
||||
computed: {
|
||||
test() {
|
||||
topResultType() {
|
||||
return this.results.allTab.TOP_RESULT[0].type
|
||||
},
|
||||
noResults() {
|
||||
return this.results.allTab.ORDER.every(section =>
|
||||
section == 'TOP_RESULT'
|
||||
? this.results.allTab[section].length == 0
|
||||
@ -218,41 +227,8 @@ export default {
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.results)
|
||||
},
|
||||
methods: {
|
||||
convertDuration,
|
||||
artistView(event) {
|
||||
this.$emit('artistView', event)
|
||||
},
|
||||
albumView(event) {
|
||||
this.$emit('albumView', event)
|
||||
},
|
||||
playlistView(event) {
|
||||
this.$emit('playlistView', event)
|
||||
},
|
||||
handleClickTopResult(event) {
|
||||
let topResultType = this.results.allTab.TOP_RESULT[0].type
|
||||
|
||||
switch (topResultType) {
|
||||
case 'artist':
|
||||
// this.artistView(event)
|
||||
this.$emit('artistView', event)
|
||||
break
|
||||
case 'album':
|
||||
// this.albumView(event)
|
||||
this.$emit('albumView', event)
|
||||
break
|
||||
case 'playlist':
|
||||
// this.playlistView(event)
|
||||
this.$emit('playlistView', event)
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
convertDuration
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,3 +1,42 @@
|
||||
<template>
|
||||
<h2>Results Artists</h2>
|
||||
<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>{{ $t('search.noResultsArtist') }}</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.stop="$emit('artist-view', $event)"
|
||||
: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"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.name }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,3 +1,46 @@
|
||||
<template>
|
||||
<h2>Results Playlists</h2>
|
||||
<div id="playlist_search" class="search_tabcontent">
|
||||
<BaseLoadingPlaceholder v-if="!results.playlistTab.loaded" />
|
||||
<div v-else-if="results.playlistTab.data.length == 0">
|
||||
<h1>{{ $t('search.noResultsPlaylist') }}</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.stop="$emit('playlist-view', $event)"
|
||||
: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"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.user.name })} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,3 +1,114 @@
|
||||
<template>
|
||||
<h2>Results Tracks</h2>
|
||||
<div id="track_search" class="search_tabcontent">
|
||||
<BaseLoadingPlaceholder v-if="!results.trackTab.loaded" />
|
||||
<div v-else-if="results.trackTab.data.length == 0">
|
||||
<h1>{{ $t('search.noResultsTrack') }}</h1>
|
||||
</div>
|
||||
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
|
||||
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
|
||||
<th>{{ $tc('globals.listTabs.album', 1) }}</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"
|
||||
:title="$t('globals.play_hint')"
|
||||
>
|
||||
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.stop="artistView"
|
||||
:data-id="track.artist.id"
|
||||
>
|
||||
{{ track.artist.name }}
|
||||
</td>
|
||||
<td
|
||||
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||
@click.stop="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"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="track.link"
|
||||
role="button"
|
||||
aria-label="download"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||
|
||||
import EventBus from '@/utils/EventBus.js'
|
||||
import { convertDuration } from '@/utils/utils'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
},
|
||||
methods: {
|
||||
convertDuration,
|
||||
artistView(event) {
|
||||
this.$emit('artist-view', event)
|
||||
},
|
||||
albumView(event) {
|
||||
this.$emit('album-view', event)
|
||||
},
|
||||
playlistView(event) {
|
||||
this.$emit('playlist-view', event)
|
||||
},
|
||||
playPausePreview(e) {
|
||||
EventBus.$emit('trackPreview:playPausePreview', e)
|
||||
},
|
||||
previewMouseEnter(e) {
|
||||
EventBus.$emit('trackPreview:previewMouseEnter', e)
|
||||
},
|
||||
previewMouseLeave(e) {
|
||||
EventBus.$emit('trackPreview:previewMouseLeave', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -22,6 +22,7 @@
|
||||
cursor: pointer;
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 25px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(.top_result_header) {
|
||||
transition: color 200ms ease-in-out;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user