Reimplement preferences

src/App.vue

@@ -68,6 +68,9 @@ export default {
         to: '/'
       }
     ]
-  })
+  }),
+  created () {
+    this.$store.dispatch('loadState')
+  }
 }
 </script>

src/routes/Preferences.vue

@@ -1,53 +1,15 @@
 <template>
   <v-container fluid>
-    <h1 class="uk-text-bold uk-text-center">Preferences</h1>
-    <hr />
-    <h2>SponsorBlock</h2>
-    <p>Uses the API from <a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
-    <b>Enable Sponsorblock</b>
-    <br />
-    <input class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Sponsors</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Intermission/Intro Animation</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Endcards/Credits</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Preview/Recap</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Interaction Reminder (Subscribe)</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Unpaid/Self Promotion</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Skip Music: Non-Music Section</b>
-    <br />
-    <input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
-    <br />
-    <b>Theme</b>
-    <br />
-    <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
-      <option value="auto">Auto</option>
-      <option value="dark">Dark</option>
-      <option value="light">Light</option>
-    </select>
-    <br />
-    <b>Autoplay Video</b>
-    <br />
-    <input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
-    <br />
+    <h1 class="display-1 text-center">Preferences</h1>
+    <v-divider class="ma-4" />
+    <div style="display: flex;" v-for="(opt, optId) in options" :key="optId">
+      <v-simple-checkbox v-if="opt.type === 'bool'" :value="$store.getters.getPreferenceBoolean(opt.id, opt.default)" @input="setValue(opt.id, $event)" />
+      <v-select v-else-if="opt.type === 'select'" :label="opt.label" :value="$store.getters.getPreferenceString(opt.id, opt.default)" @input="setValue(opt.id, $event)" :items="opt.options" />
+      <p v-if="opt.type === 'bool'">{{ opt.label }}</p><br />
+    </div>
+    <h5 class="text-h5">Instances</h5>
+    <v-data-table :headers="tableHeaders" :items="instances" />
+    <!-- <br />
     <b>Audio Only</b>
     <br />
     <input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
@@ -109,7 +71,7 @@
       <option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
         {{ instance.name }}
       </option>
-    </select>
+    </select> -->
   </v-container>
 </template>
 
@@ -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'
     }

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