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

started moving search tabs in components

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-16 18:59:25 +02:00
parent 36dbb78879
commit 5695f4ecd6
9 changed files with 363 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

89
src/components/TheMainSearch.vue
View File

@ -4,11 +4,18 @@
<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="results.query !== ''">
<ul class="section-tabs"> <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_all_tab">
<li class="section-tabs__tab search_tablinks" id="search_track_tab">{{ $tc('globals.listTabs.track', 2) }}</li> {{ $t('globals.listTabs.all') }}
<li class="section-tabs__tab search_tablinks" id="search_album_tab">{{ $tc('globals.listTabs.album', 2) }}</li> </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"> <li class="section-tabs__tab search_tablinks" id="search_artist_tab">
{{ $tc('globals.listTabs.artist', 2) }} {{ $tc('globals.listTabs.artist', 2) }}
</li> </li>
@ -16,9 +23,26 @@
{{ $tc('globals.listTabs.playlist', 2) }} {{ $tc('globals.listTabs.playlist', 2) }}
</li> </li>
</ul> </ul>
<ul class="section-tabs">
<li
class="section-tabs__tab"
v-for="tab in tabs"
:key="tab.name"
@click="currentTab = tab"
:class="{ active: currentTab.name === tab.name }"
>
{{ tab.name }}
</li>
</ul>
<template v-if="currentTab.name !== ''">
<component :is="currentTab.component" :results="results"></component>
</template>
<div id="search_tab_content" v-show="showSearchTab"> <div id="search_tab_content" v-show="showSearchTab">
<!-- ### Main Search Tab ### --> <!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent"> <!-- <div id="main_search" class="search_tabcontent">
<template v-for="section in results.allTab.ORDER"> <template v-for="section in results.allTab.ORDER">
<section <section
v-if=" v-if="
@ -34,7 +58,6 @@
> >
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }} {{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2> </h2>
<!-- Top result -->
<div <div
v-if="section == 'TOP_RESULT'" v-if="section == 'TOP_RESULT'"
class="top_result clickable" class="top_result clickable"
@ -238,7 +261,7 @@
> >
<h1>{{ $t('search.noResults') }}</h1> <h1>{{ $t('search.noResults') }}</h1>
</div> </div>
</div> </div> -->
<!-- ### Track Search Tab ### --> <!-- ### Track Search Tab ### -->
<div id="track_search" class="search_tabcontent"> <div id="track_search" class="search_tabcontent">
<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder> <base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
@ -431,12 +454,17 @@
</template> </template>
<script> <script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import ResultsAll from '@components/search/ResultsAll.vue'
import ResultsAlbums from '@components/search/ResultsAlbums.vue'
import ResultsArtists from '@components/search/ResultsArtists.vue'
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
import ResultsTracks from '@components/search/ResultsTracks.vue'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
import { showView } from '@js/tabs.js' import { showView } from '@js/tabs.js'
import Downloads from '@/utils/downloads' import Downloads from '@/utils/downloads'
import Utils from '@/utils/utils' import Utils from '@/utils/utils'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import { changeTab } from '@js/tabs.js' import { changeTab } from '@js/tabs.js'
import EventBus from '@/utils/EventBus.js' import EventBus from '@/utils/EventBus.js'
@ -445,7 +473,37 @@ export default {
BaseLoadingPlaceholder BaseLoadingPlaceholder
}, },
data() { data() {
const $t = this.$t.bind(this)
const $tc = this.$tc.bind(this)
return { return {
showSearchTab: false,
currentTab: {
name: '',
component: {}
},
tabs: [
{
name: $t('globals.listTabs.all'),
component: ResultsAll
},
{
name: $tc('globals.listTabs.track', 2),
component: ResultsTracks
},
{
name: $tc('globals.listTabs.album', 2),
component: ResultsAlbums
},
{
name: $tc('globals.listTabs.artist', 2),
component: ResultsArtists
},
{
name: $tc('globals.listTabs.playlist', 2),
component: ResultsPlaylists
}
],
results: { results: {
query: '', query: '',
allTab: { allTab: {
@ -480,8 +538,7 @@ export default {
total: 0, total: 0,
loaded: false loaded: false
} }
}, }
showSearchTab: false
} }
}, },
props: { props: {
@ -496,6 +553,10 @@ export default {
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'),
@ -540,6 +601,8 @@ export default {
if (!selectedTab) return if (!selectedTab) return
console.log('asfsdf')
changeTab(target, 'search', selectedTab) changeTab(target, 'search', selectedTab)
}, },
handleClickTopResult(event) { handleClickTopResult(event) {
@ -571,7 +634,7 @@ export default {
this.$root.$emit('updateSearchLoadingState', true) this.$root.$emit('updateSearchLoadingState', true)
} else { } else {
this.showSearchTab = true this.showSearchTab = true
document.getElementById('main_search_tablink').click() // document.getElementById('main_search_tablink').click()
} }
}, },
checkLoadMoreContent(searchSelected) { checkLoadMoreContent(searchSelected) {
@ -603,7 +666,7 @@ export default {
break break
} }
document.getElementById(tabID).click() // document.getElementById(tabID).click()
}, },
addToQueue(e) { addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
@ -643,7 +706,7 @@ export default {
this.results.playlistTab = { ...resetObj } this.results.playlistTab = { ...resetObj }
if (this.results.query == '') { if (this.results.query == '') {
document.getElementById('search_all_tab').click() // document.getElementById('search_all_tab').click()
} }
this.results.query = result.QUERY this.results.query = result.QUERY

7
src/components/TheSearchBar.vue
View File

@ -12,8 +12,10 @@
:placeholder="$t('searchbar')" :placeholder="$t('searchbar')"
autofocus autofocus
ref="searchbar" ref="searchbar"
@keyup="handleSearchBarKeyup($event)" @keyup="handleSearchBarKeyup($event)"
/> />
<!-- @keyup.enter.exact="onEnter"
@keyup.ctrl.enter="onCTRLEnter" -->
</header> </header>
</template> </template>
@ -31,6 +33,9 @@ export default {
} }
}, },
methods: { methods: {
test() {
console.log('test passato')
},
async handleSearchBarKeyup(keyEvent) { async handleSearchBarKeyup(keyEvent) {
let isEnterPressed = keyEvent.keyCode === 13 let isEnterPressed = keyEvent.keyCode === 13

3
src/components/search/ResultsAlbums.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h2>Results Albums</h2>
</template>

258
src/components/search/ResultsAll.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<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>
<!-- Top result -->
<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="test">
<h1>{{ $t('search.noResults') }}</h1>
</div>
</div>
</template>
<script>
import { convertDuration } from '@/utils/utils'
export default {
props: ['results'],
computed: {
test() {
return this.results.allTab.ORDER.every(section =>
section == 'TOP_RESULT'
? this.results.allTab[section].length == 0
: this.results.allTab[section].data.length == 0
)
}
},
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
}
}
}
}
</script>

3
src/components/search/ResultsArtists.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h2>Results Artists</h2>
</template>

3
src/components/search/ResultsPlaylists.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h2>Results Playlists</h2>
</template>

3
src/components/search/ResultsTracks.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<h2>Results Tracks</h2>
</template>

5
src/js/tabs.js
View File

@ -1,4 +1,3 @@
import { socket } from '@/utils/socket'
import EventBus from '@/utils/EventBus' import EventBus from '@/utils/EventBus'
import router from '@/router' import router from '@/router'
@ -12,6 +11,8 @@ export function changeTab(sidebarEl, section, tabName) {
window.windows_stack = [] window.windows_stack = []
window.currentStack = {} window.currentStack = {}
console.log(Array.from(arguments))
// * Only in section search // * Only in section search
updateTabLink(section) updateTabLink(section)
@ -81,8 +82,6 @@ export function showView(viewType, event) {
/** /**
* Goes back to the previous tab according to the global window stack. * Goes back to the previous tab according to the global window stack.
*
* Needs EventBus and socket
*/ */
export function backTab() { export function backTab() {
// ! Need to implement the memory of the opened artist tab // ! Need to implement the memory of the opened artist tab