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>
|
<template>
|
||||||
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick" ref="root">
|
<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>
|
<h2>{{ $t('search.startSearching') }}</h2>
|
||||||
<p>{{ $t('search.description') }}</p>
|
<p>{{ $t('search.description') }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="results.query !== ''">
|
<div v-show="showSearchTab">
|
||||||
<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>
|
|
||||||
|
|
||||||
<ul class="section-tabs">
|
<ul class="section-tabs">
|
||||||
<li
|
<li
|
||||||
class="section-tabs__tab"
|
class="section-tabs__tab"
|
||||||
|
|
@ -36,419 +18,15 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<template v-if="currentTab.name !== ''">
|
<component
|
||||||
<component :is="currentTab.component" :results="results"></component>
|
:is="currentTab.component"
|
||||||
</template>
|
:results="results"
|
||||||
|
@add-to-queue="addToQueue"
|
||||||
<div id="search_tab_content" v-show="showSearchTab">
|
@artist-view="artistView"
|
||||||
<!-- ### Main Search Tab ### -->
|
@album-view="albumView"
|
||||||
<!-- <div id="main_search" class="search_tabcontent">
|
@playlist-view="playlistView"
|
||||||
<template v-for="section in results.allTab.ORDER">
|
@change-search-tab="changeSearchTab"
|
||||||
<section
|
></component>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -477,7 +55,6 @@ export default {
|
||||||
const $tc = this.$tc.bind(this)
|
const $tc = this.$tc.bind(this)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showSearchTab: false,
|
|
||||||
currentTab: {
|
currentTab: {
|
||||||
name: '',
|
name: '',
|
||||||
component: {}
|
component: {}
|
||||||
|
|
@ -485,22 +62,27 @@ export default {
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
name: $t('globals.listTabs.all'),
|
name: $t('globals.listTabs.all'),
|
||||||
|
searchType: 'all',
|
||||||
component: ResultsAll
|
component: ResultsAll
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: $tc('globals.listTabs.track', 2),
|
name: $tc('globals.listTabs.track', 2),
|
||||||
|
searchType: 'track',
|
||||||
component: ResultsTracks
|
component: ResultsTracks
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: $tc('globals.listTabs.album', 2),
|
name: $tc('globals.listTabs.album', 2),
|
||||||
|
searchType: 'album',
|
||||||
component: ResultsAlbums
|
component: ResultsAlbums
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: $tc('globals.listTabs.artist', 2),
|
name: $tc('globals.listTabs.artist', 2),
|
||||||
|
searchType: 'artist',
|
||||||
component: ResultsArtists
|
component: ResultsArtists
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: $tc('globals.listTabs.playlist', 2),
|
name: $tc('globals.listTabs.playlist', 2),
|
||||||
|
searchType: 'playlist',
|
||||||
component: ResultsPlaylists
|
component: ResultsPlaylists
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -541,22 +123,26 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
showSearchTab() {
|
||||||
|
return this.results.query !== ''
|
||||||
|
}
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
scrolledSearchType: {
|
scrolledSearchType: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false
|
required: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.currentTab = this.tabs[0]
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
|
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
|
||||||
|
|
||||||
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
|
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
|
||||||
socket.on('mainSearch', this.handleMainSearch)
|
socket.on('mainSearch', this.handleMainSearch)
|
||||||
socket.on('search', this.handleSearch)
|
socket.on('search', this.handleSearch)
|
||||||
|
|
||||||
this.$on('artistView', this.artistView)
|
|
||||||
this.$on('albumView', this.albumView)
|
|
||||||
this.$on('playlistView', this.playlistView)
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
artistView: showView.bind(null, 'artist'),
|
artistView: showView.bind(null, 'artist'),
|
||||||
|
|
@ -571,6 +157,20 @@ export default {
|
||||||
previewMouseLeave(e) {
|
previewMouseLeave(e) {
|
||||||
EventBus.$emit('trackPreview: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) {
|
handleSearchTabClick(event) {
|
||||||
const {
|
const {
|
||||||
target,
|
target,
|
||||||
|
|
@ -624,17 +224,17 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showNewResults(term, mainSelected) {
|
showNewResults(term, mainSelected) {
|
||||||
|
console.log('show new results')
|
||||||
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
|
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
|
||||||
|
|
||||||
if (needToPerformNewSearch) {
|
if (needToPerformNewSearch) {
|
||||||
this.showSearchTab = false
|
// this.showSearchTab = false
|
||||||
socket.emit('mainSearch', { term })
|
socket.emit('mainSearch', { term })
|
||||||
|
|
||||||
// Showing loading placeholder
|
// Showing loading placeholder
|
||||||
this.$root.$emit('updateSearchLoadingState', true)
|
this.$root.$emit('updateSearchLoadingState', true)
|
||||||
} else {
|
} else {
|
||||||
this.showSearchTab = true
|
// this.showSearchTab = true
|
||||||
// document.getElementById('main_search_tablink').click()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
checkLoadMoreContent(searchSelected) {
|
checkLoadMoreContent(searchSelected) {
|
||||||
|
|
@ -642,38 +242,14 @@ export default {
|
||||||
|
|
||||||
this.search(searchSelected.split('_')[0])
|
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) {
|
addToQueue(e) {
|
||||||
|
console.log('add to queue')
|
||||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||||
},
|
},
|
||||||
numberWithDots: Utils.numberWithDots,
|
numberWithDots: Utils.numberWithDots,
|
||||||
convertDuration: Utils.convertDuration,
|
convertDuration: Utils.convertDuration,
|
||||||
search(type) {
|
search(type) {
|
||||||
|
console.log('search')
|
||||||
socket.emit('search', {
|
socket.emit('search', {
|
||||||
term: this.results.query,
|
term: this.results.query,
|
||||||
type: type,
|
type: type,
|
||||||
|
|
@ -694,6 +270,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleMainSearch(result) {
|
handleMainSearch(result) {
|
||||||
|
console.log('handle main search', result)
|
||||||
// Hiding loading placeholder
|
// Hiding loading placeholder
|
||||||
this.$root.$emit('updateSearchLoadingState', false)
|
this.$root.$emit('updateSearchLoadingState', false)
|
||||||
|
|
||||||
|
|
@ -704,16 +281,10 @@ export default {
|
||||||
this.results.albumTab = { ...resetObj }
|
this.results.albumTab = { ...resetObj }
|
||||||
this.results.artistTab = { ...resetObj }
|
this.results.artistTab = { ...resetObj }
|
||||||
this.results.playlistTab = { ...resetObj }
|
this.results.playlistTab = { ...resetObj }
|
||||||
|
|
||||||
if (this.results.query == '') {
|
|
||||||
// document.getElementById('search_all_tab').click()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.results.query = result.QUERY
|
this.results.query = result.QUERY
|
||||||
document.getElementById('search_tab_content').style.display = 'block'
|
|
||||||
// document.getElementById('main_search_tablink').click()
|
|
||||||
},
|
},
|
||||||
handleSearch(result) {
|
handleSearch(result) {
|
||||||
|
console.log('handle search', result)
|
||||||
const { next: nextResult, total, type, data } = result
|
const { next: nextResult, total, type, data } = result
|
||||||
|
|
||||||
let currentTab = type + 'Tab'
|
let currentTab = type + 'Tab'
|
||||||
|
|
@ -742,6 +313,9 @@ export default {
|
||||||
if (!newType) return
|
if (!newType) return
|
||||||
|
|
||||||
this.scrolledSearch(newType)
|
this.scrolledSearch(newType)
|
||||||
|
},
|
||||||
|
currentTab(newTab) {
|
||||||
|
this.search(newTab.searchType)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,51 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['results'],
|
||||||
|
components: {
|
||||||
|
BaseLoadingPlaceholder
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
class="search_section"
|
class="search_section"
|
||||||
>
|
>
|
||||||
<h2
|
<h2
|
||||||
@click="changeSearchTab(section)"
|
@click="$emit('change-search-tab', section)"
|
||||||
class="search_header"
|
class="search_header"
|
||||||
:class="{ top_result_header: section === 'TOP_RESULT' }"
|
:class="{ top_result_header: section === 'TOP_RESULT' }"
|
||||||
>
|
>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<div
|
<div
|
||||||
v-if="section == 'TOP_RESULT'"
|
v-if="section == 'TOP_RESULT'"
|
||||||
class="top_result clickable"
|
class="top_result clickable"
|
||||||
@click="handleClickTopResult"
|
@click.stop="$emit(`${topResultType}-view`, $event)"
|
||||||
:data-id="results.allTab.TOP_RESULT[0].id"
|
:data-id="results.allTab.TOP_RESULT[0].id"
|
||||||
>
|
>
|
||||||
<div class="cover_container">
|
<div class="cover_container">
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="download"
|
aria-label="download"
|
||||||
@click.stop="addToQueue"
|
@click.stop="$emit('add-to-queue', $event)"
|
||||||
:data-link="results.allTab.TOP_RESULT[0].link"
|
:data-link="results.allTab.TOP_RESULT[0].link"
|
||||||
class="download_overlay"
|
class="download_overlay"
|
||||||
>
|
>
|
||||||
|
|
@ -70,13 +70,19 @@
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="table__cell table__cell--medium table__cell--center breakline">
|
<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"
|
<span
|
||||||
>{{ artist.ART_NAME }}
|
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>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="table__cell--medium table__cell--center breakline clickable"
|
class="table__cell--medium table__cell--center breakline clickable"
|
||||||
@click="albumView"
|
@click.stop="$emit('album-view', $event)"
|
||||||
:data-id="track.ALB_ID"
|
:data-id="track.ALB_ID"
|
||||||
>
|
>
|
||||||
{{ track.ALB_TITLE }}
|
{{ track.ALB_TITLE }}
|
||||||
|
|
@ -86,7 +92,7 @@
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="table__cell--download table__cell--center clickable"
|
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"
|
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="download"
|
aria-label="download"
|
||||||
|
|
@ -101,7 +107,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
|
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
|
||||||
class="release clickable"
|
class="release clickable"
|
||||||
@click="artistView"
|
@click.stop="$emit('artist-view', $event)"
|
||||||
:data-id="release.ART_ID"
|
:data-id="release.ART_ID"
|
||||||
>
|
>
|
||||||
<div class="cover_container">
|
<div class="cover_container">
|
||||||
|
|
@ -115,7 +121,7 @@
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="download"
|
aria-label="download"
|
||||||
@click.stop="addToQueue"
|
@click.stop="$emit('add-to-queue', $event)"
|
||||||
:data-link="'https://deezer.com/artist/' + release.ART_ID"
|
:data-link="'https://deezer.com/artist/' + release.ART_ID"
|
||||||
class="download_overlay"
|
class="download_overlay"
|
||||||
>
|
>
|
||||||
|
|
@ -130,7 +136,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
|
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
|
||||||
class="release clickable"
|
class="release clickable"
|
||||||
@click="albumView"
|
@click.stop="$emit('album-view', $event)"
|
||||||
:data-id="release.ALB_ID"
|
:data-id="release.ALB_ID"
|
||||||
>
|
>
|
||||||
<div class="cover_container">
|
<div class="cover_container">
|
||||||
|
|
@ -144,7 +150,7 @@
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="download"
|
aria-label="download"
|
||||||
@click.stop="addToQueue"
|
@click.stop="$emit('add-to-queue', $event)"
|
||||||
:data-link="'https://deezer.com/album/' + release.ALB_ID"
|
:data-link="'https://deezer.com/album/' + release.ALB_ID"
|
||||||
class="download_overlay"
|
class="download_overlay"
|
||||||
>
|
>
|
||||||
|
|
@ -168,7 +174,7 @@
|
||||||
<div
|
<div
|
||||||
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
|
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
|
||||||
class="release clickable"
|
class="release clickable"
|
||||||
@click="playlistView"
|
@click.stop="$emit('playlist-view', $event)"
|
||||||
:data-id="release.PLAYLIST_ID"
|
:data-id="release.PLAYLIST_ID"
|
||||||
>
|
>
|
||||||
<div class="cover_container">
|
<div class="cover_container">
|
||||||
|
|
@ -186,7 +192,7 @@
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="download"
|
aria-label="download"
|
||||||
@click.stop="addToQueue"
|
@click.stop="$emit('add-to-queue', $event)"
|
||||||
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
|
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
|
||||||
class="download_overlay"
|
class="download_overlay"
|
||||||
>
|
>
|
||||||
|
|
@ -199,7 +205,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
<div v-if="test">
|
<div v-if="noResults">
|
||||||
<h1>{{ $t('search.noResults') }}</h1>
|
<h1>{{ $t('search.noResults') }}</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -210,7 +216,10 @@ import { convertDuration } from '@/utils/utils'
|
||||||
export default {
|
export default {
|
||||||
props: ['results'],
|
props: ['results'],
|
||||||
computed: {
|
computed: {
|
||||||
test() {
|
topResultType() {
|
||||||
|
return this.results.allTab.TOP_RESULT[0].type
|
||||||
|
},
|
||||||
|
noResults() {
|
||||||
return this.results.allTab.ORDER.every(section =>
|
return this.results.allTab.ORDER.every(section =>
|
||||||
section == 'TOP_RESULT'
|
section == 'TOP_RESULT'
|
||||||
? this.results.allTab[section].length == 0
|
? this.results.allTab[section].length == 0
|
||||||
|
|
@ -218,41 +227,8 @@ export default {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
console.log(this.results)
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
convertDuration,
|
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,3 +1,42 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['results'],
|
||||||
|
components: {
|
||||||
|
BaseLoadingPlaceholder
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,3 +1,46 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['results'],
|
||||||
|
components: {
|
||||||
|
BaseLoadingPlaceholder
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,3 +1,114 @@
|
||||||
<template>
|
<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>
|
</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;
|
cursor: pointer;
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
|
||||||
&:not(.top_result_header) {
|
&:not(.top_result_header) {
|
||||||
transition: color 200ms ease-in-out;
|
transition: color 200ms ease-in-out;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue