From fa87544163cc609e5f152889a58dd633d2611c1d Mon Sep 17 00:00:00 2001 From: root Date: Wed, 21 Jul 2021 13:42:39 +0530 Subject: [PATCH] Reimplement preferences --- src/App.vue | 5 +- src/routes/Preferences.vue | 248 ++++++++++++++++--------------------- src/store/index.js | 17 ++- 3 files changed, 121 insertions(+), 149 deletions(-) diff --git a/src/App.vue b/src/App.vue index d4b641e..094e3b0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -68,6 +68,9 @@ export default { to: '/' } ] - }) + }), + created () { + this.$store.dispatch('loadState') + } } diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index b53a5e5..a16c7c0 100644 --- a/src/routes/Preferences.vue +++ b/src/routes/Preferences.vue @@ -1,53 +1,15 @@ @@ -119,26 +81,85 @@ import CountryMap from '@/tools/CountryMap' export default { data () { return { - selectedInstance: null, instances: [], - sponsorBlock: true, - skipSponsor: true, - skipIntro: false, - skipOutro: false, - skipPreview: false, - skipInteraction: true, - skipSelfPromo: true, - skipMusicOffTopic: true, - selectedTheme: 'dark', - autoPlayVideo: true, - listen: false, - resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320], - defaultQuality: 0, - bufferingGoal: 10, countryMap: CountryMap.COUNTRIES, - country: 'US', - defaultHomepage: 'trending', - showComments: true + + options: [ + { + id: 'playerAutoplay', + type: 'bool', + default: true, + label: 'Autoplay Video' + }, + { + id: 'listen', + type: 'bool', + default: false, + label: 'Audio Only' + }, + { + id: 'quality', + type: 'select', + label: 'Default resolution', + default: 0, + options: [ + { + text: 'Auto', + value: 0 + }, + ...([144, 240, 360, 480, 720, 1080, 1440, 2160, 4320].map(i => ({ + text: i.toString() + 'p', + value: i + }))) + ] + }, + { + id: 'region', + type: 'select', + label: 'Country', + default: 'US', + options: CountryMap.COUNTRIES.map(co => ({ + text: co.name, + value: co.code + })).sort((a, b) => { + return a.text.localeCompare(b.text) + }) + }, + { + id: 'homepage', + type: 'select', + label: 'Default Homepage', + options: [ + { + text: 'Trending', + value: 'trending' + }, + { + text: 'Feed', + value: 'feed' + } + ] + } + ], + + tableHeaders: [ + { + text: 'Name', + value: 'name' + }, + { + text: 'API URL', + value: 'apiurl' + }, + { + text: 'Locations', + value: 'locations' + }, + { + text: 'CDN enabled?', + value: 'cdn' + } + ] } }, mounted () { @@ -164,87 +185,26 @@ export default { }) } }) - }) - - if (localStorage) { - this.selectedInstance = this.getPreferenceString('instance', 'https://pipedapi.kavin.rocks') - - this.sponsorBlock = this.getPreferenceBoolean('sponsorblock', true) - if (localStorage.getItem('selectedSkip') !== null) { - const skipList = localStorage.getItem('selectedSkip').split(',') - this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false - skipList.forEach(skip => { - switch (skip) { - case 'sponsor': - this.skipSponsor = true - break - case 'intro': - this.skipIntro = true - break - case 'outro': - this.skipOutro = true - break - case 'preview': - this.skipPreview = true - break - case 'interaction': - this.skipInteraction = true - break - case 'selfpromo': - this.skipSelfPromo = true - break - case 'music_offtopic': - this.skipMusicOffTopic = true - break - default: - console.log('Unknown sponsor type: ' + skip) - break - } + this.options.push({ + id: 'instance', + type: 'select', + default: 'https://pipedapi.kavin.rocks', + label: 'Instance', + options: this.instances.map(i => ({ + text: i.name, + value: i.apiurl + })) }) - } - - this.selectedTheme = this.getPreferenceString('theme', 'dark') - this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem('playerAutoPlay'), true) - this.listen = this.getPreferenceBoolean('listen', false) - this.defaultQuality = Number(localStorage.getItem('quality')) - this.bufferingGoal = Math.max(Number(localStorage.getItem('bufferGoal')), 10) - this.country = this.getPreferenceString('region', 'US') - this.defaultHomepage = this.getPreferenceString('homepage', 'trending') - this.showComments = this.getPreferenceBoolean('comments', true) - } + }) }, methods: { - onChange () { - if (localStorage) { - let shouldReload = false - - if (this.getPreferenceString('theme', 'dark') !== this.selectedTheme) shouldReload = true - - localStorage.setItem('instance', this.selectedInstance) - localStorage.setItem('sponsorblock', this.sponsorBlock) - - const sponsorSelected = [] - if (this.skipSponsor) sponsorSelected.push('sponsor') - if (this.skipIntro) sponsorSelected.push('intro') - if (this.skipOutro) sponsorSelected.push('outro') - if (this.skipPreview) sponsorSelected.push('preview') - if (this.skipInteraction) sponsorSelected.push('interaction') - if (this.skipSelfPromo) sponsorSelected.push('selfpromo') - if (this.skipMusicOffTopic) sponsorSelected.push('music_offtopic') - localStorage.setItem('selectedSkip', sponsorSelected) - - localStorage.setItem('theme', this.selectedTheme) - localStorage.setItem('playerAutoPlay', this.autoPlayVideo) - localStorage.setItem('listen', this.listen) - localStorage.setItem('quality', this.defaultQuality) - localStorage.setItem('bufferGoal', this.bufferingGoal) - localStorage.setItem('region', this.country) - localStorage.setItem('homepage', this.defaultHomepage) - localStorage.setItem('comments', this.showComments) - - if (shouldReload) window.location.reload() - } + setValue (k, v) { + this.$store.commit('setPrefs', { + id: k, + value: v + }) }, + sslScore (url) { return 'https://www.ssllabs.com/ssltest/analyze.html?d=' + new URL(url).host + '&latest' } diff --git a/src/store/index.js b/src/store/index.js index b854234..f66ea2b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,13 +19,17 @@ const store = new Vuex.Store({ value }) { _set(state.prefs, id, value) + }, + + replacePrefs (state, nextPrefs) { + state.prefs = nextPrefs } }, actions: { loadState ({ commit }) { try { const p = JSON.parse(window.localStorage.getItem('PREFERENCES')) - commit('setPrefs', p) + commit('replacePrefs', p) } catch (e) { console.log('Error:', e) } @@ -76,10 +80,15 @@ const store = new Vuex.Store({ } }, - getPreferenceNumber: (_, getters) => (...args) => { - const v = getters.getPreferenceString(...args) + getPreferenceNumber: (_, getters) => (id, default_) => { + const v = getters.getPreferenceString(id, default_) - return Number(v) + const n = Number(v) + if (!Number.isFinite(n)) { + return default_ + } else { + return n + } }, getEffectiveTheme (state, getters) {