chore: reduced a bit bundle size by using lighter flags; workflow: improved code modularity; chore: removed unused functions and globals; chore: removed .jsbeautify file

.jsbeautifyrc

@@ -1,19 +0,0 @@
-{
-	"css": {
-		"allowed_file_extensions": [
-			"css",
-			"scss",
-			"sass",
-			"less"
-		],
-		"end_with_newline": true,
-		"indent_char": " ",
-		"indent_size": 2,
-		"indent_with_tabs": true,
-		"newline_between_rules": true,
-		"selector_separator": " ",
-		"selector_separator_newline": false,
-		"preserve_newlines": true,
-		"max_preserve_newlines": 3
-	}
-}

package-lock.json

@@ -796,6 +796,11 @@
 				"pinkie-promise": "^2.0.0"
 			}
 		},
+		"flag-icon-css": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-3.5.0.tgz",
+			"integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
+		},
 		"forever-agent": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",

package.json

@@ -19,6 +19,7 @@
 		"build": "npm-run-all --sequential clean build:js build:styles"
 	},
 	"dependencies": {
+		"flag-icon-css": "^3.5.0",
 		"lodash-es": "^4.17.15",
 		"svg-country-flags": "^1.2.7",
 		"toastify-js": "^1.8.0",

src/app.js

@@ -12,29 +12,11 @@ import store from '@/store'
 
 import { socket } from '@/utils/socket'
 import { toast } from '@/utils/toasts'
-import { init as initTabs } from '@js/tabs.js'
-
 import { isValidURL } from '@/utils/utils'
-import Downloads from '@/utils/downloads'
+import { sendAddToQueue } from '@/utils/downloads'
-import EventBus from '@/utils/EventBus.js'
 
 /* ===== App initialization ===== */
-
 function startApp() {
-	setLocale()
-	mountApp()
-	initTabs()
-}
-
-function setLocale() {
-	let storedLocale = localStorage.getItem('locale')
-
-	if (storedLocale) {
-		i18n.locale = storedLocale
-	}
-}
-
-function mountApp() {
 	new Vue({
 		store,
 		router,
@@ -54,29 +36,21 @@ window.addEventListener('pywebviewready', initClient)
 /* ===== Global shortcuts ===== */
 
 document.addEventListener('paste', pasteEvent => {
-	let pasteText = pasteEvent.clipboardData.getData('Text')
+	if (pasteEvent.target.localName === 'input') return
 
-	if (pasteEvent.target.localName != 'input') {
+	let pastedText = pasteEvent.clipboardData.getData('Text')
-		if (isValidURL(pasteText)) {
+
-			if (window.main_selected === 'analyzer_tab') {
+	if (isValidURL(pastedText)) {
-				EventBus.$emit('linkAnalyzerTab:reset')
+		if (router.currentRoute.name === 'Link Analyzer') {
-				socket.emit('analyzeLink', pasteText)
+			socket.emit('analyzeLink', pastedText)
 		} else {
-				Downloads.sendAddToQueue(pasteText)
+			sendAddToQueue(pastedText)
 		}
 	} else {
 		let searchbar = document.querySelector('#searchbar')
 		searchbar.select()
 		searchbar.setSelectionRange(0, 99999)
 	}
-	}
-})
-
-document.addEventListener('keydown', e => {
-	if (e.keyCode == 70 && e.ctrlKey) {
-		e.preventDefault()
-		document.querySelector('#searchbar').focus()
-	}
 })
 
 /**

src/components/ArtistTab.vue

@@ -69,7 +69,7 @@
 		</table>
 
 		<footer>
-			<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
+			<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
@@ -78,7 +78,7 @@
 import { isEmpty, orderBy } from 'lodash-es'
 import { socket } from '@/utils/socket'
 import Downloads from '@/utils/downloads'
-import { showView, backTab } from '@js/tabs'
+import { showView } from '@js/tabs'
 import EventBus from '@/utils/EventBus'
 
 export default {
@@ -97,7 +97,6 @@ export default {
 		}
 	},
 	methods: {
-		backTab,
 		albumView: showView.bind(null, 'album'),
 		reset() {
 			this.title = 'Loading...'
@@ -128,9 +127,7 @@ export default {
 		getCurrentTab() {
 			return this.currentTab
 		},
-		updateSelected() {
+		updateSelected() {},
-			window.currentStack.selected = this.currentTab
-		},
 		checkNewRelease(date) {
 			let g1 = new Date()
 			let g2 = new Date(date)

src/components/TheMainSearch.vue

@@ -181,7 +181,7 @@ export default {
 			this.currentTab = newTab
 		},
 		checkIfShowNewResults(term, mainSelected) {
-			let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
+			let needToPerformNewSearch = term !== this.results.query /* || mainSelected == 'search_tab' */
 
 			if (needToPerformNewSearch) {
 				this.showNewResults(term)
@@ -192,7 +192,7 @@ export default {
 
 			if (needToUpdateSearch) {
 				let resetObj = { data: [], next: 0, total: 0, loaded: false }
-				this.results[this.currentTab.searchType+"Tab"] = { ...resetObj }
+				this.results[this.currentTab.searchType + 'Tab'] = { ...resetObj }
 				this.search(this.currentTab.searchType)
 			}
 		},

src/components/TheSearchBar.vue

@@ -21,9 +21,8 @@
 
 <script>
 import { isValidURL } from '@/utils/utils'
-import Downloads from '@/utils/downloads'
+import { sendAddToQueue } from '@/utils/downloads'
-
+import EventBus from '@/utils/EventBus'
-import EventBus from '@/utils/EventBus.js'
 import { socket } from '@/utils/socket'
 
 export default {
@@ -32,12 +31,27 @@ export default {
 			lastTextSearch: ''
 		}
 	},
-	mounted() {
+	created() {
-		document.addEventListener('keyup', keyEvent => {
+		const focusSearchBar = keyEvent => {
+			if (keyEvent.keyCode === 70 && keyEvent.ctrlKey) {
+				keyEvent.preventDefault()
+				this.$refs.searchbar.focus()
+			}
+		}
+
+		const deleteSearchBarContent = keyEvent => {
 			if (!(keyEvent.key == 'Backspace' && keyEvent.ctrlKey && keyEvent.shiftKey)) return
 
 			this.$refs.searchbar.value = ''
 			this.$refs.searchbar.focus()
+		}
+
+		document.addEventListener('keydown', focusSearchBar)
+		document.addEventListener('keyup', deleteSearchBarContent)
+
+		this.$on('hook:destroyed', () => {
+			document.removeEventListener('keydown', focusSearchBar)
+			document.removeEventListener('keyup', deleteSearchBarContent)
 		})
 	},
 	methods: {
@@ -71,11 +85,11 @@ export default {
 						socket.emit('analyzeLink', term)
 					} else {
 						// ? Open downloads tab ?
-						Downloads.sendAddToQueue(term)
+						sendAddToQueue(term)
 					}
 				}
 			} else {
-				if (isShowingSearch && sameAsLastSearch){
+				if (isShowingSearch && sameAsLastSearch) {
 					this.$root.$emit('mainSearch:updateResults', term)
 					return
 				}
@@ -91,7 +105,7 @@ export default {
 					this.lastTextSearch = term
 				}
 
-				this.$root.$emit('mainSearch:showNewResults', term, window.main_selected)
+				this.$root.$emit('mainSearch:showNewResults', term /* , window.main_selected */)
 			}
 		}
 	}

src/components/TheSettingsTab.vue

@@ -644,8 +644,8 @@
 	}
 
 	svg {
-		width: 40px;
+		width: 40px !important;
-		height: 40px;
+		height: 40px !important;
 		filter: brightness(0.5);
 	}
 }
@@ -654,19 +654,18 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 
+import { getSettingsData } from '@/data/settings'
+
 import { toast } from '@/utils/toasts'
 import { socket } from '@/utils/socket'
-import EventBus from '@/utils/EventBus'
+import { flags } from '@/utils/flags'
-import flags from '@/utils/flags'
-
-import { getSettingsData } from '@/data/settings'
 
 export default {
 	data() {
 		return {
 			flags,
-			currentLocale: 'en',
+			currentLocale: this.$i18n.locale,
-			locales: [],
+			locales: this.$i18n.availableLocales,
 			settings: {
 				tags: {}
 			},
@@ -708,22 +707,11 @@ export default {
 		}
 	},
 	async mounted() {
-		this.locales = this.$i18n.availableLocales
-
 		const { settingsData, defaultSettingsData, spotifyCredentials } = await getSettingsData()
 
 		this.defaultSettings = defaultSettingsData
 		this.initSettings(settingsData, spotifyCredentials)
 
-		// this.revertSettings()
-		// this.revertCredentials()
-
-		let storedLocale = localStorage.getItem('locale')
-
-		if (storedLocale) {
-			this.currentLocale = storedLocale
-		}
-
 		let storedAccountNum = localStorage.getItem('accountNum')
 
 		if (storedAccountNum) {

src/components/TracklistTab.vue

@@ -137,7 +137,7 @@
 			<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
 				{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
 			</button>
-			<button class="back-button" @click="backTab">{{ $t('globals.back') }}</button>
+			<button class="back-button" @click="$router.back()">{{ $t('globals.back') }}</button>
 		</footer>
 	</div>
 </template>
@@ -145,7 +145,7 @@
 <script>
 import { isEmpty } from 'lodash-es'
 import { socket } from '@/utils/socket'
-import { showView, backTab } from '@js/tabs.js'
+import { showView } from '@js/tabs.js'
 import Downloads from '@/utils/downloads'
 import Utils from '@/utils/utils'
 import EventBus from '@/utils/EventBus'
@@ -164,7 +164,6 @@ export default {
 		body: []
 	}),
 	methods: {
-		backTab,
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
 		playPausePreview(e) {

src/js/tabs.js

@@ -1,67 +1,7 @@
-import EventBus from '@/utils/EventBus'
 import router from '@/router'
 
 /* ===== Globals ====== */
-window.search_selected = ''
 window.main_selected = ''
-window.windows_stack = []
-window.currentStack = {}
-
-// Used only in errors tab
-export function changeTab(sidebarEl, section, tabName) {
-	window.windows_stack = []
-	window.currentStack = {}
-
-	// * Only in section search
-	updateTabLink(section)
-
-	// * Only when clicking the settings icon in the sidebar
-	// resetSettings(tabName)
-
-	// * Only in section search
-	setSelectedTab(section, tabName)
-
-	// * Only if window.main_selected === 'search_tab'
-	checkNeedToLoadMoreContent()
-}
-
-function setSelectedTab(section, tabName) {
-	if (section === 'main') {
-		window.main_selected = tabName
-	} else if (section === 'search') {
-		window.search_selected = tabName
-	}
-}
-
-function checkNeedToLoadMoreContent() {
-	// * Check if you need to load more content in the search tab
-	// * Happens when the user changes the tab in the main search
-	if (
-		window.main_selected === 'search_tab' &&
-		['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) !== -1
-	) {
-		EventBus.$emit('mainSearch:checkLoadMoreContent', window.search_selected)
-	}
-}
-
-function resetSettings(tabName) {
-	if (tabName === 'settings_tab' && window.main_selected !== 'settings_tab') {
-		EventBus.$emit('settingsTab:revertSettings')
-		EventBus.$emit('settingsTab:revertCredentials')
-	}
-}
-
-function updateTabLink(section) {
-	// * Tabs inside the actual tab (like albums, tracks, playlists...)
-	// * or sidebar links
-	if (section == 'main') return
-
-	const tabLinks = document.getElementsByClassName(`${section}_tablinks`)
-
-	for (let i = 0; i < tabLinks.length; i++) {
-		tabLinks[i].classList.remove('active')
-	}
-}
 
 export function showView(viewType, event) {
 	const {
@@ -78,16 +18,3 @@ export function showView(viewType, event) {
 		params
 	})
 }
-
-/**
- * Goes back to the previous tab according to the global window stack.
- */
-export function backTab() {
-	// ! Need to implement the memory of the opened artist tab
-	router.back()
-}
-
-export function init() {
-	// Open default tab
-	changeTab(document.getElementById('main_home_tablink'), 'main', 'home_tab')
-}

src/lang/index.js

@@ -0,0 +1,33 @@
+import it from '@/lang/it'
+import en from '@/lang/en'
+import es from '@/lang/es'
+import de from '@/lang/de'
+import fr from '@/lang/fr'
+import id from '@/lang/id'
+import pt from '@/lang/pt-pt'
+import pt_br from '@/lang/pt-br'
+import ru from '@/lang/ru'
+import tr from '@/lang/tr'
+import vn from '@/lang/vn'
+import hr from '@/lang/hr'
+import ar from '@/lang/ar'
+import ko from '@/lang/ko'
+import ph from '@/lang/ph'
+
+export const locales = {
+	it,
+	en,
+	es,
+	de,
+	fr,
+	id,
+	pt,
+	pt_br,
+	ru,
+	tr,
+	vn,
+	hr,
+	ar,
+	ko,
+	ph
+}

src/plugins/i18n.js

@@ -1,56 +1,24 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
-// Languages
+import { locales } from '@/lang/index'
-import it from '@/lang/it'
-import en from '@/lang/en'
-import es from '@/lang/es'
-import de from '@/lang/de'
-import fr from '@/lang/fr'
-import id from '@/lang/id'
-import pt from '@/lang/pt-pt'
-import pt_br from '@/lang/pt-br'
-import ru from '@/lang/ru'
-import tr from '@/lang/tr'
-import vn from '@/lang/vn'
-import hr from '@/lang/hr'
-import ar from '@/lang/ar'
-import ko from '@/lang/ko'
-import ph from '@/lang/ph'
 
 Vue.use(VueI18n)
 
-const DEFAULT_LANG = 'en'
+const storedLocale = localStorage.getItem('locale')
+const DEFAULT_LANG = storedLocale || 'en'
 
 document.querySelector('html').setAttribute('lang', DEFAULT_LANG)
 
-const locales = {
-	it,
-	en,
-	es,
-	de,
-	fr,
-	id,
-	pt,
-	pt_br,
-	ru,
-	tr,
-	vn,
-	hr,
-	ar,
-	ko,
-	ph
-}
-
 const i18n = new VueI18n({
 	locale: DEFAULT_LANG,
-	fallbackLocale: DEFAULT_LANG,
+	fallbackLocale: 'en',
 	messages: locales,
 	pluralizationRules: {
 		/**
-		 * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
+		 * @param {number}	choice 					A choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
-		 * @param choicesLength {number} an overall amount of available choices
+		 * @param {number}	choicesLength		An overall amount of available choices
-		 * @returns a final choice index to select plural word by
+		 * @returns 				A final choice index to select plural word by
 		 */
 		ru: function(choice, choicesLength) {
 			var n = Math.abs(choice) % 100

src/utils/flags.js

@@ -1,20 +1,20 @@
 import it from 'svg-country-flags/svg/it.svg'
 import gb from 'svg-country-flags/svg/gb.svg'
-import es from 'svg-country-flags/svg/es.svg'
+import es from 'flag-icon-css/flags/4x3/es.svg'
 import de from 'svg-country-flags/svg/de.svg'
 import fr from 'svg-country-flags/svg/fr.svg'
 import id from 'svg-country-flags/svg/id.svg'
-import pt from 'svg-country-flags/svg/pt.svg'
+import pt from 'flag-icon-css/flags/4x3/pt.svg'
 import br from 'svg-country-flags/svg/br.svg'
 import ru from 'svg-country-flags/svg/ru.svg'
 import tr from 'svg-country-flags/svg/tr.svg'
 import vn from 'svg-country-flags/svg/vn.svg'
-import hr from 'svg-country-flags/svg/hr.svg'
+import hr from 'flag-icon-css/flags/4x3/hr.svg'
 import ar from '@/assets/ar.svg'
-import ko from 'svg-country-flags/svg/kr.svg'
+import ko from 'flag-icon-css/flags/4x3/kr.svg'
-import ph from 'svg-country-flags/svg/ph.svg'
+import ph from 'flag-icon-css/flags/4x3/ph.svg'
 
-export default {
+export const flags = {
 	it,
 	en: gb,
 	es,