fix: white screen when invidious instances don't load (#1755)

* fix white screen when invidious instances don't load

* static file for instances on api fail

* Update src/renderer/store/modules/invidious.js

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* only parse json if file exists

* fix linter

* Update src/renderer/store/modules/invidious.js

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* Update src/renderer/store/modules/invidious.js

* Update invidious.js

* Update src/renderer/store/modules/invidious.js

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* remove trailing space

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

src/renderer/App.js

@@ -130,7 +130,7 @@ export default Vue.extend({
   },
   mounted: function () {
     this.grabUserSettings().then(async () => {
-      await this.fetchInvidiousInstances()
+      await this.fetchInvidiousInstances({ isDev: this.isDev })
       if (this.defaultInvidiousInstance === '') {
         await this.setRandomCurrentInvidiousInstance()
       }

src/renderer/store/modules/invidious.js

@@ -1,4 +1,5 @@
 import $ from 'jquery'
+import fs from 'fs'
 
 const state = {
   currentInvidiousInstance: '',
@@ -21,25 +22,43 @@ const getters = {
 }
 
 const actions = {
-  async fetchInvidiousInstances({ commit }) {
+  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) => {
+        if (instance[0].includes('.onion') || instance[0].includes('.i2p')) {
+          return false
+        } else {
+          return true
+        }
+      }).map((instance) => {
+        return instance[1].uri.replace(/\/$/, '')
+      })
     } catch (err) {
       console.log(err)
-    }
-
-    const instances = response.filter((instance) => {
-      if (instance[0].includes('.onion') || instance[0].includes('.i2p')) {
-        return false
+      // Starts fallback strategy: read from static file
+      // And fallback to hardcoded entry(s) if static file absent
+      const fileName = 'invidious-instances.json'
+      /* eslint-disable-next-line */
+      const fileLocation = payload.isDev ? './static/' : `${__dirname}/static/`
+      if (fs.existsSync(`${fileLocation}${fileName}`)) {
+        console.log('reading static file for invidious instances')
+        const fileData = fs.readFileSync(`${fileLocation}${fileName}`)
+        instances = JSON.parse(fileData).map((entry) => {
+          return entry.url
+        })
       } else {
-        return true
+        console.log('unable to read static file for invidious instances')
+        instances = [
+          'https://invidious.snopyta.org',
+          'https://invidious.kavin.rocks/'
+        ]
       }
-    }).map((instance) => {
-      return instance[1].uri.replace(/\/$/, '')
-    })
+    }
 
     commit('setInvidiousInstancesList', instances)
   },

static/invidious-instances.json

@@ -0,0 +1,21 @@
+[
+    { "url": "https://yewtu.be" },
+    { "url": "https://invidious.snopyta.org" },
+    { "url": "https://invidious.kavin.rocks" },
+    { "url": "https://vid.puffyan.us" },
+    { "url": "https://invidious.exonip.de" },
+    { "url": "https://ytprivate.com" },
+    { "url": "https://invidious-us.kavin.rocks" },
+    { "url": "https://invidious.silkky.cloud" },
+    { "url": "https://y.com.cm" },
+    { "url": "https://inv.riverside.rocks" },
+    { "url": "https://invidio.xamh.de" },
+    { "url": "https://vid.mint.lgbt" },
+    { "url": "https://invidious-jp.kavin.rocks" },
+    { "url": "https://invidious.hub.ne.kr" },
+    { "url": "https://yt.didw.to" },
+    { "url": "https://yt.artemislena.eu" },
+    { "url": "https://youtube.076.ne.jp" },
+    { "url": "https://ytb.trom.tf" },
+    { "url": "https://invidious.namazso.eu" }
+]