Switch from sync fs APIs to fs/promises (#2991)

* Switch from sync fs APIs to fs/promises

* Fix error and await storyboard creation

* Start a new file for filesystem helpers starting with pathExists

_scripts/webpack.renderer.config.js

@@ -8,6 +8,12 @@ const ProcessLocalesPlugin = require('./ProcessLocalesPlugin')
 
 const isDevMode = process.env.NODE_ENV === 'development'
 
+const processLocalesPlugin = new ProcessLocalesPlugin({
+  compress: !isDevMode,
+  inputDir: path.join(__dirname, '../static/locales'),
+  outputDir: 'static/locales',
+})
+
 const config = {
   name: 'renderer',
   mode: process.env.NODE_ENV,
@@ -107,8 +113,10 @@ const config = {
     __filename: isDevMode
   },
   plugins: [
+    processLocalesPlugin,
     new webpack.DefinePlugin({
-      'process.env.IS_ELECTRON': true
+      'process.env.IS_ELECTRON': true,
+      'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
     }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
@@ -142,22 +150,4 @@ const config = {
   target: 'electron-renderer',
 }
 
-/**
- * Adjust rendererConfig for production settings
- */
-if (!isDevMode) {
-  const processLocalesPlugin = new ProcessLocalesPlugin({
-    compress: true,
-    inputDir: path.join(__dirname, '../static/locales'),
-    outputDir: 'static/locales',
-  })
-
-  config.plugins.push(
-    processLocalesPlugin,
-    new webpack.DefinePlugin({
-      'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
-    })
-  )
-}
-
 module.exports = config

_scripts/webpack.web.config.js

@@ -137,7 +137,7 @@ const config = {
     fallback: {
       buffer: require.resolve('buffer/'),
       dns: require.resolve('browserify/lib/_empty.js'),
-      fs: require.resolve('browserify/lib/_empty.js'),
+      'fs/promises': require.resolve('browserify/lib/_empty.js'),
       http: require.resolve('stream-http'),
       https: require.resolve('https-browserify'),
       net: require.resolve('browserify/lib/_empty.js'),

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

@@ -1,9 +1,10 @@
-import { closeSync, existsSync, openSync, rmSync } from 'fs'
+import fs from 'fs/promises'
 import Vue from 'vue'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import { pathExists } from '../../helpers/filesystem'
 import { getUserDataPath } from '../../helpers/utils'
 
 export default Vue.extend({
@@ -26,28 +27,19 @@ export default Vue.extend({
     getUserDataPath().then((userData) => {
       this.replaceHttpCachePath = `${userData}/experiment-replace-http-cache`
 
-      this.replaceHttpCache = existsSync(this.replaceHttpCachePath)
-      this.replaceHttpCacheLoading = false
+      pathExists(this.replaceHttpCachePath).then((exists) => {
+        this.replaceHttpCache = exists
+        this.replaceHttpCacheLoading = false
+      })
     })
   },
   methods: {
-    updateReplaceHttpCache: function () {
-      this.replaceHttpCache = !this.replaceHttpCache
-
-      if (this.replaceHttpCache) {
-        // create an empty file
-        closeSync(openSync(this.replaceHttpCachePath, 'w'))
-      } else {
-        rmSync(this.replaceHttpCachePath)
-      }
-    },
-
     handleRestartPrompt: function (value) {
       this.replaceHttpCache = value
       this.showRestartPrompt = true
     },
 
-    handleReplaceHttpCache: function (value) {
+    handleReplaceHttpCache: async function (value) {
       this.showRestartPrompt = false
 
       if (value === null || value === 'no') {
@@ -57,9 +49,10 @@ export default Vue.extend({
 
       if (this.replaceHttpCache) {
         // create an empty file
-        closeSync(openSync(this.replaceHttpCachePath, 'w'))
+        const handle = await fs.open(this.replaceHttpCachePath, 'w')
+        await handle.close()
       } else {
-        rmSync(this.replaceHttpCachePath)
+        await fs.rm(this.replaceHttpCachePath)
       }
 
       const { ipcRenderer } = require('electron')

src/renderer/components/ft-video-player/ft-video-player.js

@@ -3,7 +3,7 @@ import { mapActions } from 'vuex'
 
 import videojs from 'video.js'
 import qualitySelector from '@silvermine/videojs-quality-selector'
-import fs from 'fs'
+import fs from 'fs/promises'
 import path from 'path'
 import 'videojs-overlay/dist/videojs-overlay'
 import 'videojs-overlay/dist/videojs-overlay.css'
@@ -15,6 +15,7 @@ import 'videojs-mobile-ui/dist/videojs-mobile-ui.css'
 import { IpcChannels } from '../../../constants'
 import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock'
 import { calculateColorLuminance, colors } from '../../helpers/colors'
+import { pathExists } from '../../helpers/filesystem'
 import { getPicturesPath, showSaveDialog, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
@@ -769,22 +770,23 @@ export default Vue.extend({
       }
     },
 
-    determineMaxFramerate: function() {
+    determineMaxFramerate: async function() {
       if (this.dashSrc.length === 0) {
         this.maxFramerate = 60
         return
       }
-      fs.readFile(this.dashSrc[0].url, (err, data) => {
-        if (err) {
-          this.maxFramerate = 60
-          return
-        }
+
+      try {
+        const data = await fs.readFile(this.dashSrc[0].url)
+
         if (data.includes('frameRate="60"')) {
           this.maxFramerate = 60
         } else {
           this.maxFramerate = 30
         }
-      })
+      } catch {
+        this.maxFramerate = 60
+      }
     },
 
     determineDefaultQualityLegacy: function () {
@@ -1406,7 +1408,7 @@ export default Vue.extend({
           this.player.pause()
         }
 
-        if (this.screenshotFolder === '' || !fs.existsSync(this.screenshotFolder)) {
+        if (this.screenshotFolder === '' || !(await pathExists(this.screenshotFolder))) {
           dirPath = await getPicturesPath()
         } else {
           dirPath = this.screenshotFolder
@@ -1445,9 +1447,9 @@ export default Vue.extend({
           dirPath = path.join(this.screenshotFolder, subDir)
         }
 
-        if (!fs.existsSync(dirPath)) {
+        if (!(await pathExists(dirPath))) {
           try {
-            fs.mkdirSync(dirPath, { recursive: true })
+            fs.mkdir(dirPath, { recursive: true })
           } catch (err) {
             console.error(err)
             showToast(this.$t('Screenshot Error', { error: err }))
@@ -1462,14 +1464,14 @@ export default Vue.extend({
         result.arrayBuffer().then(ab => {
           const arr = new Uint8Array(ab)
 
-          fs.writeFile(filePath, arr, (err) => {
-            if (err) {
+          fs.writeFile(filePath, arr)
+            .then(() => {
+              showToast(this.$t('Screenshot Success', { filePath }))
+            })
+            .catch((err) => {
               console.error(err)
               showToast(this.$t('Screenshot Error', { error: err }))
-            } else {
-              showToast(this.$t('Screenshot Success', { filePath }))
-            }
-          })
+            })
         })
       }, mimeType, imageQuality)
       canvas.remove()

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

@@ -114,22 +114,10 @@ export default Vue.extend({
     },
 
     localeNames: function () {
-      if (process.env.NODE_ENV !== 'development' || !process.env.IS_ELECTRON) {
-        return [
-          this.$t('Settings.General Settings.System Default'),
-          ...process.env.LOCALE_NAMES
-        ]
-      }
-
-      const names = [
-        this.$t('Settings.General Settings.System Default')
+      return [
+        this.$t('Settings.General Settings.System Default'),
+        ...process.env.LOCALE_NAMES
       ]
-
-      Object.entries(this.$i18n.messages).forEach(([locale, localeData]) => {
-        names.push(localeData['Locale Name'] ?? locale)
-      })
-
-      return names
     },
 
     backendNames: function () {

src/renderer/helpers/api/PlayerCache.js

@@ -1,5 +1,7 @@
-import { access, mkdir, readFile, unlink, writeFile } from 'fs/promises'
-import { resolve } from 'path'
+import fs from 'fs/promises'
+import path from 'path'
+
+import { pathExists } from '../filesystem'
 
 // based off https://github.com/LuanRT/YouTube.js/blob/6caa679df6ddc77d25be02dcb7355b722ab268aa/src/utils/Cache.ts
 // avoids errors caused by the fully dynamic `fs` and `path` module imports that youtubei.js's UniversalCache does
@@ -9,10 +11,10 @@ export class PlayerCache {
   }
 
   async get(key) {
-    const filePath = resolve(this.cacheDirectory, key)
+    const filePath = path.resolve(this.cacheDirectory, key)
 
     try {
-      const contents = await readFile(filePath)
+      const contents = await fs.readFile(filePath)
       return contents.buffer
     } catch (e) {
       if (e?.code === 'ENOENT') {
@@ -23,19 +25,19 @@ export class PlayerCache {
   }
 
   async set(key, value) {
-    await mkdir(this.cacheDirectory, { recursive: true })
+    await fs.mkdir(this.cacheDirectory, { recursive: true })
 
-    const filePath = resolve(this.cacheDirectory, key)
-    await writeFile(filePath, new Uint8Array(value))
+    const filePath = path.resolve(this.cacheDirectory, key)
+    await fs.writeFile(filePath, new Uint8Array(value))
   }
 
   async remove(key) {
-    const filePath = resolve(this.cacheDirectory, key)
+    const filePath = path.resolve(this.cacheDirectory, key)
 
-    // only try to delete the file if it exists, access() throws an exception if the file doesn't exist
-    try {
-      await access(filePath)
-      await unlink(filePath)
-    } catch { }
+    if (await pathExists(filePath)) {
+      try {
+        await fs.unlink(filePath)
+      } catch { }
+    }
   }
 }

src/renderer/helpers/filesystem.js

@@ -0,0 +1,14 @@
+import fs from 'fs/promises'
+
+/**
+ * Async version of existsSync, as node doesn't have it
+ * @param {string} path
+ */
+export async function pathExists(path) {
+  try {
+    await fs.access(path)
+    return true
+  } catch {
+    return false
+  }
+}

src/renderer/helpers/utils.js

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'fs/promises'
 
 import { IpcChannels } from '../../constants'
 import FtToastEvents from '../components/ft-toast/ft-toast-events'
@@ -260,13 +260,11 @@ export function readFileFromDialog(response, index = 0) {
   return new Promise((resolve, reject) => {
     if (process.env.IS_ELECTRON) {
       // if this is Electron, use fs
-      fs.readFile(response.filePaths[index], (err, data) => {
-        if (err) {
-          reject(err)
-          return
-        }
-        resolve(new TextDecoder('utf-8').decode(data))
-      })
+      fs.readFile(response.filePaths[index])
+        .then(data => {
+          resolve(new TextDecoder('utf-8').decode(data))
+        })
+        .catch(reject)
     } else {
       // if this is web, use FileReader
       try {
@@ -315,16 +313,8 @@ export async function showSaveDialog (options) {
 */
 export async function writeFileFromDialog (response, content) {
   if (process.env.IS_ELECTRON) {
-    return await new Promise((resolve, reject) => {
-      const { filePath } = response
-      fs.writeFile(filePath, content, (error) => {
-        if (error) {
-          reject(error)
-        } else {
-          resolve()
-        }
-      })
-    })
+    const { filePath } = response
+    return await fs.writeFile(filePath, content)
   } else {
     if ('showOpenFilePicker' in window) {
       const { handle } = response