Make getUserDataPath, getPicturesPath and getSystemLocale helpers (#2920)

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

@@ -1121,7 +1121,6 @@ export default Vue.extend({
       'updateShowProgressBar',
       'updateHistory',
       'compactHistory',
-      'getUserDataPath',
       'addPlaylist',
       'addVideo'
     ]),

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

@@ -1,10 +1,10 @@
 import { closeSync, existsSync, openSync, rmSync } from 'fs'
 import Vue from 'vue'
-import { mapActions } from 'vuex'
 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 { getUserDataPath } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'ExperimentalSettings',
@@ -23,7 +23,7 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    this.getUserDataPath().then((userData) => {
+    getUserDataPath().then((userData) => {
       this.replaceHttpCachePath = `${userData}/experiment-replace-http-cache`
 
       this.replaceHttpCache = existsSync(this.replaceHttpCachePath)
@@ -64,10 +64,6 @@ export default Vue.extend({
 
       const { ipcRenderer } = require('electron')
       ipcRenderer.send('relaunchRequest')
-    },
+    }
-
-    ...mapActions([
-      'getUserDataPath'
-    ])
   }
 })

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

@@ -15,7 +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 { showSaveDialog, showToast } from '../../helpers/utils'
+import { getPicturesPath, showSaveDialog, showToast } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'FtVideoPlayer',
@@ -1382,7 +1382,7 @@ export default Vue.extend({
         }
 
         if (this.screenshotFolder === '' || !fs.existsSync(this.screenshotFolder)) {
-          dirPath = await this.getPicturesPath()
+          dirPath = await getPicturesPath()
         } else {
           dirPath = this.screenshotFolder
         }
@@ -1415,7 +1415,7 @@ export default Vue.extend({
         this.updateScreenshotFolderPath(dirPath)
       } else {
         if (this.screenshotFolder === '') {
-          dirPath = path.join(await this.getPicturesPath(), 'Freetube', subDir)
+          dirPath = path.join(await getPicturesPath(), 'Freetube', subDir)
         } else {
           dirPath = path.join(this.screenshotFolder, subDir)
         }
@@ -1922,7 +1922,6 @@ export default Vue.extend({
       'updateDefaultCaptionSettings',
       'parseScreenshotCustomFileName',
       'updateScreenshotFolderPath',
-      'getPicturesPath'
     ])
   }
 })

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

@@ -11,6 +11,7 @@ import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
 import { ipcRenderer } from 'electron'
 import { IpcChannels } from '../../../constants'
 import path from 'path'
+import { getPicturesPath } from '../../helpers/utils'
 
 export default Vue.extend({
   name: 'PlayerSettings',
@@ -204,7 +205,7 @@ export default Vue.extend({
     },
 
     getScreenshotEmptyFolderPlaceholder: async function() {
-      return path.join(await this.getPicturesPath(), 'Freetube')
+      return path.join(await getPicturesPath(), 'Freetube')
     },
 
     getScreenshotFolderPlaceholder: function() {
@@ -284,7 +285,6 @@ export default Vue.extend({
       'updateScreenshotFolderPath',
       'updateScreenshotFilenamePattern',
       'parseScreenshotCustomFileName',
-      'getPicturesPath'
     ])
   }
 })

src/renderer/helpers/api/local.js

@@ -1,8 +1,8 @@
 import { Innertube, Session } from 'youtubei.js'
-import { PlayerCache } from './PlayerCache'
 import { join } from 'path'
 
-import store from '../../store/index'
+import { PlayerCache } from './PlayerCache'
+import { getUserDataPath } from '../utils'
 
 /**
  * Creates a lightweight Innertube instance, which is faster to create or
@@ -17,7 +17,7 @@ import store from '../../store/index'
  */
 async function createInnertube(withPlayer = false) {
   if (withPlayer) {
-    const userData = await store.dispatch('getUserDataPath')
+    const userData = await getUserDataPath()
 
     return await Innertube.create({
       // use browser fetch

src/renderer/helpers/utils.js

@@ -455,3 +455,36 @@ export function replaceFilenameForbiddenChars(filenameOriginal) {
   }
   return filenameNew
 }
+
+export async function getSystemLocale() {
+  let locale
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    locale = await ipcRenderer.invoke(IpcChannels.GET_SYSTEM_LOCALE)
+  } else {
+    if (navigator && navigator.language) {
+      locale = navigator.language
+    }
+  }
+
+  return locale || 'en-US'
+}
+
+export async function getUserDataPath() {
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    return await ipcRenderer.invoke(IpcChannels.GET_USER_DATA_PATH)
+  } else {
+    // TODO: implement getUserDataPath web compatible callback
+    return null
+  }
+}
+
+export async function getPicturesPath() {
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    return await ipcRenderer.invoke(IpcChannels.GET_PICTURES_PATH)
+  } else {
+    return null
+  }
+}

src/renderer/store/modules/settings.js

@@ -1,7 +1,7 @@
 import i18n from '../../i18n/index'
 import { MAIN_PROFILE_ID, IpcChannels, SyncEvents } from '../../../constants'
 import { DBSettingHandlers } from '../../../datastores/handlers/index'
-import { showToast } from '../../helpers/utils'
+import { getSystemLocale, showToast } from '../../helpers/utils'
 
 /*
  * Due to the complexity of the settings module in FreeTube, a more
@@ -285,7 +285,7 @@ const stateWithSideEffects = {
 
       let targetLocale = value
       if (value === 'system') {
-        const systemLocaleName = (await dispatch('getSystemLocale')).replace('-', '_') // ex: en_US
+        const systemLocaleName = (await getSystemLocale()).replace('-', '_') // ex: en_US
         const systemLocaleLang = systemLocaleName.split('_')[0] // ex: en
         const targetLocaleOptions = i18n.allLocales.filter((locale) => { // filter out other languages
           const localeLang = locale.replace('-', '_').split('_')[0]

src/renderer/store/modules/utils.js

@@ -101,27 +101,6 @@ const getters = {
   }
 }
 
-/**
- * Wrapper function that calls `ipcRenderer.invoke(IRCtype, payload)` if the user is
- * using Electron or a provided custom callback otherwise.
- * @param {Object} context Object
- * @param {String} IRCtype String
- * @param {Function} webCbk Function
- * @param {Object} payload any (default: null)
-*/
-
-async function invokeIRC(context, IRCtype, webCbk, payload = null) {
-  let response = null
-  if (process.env.IS_ELECTRON) {
-    const { ipcRenderer } = require('electron')
-    response = await ipcRenderer.invoke(IRCtype, payload)
-  } else if (webCbk) {
-    response = await webCbk()
-  }
-
-  return response
-}
-
 const actions = {
   async downloadMedia({ rootState }, { url, title, extension, fallingBackPath }) {
     if (!process.env.IS_ELECTRON) {
@@ -207,27 +186,6 @@ const actions = {
     })
   },
 
-  async getSystemLocale (context) {
-    const webCbk = () => {
-      if (navigator && navigator.language) {
-        return navigator.language
-      }
-    }
-
-    return (await invokeIRC(context, IpcChannels.GET_SYSTEM_LOCALE, webCbk)) || 'en-US'
-  },
-
-  async getUserDataPath (context) {
-    // TODO: implement getUserDataPath web compatible callback
-    const webCbk = () => null
-    return await invokeIRC(context, IpcChannels.GET_USER_DATA_PATH, webCbk)
-  },
-
-  async getPicturesPath (context) {
-    const webCbk = () => null
-    return await invokeIRC(context, IpcChannels.GET_PICTURES_PATH, webCbk)
-  },
-
   parseScreenshotCustomFileName: function({ rootState }, payload) {
     return new Promise((resolve, reject) => {
       const { pattern = rootState.settings.screenshotFilenamePattern, date, playerTime, videoId } = payload

src/renderer/views/Watch/Watch.js

@@ -17,6 +17,7 @@ import {
   buildVTTFileLocally,
   copyToClipboard,
   formatDurationAsTimestamp,
+  getUserDataPath,
   showToast
 } from '../../helpers/utils'
 
@@ -1194,7 +1195,6 @@ export default Vue.extend({
       }
 
       if (this.removeVideoMetaFiles) {
-        const userData = await this.getUserDataPath()
         if (process.env.NODE_ENV === 'development') {
           const dashFileLocation = `static/dashFiles/${videoId}.xml`
           const vttFileLocation = `static/storyboards/${videoId}.vtt`
@@ -1206,6 +1206,7 @@ export default Vue.extend({
             fs.rmSync(vttFileLocation)
           }
         } else {
+          const userData = await getUserDataPath()
           const dashFileLocation = `${userData}/dashFiles/${videoId}.xml`
           const vttFileLocation = `${userData}/storyboards/${videoId}.vtt`
 
@@ -1239,7 +1240,7 @@ export default Vue.extend({
 
     createLocalDashManifest: async function (formats) {
       const xmlData = ytDashGen.generate_dash_file_from_formats(formats, this.videoLengthSeconds)
-      const userData = await this.getUserDataPath()
+      const userData = await getUserDataPath()
       let fileLocation
       let uriSchema
       if (process.env.NODE_ENV === 'development') {
@@ -1317,7 +1318,7 @@ export default Vue.extend({
       })
       // TODO: MAKE A VARIABLE WHICH CAN CHOOSE BETWEEN STORYBOARD ARRAY ELEMENTS
       const results = buildVTTFileLocally(storyboardArray[1])
-      this.getUserDataPath().then((userData) => {
+      getUserDataPath().then((userData) => {
         let fileLocation
         let uriSchema
 
@@ -1474,7 +1475,6 @@ export default Vue.extend({
     ...mapActions([
       'updateHistory',
       'updateWatchProgress',
-      'getUserDataPath',
       'ytGetVideoInformation',
       'invidiousGetVideoInformation',
       'updateSubscriptionDetails'