Simplify static file loading (#4971)

_scripts/dev-runner.js

@@ -111,13 +111,14 @@ function startRenderer(callback) {
 
   const server = new WebpackDevServer({
     static: {
-      directory: path.join(process.cwd(), 'static'),
+      directory: path.resolve(__dirname, '..', 'static'),
       watch: {
         ignored: [
           /(dashFiles|storyboards)\/*/,
           '/**/.DS_Store',
         ]
-      }
+      },
+      publicPath: '/static'
     },
     port
   }, compiler)

_scripts/webpack.renderer.config.js

@@ -111,8 +111,8 @@ const config = {
     ]
   },
   node: {
-    __dirname: isDevMode,
-    __filename: isDevMode
+    __dirname: false,
+    __filename: false
   },
   plugins: [
     processLocalesPlugin,

_scripts/webpack.web.config.js

@@ -108,8 +108,8 @@ const config = {
     ]
   },
   node: {
-    __dirname: true,
-    __filename: isDevMode,
+    __dirname: false,
+    __filename: false
   },
   plugins: [
     new webpack.DefinePlugin({

src/renderer/App.js

@@ -276,10 +276,7 @@ export default defineComponent({
     },
 
     checkExternalPlayer: async function () {
-      const payload = {
-        externalPlayer: this.externalPlayer
-      }
-      this.getExternalPlayerCmdArgumentsData(payload)
+      this.getExternalPlayerCmdArgumentsData()
     },
 
     handleUpdateBannerClick: function (response) {

src/renderer/i18n/index.js

@@ -36,14 +36,14 @@ export async function loadLocale(locale) {
 
   // locales are only compressed in our production Electron builds
   if (process.env.IS_ELECTRON && process.env.NODE_ENV !== 'development') {
-    const { readFile } = require('fs/promises')
     const { promisify } = require('util')
     const { brotliDecompress } = require('zlib')
     const brotliDecompressAsync = promisify(brotliDecompress)
     try {
       // decompress brotli compressed json file and then load it
-      // eslint-disable-next-line n/no-path-concat
-      const compressed = await readFile(`${__dirname}/static/locales/${locale}.json.br`)
+      const url = createWebURL(`/static/locales/${locale}.json.br`)
+      const compressed = await (await fetch(url)).arrayBuffer()
+
       const decompressed = await brotliDecompressAsync(compressed)
       const data = JSON.parse(decompressed.toString())
       i18n.setLocaleMessage(locale, data)

src/renderer/store/modules/invidious.js

@@ -1,4 +1,3 @@
-import fs from 'fs/promises'
 import { createWebURL, fetchWithTimeout } from '../../helpers/utils'
 
 const state = {
@@ -42,14 +41,11 @@ const actions = {
 
     // If the invidious instance fetch isn't returning anything interpretable
     if (instances.length === 0) {
-      // Fallback: read from static file
-      const fileName = 'invidious-instances.json'
-      /* eslint-disable-next-line n/no-path-concat */
-      const fileLocation = process.env.NODE_ENV === 'development' ? './static/' : `${__dirname}/static/`
-      const filePath = `${fileLocation}${fileName}`
       console.warn('reading static file for invidious instances')
-      const fileData = process.env.IS_ELECTRON ? await fs.readFile(filePath, 'utf8') : await (await fetch(createWebURL(filePath))).text()
-      instances = JSON.parse(fileData).filter(e => {
+      const url = createWebURL('/static/invidious-instances.json')
+
+      const fileData = await (await fetch(url)).json()
+      instances = fileData.filter(e => {
         return process.env.SUPPORTS_LOCAL_API || e.cors
       }).map(e => {
         return e.url

src/renderer/store/modules/utils.js

@@ -384,11 +384,10 @@ const actions = {
 
   async getRegionData ({ commit }, { locale }) {
     const localePathExists = process.env.GEOLOCATION_NAMES.includes(locale)
-    // Exclude __dirname from path if not in electron
-    const fileLocation = `${process.env.IS_ELECTRON ? process.env.NODE_ENV === 'development' ? '.' : __dirname : ''}/static/geolocations/`
 
-    const pathName = `${fileLocation}${localePathExists ? locale : 'en-US'}.json`
-    const countries = process.env.IS_ELECTRON ? JSON.parse(await fs.readFile(pathName)) : await (await fetch(createWebURL(pathName))).json()
+    const url = createWebURL(`/static/geolocations/${localePathExists ? locale : 'en-US'}.json`)
+
+    const countries = await (await fetch(url)).json()
 
     const regionNames = countries.map((entry) => { return entry.name })
     const regionValues = countries.map((entry) => { return entry.code })
@@ -620,16 +619,9 @@ const actions = {
     commit('setSessionSearchHistory', [])
   },
 
-  async getExternalPlayerCmdArgumentsData ({ commit }, payload) {
-    const fileName = 'external-player-map.json'
-    /* eslint-disable-next-line n/no-path-concat */
-    const fileLocation = process.env.NODE_ENV === 'development' ? './static/' : `${__dirname}/static/`
-
-    const fileData = await fs.readFile(`${fileLocation}${fileName}`)
-
-    const externalPlayerMap = JSON.parse(fileData).map((entry) => {
-      return { name: entry.name, value: entry.value, cmdArguments: entry.cmdArguments }
-    })
+  async getExternalPlayerCmdArgumentsData ({ commit }) {
+    const url = createWebURL('/static/external-player-map.json')
+    const externalPlayerMap = await (await fetch(url)).json()
     // Sort external players alphabetically & case-insensitive, keep default entry at the top
     const playerNone = externalPlayerMap.shift()
     externalPlayerMap.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))