feat: isolated downloads and slim sidebar logic to store

This commit is contained in:
Roberto Tonino 2020-11-10 21:55:35 +01:00
parent 86e3cda64c
commit 6c32367c80
6 changed files with 133 additions and 67 deletions

File diff suppressed because one or more lines are too long

View File

@ -2,6 +2,7 @@
<aside
id="sidebar"
class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
:class="{ slim: isSlim }"
role="navigation"
aria-label="sidebar"
ref="sidebar"
@ -63,13 +64,16 @@
</template>
<style lang="scss" scoped>
#sidebar.slim{
#sidebar.slim {
width: 46px;
}
#sidebar.slim .main_tablinks_text{
#sidebar.slim .main_tablinks_text {
display: none;
}
#sidebar.slim #theme_selector, #sidebar.slim #theme_togglers{
#sidebar.slim #theme_selector,
#sidebar.slim #theme_togglers {
display: inline-grid;
grid-gap: 8px;
}
@ -122,6 +126,7 @@
<script>
import { socket } from '@/utils/socket'
import { mapGetters } from 'vuex'
export default {
data() {
@ -191,6 +196,11 @@ export default {
]
}
},
computed: {
...mapGetters({
isSlim: 'getSlimSidebar'
})
},
mounted() {
/* === Online status handling === */
this.appOnline = navigator.onLine

View File

@ -1,7 +1,7 @@
<template>
<section
id="download_tab_container"
class="block bg-panels-bg text-foreground h-screen"
class="block h-screen bg-panels-bg text-foreground"
:class="{ 'tab-hidden': !isExpanded, 'w-8': !isExpanded }"
@transitionend="$refs.container.style.transition = ''"
ref="container"
@ -51,7 +51,7 @@
</i>
</div>
<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
<div v-show="isExpanded" id="download_list" class="w-full pr-2" :class="{ slim: isSlim }" ref="list">
<QueueItem
v-for="item in queueList"
:queue-item="item"
@ -140,7 +140,8 @@ export default {
},
computed: {
...mapGetters({
clientMode: 'getClientMode'
clientMode: 'getClientMode',
isSlim: 'getSlimDownloads'
})
},
created() {

View File

@ -60,8 +60,8 @@
<div class="settings-group">
<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
<div class="my-5">
<span
<ul class="my-5">
<li
v-for="locale in locales"
:key="locale"
class="inline-flex items-center locale-flag"
@ -70,7 +70,7 @@
v-html="flags[locale]"
:title="locale"
/>
</div>
</ul>
</div>
<BaseAccordion class="settings-group">
@ -82,11 +82,11 @@
</template>
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" />
<input type="checkbox" v-model="modelSlimDownloads" />
<span class="checkbox-text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
</label>
<label class="mb-4 with-checkbox">
<input type="checkbox" v-model="changeSlimSidebar" />
<input type="checkbox" v-model="modelSlimSidebar" />
<span class="checkbox-text">{{ $t('settings.appearance.slimSidebar') }}</span>
</label>
</BaseAccordion>
@ -780,8 +780,6 @@ export default {
defaultSettings: {},
lastUser: '',
spotifyUser: '',
slimDownloads: false,
slimSidebar: false,
accountNum: 0,
accounts: []
}
@ -792,8 +790,13 @@ export default {
user: 'getUser',
isLoggedIn: 'isLoggedIn',
clientMode: 'getClientMode',
previewVolume: 'getPreviewVolume'
previewVolume: 'getPreviewVolume',
hasSlimDownloads: 'getSlimDownloads',
hasSlimSidebar: 'getSlimSidebar'
}),
needToWait() {
return Object.keys(this.getSettings).length === 0
},
modelVolume: {
get() {
return this.previewVolume
@ -802,31 +805,20 @@ export default {
this.setPreviewVolume(value)
}, 20)
},
needToWait() {
return Object.keys(this.getSettings).length === 0
},
changeSlimDownloads: {
modelSlimDownloads: {
get() {
return this.slimDownloads
return this.hasSlimDownloads
},
set(wantSlimDownloads) {
this.slimDownloads = wantSlimDownloads
document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
localStorage.setItem('slimDownloads', wantSlimDownloads)
this.setSlimDownloads(wantSlimDownloads)
}
},
changeSlimSidebar: {
modelSlimSidebar: {
get() {
return this.slimSidebar
return this.hasSlimSidebar
},
set(wantSlimSidebar) {
this.slimSidebar = wantSlimSidebar
document.getElementById('sidebar').classList.toggle('slim', wantSlimSidebar)
// Moves all toast messages when the option changes
Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
toast.style.transform = `translate(${wantSlimSidebar ? '3rem' : '14rem'}, 0)`
})
localStorage.setItem('slimSidebar', wantSlimSidebar)
this.setSlimSidebar(wantSlimSidebar)
}
},
pictureHref() {
@ -854,18 +846,6 @@ export default {
socket.emit('update_userSpotifyPlaylists', spotifyUser)
}
this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
this.changeSlimSidebar = 'true' === localStorage.getItem('slimSidebar')
let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)) {
volume = 80
localStorage.setItem('previewVolume', volume)
}
this.setPreviewVolume(volume)
socket.on('updateSettings', this.updateSettings)
socket.on('accountChanged', this.accountChanged)
socket.on('familyAccounts', this.initAccounts)
@ -883,7 +863,9 @@ export default {
methods: {
...mapActions({
dispatchARL: 'setARL',
setPreviewVolume: 'setPreviewVolume'
setPreviewVolume: 'setPreviewVolume',
setSlimDownloads: 'setSlimDownloads',
setSlimSidebar: 'setSlimSidebar'
}),
revertSettings() {
this.settings = JSON.parse(JSON.stringify(this.lastSettings))
@ -908,12 +890,6 @@ export default {
this.currentLocale = newLocale
localStorage.setItem('locale', newLocale)
},
/**
* @deprecated
*/
updateMaxVolume() {
localStorage.setItem('previewVolume', this.previewVolume)
},
saveSettings() {
this.lastSettings = JSON.parse(JSON.stringify(this.settings))
this.lastCredentials = JSON.parse(JSON.stringify(this.spotifyFeatures))

View File

@ -25,3 +25,31 @@ export function getSettingsData() {
})
}
}
/**
* @returns {number}
*/
export function getInitialPreviewVolume() {
let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)) {
volume = 80
localStorage.setItem('previewVolume', volume.toString())
}
return volume
}
/**
* @returns {boolean}
*/
export function checkInitialSlimDownloads() {
return 'true' === localStorage.getItem('slimDownloads')
}
/**
* @returns {boolean}
*/
export function checkInitialSlimSidebar() {
return 'true' === localStorage.getItem('slimSidebar')
}

