Replace jquery getJSON and get with native fetch (#2591)

* Replace jquery getJSON and get with native fetch

* Remove unnecessary console.log

src/renderer/App.js

@@ -206,31 +206,31 @@ export default Vue.extend({
         const { version } = require('../../package.json')
         const requestUrl = 'https://api.github.com/repos/freetubeapp/freetube/releases?per_page=1'
 
-        $.getJSON(requestUrl, (response) => {
+        fetch(requestUrl)
-          const tagName = response[0].tag_name
+          .then((response) => response.json())
-          const versionNumber = tagName.replace('v', '').replace('-beta', '')
+          .then((json) => {
-          this.updateChangelog = marked.parse(response[0].body)
+            const tagName = json[0].tag_name
-          this.changeLogTitle = response[0].name
+            const versionNumber = tagName.replace('v', '').replace('-beta', '')
+            this.updateChangelog = marked.parse(json[0].body)
+            this.changeLogTitle = json[0].name
 
-          const message = this.$t('Version $ is now available!  Click for more details')
+            const message = this.$t('Version $ is now available!  Click for more details')
-          this.updateBannerMessage = message.replace('$', versionNumber)
+            this.updateBannerMessage = message.replace('$', versionNumber)
 
-          const appVersion = version.split('.')
+            const appVersion = version.split('.')
-          const latestVersion = versionNumber.split('.')
+            const latestVersion = versionNumber.split('.')
 
-          if (parseInt(appVersion[0]) < parseInt(latestVersion[0])) {
+            if (parseInt(appVersion[0]) < parseInt(latestVersion[0])) {
-            this.showUpdatesBanner = true
+              this.showUpdatesBanner = true
-          } else if (parseInt(appVersion[1]) < parseInt(latestVersion[1])) {
+            } else if (parseInt(appVersion[1]) < parseInt(latestVersion[1])) {
-            this.showUpdatesBanner = true
+              this.showUpdatesBanner = true
-          } else if (parseInt(appVersion[2]) < parseInt(latestVersion[2]) && parseInt(appVersion[1]) <= parseInt(latestVersion[1])) {
+            } else if (parseInt(appVersion[2]) < parseInt(latestVersion[2]) && parseInt(appVersion[1]) <= parseInt(latestVersion[1])) {
-            this.showUpdatesBanner = true
+              this.showUpdatesBanner = true
-          }
+            }
-        }).fail((xhr, textStatus, error) => {
+          })
-          console.log(xhr)
+          .catch((error) => {
-          console.log(textStatus)
+            console.error('errored while checking for updates', requestUrl, error)
-          console.log(requestUrl)
+          })
-          console.log(error)
-        })
       }
     },
 

src/renderer/components/proxy-settings/proxy-settings.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import $ from 'jquery'
 import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -124,27 +123,28 @@ export default Vue.extend({
       if (!this.useProxy) {
         this.enableProxy()
       }
-      $.getJSON(this.proxyTestUrl, (response) => {
+      fetch(this.proxyTestUrl)
-        console.log(response)
+        .then((response) => response.json())
-        this.proxyIp = response.ip
+        .then((json) => {
-        this.proxyCountry = response.country
+          this.proxyIp = json.ip
-        this.proxyRegion = response.region
+          this.proxyCountry = json.country
-        this.proxyCity = response.city
+          this.proxyRegion = json.region
-        this.dataAvailable = true
+          this.proxyCity = json.city
-      }).fail((xhr, textStatus, error) => {
+          this.dataAvailable = true
-        console.log(xhr)
+        })
-        console.log(textStatus)
+        .catch((error) => {
-        console.log(error)
+          console.error('errored while testing proxy:', error)
-        this.showToast({
+          this.showToast({
-          message: this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]')
+            message: this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]')
+          })
+          this.dataAvailable = false
+        })
+        .finally(() => {
+          if (!this.useProxy) {
+            this.disableProxy()
+          }
+          this.isLoading = false
         })
-        this.dataAvailable = false
-      }).always(() => {
-        if (!this.useProxy) {
-          this.disableProxy()
-        }
-        this.isLoading = false
-      })
     },
 
     ...mapActions([

src/renderer/store/modules/invidious.js

@@ -25,11 +25,11 @@ const actions = {
   async fetchInvidiousInstances({ commit }, payload) {
     const requestUrl = 'https://api.invidious.io/instances.json'
 
-    let response
     let instances = []
     try {
-      response = await $.getJSON(requestUrl)
+      const response = await fetch(requestUrl)
-      instances = response.filter((instance) => {
+      const json = await response.json()
+      instances = json.filter((instance) => {
         if (instance[0].includes('.onion') || instance[0].includes('.i2p')) {
           return false
         } else {
@@ -39,7 +39,7 @@ const actions = {
         return instance[1].uri.replace(/\/$/, '')
       })
     } catch (err) {
-      console.log(err)
+      console.error(err)
       // Starts fallback strategy: read from static file
       // And fallback to hardcoded entry(s) if static file absent
       const fileName = 'invidious-instances.json'
@@ -52,7 +52,7 @@ const actions = {
           return entry.url
         })
       } else {
-        console.log('unable to read static file for invidious instances')
+        console.error('unable to read static file for invidious instances')
         instances = [
           'https://invidious.snopyta.org',
           'https://invidious.kavin.rocks/'
@@ -73,15 +73,15 @@ const actions = {
     return new Promise((resolve, reject) => {
       const requestUrl = state.currentInvidiousInstance + '/api/v1/' + payload.resource + '/' + payload.id + '?' + $.param(payload.params)
 
-      $.getJSON(requestUrl, (response) => {
+      fetch(requestUrl)
-        resolve(response)
+        .then((response) => response.json())
-      }).fail((xhr, textStatus, error) => {
+        .then((json) => {
-        console.log(xhr)
+          resolve(json)
-        console.log(textStatus)
+        })
-        console.log(requestUrl)
+        .catch((error) => {
-        console.log(error)
+          console.error('Invidious API error', requestUrl, error)
-        reject(xhr)
+          reject(error)
-      })
+        })
     })
   },
 

src/renderer/store/modules/sponsorblock.js

@@ -1,5 +1,3 @@
-import $ from 'jquery'
-
 const state = {}
 const getters = {}
 
@@ -18,24 +16,30 @@ const actions = {
 
         const requestUrl = `${rootState.settings.sponsorBlockUrl}/api/skipSegments/${videoIdHashPrefix}?categories=${JSON.stringify(categories)}`
 
-        $.getJSON(requestUrl, (response) => {
+        fetch(requestUrl)
-          const segments = response
+          .then((response) => {
-            .filter((result) => result.videoID === videoId)
+            // 404 means that there are no segments registered for the video
-            .flatMap((result) => result.segments)
+            if (response.status === 404) {
-          resolve(segments)
+              resolve([])
-        }).fail((xhr, textStatus, error) => {
+              return
-          // 404 means that there are no segments registered for the video
+            }
-          if (xhr.status === 404) {
-            resolve([])
-            return
-          }
 
-          console.log(xhr)
+            response.json()
-          console.log(textStatus)
+              .then((json) => {
-          console.log(requestUrl)
+                const segments = json
-          console.error(error)
+                  .filter((result) => result.videoID === videoId)
-          reject(xhr)
+                  .flatMap((result) => result.segments)
-        })
+                resolve(segments)
+              })
+              .catch((error) => {
+                console.error('failed to fetch SponsorBlock segments', requestUrl, error)
+                reject(error)
+              })
+          })
+          .catch((error) => {
+            console.error('failed to fetch SponsorBlock segments', requestUrl, error)
+            reject(error)
+          })
       })
     })
   }

src/renderer/views/Watch/Watch.js

@@ -1330,35 +1330,36 @@ export default Vue.extend({
         const url = new URL(caption.baseUrl)
         url.searchParams.set('fmt', 'vtt')
 
-        $.get(url.toString(), response => {
+        fetch(url)
-          // The character '#' needs to be percent-encoded in a (data) URI
+          .then((response) => response.text())
-          // because it signals an identifier, which means anything after it
+          .then((text) => {
-          // is automatically removed when the URI is used as a source
+            // The character '#' needs to be percent-encoded in a (data) URI
-          let vtt = response.replace(/#/g, '%23')
+            // because it signals an identifier, which means anything after it
+            // is automatically removed when the URI is used as a source
+            let vtt = text.replace(/#/g, '%23')
 
-          // A lot of videos have messed up caption positions that need to be removed
+            // A lot of videos have messed up caption positions that need to be removed
-          // This can be either because this format isn't really used by YouTube
+            // This can be either because this format isn't really used by YouTube
-          // or because it's expected for the player to be able to somehow
+            // or because it's expected for the player to be able to somehow
-          // wrap the captions so that they won't step outside its boundaries
+            // wrap the captions so that they won't step outside its boundaries
-          //
+            //
-          // Auto-generated captions are also all aligned to the start
+            // Auto-generated captions are also all aligned to the start
-          // so those instances must also be removed
+            // so those instances must also be removed
-          // In addition, all aligns seem to be fixed to "start" when they do pop up in normal captions
+            // In addition, all aligns seem to be fixed to "start" when they do pop up in normal captions
-          // If it's prominent enough that people start to notice, it can be removed then
+            // If it's prominent enough that people start to notice, it can be removed then
-          if (caption.kind === 'asr') {
+            if (caption.kind === 'asr') {
-            vtt = vtt.replace(/ align:start| position:\d{1,3}%/g, '')
+              vtt = vtt.replace(/ align:start| position:\d{1,3}%/g, '')
-          } else {
+            } else {
-            vtt = vtt.replace(/ position:\d{1,3}%/g, '')
+              vtt = vtt.replace(/ position:\d{1,3}%/g, '')
-          }
+            }
 
-          caption.baseUrl = `data:${caption.type};${caption.charset},${vtt}`
+            caption.baseUrl = `data:${caption.type};${caption.charset},${vtt}`
-          resolve(caption)
+            resolve(caption)
-        }).fail((xhr, textStatus, error) => {
+          })
-          console.log(xhr)
+          .catch((error) => {
-          console.log(textStatus)
+            console.error(error)
-          console.log(error)
+            reject(error)
-          reject(error)
+          })
-        })
       }))
     },