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

added artist and tracklist tab routing

Browse Source
This commit is contained in:
Roberto Tonino
2020-07-28 21:39:44 +02:00
parent 9346f89d48
commit 20460ef9ce
11 changed files with 204 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ArtistTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="artist_tab" class="main_tabcontent fixed_footer image_header">
<div id="artist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
<header
class="inline-flex"
:style="{
@@ -64,7 +64,7 @@
explicit
</i>
{{ release.title }}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300;">
fiber_new
</i>
</td>
@@ -84,7 +84,7 @@
</table>
<footer>
<button class="back-button">{{ $t('globals.back') }}</button>
<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
</footer>
</div>
</template>
@@ -93,7 +93,7 @@
import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/utils/socket'
import Downloads from '@/utils/downloads'
import { showView } from '@js/tabs'
import { showView, backTab } from '@js/tabs'
import EventBus from '@/utils/EventBus'
export default {
@@ -112,6 +112,7 @@ export default {
}
},
methods: {
backTab,
albumView: showView.bind(null, 'album'),
reset() {
this.title = 'Loading...'
@@ -157,6 +158,8 @@ export default {
return g1.getTime() <= g2.getTime()
},
showArtist(data) {
this.reset()
const { name, picture_xl, id, releases } = data
this.title = name
@@ -167,7 +170,7 @@ export default {
this.sortKey = 'release_date'
this.sortOrder = 'desc'
this.head = [
{ title: this.$tc('globals.listTabs.title',1), sortKey: 'title' },
{ title: this.$tc('globals.listTabs.title', 1), sortKey: 'title' },
{ title: this.$t('globals.listTabs.releaseDate'), sortKey: 'release_date' },
{ title: '', width: '32px' }
]
@@ -185,11 +188,17 @@ export default {
}
},
mounted() {
this.$refs.root.style.display = 'block'
console.log('artist mounted')
socket.on('show_artist', this.showArtist)
EventBus.$on('artistTab:reset', this.reset)
EventBus.$on('artistTab:updateSelected', this.updateSelected)
EventBus.$on('artistTab:changeTab', this.changeTab)
},
beforeDestroy() {
console.log('artist bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

24
src/components/TheContent.vue
View File

@@ -1,28 +1,30 @@
<template>
<section id="content" @scroll="handleContentScroll" ref="content">
<div id="container">
<ArtistTab />
<router-view></router-view>
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
<TheChartsTab />
<TheFavoritesTab />
<TheErrorsTab />
<TheHomeTab />
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab />
<TheMainSearch :scrolled-search-type="newScrolled" />
<TracklistTab />
</div>
</section>
</template>
<script>
import ArtistTab from '@components/ArtistTab.vue'
import TracklistTab from '@components/TracklistTab.vue'
// import ArtistTab from '@components/ArtistTab.vue'
// import TracklistTab from '@components/TracklistTab.vue'
import TheChartsTab from '@components/TheChartsTab.vue'
import TheFavoritesTab from '@components/TheFavoritesTab.vue'
import TheErrorsTab from '@components/TheErrorsTab.vue'
import TheHomeTab from '@components/TheHomeTab.vue'
// import TheHomeTab from '@components/TheHomeTab.vue'
import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
import TheAboutTab from '@components/TheAboutTab.vue'
import TheSettingsTab from '@components/TheSettingsTab.vue'
@@ -33,22 +35,22 @@ import EventBus from '@/utils/EventBus.js'
export default {
components: {
ArtistTab,
// ArtistTab,
// TracklistTab
TheChartsTab,
TheFavoritesTab,
TheErrorsTab,
TheHomeTab,
// TheHomeTab,
TheLinkAnalyzerTab,
TheAboutTab,
TheSettingsTab,
TheMainSearch,
TracklistTab
TheMainSearch
},
data: () => ({
newScrolled: null
}),
methods: {
handleContentScroll: debounce(async function() {
handleContentScroll: debounce(async function () {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
if (

10
src/components/TheHomeTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="home_tab" class="main_tabcontent">
<div id="home_tab" class="main_tabcontent" ref="root">
<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
<section id="home_not_logged_in" class="home_section" ref="notLogged">
<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
@@ -103,11 +103,19 @@ export default {
}
},
mounted() {
console.log('home mounted')
this.$refs.root.style.display = 'block'
if (localStorage.getItem('arl')) {
this.$refs.notLogged.classList.add('hide')
}
// ! Need to init home everytime, atm this is called only on connect
socket.on('init_home', this.initHome)
},
beforeDestroy() {
console.log('home bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>

5
src/components/TheMainContent.vue
View File

@@ -1,7 +1,5 @@
<template>
<main id="main_content">
<!-- <router-link to="/tracklist/132">Go to Foo</router-link> -->
<!-- <router-view></router-view> -->
<TheMiddleSection />
<TheDownloadTab />
</main>
@@ -15,9 +13,6 @@ export default {
components: {
TheMiddleSection,
TheDownloadTab
},
mounted() {
console.log(this.$route)
}
}
</script>

99
src/components/TheSettingsTab.vue
View File

@@ -611,6 +611,56 @@ export default {
accountNum: 0,
accounts: []
}),
mounted() {
this.locales = this.$i18n.availableLocales
EventBus.$on('settingsTab:revertSettings', this.revertSettings)
EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
this.$refs.loggedInInfo.classList.add('hide')
let storedLocale = localStorage.getItem('locale')
if (storedLocale) {
this.$i18n.locale = storedLocale
this.currentLocale = storedLocale
}
let storedArl = localStorage.getItem('arl')
if (storedArl) {
this.$refs.loginInput.value = storedArl.trim()
}
let storedAccountNum = localStorage.getItem('accountNum')
if (storedAccountNum) {
this.accountNum = storedAccountNum
}
let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser) {
this.lastUser = spotifyUser
this.spotifyUser = spotifyUser
socket.emit('update_userSpotifyPlaylists', spotifyUser)
}
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)) {
volume = 80
localStorage.setItem('previewVolume', volume)
}
window.vol.preview_max_volume = volume
socket.on('init_settings', this.initSettings)
socket.on('updateSettings', this.updateSettings)
socket.on('accountChanged', this.accountChanged)
socket.on('familyAccounts', this.initAccounts)
},
computed: {
changeSlimDownloads: {
get() {
@@ -705,55 +755,6 @@ export default {
resetSettings() {
this.settings = { ...this.defaultSettings }
}
},
mounted() {
this.locales = this.$i18n.availableLocales
EventBus.$on('settingsTab:revertSettings', this.revertSettings)
EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
this.$refs.loggedInInfo.classList.add('hide')
let storedLocale = localStorage.getItem('locale')
if (storedLocale) {
this.$i18n.locale = storedLocale
this.currentLocale = storedLocale
}
let storedArl = localStorage.getItem('arl')
if (storedArl) {
this.$refs.loginInput.value = storedArl.trim()
}
let storedAccountNum = localStorage.getItem('accountNum')
if (storedAccountNum) {
this.accountNum = storedAccountNum
}
let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser) {
this.lastUser = spotifyUser
this.spotifyUser = spotifyUser
socket.emit('update_userSpotifyPlaylists', spotifyUser)
}
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)) {
volume = 80
localStorage.setItem('previewVolume', volume)
}
window.vol.preview_max_volume = volume
socket.on('init_settings', this.initSettings)
socket.on('updateSettings', this.updateSettings)
socket.on('accountChanged', this.accountChanged)
socket.on('familyAccounts', this.initAccounts)
}
}
</script>

12
src/components/TheTrackPreview.vue
View File

@@ -88,7 +88,7 @@ export default {
},
stopStackedTabsPreview() {
if (
$('.preview_playlist_controls').filter(function() {
$('.preview_playlist_controls').filter(function () {
return $(this).attr('playing')
}).length > 0
) {
@@ -104,15 +104,7 @@ export default {
previewMouseLeave(event) {
const { currentTarget: obj } = event
if (
($(obj)
.parent()
.attr('playing') &&
this.previewStopped) ||
!$(obj)
.parent()
.attr('playing')
) {
if (($(obj).parent().attr('playing') && this.previewStopped) || !$(obj).parent().attr('playing')) {
$(obj).css({ opacity: 0 }, 200)
}
}

20
src/components/TracklistTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header" ref="root">
<header
:style="{
'background-image':
@@ -144,7 +144,7 @@
>
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
</button>
<button class="back-button">{{ $t('globals.back') }}</button>
<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
</footer>
</div>
</template>
@@ -152,7 +152,7 @@
<script>
import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket'
import { showView } from '@js/tabs.js'
import { showView, backTab } from '@js/tabs.js'
import Downloads from '@/utils/downloads'
import Utils from '@/utils/utils'
import EventBus from '@/utils/EventBus'
@@ -171,12 +171,14 @@ export default {
body: []
}),
methods: {
backTab,
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
reset() {
console.log('resetto')
this.title = 'Loading...'
this.image = ''
this.metadata = ''
@@ -211,6 +213,8 @@ export default {
},
convertDuration: Utils.convertDuration,
showAlbum(data) {
this.reset()
const {
id: albumID,
title: albumTitle,
@@ -239,6 +243,8 @@ export default {
}
},
showPlaylist(data) {
this.reset()
const {
id: playlistID,
title: playlistTitle,
@@ -263,6 +269,8 @@ export default {
}
},
showSpotifyPlaylist(data) {
this.reset()
const {
uri: playlistURI,
name: playlistName,
@@ -294,12 +302,16 @@ export default {
},
mounted() {
console.log('tracklist mounted')
EventBus.$on('tracklistTab:reset', this.reset)
this.$refs.root.style.display = 'block'
EventBus.$on('tracklistTab:selectRow', this.selectRow)
socket.on('show_album', this.showAlbum)
socket.on('show_playlist', this.showPlaylist)
socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
},
beforeDestroy() {
console.log('tracklist bef dest')
this.$refs.root.style.display = 'none'
}
}
</script>