View File

@ -1,3 +1,5 @@
import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
/**
* @typedef {object} AppInfo
* @property {string} currentCommit
@ -5,6 +7,8 @@
* @property {boolean} updateAvailable
* @property {string} deemixVersion
* @property {number} previewVolume
* @property {boolean} hasSlimDownloads
* @property {boolean} hasSlimSidebar
*/
/**
@ -15,7 +19,9 @@ const state = () => ({
latestCommit: null,
updateAvailable: false,
deemixVersion: null,
previewVolume: Number(localStorage.getItem('previewVolume')) || 100
previewVolume: getInitialPreviewVolume(),
hasSlimDownloads: checkInitialSlimDownloads(),
hasSlimSidebar: checkInitialSlimSidebar()
})
const actions = {
@ -36,6 +42,27 @@ const actions = {
setPreviewVolume({ commit }, payload) {
commit('SET_PREVIEW_VOLUME', payload)
localStorage.setItem('previewVolume', payload.toString())
},
/**
* @param {any} action
* @param {AppInfo['hasSlimDownloads']} payload
*/
setSlimDownloads({ commit }, payload) {
commit('SET_SLIM_DOWNLOADS', payload)
localStorage.setItem('slimDownloads', payload.toString())
},
/**
* @param {any} action
* @param {AppInfo['hasSlimSidebar']} payload
*/
setSlimSidebar({ commit }, payload) {
commit('SET_SLIM_SIDEBAR', payload)
localStorage.setItem('slimSidebar', payload.toString())
// Moves all toast messages when the option changes
Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
toast.style.transform = `translate(${payload ? '3rem' : '14rem'}, 0)`
})
}
}
@ -46,47 +73,71 @@ const getters = {
*/
getAppInfo: state => state,
/**
* @param {AppInfo} state
* @param {AppInfo} state
* @returns {AppInfo['previewVolume']}
*/
getPreviewVolume: state => state.previewVolume
getPreviewVolume: state => state.previewVolume,
/**
* @param {AppInfo} state
* @returns {AppInfo['hasSlimDownloads']}
*/
getSlimDownloads: state => state.hasSlimDownloads,
/**
* @param {AppInfo} state
* @returns {AppInfo['hasSlimSidebar']}
*/
getSlimSidebar: state => state.hasSlimSidebar
}
const mutations = {
/**
* @param {AppInfo} state
* @param {AppInfo['currentCommit']} payload
* @param {AppInfo} state
* @param {AppInfo['currentCommit']} payload
*/
SET_CURRENT_COMMIT(state, payload) {
state.currentCommit = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['latestCommit']} payload
* @param {AppInfo} state
* @param {AppInfo['latestCommit']} payload
*/
SET_LATEST_COMMIT(state, payload) {
state.latestCommit = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['updateAvailable']} payload
* @param {AppInfo} state
* @param {AppInfo['updateAvailable']} payload
*/
SET_UPDATE_AVAILABLE(state, payload) {
state.updateAvailable = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['deemixVersion']} payload
* @param {AppInfo} state
* @param {AppInfo['deemixVersion']} payload
*/
SET_DEEMIX_VERSION(state, payload) {
state.deemixVersion = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['previewVolume']} payload
* @param {AppInfo} state
* @param {AppInfo['previewVolume']} payload
*/
SET_PREVIEW_VOLUME(state, payload) {
state.previewVolume = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['hasSlimDownloads']} payload
*/
SET_SLIM_DOWNLOADS(state, payload) {
state.hasSlimDownloads = payload
},
/**
* @param {AppInfo} state
* @param {AppInfo['hasSlimSidebar']} payload
*/
SET_SLIM_SIDEBAR(state, payload) {
state.hasSlimSidebar = payload
}
}