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

This commit is contained in:
Roberto Tonino 2020-09-26 17:53:25 +02:00
parent 4c81cb0cb9
commit 468142004a
14 changed files with 105 additions and 219 deletions

View File

@ -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
}
}

5
package-lock.json generated
View File

@ -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",

View File

@ -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",

File diff suppressed because one or more lines are too long

View File

@ -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 EventBus from '@/utils/EventBus.js'
import { sendAddToQueue } from '@/utils/downloads'
/* ===== 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,28 +36,20 @@ 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') {
if (isValidURL(pasteText)) {
if (window.main_selected === 'analyzer_tab') {
EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', pasteText)
} else {
Downloads.sendAddToQueue(pasteText)
}
let pastedText = pasteEvent.clipboardData.getData('Text')
if (isValidURL(pastedText)) {
if (router.currentRoute.name === 'Link Analyzer') {
socket.emit('analyzeLink', pastedText)
} else {
let searchbar = document.querySelector('#searchbar')
searchbar.select()
searchbar.setSelectionRange(0, 99999)
sendAddToQueue(pastedText)
}
}
})
document.addEventListener('keydown', e => {
if (e.keyCode == 70 && e.ctrlKey) {
e.preventDefault()
document.querySelector('#searchbar').focus()
} else {
let searchbar = document.querySelector('#searchbar')
searchbar.select()
searchbar.setSelectionRange(0, 99999)
}
})

View File

@ -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() {
window.currentStack.selected = this.currentTab
},
updateSelected() {},
checkNewRelease(date) {
let g1 = new Date()
let g2 = new Date(date)

View File

@ -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)
}
},

View File

@ -21,9 +21,8 @@
<script>
import { isValidURL } from '@/utils/utils'
import Downloads from '@/utils/downloads'
import EventBus from '@/utils/EventBus.js'
import { sendAddToQueue } from '@/utils/downloads'
import EventBus from '@/utils/EventBus'
import { socket } from '@/utils/socket'
export default {
@ -32,12 +31,27 @@ export default {
lastTextSearch: ''
}
},
mounted() {
document.addEventListener('keyup', keyEvent => {
created() {
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 */)
}
}
}

View File

@ -644,8 +644,8 @@
}
svg {
width: 40px;
height: 40px;
width: 40px !important;
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 { getSettingsData } from '@/data/settings'
import { flags } from '@/utils/flags'
export default {
data() {
return {
flags,
currentLocale: 'en',
locales: [],
currentLocale: this.$i18n.locale,
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) {

View File

@ -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) {

View File

@ -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')
}

33
src/lang/index.js Normal file
View File

@ -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
}

View File

@ -1,56 +1,24 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// Languages
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'
import { locales } from '@/lang/index'
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 choicesLength {number} an overall amount of available choices
* @returns a final choice index to select plural word by
* @param {number} choice A choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
* @param {number} choicesLength An overall amount of available choices
* @returns A final choice index to select plural word by
*/
ru: function(choice, choicesLength) {
var n = Math.abs(choice) % 100

View File

@ -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 ph from 'svg-country-flags/svg/ph.svg'
import ko from 'flag-icon-css/flags/4x3/kr.svg'
import ph from 'flag-icon-css/flags/4x3/ph.svg'
export default {
export const flags = {
it,
en: gb,
es,