chore: removed main_selected global; perf: added route links instead of showView method and removed tabs.js

This commit is contained in:
Roberto Tonino 2020-09-26 19:48:30 +02:00
parent 468142004a
commit 064c3b29bc
15 changed files with 158 additions and 186 deletions

File diff suppressed because one or more lines are too long

View File

@ -31,10 +31,6 @@ export default {
find: '@',
replacement: __dirname + '/src'
},
{
find: '@js',
replacement: __dirname + '/src/js'
},
{
find: '@components',
replacement: __dirname + '/src/components'

View File

@ -47,7 +47,11 @@
</thead>
<tbody>
<tr v-for="release in showTable" :key="release.id">
<td class="inline-flex clickable" @click="albumView" :data-id="release.id">
<router-link
tag="td"
class="inline-flex clickable"
:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
>
<img
class="rounded coverart"
:src="release.cover_small"
@ -58,7 +62,7 @@
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300">
fiber_new
</i>
</td>
</router-link>
<td>{{ release.release_date }}</td>
<td>{{ release.nb_song }}</td>
<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
@ -78,7 +82,6 @@
import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket'
import Downloads from '@/utils/downloads'
import { showView } from '@js/tabs'
import EventBus from '@/utils/EventBus'
export default {
@ -97,7 +100,6 @@ export default {
}
},
methods: {
albumView: showView.bind(null, 'album'),
reset() {
this.title = 'Loading...'
this.image = ''
@ -124,10 +126,9 @@ export default {
changeTab(tab) {
this.currentTab = tab
},
getCurrentTab() {
return this.currentTab
updateSelected() {
// Last tab opened logic
},
updateSelected() {},
checkNewRelease(date) {
let g1 = new Date()
let g2 = new Date(date)

View File

@ -71,20 +71,20 @@
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</td>
<td
class="table__cell--medium table__cell--center breakline clickable"
@click="artistView"
:data-id="track.artist.id"
<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 }}
</td>
<td
</router-link>
<router-link
tag="td"
class="table__cell--medium table__cell--center breakline clickable"
@click="albumView"
:data-id="track.album.id"
:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
>
{{ track.album.title }}
</td>
</router-link>
<td class="table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}
</td>
@ -107,7 +107,6 @@
<script>
import { mapGetters } from 'vuex'
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs.js'
import { sendAddToQueue } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
@ -136,8 +135,6 @@ export default {
},
methods: {
convertDuration,
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},

View File

@ -13,9 +13,9 @@
</template>
<script>
import Downloads from '@/utils/downloads'
import downloadQualities from '@js/qualities'
import { sendAddToQueue } from '@/utils/downloads'
import { generatePath, copyToClipboard } from '@/utils/utils'
import { downloadQualities } from '@/data/qualities'
export default {
data() {
@ -95,10 +95,10 @@ export default {
downloadQualities.forEach((quality, index) => {
options[quality.objName] = {
label: `${this.$t('globals.download', {thing: quality.label})}`,
label: `${this.$t('globals.download', { thing: quality.label })}`,
show: false,
position: nextValuePosition + index,
action: this.tryToDownloadTrack.bind(null, quality.value)
action: sendAddToQueue.bind(null, this.deezerHref, quality.value)
}
})
@ -123,7 +123,6 @@ export default {
},
methods: {
showMenu(contextMenuEvent) {
// contextMenuEvent.preventDefault()
const { pageX, pageY, target: elementClicked } = contextMenuEvent
const path = generatePath(elementClicked)
let deezerLink = null
@ -213,9 +212,6 @@ export default {
downloadQualities.forEach(quality => {
this.options[quality.objName].show = true
})
},
tryToDownloadTrack(qualityValue) {
Downloads.sendAddToQueue(this.deezerHref, qualityValue)
}
}
}

View File

@ -29,35 +29,12 @@
<h1>{{ $t('favorites.noPlaylists') }}</h1>
</div>
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-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="addToQueue"
: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.creator.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
<div
v-for="release in spotifyPlaylists"
<router-link
tag="div"
v-for="release in playlists"
:key="release.id"
class="release clickable"
@click="spotifyPlaylistView"
:data-id="release.id"
:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
@ -81,7 +58,37 @@
)}`
}}
</p>
</div>
</router-link>
<router-link
tag="div"
v-for="release in spotifyPlaylists"
:key="release.id"
class="release clickable"
:to="{ name: 'Tracklist', params: { type: 'spotifyplaylist', 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="addToQueue"
: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.creator.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</router-link>
</div>
</div>
@ -90,7 +97,13 @@
<h1>{{ $t('favorites.noAlbums') }}</h1>
</div>
<div class="release_grid" v-if="albums.length > 0">
<div v-for="release in albums" class="release clickable" @click="albumView" :data-id="release.id">
<router-link
tag="div"
class="release clickable"
v-for="release in albums"
:key="release.id"
:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<button
@ -106,7 +119,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link>
</div>
</div>
@ -115,7 +128,13 @@
<h1>{{ $t('favorites.noArtists') }}</h1>
</div>
<div class="release_grid" v-if="artists.length > 0">
<div v-for="release in artists" class="release clickable" @click="artistView" :data-id="release.id">
<router-link
tag="div"
class="release clickable"
v-for="release in artists"
: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
@ -130,7 +149,7 @@
</button>
</div>
<p class="primary-text">{{ release.name }}</p>
</div>
</router-link>
</div>
</div>
@ -169,20 +188,20 @@
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
</td>
<td
class="table__cell--medium table__cell--center breakline clickable"
@click="artistView"
:data-id="track.artist.id"
<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 }}
</td>
<td
</router-link>
<router-link
tag="td"
class="table__cell--medium table__cell--center breakline clickable"
@click="albumView"
:data-id="track.album.id"
:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
>
{{ track.album.title }}
</td>
</router-link>
<td class="table__cell--small">
{{ convertDuration(track.duration) }}
</td>
@ -214,8 +233,6 @@
</style>
<script>
import { showView } from '@js/tabs'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
@ -261,10 +278,6 @@ export default {
})
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playlistView: showView.bind(null, 'playlist'),
spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},

View File

@ -12,13 +12,13 @@
<section v-if="playlists.length" class="home_section">
<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
<div class="release_grid">
<div
<router-link
tag="div"
v-for="release in playlists"
:key="release.id"
class="release clickable"
@click="playlistView"
@keyup.enter="playlistView"
:data-id="release.id"
:to="{ name: 'Tracklist', params: { type: 'playlist', id: release.id } }"
@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'playlist', id: release.id } })"
tabindex="0"
>
<div class="cover_container">
@ -43,19 +43,20 @@
)}`
}}
</p>
</div>
</router-link>
</div>
</section>
<section v-if="albums.length" class="home_section">
<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
<div class="release_grid">
<div
<router-link
tag="div"
v-for="release in albums"
:key="release.id"
class="release clickable"
@click="albumView"
@keyup.enter="albumView"
:to="{ name: 'Tracklist', params: { type: 'album', id: release.id } }"
@keyup.enter.native="$router.push({ name: 'Tracklist', params: { type: 'album', id: release.id } })"
:data-id="release.id"
tabindex="0"
>
@ -74,7 +75,7 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link>
</div>
</section>
</div>
@ -83,7 +84,6 @@
<script>
import { mapGetters } from 'vuex'
import { showView } from '@js/tabs'
import { sendAddToQueue } from '@/utils/downloads'
import { getHomeData } from '@/data/home'
@ -100,15 +100,9 @@ export default {
this.initHome(homeData)
},
computed: {
...mapGetters(['isLoggedIn']),
needToWait() {
return this.getHomeData.albums.data.length === 0 && this.getHomeData.playlists.data.length === 0
}
...mapGetters(['isLoggedIn'])
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playlistView: showView.bind(null, 'playlist'),
addToQueue(e) {
sendAddToQueue(e.currentTarget.dataset.link)
},

View File

@ -25,24 +25,39 @@
>
<div>
<h1>{{ title }}</h1>
<h2 v-if="type == 'track'">
<h2 v-if="type === 'track'">
<i18n path="globals.by" tag="span">
<span place="artist" class="clickable" @click="artistView" :data-id="data.artist.id">{{
data.artist.name
}}</span>
<router-link
tag="span"
place="artist"
class="clickable"
:to="{ name: 'Artist', params: { id: data.artist.id } }"
>
{{ data.artist.name }}
</router-link>
</i18n>
<i18n path="globals.in" tag="span">
<span place="album" class="clickable" @click="albumView" :data-id="data.album.id">{{
data.album.title
}}</span>
<router-link
tag="span"
place="album"
class="clickable"
:to="{ name: 'Tracklist', params: { type: 'album', id: data.album.id } }"
>
{{ data.album.title }}
</router-link>
</i18n>
</h2>
<h2 v-else-if="type == 'album'">
<h2 v-else-if="type === 'album'">
<i18n path="globals.by" tag="span">
<span place="artist" class="clickable" @click="artistView" :data-id="data.artist.id">{{
data.artist.name
}}</span>
<router-link
tag="span"
place="artist"
class="clickable"
:to="{ name: 'Artist', params: { id: data.artist.id } }"
>
{{ data.artist.name }}
</router-link>
</i18n>
{{ `${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
</h2>
@ -106,7 +121,9 @@
</table>
<div v-if="type == 'album'">
<button @click="albumView" :data-id="id">{{ $t('linkAnalyzer.table.tracklist') }}</button>
<router-link tag="button" :to="{ name: 'Tracklist', params: { type: 'album', id } }">
{{ $t('linkAnalyzer.table.tracklist') }}
</router-link>
</div>
<div v-if="countries.length">
<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
@ -117,7 +134,6 @@
<script>
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs'
import { convertDuration } from '@/utils/utils'
import { COUNTRIES } from '@/utils/countries'
import EventBus from '@/utils/EventBus'
@ -137,8 +153,6 @@ export default {
}
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
convertDuration,
reset() {
this.title = 'Loading...'

View File

@ -23,9 +23,6 @@
:is="currentTab.component"
:results="results"
@add-to-queue="addToQueue"
@artist-view="artistView"
@album-view="albumView"
@playlist-view="playlistView"
@change-search-tab="changeSearchTab"
></component>
</keep-alive>
@ -42,7 +39,6 @@ import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
import ResultsTracks from '@components/search/ResultsTracks.vue'
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs'
import { sendAddToQueue } from '@/utils/downloads'
import { numberWithDots, convertDuration } from '@/utils/utils'
import EventBus from '@/utils/EventBus'
@ -162,9 +158,6 @@ export default {
socket.on('search', this.handleSearch)
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playlistView: showView.bind(null, 'playlist'),
changeSearchTab(sectionName) {
sectionName = sectionName.toLowerCase()

View File

@ -105,7 +105,7 @@ export default {
this.lastTextSearch = term
}
this.$root.$emit('mainSearch:showNewResults', term /* , window.main_selected */)
this.$root.$emit('mainSearch:showNewResults', term)
}
}
}

View File

@ -64,21 +64,21 @@
}}
</div>
</td>
<td
<router-link
tag="td"
class="table__cell--medium table__cell--center clickable"
@click="artistView"
:data-id="track.artist.id"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
>
{{ track.artist.name }}
</td>
<td
v-if="type == 'playlist'"
</router-link>
<router-link
tag="td"
v-if="type === 'playlist'"
class="table__cell--medium table__cell--center clickable"
@click="albumView"
:data-id="track.album.id"
:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
>
{{ track.album.title }}
</td>
</router-link>
<td
class="table__cell--center"
:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"
@ -145,27 +145,25 @@
<script>
import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs.js'
import Downloads from '@/utils/downloads'
import Utils from '@/utils/utils'
import EventBus from '@/utils/EventBus'
export default {
name: 'tracklist-tab',
data: () => ({
title: '',
metadata: '',
release_date: '',
label: '',
explicit: false,
image: '',
type: 'empty',
link: '',
body: []
}),
data() {
return {
title: '',
metadata: '',
release_date: '',
label: '',
explicit: false,
image: '',
type: 'empty',
link: '',
body: []
}
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},

View File

@ -46,20 +46,20 @@
}}
</div>
</td>
<td
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click.stop="artistView"
:data-id="track.artist.id"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
>
{{ track.artist.name }}
</td>
<td
</router-link>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
@click.stop="albumView"
:data-id="track.album.id"
:to="{ name: 'Tracklist', params: { type: 'album', id: track.album.id } }"
>
{{ track.album.title }}
</td>
</router-link>
<td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}
</td>
@ -81,7 +81,7 @@
<script>
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import EventBus from '@/utils/EventBus.js'
import EventBus from '@/utils/EventBus'
import { convertDuration } from '@/utils/utils'
export default {
@ -91,15 +91,6 @@ export default {
},
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)
},

View File

@ -1,4 +1,4 @@
export default [
export const downloadQualities = [
{
objName: 'flac',
label: 'FLAC',

View File

@ -1,20 +0,0 @@
import router from '@/router'
/* ===== Globals ====== */
window.main_selected = ''
export function showView(viewType, event) {
const {
currentTarget: {
dataset: { id }
}
} = event
const isArtist = viewType === 'artist'
const name = isArtist ? 'Artist' : 'Tracklist'
const params = isArtist ? { id } : { type: viewType, id }
router.push({
name,
params
})
}

View File

@ -4,7 +4,6 @@
"baseUrl": ".",
"paths": {
"@/*": ["./*"],
"@js/*": ["./js/*"],
"@components/*": ["./components/*"]
}
},