workflow: reset feature/search-page-improvement branch
This commit is contained in:
Roberto Tonino
@@ -1,51 +1,79 @@
|
||||
<template>
|
||||
<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">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.albumTab.data"
|
||||
:key="release.id"
|
||||
class="release clickable"
|
||||
:to="{ name: 'Album', params: { id: release.id } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</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>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<BaseLoadingPlaceholder v-if="isLoading" />
|
||||
|
||||
<template v-else>
|
||||
<div v-if="viewInfo.data.length === 0">
|
||||
<h1>{{ $t('search.noResultsAlbum') }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="release_grid" v-else>
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in viewInfo.data.slice(0, itemsToShow)"
|
||||
:key="release.albumID"
|
||||
class="release clickable"
|
||||
:to="{ name: 'Album', params: { id: release.albumID } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="rounded coverart" :src="release.albumCoverMedium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.albumLink"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text flex items-center">
|
||||
<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i>
|
||||
{{ release.albumTitle }}
|
||||
</p>
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
$t('globals.by', { artist: release.artistName }) +
|
||||
' - ' +
|
||||
$tc('globals.listTabs.trackN', release.albumTracks)
|
||||
}}
|
||||
</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
props: {
|
||||
viewInfo: {
|
||||
validator: function (value) {
|
||||
let isNull = Object.is(value, null)
|
||||
let isObject = Object.prototype.toString.call(value) === '[object Object]'
|
||||
|
||||
return isNull || isObject
|
||||
},
|
||||
required: true
|
||||
},
|
||||
itemsToShow: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
wantHeaders: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return !this.viewInfo || !this.viewInfo.hasLoaded
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
}
|
||||
|
||||
@@ -1,221 +1,66 @@
|
||||
<template>
|
||||
<div id="main_search" class="search_tabcontent">
|
||||
<template v-for="section in results.allTab.ORDER">
|
||||
<section>
|
||||
<div v-if="!thereAreResults">
|
||||
<h1>{{ $t('search.noResults') }}</h1>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<section
|
||||
v-if="
|
||||
(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || results.allTab[section].length > 0
|
||||
"
|
||||
class="search_section"
|
||||
v-for="section in viewInfo.ORDER"
|
||||
:key="section"
|
||||
class="float-none py-5 border-grayscale-500 border-t first:border-t-0"
|
||||
>
|
||||
<h2
|
||||
@click="$emit('change-search-tab', section)"
|
||||
class="search_header"
|
||||
:class="{ top_result_header: section === 'TOP_RESULT' }"
|
||||
class="mb-6 capitalize"
|
||||
:class="{
|
||||
'text-4xl text-center': section === 'TOP_RESULT',
|
||||
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out':
|
||||
section !== 'TOP_RESULT'
|
||||
}"
|
||||
>
|
||||
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
|
||||
</h2>
|
||||
<!-- Top result -->
|
||||
<router-link
|
||||
tag="div"
|
||||
v-if="section == 'TOP_RESULT'"
|
||||
class="top_result clickable"
|
||||
:to="{ name: upperCaseFirstLowerCaseRest(topResultType), params: { 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'"
|
||||
/>
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="results.allTab.TOP_RESULT[0].link"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info_box">
|
||||
<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
|
||||
<p class="secondary-text">
|
||||
{{ fansNumber }}
|
||||
</p>
|
||||
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<div v-else-if="section == 'TRACK'">
|
||||
<table class="table table--tracks">
|
||||
<tbody>
|
||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" :key="track.SNG_ID">
|
||||
<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">
|
||||
<router-link
|
||||
tag="span"
|
||||
v-for="artist in track.ARTISTS"
|
||||
:key="artist.ART_ID"
|
||||
class="clickable"
|
||||
:to="{
|
||||
name: 'Artist',
|
||||
params: { id: artist.ART_ID }
|
||||
}"
|
||||
>
|
||||
{{ artist.ART_NAME }}
|
||||
</router-link>
|
||||
</td>
|
||||
<router-link
|
||||
tag="td"
|
||||
class="table__cell--medium table__cell--center breakline clickable"
|
||||
:to="{ name: 'Album', params: { id: track.ALB_ID } }"
|
||||
>
|
||||
{{ track.ALB_TITLE }}
|
||||
</router-link>
|
||||
<td class="table__cell 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="'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">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
|
||||
class="release clickable"
|
||||
:key="release.ART_ID"
|
||||
:to="{ name: 'Artist', params: { 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'
|
||||
"
|
||||
/>
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/artist/' + release.ART_ID"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.ART_NAME }}</p>
|
||||
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
|
||||
:key="release.ALB_ID"
|
||||
class="release clickable"
|
||||
:to="{ name: 'Album', params: { 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'
|
||||
"
|
||||
/>
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/album/' + release.ALB_ID"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</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>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
|
||||
class="release clickable"
|
||||
:key="release.PLAYLIST_ID"
|
||||
:to="{ name: 'Playlist', params: { 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'
|
||||
"
|
||||
/>
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.TITLE }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<TopResult
|
||||
v-if="section === 'TOP_RESULT'"
|
||||
:info="viewInfo.TOP_RESULT[0]"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsTracks
|
||||
v-else-if="section === 'TRACK'"
|
||||
:viewInfo="reduceSearchResults(viewInfo.TRACK, formatSingleTrack)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsAlbums
|
||||
v-else-if="section == 'ALBUM'"
|
||||
:viewInfo="reduceSearchResults(viewInfo.ALBUM, formatAlbums)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsPlaylists
|
||||
v-else-if="section == 'PLAYLIST'"
|
||||
:viewInfo="reduceSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsArtists
|
||||
v-else-if="section === 'ARTIST'"
|
||||
:viewInfo="reduceSearchResults(viewInfo.ARTIST, formatArtist)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
<div v-if="noResults">
|
||||
<h1>{{ $t('search.noResults') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.tag {
|
||||
background-color: var(--tag-background);
|
||||
border-radius: 2px;
|
||||
@@ -230,39 +75,66 @@
|
||||
<script>
|
||||
import { convertDuration } from '@/utils/utils'
|
||||
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
|
||||
import TopResult from '@/components/search/TopResult.vue'
|
||||
import ResultsTracks from '@components/search/ResultsTracks.vue'
|
||||
import ResultsAlbums from '@components/search/ResultsAlbums.vue'
|
||||
import ResultsArtists from '@components/search/ResultsArtists.vue'
|
||||
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
|
||||
|
||||
import { reduceSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
TopResult,
|
||||
ResultsTracks,
|
||||
ResultsAlbums,
|
||||
ResultsArtists,
|
||||
ResultsPlaylists
|
||||
},
|
||||
props: {
|
||||
viewInfo: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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
|
||||
: this.results.allTab[section].data.length == 0
|
||||
thereAreResults() {
|
||||
let areInfosLoaded = !!this.viewInfo
|
||||
|
||||
if (!areInfosLoaded) {
|
||||
return false
|
||||
}
|
||||
|
||||
let noResultsPresent = this.viewInfo.ORDER.every(section =>
|
||||
section === 'TOP_RESULT' ? this.viewInfo[section].length === 0 : this.viewInfo[section].data.length === 0
|
||||
)
|
||||
|
||||
return !noResultsPresent
|
||||
},
|
||||
fansNumber() {
|
||||
let number
|
||||
|
||||
try {
|
||||
number = this.$n(this.results.allTab.TOP_RESULT[0].nb_fan)
|
||||
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan)
|
||||
} catch (error) {
|
||||
number = this.$n(this.results.allTab.TOP_RESULT[0].nb_fan, { locale: 'en' })
|
||||
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan, { locale: 'en' })
|
||||
}
|
||||
|
||||
return this.results.allTab.TOP_RESULT[0].type == 'artist'
|
||||
return this.viewInfo.TOP_RESULT[0].type == 'artist'
|
||||
? this.$t('search.fans', { n: number })
|
||||
: this.$t('globals.by', { artist: this.results.allTab.TOP_RESULT[0].artist }) +
|
||||
: this.$t('globals.by', { artist: this.viewInfo.TOP_RESULT[0].artist }) +
|
||||
' - ' +
|
||||
this.$tc('globals.listTabs.trackN', this.results.allTab.TOP_RESULT[0].nb_song)
|
||||
this.$tc('globals.listTabs.trackN', this.viewInfo.TOP_RESULT[0].nb_song)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
convertDuration,
|
||||
upperCaseFirstLowerCaseRest
|
||||
upperCaseFirstLowerCaseRest,
|
||||
reduceSearchResults,
|
||||
formatSingleTrack,
|
||||
formatAlbums,
|
||||
formatArtist,
|
||||
formatPlaylist
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,44 +1,72 @@
|
||||
<template>
|
||||
<div id="artist_search" class="search_tabcontent">
|
||||
<BaseLoadingPlaceholder v-if="!results.artistTab.loaded"></BaseLoadingPlaceholder>
|
||||
<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">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.artistTab.data"
|
||||
class="release clickable"
|
||||
:key="release.id"
|
||||
:to="{ name: 'Artist', params: { id: release.id } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.name }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<BaseLoadingPlaceholder v-if="isLoading" />
|
||||
|
||||
<template v-else>
|
||||
<div v-if="viewInfo.data.length === 0">
|
||||
<h1>{{ $t('search.noResultsArtist') }}</h1>
|
||||
</div>
|
||||
|
||||
<div v-else class="release_grid">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in viewInfo.data.slice(0, itemsToShow)"
|
||||
class="release clickable"
|
||||
:key="release.artistID"
|
||||
:to="{ name: 'Artist', params: { id: release.artistID } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="circle coverart" :src="release.artistPictureMedium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.artistLink"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text">{{ release.artistName }}</p>
|
||||
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
},
|
||||
props: {
|
||||
viewInfo: {
|
||||
validator: function (value) {
|
||||
let isNull = Object.is(value, null)
|
||||
let isObject = Object.prototype.toString.call(value) === '[object Object]'
|
||||
|
||||
return isNull || isObject
|
||||
},
|
||||
required: true
|
||||
},
|
||||
itemsToShow: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
wantHeaders: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return !this.viewInfo || !this.viewInfo.hasLoaded
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,48 +1,78 @@
|
||||
<template>
|
||||
<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">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in results.playlistTab.data"
|
||||
class="release clickable"
|
||||
:key="release.id"
|
||||
:to="{ name: 'Playlist', params: { id: release.id } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="release.link"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</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>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<BaseLoadingPlaceholder v-if="isLoading" />
|
||||
|
||||
<template v-else>
|
||||
<div v-if="viewInfo.data.length === 0">
|
||||
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-else>
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="playlist in viewInfo.data.slice(0, itemsToShow)"
|
||||
class="release clickable"
|
||||
:key="playlist.playlistID"
|
||||
:to="{ name: 'Playlist', params: { id: playlist.playlistID } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="rounded coverart" :src="playlist.playlistPictureMedium" />
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="playlist.playlistLink"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="primary-text">{{ playlist.playlistTitle }}</p>
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: playlist.artistName })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
playlist.playlistTracksNumber
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder
|
||||
},
|
||||
props: {
|
||||
viewInfo: {
|
||||
validator: function (value) {
|
||||
let isNull = Object.is(value, null)
|
||||
let isObject = Object.prototype.toString.call(value) === '[object Object]'
|
||||
|
||||
return isNull || isObject
|
||||
},
|
||||
required: true
|
||||
},
|
||||
itemsToShow: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
wantHeaders: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return !this.viewInfo || !this.viewInfo.hasLoaded
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,75 +1,77 @@
|
||||
<template>
|
||||
<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"
|
||||
:class="{ 'single-cover': !!track.preview }"
|
||||
:data-preview="track.preview"
|
||||
>
|
||||
<PreviewControls v-if="track.preview" />
|
||||
<section>
|
||||
<BaseLoadingPlaceholder v-if="isLoading" />
|
||||
|
||||
<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>
|
||||
<router-link
|
||||
tag="td"
|
||||
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||
:to="{ name: 'Artist', params: { id: track.artist.id } }"
|
||||
>
|
||||
{{ track.artist.name }}
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="td"
|
||||
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||
:to="{ name: 'Album', params: { id: track.album.id } }"
|
||||
>
|
||||
{{ track.album.title }}
|
||||
</router-link>
|
||||
<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 v-else>
|
||||
<div v-if="viewInfo.data.length === 0">
|
||||
<h1>{{ $t('search.noResultsTrack') }}</h1>
|
||||
</div>
|
||||
|
||||
<table v-else class="table table--tracks">
|
||||
<thead v-if="wantHeaders">
|
||||
<tr class="capitalize">
|
||||
<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: 3.5rem"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
|
||||
<td class="table__icon table__icon--big">
|
||||
<a
|
||||
href="#"
|
||||
@click="playPausePreview"
|
||||
class="rounded"
|
||||
:class="{ 'single-cover': !!track.trackPreview }"
|
||||
:data-preview="track.trackPreview"
|
||||
>
|
||||
<PreviewControls v-if="track.trackPreview" />
|
||||
|
||||
<img class="rounded coverart" :src="track.albumPicture" />
|
||||
</a>
|
||||
</td>
|
||||
<td class="table__cell table__cell--large breakline">
|
||||
<div class="table__cell-content table__cell-content--vertical-center">
|
||||
<i v-if="track.isTrackExplicit" class="material-icons explicit-icon">explicit</i>
|
||||
{{ getTitle(track) }}
|
||||
</div>
|
||||
</td>
|
||||
<router-link
|
||||
tag="td"
|
||||
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||
:to="{ name: 'Artist', params: { id: track.artistID } }"
|
||||
>
|
||||
{{ track.artistName }}
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="td"
|
||||
class="table__cell table__cell--medium table__cell--center breakline clickable"
|
||||
:to="{ name: 'Album', params: { id: track.albumID } }"
|
||||
>
|
||||
{{ track.albumTitle }}
|
||||
</router-link>
|
||||
<td class="table__cell table__cell--small table__cell--center">
|
||||
{{ convertDuration(track.trackDuration) }}
|
||||
</td>
|
||||
<td
|
||||
class="table__cell--download table__cell--center clickable"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="track.trackLink"
|
||||
role="button"
|
||||
aria-label="download"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -80,15 +82,44 @@ import EventBus from '@/utils/EventBus'
|
||||
import { convertDuration } from '@/utils/utils'
|
||||
|
||||
export default {
|
||||
props: ['results'],
|
||||
components: {
|
||||
BaseLoadingPlaceholder,
|
||||
PreviewControls
|
||||
},
|
||||
props: {
|
||||
viewInfo: {
|
||||
validator: function (value) {
|
||||
let isNull = Object.is(value, null)
|
||||
let isObject = Object.prototype.toString.call(value) === '[object Object]'
|
||||
|
||||
return isNull || isObject
|
||||
},
|
||||
required: true
|
||||
},
|
||||
itemsToShow: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
wantHeaders: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return !this.viewInfo || !this.viewInfo.hasLoaded
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
convertDuration,
|
||||
playPausePreview(e) {
|
||||
EventBus.$emit('trackPreview:playPausePreview', e)
|
||||
},
|
||||
getTitle(track) {
|
||||
const hasTitleVersion = track.trackTitleVersion && track.trackTitle.indexOf(track.trackTitleVersion) === -1
|
||||
|
||||
return `${track.trackTitle}${hasTitleVersion ? ` ${track.trackTitleVersion}` : ''}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
73
src/components/search/TopResult.vue
Normal file
73
src/components/search/TopResult.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<router-link
|
||||
tag="div"
|
||||
class="top_result cursor-pointer flex items-center flex-col"
|
||||
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
|
||||
>
|
||||
<div class="cover_container">
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="coverart"
|
||||
:src="$attrs.info.picture"
|
||||
:class="$attrs.info.type == 'artist' ? 'circle' : 'rounded'"
|
||||
/>
|
||||
|
||||
<button
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
:data-link="$attrs.info.link"
|
||||
class="download_overlay"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info_box">
|
||||
<p class="primary-text">{{ $attrs.info.title }}</p>
|
||||
<p class="secondary-text">
|
||||
{{ fansNumber }}
|
||||
</p>
|
||||
<span class="tag">{{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tag {
|
||||
background-color: var(--tag-background);
|
||||
border-radius: 2px;
|
||||
color: var(--tag-text);
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
padding: 3px 6px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
upperCaseFirstLowerCaseRest
|
||||
},
|
||||
computed: {
|
||||
fansNumber() {
|
||||
let number
|
||||
|
||||
try {
|
||||
number = this.$n(this.$attrs.info.nb_fan)
|
||||
} catch (error) {
|
||||
number = this.$n(this.$attrs.info.nb_fan, { locale: 'en' })
|
||||
}
|
||||
|
||||
return this.$attrs.info.type == 'artist'
|
||||
? this.$t('search.fans', { n: number })
|
||||
: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
|
||||
' - ' +
|
||||
this.$tc('globals.listTabs.trackN', this.$attrs.info.nb_song)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user