fnished moving search tabs in components

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,29 +1,11 @@
<template>
<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick" ref="root">
<div :class="{ hide: results.query != '' }">
<div v-show="!showSearchTab">
<h2>{{ $t('search.startSearching') }}</h2>
<p>{{ $t('search.description') }}</p>
</div>
<div v-show="results.query !== ''">
<ul class="section-tabs">
<li class="section-tabs__tab search_tablinks" id="search_all_tab">
{{ $t('globals.listTabs.all') }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_track_tab">
{{ $tc('globals.listTabs.track', 2) }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_album_tab">
{{ $tc('globals.listTabs.album', 2) }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_artist_tab">
{{ $tc('globals.listTabs.artist', 2) }}
</li>
<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">
{{ $tc('globals.listTabs.playlist', 2) }}
</li>
</ul>
<div v-show="showSearchTab">
<ul class="section-tabs">
<li
class="section-tabs__tab"
@ -36,419 +18,15 @@
</li>
</ul>
<template v-if="currentTab.name !== ''">
<component :is="currentTab.component" :results="results"></component>
</template>
<div id="search_tab_content" v-show="showSearchTab">
<!-- ### Main Search Tab ### -->
<!-- <div id="main_search" class="search_tabcontent">
<template v-for="section in results.allTab.ORDER">
<section
v-if="
(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) ||
results.allTab[section].length > 0
"
class="search_section"
>
<h2
@click="changeSearchTab(section)"
class="search_header"
:class="{ top_result_header: section === 'TOP_RESULT' }"
>
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2>
<div
v-if="section == 'TOP_RESULT'"
class="top_result clickable"
@click="handleClickTopResult"
:data-id="results.allTab.TOP_RESULT[0].id"
>
<div class="cover_container">
<img
aria-hidden="true"
:src="results.allTab.TOP_RESULT[0].picture"
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"
/>
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<div class="info_box">
<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
<p class="secondary-text">
{{
results.allTab.TOP_RESULT[0].type == 'artist'
? $t('search.fans', { n: $n(results.allTab.TOP_RESULT[0].nb_fan) })
: $t('globals.by', { artist: results.allTab.TOP_RESULT[0].artist }) +
' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}}
</p>
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
</div>
</div>
<div v-else-if="section == 'TRACK'">
<table class="table table--tracks">
<tbody>
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
<td class="table__icon" aria-hidden="true">
<img
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' +
track.ALB_PICTURE +
'/32x32-000000-80-0-0.jpg'
"
/>
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon"> explicit </i>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</div>
</td>
<td class="table__cell table__cell--medium table__cell--center breakline">
<span
class="clickable"
@click="artistView"
:data-id="artist.ART_ID"
v-for="artist in track.ARTISTS"
>{{ artist.ART_NAME }}
</span>
</td>
<td
class="table__cell--medium table__cell--center breakline clickable"
@click="albumView"
:data-id="track.ALB_ID"
>
{{ track.ALB_TITLE }}
</td>
<td class="table__cell table__cell--center">
{{ convertDuration(track.DURATION) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="addToQueue"
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
<div
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
class="release clickable"
@click="artistView"
:data-id="release.ART_ID"
>
<div class="cover_container">
<img
aria-hidden="true"
class="circle coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/artist/' +
release.ART_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="'https://deezer.com/artist/' + release.ART_ID"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
</div>
</div>
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
<div
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
class="release clickable"
@click="albumView"
:data-id="release.ALB_ID"
>
<div class="cover_container">
<img
aria-hidden="true"
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' +
release.ALB_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="'https://deezer.com/album/' + release.ALB_ID"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text inline-flex">
<i
v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
class="material-icons explicit_icon"
>explicit</i
>
{{ release.ALB_TITLE }}
</p>
<p class="secondary-text">
{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
</p>
</div>
</div>
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
<div
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
class="release clickable"
@click="playlistView"
:data-id="release.PLAYLIST_ID"
>
<div class="cover_container">
<img
aria-hidden="true"
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/' +
release.PICTURE_TYPE +
'/' +
release.PLAYLIST_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
/>
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.TITLE }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</p>
</div>
</div>
</section>
</template>
<div
v-if="
results.allTab.ORDER.every(section =>
section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0
)
"
>
<h1>{{ $t('search.noResults') }}</h1>
</div>
</div> -->
<!-- ### Track Search Tab ### -->
<div id="track_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
<div v-else-if="results.trackTab.data.length == 0">
<h1>{{ $t('search.noResultsTrack') }}</h1>
</div>
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
<thead>
<tr>
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th>
<th>
<i class="material-icons"> timer </i>
</th>
<th style="width: 56px"></th>
</tr>
</thead>
<tbody>
<tr v-for="track in results.trackTab.data">
<td class="table__icon table__icon--big">
<a
href="#"
@click="playPausePreview"
:class="'rounded' + (track.preview ? ' single-cover' : '')"
:data-preview="track.preview"
>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
v-if="track.preview"
class="material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
? ' ' + track.title_version
: '')
}}
</div>
</td>
<td
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click="artistView"
:data-id="track.artist.id"
>
{{ track.artist.name }}
</td>
<td
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click="albumView"
:data-id="track.album.id"
>
{{ track.album.title }}
</td>
<td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
</table>
</div>
<!-- ### Album Search Tab ### -->
<div id="album_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.albumTab.loaded"></base-loading-placeholder>
<div v-else-if="results.albumTab.data.length == 0">
<h1>{{ $t('search.noResultsAlbum') }}</h1>
</div>
<div class="release_grid" v-if="results.albumTab.data.length > 0">
<div
v-for="release in results.albumTab.data"
class="release clickable"
@click="albumView"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text inline-flex">
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ release.title }}
</p>
<p class="secondary-text">
{{
$t('globals.by', { artist: release.artist.name }) +
' - ' +
$tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
</div>
</div>
<!-- ### Artist Search Tab ### -->
<div id="artist_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
<div v-else-if="results.artistTab.data.length == 0">
<h1>{{ $t('search.noResultsArtist') }}</h1>
</div>
<div class="release_grid" v-if="results.artistTab.data.length > 0">
<div
v-for="release in results.artistTab.data"
class="release clickable"
@click="artistView"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.name }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
</div>
</div>
</div>
<!-- ### Playlist Search Tab ### -->
<div id="playlist_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.playlistTab.loaded"></base-loading-placeholder>
<div v-else-if="results.playlistTab.data.length == 0">
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
</div>
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
<div
v-for="release in results.playlistTab.data"
class="release clickable"
@click="playlistView"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</div>
</div>
</div>
<component
:is="currentTab.component"
:results="results"
@add-to-queue="addToQueue"
@artist-view="artistView"
@album-view="albumView"
@playlist-view="playlistView"
@change-search-tab="changeSearchTab"
></component>
</div>
</div>
</template>
@ -477,7 +55,6 @@ export default {
const $tc = this.$tc.bind(this)
return {
showSearchTab: false,
currentTab: {
name: '',
component: {}
@ -485,22 +62,27 @@ export default {
tabs: [
{
name: $t('globals.listTabs.all'),
searchType: 'all',
component: ResultsAll
},
{
name: $tc('globals.listTabs.track', 2),
searchType: 'track',
component: ResultsTracks
},
{
name: $tc('globals.listTabs.album', 2),
searchType: 'album',
component: ResultsAlbums
},
{
name: $tc('globals.listTabs.artist', 2),
searchType: 'artist',
component: ResultsArtists
},
{
name: $tc('globals.listTabs.playlist', 2),
searchType: 'playlist',
component: ResultsPlaylists
}
],
@ -541,22 +123,26 @@ export default {
}
}
},
computed: {
showSearchTab() {
return this.results.query !== ''
}
},
props: {
scrolledSearchType: {
type: String,
required: false
}
},
created() {
this.currentTab = this.tabs[0]
},
mounted() {
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
socket.on('mainSearch', this.handleMainSearch)
socket.on('search', this.handleSearch)
this.$on('artistView', this.artistView)
this.$on('albumView', this.albumView)
this.$on('playlistView', this.playlistView)
},
methods: {
artistView: showView.bind(null, 'artist'),
@ -571,6 +157,20 @@ export default {
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
changeSearchTab(sectionName) {
sectionName = sectionName.toLowerCase()
let newTab = this.tabs.find(tab => {
return tab.searchType === sectionName
})
if (!newTab) {
console.error(`No tab ${sectionName} found`)
return
}
this.currentTab = newTab
},
handleSearchTabClick(event) {
const {
target,
@ -624,17 +224,17 @@ export default {
}
},
showNewResults(term, mainSelected) {
console.log('show new results')
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
if (needToPerformNewSearch) {
this.showSearchTab = false
// this.showSearchTab = false
socket.emit('mainSearch', { term })
// Showing loading placeholder
this.$root.$emit('updateSearchLoadingState', true)
} else {
this.showSearchTab = true
// document.getElementById('main_search_tablink').click()
// this.showSearchTab = true
}
},
checkLoadMoreContent(searchSelected) {
@ -642,38 +242,14 @@ export default {
this.search(searchSelected.split('_')[0])
},
changeSearchTab(section) {
if (section === 'TOP_RESULT') return
let tabID
// Using the switch beacuse it's tricky to find refernces of the belo IDs
switch (section) {
case 'TRACK':
tabID = 'search_track_tab'
break
case 'ALBUM':
tabID = 'search_album_tab'
break
case 'ARTIST':
tabID = 'search_artist_tab'
break
case 'PLAYLIST':
tabID = 'search_playlist_tab'
break
default:
break
}
// document.getElementById(tabID).click()
},
addToQueue(e) {
console.log('add to queue')
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
numberWithDots: Utils.numberWithDots,
convertDuration: Utils.convertDuration,
search(type) {
console.log('search')
socket.emit('search', {
term: this.results.query,
type: type,
@ -694,6 +270,7 @@ export default {
}
},
handleMainSearch(result) {
console.log('handle main search', result)
// Hiding loading placeholder
this.$root.$emit('updateSearchLoadingState', false)
@ -704,16 +281,10 @@ export default {
this.results.albumTab = { ...resetObj }
this.results.artistTab = { ...resetObj }
this.results.playlistTab = { ...resetObj }
if (this.results.query == '') {
// document.getElementById('search_all_tab').click()
}
this.results.query = result.QUERY
document.getElementById('search_tab_content').style.display = 'block'
// document.getElementById('main_search_tablink').click()
},
handleSearch(result) {
console.log('handle search', result)
const { next: nextResult, total, type, data } = result
let currentTab = type + 'Tab'
@ -742,6 +313,9 @@ export default {
if (!newType) return
this.scrolledSearch(newType)
},
currentTab(newTab) {
this.search(newTab.searchType)
}
}
}

View File

@ -1,3 +1,51 @@
<template>
<h2>Results Albums</h2>
<div id="album_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.albumTab.loaded" />
<div v-else-if="results.albumTab.data.length == 0">
<h1>{{ $t('search.noResultsAlbum') }}</h1>
</div>
<div class="release_grid" v-if="results.albumTab.data.length > 0">
<div
v-for="release in results.albumTab.data"
class="release clickable"
@click.stop="$emit('album-view', $event)"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<div
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text inline-flex">
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ release.title }}
</p>
<p class="secondary-text">
{{
$t('globals.by', { artist: release.artist.name }) +
' - ' +
$tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
</div>
</div>
</template>
<script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
}
}
</script>

View File

@ -8,7 +8,7 @@
class="search_section"
>
<h2
@click="changeSearchTab(section)"
@click="$emit('change-search-tab', section)"
class="search_header"
:class="{ top_result_header: section === 'TOP_RESULT' }"
>
@ -18,7 +18,7 @@
<div
v-if="section == 'TOP_RESULT'"
class="top_result clickable"
@click="handleClickTopResult"
@click.stop="$emit(`${topResultType}-view`, $event)"
:data-id="results.allTab.TOP_RESULT[0].id"
>
<div class="cover_container">
@ -30,7 +30,7 @@
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
@click.stop="$emit('add-to-queue', $event)"
:data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay"
>
@ -70,13 +70,19 @@
</div>
</td>
<td class="table__cell table__cell--medium table__cell--center breakline">
<span class="clickable" @click="artistView" :data-id="artist.ART_ID" v-for="artist in track.ARTISTS"
>{{ artist.ART_NAME }}
<span
class="clickable"
@click.stop="$emit('artist-view', $event)"
:data-id="artist.ART_ID"
v-for="artist in track.ARTISTS"
:key="artist.ART_ID"
>
{{ artist.ART_NAME }}
</span>
</td>
<td
class="table__cell--medium table__cell--center breakline clickable"
@click="albumView"
@click.stop="$emit('album-view', $event)"
:data-id="track.ALB_ID"
>
{{ track.ALB_TITLE }}
@ -86,7 +92,7 @@
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="addToQueue"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
role="button"
aria-label="download"
@ -101,7 +107,7 @@
<div
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
class="release clickable"
@click="artistView"
@click.stop="$emit('artist-view', $event)"
:data-id="release.ART_ID"
>
<div class="cover_container">
@ -115,7 +121,7 @@
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/artist/' + release.ART_ID"
class="download_overlay"
>
@ -130,7 +136,7 @@
<div
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
class="release clickable"
@click="albumView"
@click.stop="$emit('album-view', $event)"
:data-id="release.ALB_ID"
>
<div class="cover_container">
@ -144,7 +150,7 @@
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/album/' + release.ALB_ID"
class="download_overlay"
>
@ -168,7 +174,7 @@
<div
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
class="release clickable"
@click="playlistView"
@click.stop="$emit('playlist-view', $event)"
:data-id="release.PLAYLIST_ID"
>
<div class="cover_container">
@ -186,7 +192,7 @@
<div
role="button"
aria-label="download"
@click.stop="addToQueue"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
class="download_overlay"
>
@ -199,7 +205,7 @@
</div>
</section>
</template>
<div v-if="test">
<div v-if="noResults">
<h1>{{ $t('search.noResults') }}</h1>
</div>
</div>
@ -210,7 +216,10 @@ import { convertDuration } from '@/utils/utils'
export default {
props: ['results'],
computed: {
test() {
topResultType() {
return this.results.allTab.TOP_RESULT[0].type
},
noResults() {
return this.results.allTab.ORDER.every(section =>
section == 'TOP_RESULT'
? this.results.allTab[section].length == 0
@ -218,41 +227,8 @@ export default {
)
}
},
mounted() {
console.log(this.results)
},
methods: {
convertDuration,
artistView(event) {
this.$emit('artistView', event)
},
albumView(event) {
this.$emit('albumView', event)
},
playlistView(event) {
this.$emit('playlistView', event)
},
handleClickTopResult(event) {
let topResultType = this.results.allTab.TOP_RESULT[0].type
switch (topResultType) {
case 'artist':
// this.artistView(event)
this.$emit('artistView', event)
break
case 'album':
// this.albumView(event)
this.$emit('albumView', event)
break
case 'playlist':
// this.playlistView(event)
this.$emit('playlistView', event)
break
default:
break
}
}
convertDuration
}
}
</script>

View File

@ -1,3 +1,42 @@
<template>
<h2>Results Artists</h2>
<div id="artist_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
<div v-else-if="results.artistTab.data.length == 0">
<h1>{{ $t('search.noResultsArtist') }}</h1>
</div>
<div class="release_grid" v-if="results.artistTab.data.length > 0">
<div
v-for="release in results.artistTab.data"
class="release clickable"
@click.stop="$emit('artist-view', $event)"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
<div
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.name }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
</div>
</div>
</div>
</template>
<script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
}
}
</script>

View File

@ -1,3 +1,46 @@
<template>
<h2>Results Playlists</h2>
<div id="playlist_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.playlistTab.loaded" />
<div v-else-if="results.playlistTab.data.length == 0">
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
</div>
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
<div
v-for="release in results.playlistTab.data"
class="release clickable"
@click.stop="$emit('playlist-view', $event)"
:data-id="release.id"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<div
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
class="download_overlay"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
}}
</p>
</div>
</div>
</div>
</template>
<script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
}
}
</script>

View File

@ -1,3 +1,114 @@
<template>
<h2>Results Tracks</h2>
<div id="track_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.trackTab.loaded" />
<div v-else-if="results.trackTab.data.length == 0">
<h1>{{ $t('search.noResultsTrack') }}</h1>
</div>
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
<thead>
<tr>
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th>
<th>
<i class="material-icons"> timer </i>
</th>
<th style="width: 56px"></th>
</tr>
</thead>
<tbody>
<tr v-for="track in results.trackTab.data">
<td class="table__icon table__icon--big">
<a
href="#"
@click="playPausePreview"
:class="'rounded' + (track.preview ? ' single-cover' : '')"
:data-preview="track.preview"
>
<i
@mouseenter="previewMouseEnter"
@mouseleave="previewMouseLeave"
v-if="track.preview"
class="material-icons preview_controls"
:title="$t('globals.play_hint')"
>
play_arrow
</i>
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</div>
</td>
<td
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click.stop="artistView"
:data-id="track.artist.id"
>
{{ track.artist.name }}
</td>
<td
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click.stop="albumView"
:data-id="track.album.id"
>
{{ track.album.title }}
</td>
<td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="$emit('add-to-queue', $event)"
:data-link="track.link"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import EventBus from '@/utils/EventBus.js'
import { convertDuration } from '@/utils/utils'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
},
methods: {
convertDuration,
artistView(event) {
this.$emit('artist-view', event)
},
albumView(event) {
this.$emit('album-view', event)
},
playlistView(event) {
this.$emit('playlist-view', event)
},
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
}
}
}
</script>

View File

@ -22,6 +22,7 @@
cursor: pointer;
font-size: 1.75rem;
margin-bottom: 25px;
text-transform: capitalize;
&:not(.top_result_header) {
transition: color 200ms ease-in-out;