Sanitize

src/components/Player.vue

@@ -37,13 +37,10 @@ export default {
     }
   },
   computed: {
-    shouldAutoPlay: _this => {
-      return _this.getPreferenceBoolean('playerAutoPlay', true)
+    shouldAutoPlay () {
+      return this.$store.getters.getPreferenceBoolean('playerAutoPlay', true)
     }
   },
-  mounted () {
-    if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka))
-  },
   methods: {
     loadVideo () {
       const component = this
@@ -78,29 +75,27 @@ export default {
       }
 
       if (noPrevPlayer) {
-        this.shakaPromise.then(() => {
-          this.shaka.polyfill.installAll()
+        shaka.polyfill.installAll()
 
-          const localPlayer = new this.shaka.Player(videoEl)
+        const localPlayer = new shaka.Player(videoEl)
 
-          localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
-            const uri = request.uris[0]
-            const url = new URL(uri)
-            if (url.host.endsWith('.googlevideo.com')) {
-              url.searchParams.set('host', url.host)
-              url.host = new URL(component.video.proxyUrl).host
-              request.uris[0] = url.toString()
-            }
-          })
-
-          localPlayer.configure(
-            'streaming.bufferingGoal',
-            Math.max(this.getPreferenceNumber('bufferGoal', 10), 10)
-          )
-
-          this.setPlayerAttrs(localPlayer, videoEl, uri, this.shaka)
+        localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
+          const uri = request.uris[0]
+          const url = new URL(uri)
+          if (url.host.endsWith('.googlevideo.com')) {
+            url.searchParams.set('host', url.host)
+            url.host = new URL(component.video.proxyUrl).host
+            request.uris[0] = url.toString()
+          }
         })
-      } else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka)
+
+        localPlayer.configure(
+          'streaming.bufferingGoal',
+          Math.max(this.$store.getters.getPreferenceNumber('bufferGoal', 10), 10)
+        )
+
+        this.setPlayerAttrs(localPlayer, videoEl, uri, shaka)
+      } else this.setPlayerAttrs(this.player, videoEl, uri, shaka)
 
       if (noPrevPlayer) {
         videoEl.addEventListener('timeupdate', () => {
@@ -167,7 +162,7 @@ export default {
 
       this.player = player
 
-      const disableVideo = this.getPreferenceBoolean('listen', false) && !this.video.livestream
+      const disableVideo = this.$store.getters.getPreferenceBoolean('listen', false) && !this.video.livestream
 
       this.player.configure({
         preferredVideoCodecs: ['av01', 'vp9', 'avc1'],
@@ -177,7 +172,7 @@ export default {
         }
       })
 
-      const quality = this.getPreferenceNumber('quality', 0)
+      const quality = this.$store.getters.getPreferenceNumber('quality', 0)
       const qualityConds =
                 quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo
       if (qualityConds) this.player.configure('abr.enabled', false)
@@ -209,7 +204,7 @@ export default {
             subtitle.name
           )
         })
-        videoEl.volume = this.getPreferenceNumber('volume', 1)
+        videoEl.volume = this.$store.getters.getPreferenceNumber('volume', 1)
       })
     }
   },

src/routes/WatchVideo.vue

@@ -152,10 +152,10 @@ export default {
       this.$refs.videoPlayer.loadVideo()
     })
     this.getSponsors()
-    if (this.getPreferenceBoolean('comments', true)) this.getComments()
+    if (this.$store.getters.getPreferenceBoolean('comments', true)) this.getComments()
   },
   activated () {
-    this.selectedAutoPlay = this.getPreferenceBoolean('autoplay', true)
+    this.selectedAutoPlay = this.$store.getters.getPreferenceBoolean('autoplay', true)
     if (this.video.duration) this.$refs.videoPlayer.loadVideo()
     window.addEventListener('scroll', this.handleScroll)
   },
