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

fix: general routing not wokring; fix: settings tab not showing up

Browse Source
This commit is contained in:
Roberto Tonino 2020-08-22 23:34:16 +02:00
parent a53204668b
commit 972d1fe680
10 changed files with 109 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -5,9 +5,11 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
## What's left to do?
- [ ] Use Vue app-wide
- [X] First step: rewrite the app in Single File Components way
- [ ] Second step: Implement routing for the whole app using Vue Router ⚒
- [ ] Third step: Remove jQuery
- [X] Rewrite the app in Single File Components way
- [ ] Implement routing for the whole app using Vue Router ⚒
- [ ] Implement Vuex store for FE caching
- [ ] Remove jQuery
- [ ] Improve artist/tracklist tabs displaying
- [ ] Implement custom contextmenu ⚒
- [X] Copy and paste functions
- [X] Copy Link where possible

6
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

22
src/app.js
View File

@ -68,24 +68,33 @@ socket.on('logged_in', function(data) {
case 1:
case 3:
toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast')
// Idea: set this whole object in the localStorage to read it in the future
// Other idea would be using vuex
if (data.arl) {
localStorage.setItem('arl', data.arl)
$('#login_input_arl').val(data.arl)
// $('#login_input_arl').val(data.arl)
}
// ? What's this?
$('#open_login_prompt').hide()
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
'src',
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
// $('#logged_in_info').show()
document.getElementById('logged_in_info').classList.remove('hide')
$('#logged_in_info').removeClass('hide')
// document.getElementById('logged_in_info').classList.remove('hide')
}
// $('#home_not_logged_in').addClass('hide')
document.getElementById('home_not_logged_in').classList.add('hide')
break
case 2:
toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
if (data.user) {
$('#settings_username').text(data.user.name)
$('#settings_picture').attr(
@ -93,7 +102,8 @@ socket.on('logged_in', function(data) {
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
)
// $('#logged_in_info').show()
document.getElementById('logged_in_info').classList.remove('hide')
// document.getElementById('logged_in_info').classList.remove('hide')
$('#logged_in_info').removeClass('hide')
}
document.getElementById('home_not_logged_in').classList.add('hide')
break
@ -102,8 +112,8 @@ socket.on('logged_in', function(data) {
localStorage.removeItem('arl')
$('#login_input_arl').val('')
$('#open_login_prompt').show()
document.getElementById('logged_in_info').classList.add('hide')
// $('#logged_in_info').hide()
$('#logged_in_info').addClass('hide')
// document.getElementById('logged_in_info').classList.add('hide')
$('#settings_username').text('Not Logged')
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
document.getElementById('home_not_logged_in').classList.remove('hide')

2
src/components/TheChartsTab.vue
View File

@ -157,6 +157,7 @@ export default {
socket.emit('getChartTracks', this.id)
},
setTracklist(data) {
console.log('settracklist')
this.chart = data
},
changeCountry() {
@ -164,6 +165,7 @@ export default {
this.id = 0
},
initCharts(data) {
console.log('init charts')
this.countries = data
this.country = localStorage.getItem('chart') || ''

3
src/components/TheContent.vue
View File

@ -1,8 +1,10 @@
<template>
<section id="content" @scroll="handleContentScroll" ref="content">
<div id="container">
<!-- HomeTab and MainSearchTab -->
<router-view></router-view>
<TheMainSearch :scrolled-search-type="newScrolled" />
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
@ -12,7 +14,6 @@
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab /> -->
<TheMainSearch :scrolled-search-type="newScrolled" />
</div>
</section>
</template>

4
src/components/TheMainSearch.vue
View File

@ -494,7 +494,7 @@ export default {
}
},
mounted() {
// console.log('main search mounted')
console.log('main search mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
@ -503,7 +503,7 @@ export default {
socket.on('search', this.handleSearch)
},
beforeDestroy() {
// console.log('main search bef dest')
console.log('main search bef dest')
// this.$refs.root.style.display = 'none'
},
methods: {

94
src/components/TheSettingsTab.vue
View File

@ -275,13 +275,17 @@
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" />
<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" />
<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">
⚠️ {{ $t('settings.covers.imageSizeWarning') }}
</p>
</div>
<div class="input_group">
@ -297,7 +301,9 @@
<input type="checkbox" v-model="settings.embeddedArtworkPNG" />
<span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
</label>
<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}</p>
<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22;">
⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
</p>
<div class="input_group">
<p class="input_group_text">{{ $t('settings.covers.jpegImageQuality') }}</p>
@ -617,7 +623,9 @@ export default {
flags,
currentLocale: 'en',
locales: [],
settings: { tags: {} },
settings: {
tags: {}
},
lastSettings: {},
spotifyFeatures: {},
lastCredentials: {},
@ -697,57 +705,57 @@ export default {
}
}
},
mounted() {
this.locales = this.$i18n.availableLocales
// mounted() {
// this.locales = this.$i18n.availableLocales
EventBus.$on('settingsTab:revertSettings', this.revertSettings)
EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
// EventBus.$on('settingsTab:revertSettings', this.revertSettings)
// EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
this.$refs.loggedInInfo.classList.add('hide')
// this.$refs.loggedInInfo.classList.add('hide')
let storedLocale = localStorage.getItem('locale')
// let storedLocale = localStorage.getItem('locale')
if (storedLocale) {
this.$i18n.locale = storedLocale
this.currentLocale = storedLocale
}
// if (storedLocale) {
// this.$i18n.locale = storedLocale
// this.currentLocale = storedLocale
// }
let storedArl = localStorage.getItem('arl')
// let storedArl = localStorage.getItem('arl')
if (storedArl) {
this.$refs.loginInput.value = storedArl.trim()
}
// if (storedArl) {
// this.$refs.loginInput.value = storedArl.trim()
// }
let storedAccountNum = localStorage.getItem('accountNum')
// let storedAccountNum = localStorage.getItem('accountNum')
if (storedAccountNum) {
this.accountNum = storedAccountNum
}
// if (storedAccountNum) {
// this.accountNum = storedAccountNum
// }
let spotifyUser = localStorage.getItem('spotifyUser')
// let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser) {
this.lastUser = spotifyUser
this.spotifyUser = spotifyUser
socket.emit('update_userSpotifyPlaylists', spotifyUser)
}
// if (spotifyUser) {
// this.lastUser = spotifyUser
// this.spotifyUser = spotifyUser
// socket.emit('update_userSpotifyPlaylists', spotifyUser)
// }
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
// 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
// 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)
socket.on('downloadFolderSelected', this.downloadFolderSelected)
socket.on('applogin_arl', this.setArl)
},
// socket.on('init_settings', this.initSettings)
// socket.on('updateSettings', this.updateSettings)
// socket.on('accountChanged', this.accountChanged)
// socket.on('familyAccounts', this.initAccounts)
// socket.on('downloadFolderSelected', this.downloadFolderSelected)
// socket.on('applogin_arl', this.setArl)
// },
methods: {
revertSettings() {
this.settings = { ...this.lastSettings }
@ -791,7 +799,7 @@ export default {
selectDownloadFolder() {
if (window.clientMode) socket.emit('selectDownloadFolder')
},
downloadFolderSelected(folder){
downloadFolderSelected(folder) {
console.log(folder)
this.settings.downloadLocation = folder
},

1
src/components/TracklistTab.vue
View File

@ -237,6 +237,7 @@ export default {
showPlaylist(data) {
this.reset()
console.log(data)
console.log('mandi')
const {
id: playlistID,

22
src/plugins/router.js
View File

@ -20,6 +20,7 @@ Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: TheHomeTab
},
{
@ -70,7 +71,7 @@ const routes = [
// 404 client side
{
path: '*',
component: TracklistTab
component: TheHomeTab
}
]
@ -85,25 +86,36 @@ const router = new VueRouter({
router.beforeEach((to, from, next) => {
console.log('before route change', to)
let getTracklistParams = null
switch (to.name) {
case 'Artist':
socket.emit('getTracklist', {
getTracklistParams = {
type: 'artist',
id: to.params.id
})
}
break
case 'Tracklist':
socket.emit('getTracklist', {
getTracklistParams = {
type: to.params.type,
id: to.params.id
})
}
break
case 'Home':
socket.emit('get_home_data')
break
case 'Charts':
socket.emit('get_charts_data')
break
default:
break
}
if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams)
}
EventBus.$emit('trackPreview:stopStackedTabsPreview')
next()

10
src/utils/socket.js
View File

@ -3,3 +3,13 @@ export const socket = io.connect(window.location.href)
socket.on('connect', () => {
document.getElementById('start_app_placeholder').classList.add('loading_placeholder--hidden')
})
// socket.on('init_charts', data => {
// console.log(data)
// })
// socket.on('init_home', data => {
// console.log(data)
// localStorage.setItem('test_DELETE', JSON.stringify(data))
// console.log(JSON.parse(localStorage.getItem('test_DELETE')))
// })