Skip to content

Replace jquery getJSON and get with native fetch #2591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PrestonN merged 2 commits into from
Sep 21, 2022
Merged

Replace jquery getJSON and get with native fetch #2591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4262717
Replace jquery getJSON and get with native fetch
absidue Sep 18, 2022
9767fac
Remove unnecessary console.log
absidue Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions src/renderer/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
const tagName = response[0].tag_name
const versionNumber = tagName.replace('v', '').replace('-beta', '')
this.updateChangelog = marked.parse(response[0].body)
this.changeLogTitle = response[0].name

const message = this.$t('Version $ is now available! Click for more details')
this.updateBannerMessage = message.replace('$', versionNumber)

const appVersion = version.split('.')
const latestVersion = versionNumber.split('.')

if (parseInt(appVersion[0]) < parseInt(latestVersion[0])) {
this.showUpdatesBanner = true
} else if (parseInt(appVersion[1]) < parseInt(latestVersion[1])) {
this.showUpdatesBanner = true
} else if (parseInt(appVersion[2]) < parseInt(latestVersion[2]) && parseInt(appVersion[1]) <= parseInt(latestVersion[1])) {
this.showUpdatesBanner = true
}
}).fail((xhr, textStatus, error) => {
console.log(xhr)
console.log(textStatus)
console.log(requestUrl)
console.log(error)
})
fetch(requestUrl)
.then((response) => response.json())
.then((json) => {
const tagName = json[0].tag_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')
this.updateBannerMessage = message.replace('$', versionNumber)

const appVersion = version.split('.')
const latestVersion = versionNumber.split('.')

if (parseInt(appVersion[0]) < parseInt(latestVersion[0])) {
this.showUpdatesBanner = true
} else if (parseInt(appVersion[1]) < parseInt(latestVersion[1])) {
this.showUpdatesBanner = true
} else if (parseInt(appVersion[2]) < parseInt(latestVersion[2]) && parseInt(appVersion[1]) <= parseInt(latestVersion[1])) {
this.showUpdatesBanner = true
}
})
.catch((error) => {
console.error('errored while checking for updates', requestUrl, error)
})
}
},

Expand Down
42 changes: 21 additions & 21 deletions src/renderer/components/proxy-settings/proxy-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -124,27 +123,28 @@ export default Vue.extend({
if (!this.useProxy) {
this.enableProxy()
}
$.getJSON(this.proxyTestUrl, (response) => {
console.log(response)
this.proxyIp = response.ip
this.proxyCountry = response.country
this.proxyRegion = response.region
this.proxyCity = response.city
this.dataAvailable = true
}).fail((xhr, textStatus, error) => {
console.log(xhr)
console.log(textStatus)
console.log(error)
this.showToast({
message: this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]')
fetch(this.proxyTestUrl)
.then((response) => response.json())
.then((json) => {
this.proxyIp = json.ip
this.proxyCountry = json.country
this.proxyRegion = json.region
this.proxyCity = json.city
this.dataAvailable = true
})
.catch((error) => {
console.error('errored while testing proxy:', error)
this.showToast({
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([
Expand Down
28 changes: 14 additions & 14 deletions src/renderer/store/modules/invidious.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
instances = response.filter((instance) => {
const response = await fetch(requestUrl)
const json = await response.json()
instances = json.filter((instance) => {
if (instance[0].includes('.onion') || instance[0].includes('.i2p')) {
return false
} else {
Expand All @@ -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'
Expand All @@ -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/'
Expand All @@ -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) => {
resolve(response)
}).fail((xhr, textStatus, error) => {
console.log(xhr)
console.log(textStatus)
console.log(requestUrl)
console.log(error)
reject(xhr)
})
fetch(requestUrl)
.then((response) => response.json())
.then((json) => {
resolve(json)
})
.catch((error) => {
console.error('Invidious API error', requestUrl, error)
reject(error)
})
})
},

Expand Down
44 changes: 24 additions & 20 deletions src/renderer/store/modules/sponsorblock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import $ from 'jquery'

const state = {}
const getters = {}

Expand All @@ -18,24 +16,30 @@ const actions = {

const requestUrl = `${rootState.settings.sponsorBlockUrl}/api/skipSegments/${videoIdHashPrefix}?categories=${JSON.stringify(categories)}`

$.getJSON(requestUrl, (response) => {
const segments = response
.filter((result) => result.videoID === videoId)
.flatMap((result) => result.segments)
resolve(segments)
}).fail((xhr, textStatus, error) => {
// 404 means that there are no segments registered for the video
if (xhr.status === 404) {
resolve([])
return
}

console.log(xhr)
console.log(textStatus)
console.log(requestUrl)
console.error(error)
reject(xhr)
})
fetch(requestUrl)
.then((response) => {
// 404 means that there are no segments registered for the video
if (response.status === 404) {
resolve([])
return
}

response.json()
.then((json) => {
const segments = json
.filter((result) => result.videoID === videoId)
.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)
})
})
})
}
Expand Down
57 changes: 29 additions & 28 deletions src/renderer/views/Watch/Watch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1264,35 +1264,36 @@ export default Vue.extend({
const url = new URL(caption.baseUrl)
url.searchParams.set('fmt', 'vtt')

$.get(url.toString(), response => {
// The character '#' needs to be percent-encoded in a (data) URI
// because it signals an identifier, which means anything after it
// is automatically removed when the URI is used as a source
let vtt = response.replace(/#/g, '%23')

// 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
// 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
//
// Auto-generated captions are also all aligned to the start
// 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
// If it's prominent enough that people start to notice, it can be removed then
if (caption.kind === 'asr') {
vtt = vtt.replace(/ align:start| position:\d{1,3}%/g, '')
} else {
vtt = vtt.replace(/ position:\d{1,3}%/g, '')
}
fetch(url)
.then((response) => response.text())
.then((text) => {
// The character '#' needs to be percent-encoded in a (data) URI
// 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
// 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
// wrap the captions so that they won't step outside its boundaries
//
// Auto-generated captions are also all aligned to the start
// 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
// If it's prominent enough that people start to notice, it can be removed then
if (caption.kind === 'asr') {
vtt = vtt.replace(/ align:start| position:\d{1,3}%/g, '')
} else {
vtt = vtt.replace(/ position:\d{1,3}%/g, '')
}

caption.baseUrl = `data:${caption.type};${caption.charset},${vtt}`
resolve(caption)
}).fail((xhr, textStatus, error) => {
console.log(xhr)
console.log(textStatus)
console.log(error)
reject(error)
})
caption.baseUrl = `data:${caption.type};${caption.charset},${vtt}`
resolve(caption)
})
.catch((error) => {
console.error(error)
reject(error)
})
}))
},

Expand Down