@@ -170,30 +170,44 @@ export default {
     }
   },
   methods: {
+    numberFormat (...args) {
+      return LibPiped.numberFormat(...args)
+    },
+
     addCommas (...args) {
       return LibPiped.addCommas(...args)
     },
 
     fetchVideo () {
-      return LibPiped.fetchJson('/streams/' + this.getVideoId())
+      return this.$store.dispatch('fetchJson', {
+        path: '/streams/' + this.getVideoId()
+      })
     },
 
     async fetchSponsors () {
-      return LibPiped.fetchJson('/sponsors/' + this.getVideoId(), {
-        category:
-                    '["' +
-                    LibPiped.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
-                      ',',
-                      '","'
-                    ) +
-                    '"]'
+      return this.$store.dispatch('fetchJson', {
+        path: '/sponsors/' + this.getVideoId(),
+        params: {
+          category:
+              '["' +
+              this.$store.getters.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll(
+                ',',
+                '","'
+              ) +
+              '"]'
+        }
       })
     },
     fetchComments () {
-      return LibPiped.fetchJson('/comments/' + this.getVideoId())
+      return this.$store.dispatch('fetchJson', {
+        path: '/comments/' + this.getVideoId()
+      })
     },
     onChange () {
-      LibPiped.setPreference('autoplay', this.selectedAutoPlay)
+      this.$store.commit('setPrefs', {
+        id: 'autoplay',
+        value: this.selectedAutoPlay
+      })
     },
     async getVideoData () {
       await this.fetchVideo()
@@ -206,7 +220,7 @@ export default {
             this.channelId = this.video.uploaderUrl.split('/')[2]
             this.fetchSubscribedStatus()
 
-            this.video.description = this.purifyHTML(
+            this.video.description = LibPiped.purifyHTML(
               this.video.description
                 .replaceAll('http://www.youtube.com', '')
                 .replaceAll('https://www.youtube.com', '')
@@ -216,7 +230,7 @@ export default {
         })
     },
     async getSponsors () {
-      if (LibPiped.getPreferenceBoolean('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
+      if (this.$store.getters.getPreferenceString('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) }
     },
     async getComments () {
       this.fetchComments().then(data => (this.comments = data))
@@ -224,29 +238,33 @@ export default {
     async fetchSubscribedStatus () {
       if (!this.channelId) return
 
-      LibPiped.fetchJson(
-        '/subscribed',
-        {
+      this.$store.dispatch('fetchJson', {
+        path: '/subscribed',
+        params: {
           channelId: this.channelId
-        }
-        /* {
+        },
+        options: {
           headers: {
-            Authorization: LibPiped.getAuthToken()
+            Authorization: this.$store.getters.getAuthToken
           }
-        } */
-      ).then(json => {
+        }
+      }).then(json => {
         this.subscribed = json.subscribed
       })
     },
     subscribeHandler () {
-      LibPiped.fetchJson((this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
-        method: 'POST',
-        body: JSON.stringify({
-          channelId: this.channelId
-        }),
-        headers: {
-          /* Authorization: this.getAuthToken(), */
-          'Content-Type': 'application/json'
+      this.$store.dispatch('fetchJson', {
+        path: (this.subscribed ? '/unsubscribe' : '/subscribe'),
+        params: null,
+        options: {
+          method: 'POST',
+          body: JSON.stringify({
+            channelId: this.channelId
+          }),
+          headers: {
+            Authorization: this.$store.getters.getAuthToken,
+            'Content-Type': 'application/json'
+          }
         }
       })
       this.subscribed = !this.subscribed
@@ -255,8 +273,11 @@ export default {
       if (this.loading || !this.comments || !this.comments.nextpage) return
       if (window.innerHeight + window.scrollY >= this.$refs.comments.offsetHeight - window.innerHeight) {
         this.loading = true
-        this.fetchJson('/nextpage/comments/' + this.getVideoId(), {
-          url: this.comments.nextpage
+        this.$store.dispatch('fetchJson', {
+          path: '/nextpage/comments/' + this.getVideoId(),
+          options: {
+            url: this.comments.nextpage
+          }
         }).then(json => {
           this.comments.nextpage = json.nextpage
           this.loading = false

src/store/index.js

@@ -43,10 +43,11 @@ const store = new Vuex.Store({
         for (const param of _keys(params)) {
           url.searchParams.set(param, params[param])
         }
-      }
-      const at = getters.getAuthToken
-      if (at) {
-        url.searchParams.set('authToken', at)
+
+        const at = getters.getAuthToken
+        if (at) {
+          url.searchParams.set('authToken', at)
+        }
       }
 
       return fetch(url.href, options).then(response => {