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
parent
4c81cb0cb9
commit
468142004a
@ -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
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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
42
src/app.js
42
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 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,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') {
|
||||
if (isValidURL(pasteText)) {
|
||||
if (window.main_selected === 'analyzer_tab') {
|
||||
EventBus.$emit('linkAnalyzerTab:reset')
|
||||
socket.emit('analyzeLink', pasteText)
|
||||
let pastedText = pasteEvent.clipboardData.getData('Text')
|
||||
|
||||
if (isValidURL(pastedText)) {
|
||||
if (router.currentRoute.name === 'Link Analyzer') {
|
||||
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()
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
}
|
||||
},
|
||||
|
||||
@ -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 */)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
33
src/lang/index.js
Normal 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
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user