chore: removed unused store files; fix: removed global window.vol object in favor to a store property; chore: changed store module aboutInfo to appInfo

src/app.js

@@ -1,10 +1,5 @@
 import Vue from 'vue'
 
-// Object is needed for vue change detection
-window.vol = {
-	preview_max_volume: 100
-}
-
 import '@/styles/vendor/material-icons.css'
 import '@/styles/vendor/OpenSans.css'
 

src/components/globals/TheTrackPreview.vue

@@ -8,11 +8,17 @@
 import EventBus from '@/utils/EventBus'
 
 import { adjustVolume } from '@/utils/adjust-volume'
+import { mapGetters } from 'vuex'
 
 export default {
 	data: () => ({
 		previewStopped: false
 	}),
+	computed: {
+		...mapGetters({
+			previewVolume: 'getPreviewVolume'
+		})
+	},
 	mounted() {
 		this.$refs.preview.volume = 1
 
@@ -31,7 +37,7 @@ export default {
 
 			this.previewStopped = false
 
-			await adjustVolume(this.$refs.preview, window.vol.preview_max_volume / 100, { duration: 500 })
+			await adjustVolume(this.$refs.preview, this.previewVolume / 100, { duration: 500 })
 		},
 		async onTimeUpdate() {
 			// Prevents first time entering in this function
@@ -77,7 +83,7 @@ export default {
 
 					icon.innerText = 'pause'
 
-					await adjustVolume(this.$refs.preview, window.vol.preview_max_volume / 100, { duration: 500 })
+					await adjustVolume(this.$refs.preview, this.previewVolume / 100, { duration: 500 })
 				} else {
 					this.previewStopped = true
 

src/components/pages/About.vue

@@ -242,7 +242,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['getAboutInfo'])
+		...mapGetters(['getAppInfo'])
 	},
 	methods: {
 		initUpdate(data) {
@@ -255,7 +255,7 @@ export default {
 		}
 	},
 	mounted() {
-		this.initUpdate(this.getAboutInfo)
+		this.initUpdate(this.getAppInfo)
 	}
 }
 </script>

src/components/pages/Settings.vue

@@ -599,16 +599,8 @@
 
 			<div class="input-group">
 				<p class="input-group-text">{{ $t('settings.other.previewVolume') }}</p>
-				<input
-					type="range"
-					@change="updateMaxVolume"
-					min="0"
-					max="100"
-					step="1"
-					class="slider"
-					v-model.number="previewVolume.preview_max_volume"
-				/>
-				<span>{{ previewVolume.preview_max_volume }}%</span>
+				<input type="range" min="0" max="100" step="1" class="slider" v-model.number="modelVolume" />
+				<span>{{ previewVolume }}%</span>
 			</div>
 
 			<div class="input-group">
@@ -760,6 +752,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import { debounce } from 'lodash-es'
 
 import { getSettingsData } from '@/data/settings'
 
@@ -789,7 +782,6 @@ export default {
 			spotifyUser: '',
 			slimDownloads: false,
 			slimSidebar: false,
-			previewVolume: window.vol,
 			accountNum: 0,
 			accounts: []
 		}
@@ -799,8 +791,17 @@ export default {
 			arl: 'getARL',
 			user: 'getUser',
 			isLoggedIn: 'isLoggedIn',
-			clientMode: 'getClientMode'
+			clientMode: 'getClientMode',
+			previewVolume: 'getPreviewVolume'
 		}),
+		modelVolume: {
+			get() {
+				return this.previewVolume
+			},
+			set: debounce(function (value) {
+				this.setPreviewVolume(value)
+			}, 20)
+		},
 		needToWait() {
 			return Object.keys(this.getSettings).length === 0
 		},
@@ -863,7 +864,7 @@ export default {
 			localStorage.setItem('previewVolume', volume)
 		}
 
-		window.vol.preview_max_volume = volume
+		this.setPreviewVolume(volume)
 
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)
@@ -881,7 +882,8 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			dispatchARL: 'setARL'
+			dispatchARL: 'setARL',
+			setPreviewVolume: 'setPreviewVolume'
 		}),
 		revertSettings() {
 			this.settings = JSON.parse(JSON.stringify(this.lastSettings))
@@ -906,8 +908,11 @@ export default {
 			this.currentLocale = newLocale
 			localStorage.setItem('locale', newLocale)
 		},
+		/**
+		 * @deprecated
+		 */
 		updateMaxVolume() {
-			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
+			localStorage.setItem('previewVolume', this.previewVolume)
 		},
 		saveSettings() {
 			this.lastSettings = JSON.parse(JSON.stringify(this.settings))

src/store/index.js

@@ -1,17 +1,15 @@
 import Vuex from 'vuex'
 import Vue from 'vue'
 
-import about from '@/store/modules/about'
+import appInfo from '@/store/modules/appInfo'
 import login from '@/store/modules/login'
 import errors from '@/store/modules/errors'
 
-// Load Vuex
 Vue.use(Vuex)
 
-// Create store
 export default new Vuex.Store({
 	modules: {
-		about,
+		appInfo,
 		login,
 		errors
 	},

src/store/modules/about.js

@@ -1,41 +0,0 @@
-const state = {
-	currentCommit: null,
-	latestCommit: null,
-	updateAvailable: false,
-	deemixVersion: null
-}
-
-const actions = {
-	setAboutInfo({ commit }, payload) {
-		commit('SET_CURRENT_COMMIT', payload.currentCommit)
-		commit('SET_LATEST_COMMIT', payload.latestCommit)
-		commit('SET_UPDATE_AVAILABLE', payload.updateAvailable)
-		commit('SET_DEEMIX_VERSION', payload.deemixVersion)
-	}
-}
-
-const getters = {
-	getAboutInfo: state => state
-}
-
-const mutations = {
-	SET_CURRENT_COMMIT: (state, payload) => {
-		state.currentCommit = payload
-	},
-	SET_LATEST_COMMIT: (state, payload) => {
-		state.latestCommit = payload
-	},
-	SET_UPDATE_AVAILABLE: (state, payload) => {
-		state.updateAvailable = payload
-	},
-	SET_DEEMIX_VERSION: (state, payload) => {
-		state.deemixVersion = payload
-	}
-}
-
-export default {
-	state,
-	getters,
-	actions,
-	mutations
-}

src/store/modules/appInfo.js

@@ -0,0 +1,98 @@
+/**
+ * @typedef		{object}	AppInfo
+ * @property	{string}	currentCommit
+ * @property	{string}	latestCommit
+ * @property	{boolean}	updateAvailable
+ * @property	{string}	deemixVersion
+ * @property	{number}	previewVolume
+ */
+
+/**
+ * @returns	{AppInfo}
+ */
+const state = () => ({
+	currentCommit: null,
+	latestCommit: null,
+	updateAvailable: false,
+	deemixVersion: null,
+	previewVolume: Number(localStorage.getItem('previewVolume')) || 100
+})
+
+const actions = {
+	/**
+	 * @param {any}			action
+	 * @param {AppInfo}	payload
+	 */
+	setAppInfo({ commit }, payload) {
+		commit('SET_CURRENT_COMMIT', payload.currentCommit)
+		commit('SET_LATEST_COMMIT', payload.latestCommit)
+		commit('SET_UPDATE_AVAILABLE', payload.updateAvailable)
+		commit('SET_DEEMIX_VERSION', payload.deemixVersion)
+	},
+	/**
+	 * @param {any}												action
+	 * @param {AppInfo['previewVolume']}	payload
+	 */
+	setPreviewVolume({ commit }, payload) {
+		commit('SET_PREVIEW_VOLUME', payload)
+		localStorage.setItem('previewVolume', payload.toString())
+	}
+}
+
+const getters = {
+	/**
+	 * @param		{AppInfo}	state
+	 * @returns	{AppInfo}
+	 */
+	getAppInfo: state => state,
+	/**
+	 * @param		{AppInfo}	state
+	 * @returns	{AppInfo['previewVolume']}
+	 */
+	getPreviewVolume: state => state.previewVolume
+}
+
+const mutations = {
+	/**
+	 * @param {AppInfo} state
+	 * @param {AppInfo['currentCommit']} payload
+	 */
+	SET_CURRENT_COMMIT(state, payload) {
+		state.currentCommit = payload
+	},
+	/**
+	 * @param {AppInfo} state
+	 * @param {AppInfo['latestCommit']} payload
+	 */
+	SET_LATEST_COMMIT(state, payload) {
+		state.latestCommit = payload
+	},
+	/**
+	 * @param {AppInfo} state
+	 * @param {AppInfo['updateAvailable']} payload
+	 */
+	SET_UPDATE_AVAILABLE(state, payload) {
+		state.updateAvailable = payload
+	},
+	/**
+	 * @param {AppInfo} state
+	 * @param {AppInfo['deemixVersion']} payload
+	 */
+	SET_DEEMIX_VERSION(state, payload) {
+		state.deemixVersion = payload
+	},
+	/**
+	 * @param {AppInfo} state
+	 * @param {AppInfo['previewVolume']} payload
+	 */
+	SET_PREVIEW_VOLUME(state, payload) {
+		state.previewVolume = payload
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}

src/store/modules/defaultSettings.js

@@ -1,31 +0,0 @@
-import Vue from 'vue'
-
-const state = {}
-
-const actions = {
-	setDefaultSettings({ commit }, payload) {
-		for (const settingName in payload) {
-			if (!payload.hasOwnProperty(settingName)) return
-
-			const settingValue = payload[settingName]
-			commit('SET_UNKNOWN_DEFAULT_SETTING', { settingName, settingValue })
-		}
-	}
-}
-
-const getters = {
-	getDefaultSettings: state => state
-}
-
-const mutations = {
-	SET_UNKNOWN_DEFAULT_SETTING(state, payload) {
-		Vue.set(state, payload.settingName, payload.settingValue)
-	}
-}
-
-export default {
-	state,
-	actions,
-	getters,
-	mutations
-}

src/store/modules/errors.js

@@ -1,4 +1,4 @@
-const state = {
+const state = () => ({
 	artist: '',
 	bitrate: '',
 	cover: '',
@@ -12,7 +12,7 @@ const state = {
 	title: '',
 	type: '',
 	uuid: ''
-}
+})
 
 const actions = {
 	setErrors({ commit }, payload) {

src/store/modules/login.js

@@ -1,15 +1,13 @@
-const getDefaultState = () => {
-	return {
-		arl: localStorage.getItem('arl') || '',
-		status: null,
-		user: {
-			id: null,
-			name: '',
-			picture: ''
-		},
-		clientMode: false
-	}
-}
+const getDefaultState = () => ({
+	arl: localStorage.getItem('arl') || '',
+	status: null,
+	user: {
+		id: null,
+		name: '',
+		picture: ''
+	},
+	clientMode: false
+})
 
 const state = getDefaultState()
 

src/store/modules/spotifyCredentials.js

@@ -1,31 +0,0 @@
-const state = {
-	clientId: '',
-	clientSecret: ''
-}
-
-const actions = {
-	setCredentials({ commit }, payload) {
-		commit('SET_CLIENT_ID', payload.clientId)
-		commit('SET_CLIENT_SECRET', payload.clientSecret)
-	}
-}
-
-const getters = {
-	getCredentials: state => state
-}
-
-const mutations = {
-	SET_CLIENT_ID(state, payload) {
-		state.clientId = payload
-	},
-	SET_CLIENT_SECRET(state, payload) {
-		state.clientSecret = payload
-	}
-}
-
-export default {
-	state,
-	getters,
-	actions,
-	mutations
-}

src/utils/socket.js

@@ -3,5 +3,5 @@ import store from '@/store'
 export const socket = io.connect(window.location.href)
 
 socket.on('init_update', data => {
-	store.dispatch('setAboutInfo', data)
+	store.dispatch('setAppInfo', data)
 })