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

fnished moving search tabs in components

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-16 22:22:55 +02:00
parent 5695f4ecd6
commit 139ef91b6e
9 changed files with 331 additions and 539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

14
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

522
src/components/TheMainSearch.vue
View File

@ -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)
} }
} }
} }

52
src/components/search/ResultsAlbums.vue
View File

@ -1,3 +1,51 @@
<template> <template>
<h2>Results Albums</h2> <div id="album_search" class="search_tabcontent">
</template> <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>

74
src/components/search/ResultsAll.vue
View File

@ -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>

43
src/components/search/ResultsArtists.vue
View File

@ -1,3 +1,42 @@
<template> <template>
<h2>Results Artists</h2> <div id="artist_search" class="search_tabcontent">
</template> <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>

47
src/components/search/ResultsPlaylists.vue
View File

@ -1,3 +1,46 @@
<template> <template>
<h2>Results Playlists</h2> <div id="playlist_search" class="search_tabcontent">
</template> <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>

115
src/components/search/ResultsTracks.vue
View File

@ -1,3 +1,114 @@
<template> <template>
<h2>Results Tracks</h2> <div id="track_search" class="search_tabcontent">
</template> <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>

1
src/styles/scss/tabs/_search-tab.scss
View File

@ -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;