Electron variable at build time instead of at runtime (#2574)

_scripts/webpack.renderer.config.js

@@ -109,7 +109,10 @@ const config = {
     global: isDevMode,
   },
   plugins: [
-    // new WriteFilePlugin(),
+    new webpack.DefinePlugin({
+      'process.env.PRODUCT_NAME': JSON.stringify(productName),
+      'process.env.IS_ELECTRON': true
+    }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
       filename: 'index.html',
@@ -119,9 +122,6 @@ const config = {
         : false,
     }),
     new VueLoaderPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.PRODUCT_NAME': JSON.stringify(productName),
-    }),
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',

_scripts/webpack.web.config.js

@@ -119,7 +119,10 @@ const config = {
     dns: 'empty'
   },
   plugins: [
-    // new WriteFilePlugin(),
+    new webpack.DefinePlugin({
+      'process.env.PRODUCT_NAME': JSON.stringify(productName),
+      'process.env.IS_ELECTRON': false
+    }),
     new HtmlWebpackPlugin({
       excludeChunks: ['processTaskWorker'],
       filename: 'index.html',
@@ -127,9 +130,6 @@ const config = {
       nodeModules: false,
     }),
     new VueLoaderPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.PRODUCT_NAME': JSON.stringify(productName),
-    }),
     new MiniCssExtractPlugin({
       filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
       chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',

src/datastores/handlers/index.js

@@ -1,6 +1,5 @@
 let handlers
-const usingElectron = window?.process?.type === 'renderer'
+if (process.env.IS_ELECTRON) {
-if (usingElectron) {
   handlers = require('./electron').default
 } else {
   handlers = require('./web').default

src/index.ejs

@@ -21,7 +21,7 @@
     <!-- Set `__static` path to static files in production -->
     <script>
     try {
-      if (process.env.NODE_ENV !== 'development')
+      if ('<%= process.env.NODE_ENV %>' !== 'development')
         window.__static = require('path')
           .join(__dirname, '/static')
           .replace(/\\/g, '\\\\')
@@ -34,7 +34,7 @@
     // Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
 
     // Check compatibility for the browser we're running this in
-    if ("serviceWorker" in navigator && (window && window.process && window.process.type !== 'renderer')) {
+    if ("serviceWorker" in navigator && !<%= process.env.IS_ELECTRON %>) {
       if (navigator.serviceWorker.controller) {
         console.log("[PWA Builder] active service worker found, no need to register");
       } else {

src/renderer/App.js

@@ -57,9 +57,6 @@ export default Vue.extend({
     isOpen: function () {
       return this.$store.getters.getIsSideNavOpen
     },
-    usingElectron: function() {
-      return this.$store.getters.getUsingElectron
-    },
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
@@ -161,7 +158,7 @@ export default Vue.extend({
         this.grabHistory()
         this.grabAllPlaylists()
 
-        if (this.usingElectron) {
+        if (process.env.IS_ELECTRON) {
           console.log('User is using Electron')
           ipcRenderer = require('electron').ipcRenderer
           this.setupListenersToSyncWindows()
@@ -474,7 +471,7 @@ export default Vue.extend({
     },
 
     openInternalPath: function({ path, doCreateNewWindow, query = {} }) {
-      if (this.usingElectron && doCreateNewWindow) {
+      if (process.env.IS_ELECTRON && doCreateNewWindow) {
         const { ipcRenderer } = require('electron')
 
         // Combine current document path and new "hash" as new window startup URL

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

@@ -32,7 +32,7 @@ export default Vue.extend({
       this.player.play()
     }
 
-    if (this.usingElectron && this.powerSaveBlocker !== null) {
+    if (process.env.IS_ELECTRON && this.powerSaveBlocker !== null) {
       const { ipcRenderer } = require('electron')
       ipcRenderer.send(IpcChannels.STOP_POWER_SAVE_BLOCKER, this.powerSaveBlocker)
     }
@@ -137,10 +137,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     currentLocale: function () {
       return this.$store.getters.getCurrentLocale
     },
@@ -340,7 +336,7 @@ export default Vue.extend({
       navigator.mediaSession.playbackState = 'none'
     }
 
-    if (this.usingElectron && this.powerSaveBlocker !== null) {
+    if (process.env.IS_ELECTRON && this.powerSaveBlocker !== null) {
       const { ipcRenderer } = require('electron')
       ipcRenderer.send(IpcChannels.STOP_POWER_SAVE_BLOCKER, this.powerSaveBlocker)
     }
@@ -492,7 +488,7 @@ export default Vue.extend({
             navigator.mediaSession.playbackState = 'playing'
           }
 
-          if (this.usingElectron) {
+          if (process.env.IS_ELECTRON) {
             const { ipcRenderer } = require('electron')
             this.powerSaveBlocker =
               await ipcRenderer.invoke(IpcChannels.START_POWER_SAVE_BLOCKER)
@@ -504,7 +500,7 @@ export default Vue.extend({
             navigator.mediaSession.playbackState = 'paused'
           }
 
-          if (this.usingElectron && this.powerSaveBlocker !== null) {
+          if (process.env.IS_ELECTRON && this.powerSaveBlocker !== null) {
             const { ipcRenderer } = require('electron')
             ipcRenderer.send(IpcChannels.STOP_POWER_SAVE_BLOCKER, this.powerSaveBlocker)
             this.powerSaveBlocker = null
@@ -534,7 +530,7 @@ export default Vue.extend({
         })
 
         // right click menu
-        if (this.usingElectron) {
+        if (process.env.IS_ELECTRON) {
           const { ipcRenderer } = require('electron')
           ipcRenderer.removeAllListeners('showVideoStatistics')
           ipcRenderer.on('showVideoStatistics', (event) => {

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

@@ -62,11 +62,6 @@ export default Vue.extend({
     isDev: function () {
       return process.env.NODE_ENV === 'development'
     },
-
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },

src/renderer/components/top-nav/top-nav.js

@@ -28,10 +28,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
     },
@@ -324,7 +320,7 @@ export default Vue.extend({
     },
 
     openInternalPath: function({ path, doCreateNewWindow, query = {} }) {
-      if (this.usingElectron && doCreateNewWindow) {
+      if (process.env.IS_ELECTRON && doCreateNewWindow) {
         const { ipcRenderer } = require('electron')
 
         // Combine current document path and new "hash" as new window startup URL
@@ -345,7 +341,7 @@ export default Vue.extend({
     },
 
     createNewWindow: function () {
-      if (this.usingElectron) {
+      if (process.env.IS_ELECTRON) {
         const { ipcRenderer } = require('electron')
         ipcRenderer.send(IpcChannels.CREATE_NEW_WINDOW)
       } else {

src/renderer/components/watch-video-live-chat/watch-video-live-chat.js

@@ -59,10 +59,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -83,7 +79,7 @@ export default Vue.extend({
     }
   },
   created: function () {
-    if (!this.usingElectron) {
+    if (!process.env.IS_ELECTRON) {
       this.hasError = true
       this.errorMessage = this.$t('Video["Live Chat is currently not supported in this build."]')
     } else {

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -38,10 +38,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -86,7 +82,7 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    if (!this.usingElectron) {
+    if (!process.env.IS_ELECTRON) {
       this.getPlaylistInformationInvidious()
     } else {
       switch (this.backendPreference) {

src/renderer/main.js

@@ -135,7 +135,7 @@ new Vue({
 })
 
 // to avoid accessing electron api from web app build
-if (window && window.process && window.process.type === 'renderer') {
+if (process.env.IS_ELECTRON) {
   const { ipcRenderer } = require('electron')
 
   // handle menu event updates from main script

src/renderer/store/modules/settings.js

@@ -343,8 +343,8 @@ const stateWithSideEffects = {
 
   uiScale: {
     defaultValue: 100,
-    sideEffectsHandler: ({ state: { usingElectron } }, value) => {
+    sideEffectsHandler: (_, value) => {
-      if (usingElectron) {
+      if (process.env.IS_ELECTRON) {
         const { webFrame } = require('electron')
         webFrame.setZoomFactor(value / 100)
       }
@@ -353,11 +353,9 @@ const stateWithSideEffects = {
 }
 
 const customState = {
-  usingElectron: (window?.process?.type === 'renderer')
 }
 
 const customGetters = {
-  getUsingElectron: (state) => state.usingElectron
 }
 
 const customMutations = {}

src/renderer/store/modules/utils.js

@@ -193,8 +193,7 @@ const getters = {
 
 async function invokeIRC(context, IRCtype, webCbk, payload = null) {
   let response = null
-  const usingElectron = context.rootState.settings.usingElectron
+  if (process.env.IS_ELECTRON) {
-  if (usingElectron) {
     const { ipcRenderer } = require('electron')
     response = await ipcRenderer.invoke(IRCtype, payload)
   } else if (webCbk) {
@@ -205,9 +204,8 @@ async function invokeIRC(context, IRCtype, webCbk, payload = null) {
 }
 
 const actions = {
-  openExternalLink ({ rootState }, url) {
+  openExternalLink (_, url) {
-    const usingElectron = rootState.settings.usingElectron
+    if (process.env.IS_ELECTRON) {
-    if (usingElectron) {
       const ipcRenderer = require('electron').ipcRenderer
       ipcRenderer.send(IpcChannels.OPEN_EXTERNAL_LINK, url)
     } else {
@@ -250,7 +248,6 @@ const actions = {
 
   async downloadMedia({ rootState, dispatch }, { url, title, extension, fallingBackPath }) {
     const fileName = `${await dispatch('replaceFilenameForbiddenChars', title)}.${extension}`
-    const usingElectron = rootState.settings.usingElectron
     const locale = i18n._vm.locale
     const translations = i18n._vm.messages[locale]
     const startMessage = translations['Starting download'].replace('$', title)
@@ -258,7 +255,7 @@ const actions = {
     const errorMessage = translations['Downloading failed'].replace('$', title)
     let folderPath = rootState.settings.downloadFolderPath
 
-    if (!usingElectron) {
+    if (!process.env.IS_ELECTRON) {
       // Add logic here in the future
       return
     }

src/renderer/views/Channel/Channel.js

@@ -67,10 +67,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -185,7 +181,7 @@ export default Vue.extend({
       this.apiUsed = ''
       this.isLoading = true
 
-      if (!this.usingElectron) {
+      if (!process.env.IS_ELECTRON) {
         this.getVideoInformationInvidious()
       } else {
         switch (this.backendPreference) {
@@ -241,7 +237,7 @@ export default Vue.extend({
     this.currentTab = this.$route.params.currentTab ?? 'videos'
     this.isLoading = true
 
-    if (!this.usingElectron) {
+    if (!process.env.IS_ELECTRON) {
       this.getVideoInformationInvidious()
     } else {
       switch (this.backendPreference) {

src/renderer/views/Settings/Settings.js

@@ -34,7 +34,7 @@ export default Vue.extend({
   },
   computed: {
     usingElectron: function () {
-      return this.$store.getters.getUsingElectron
+      return process.env.IS_ELECTRON
     }
   }
 })

src/renderer/views/Subscriptions/Subscriptions.js

@@ -32,10 +32,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
-
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -159,7 +155,7 @@ export default Vue.extend({
       this.errorChannels = []
       this.activeSubscriptionList.forEach(async (channel) => {
         let videos = []
-        if (!this.usingElectron || this.backendPreference === 'invidious') {
+        if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
           if (useRss) {
             videos = await this.getChannelVideosInvidiousRSS(channel)
           } else {

src/renderer/views/Trending/Trending.js

@@ -32,9 +32,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -100,7 +97,7 @@ export default Vue.extend({
     },
 
     getTrendingInfo () {
-      if (!this.usingElectron) {
+      if (!process.env.IS_ELECTRON) {
         this.getVideoInformationInvidious()
       } else {
         switch (this.backendPreference) {
@@ -145,7 +142,7 @@ export default Vue.extend({
             navigator.clipboard.writeText(err)
           }
         })
-        if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) {
+        if (!process.env.IS_ELECTRON || (this.backendPreference === 'local' && this.backendFallback)) {
           this.showToast({
             message: this.$t('Falling back to Invidious API')
           })
@@ -205,7 +202,7 @@ export default Vue.extend({
           }
         })
 
-        if (!this.usingElectron || (this.backendPreference === 'invidious' && this.backendFallback)) {
+        if (!process.env.IS_ELECTRON || (this.backendPreference === 'invidious' && this.backendFallback)) {
           this.showToast({
             message: this.$t('Falling back to Local API')
           })

src/renderer/views/Watch/Watch.js

@@ -88,9 +88,6 @@ export default Vue.extend({
     isDev: function () {
       return process.env.NODE_ENV === 'development'
     },
-    usingElectron: function () {
-      return this.$store.getters.getUsingElectron
-    },
     historyCache: function () {
       return this.$store.getters.getHistoryCache
     },
@@ -221,7 +218,7 @@ export default Vue.extend({
     this.checkIfPlaylist()
     this.checkIfTimestamp()
 
-    if (!this.usingElectron) {
+    if (!process.env.IS_ELECTRON) {
       this.getVideoInformationInvidious()
     } else {
       switch (this.backendPreference) {
@@ -591,7 +588,7 @@ export default Vue.extend({
             }
           })
           console.log(err)
-          if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback && !err.toString().includes('private'))) {
+          if (!process.env.IS_ELECTRON || (this.backendPreference === 'local' && this.backendFallback && !err.toString().includes('private'))) {
             this.showToast({
               message: this.$t('Falling back to Invidious API')
             })
@@ -897,7 +894,7 @@ export default Vue.extend({
             }
           })
           console.log(err)
-          if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) {
+          if (!process.env.IS_ELECTRON || (this.backendPreference === 'local' && this.backendFallback)) {
             this.showToast({
               message: this.$t('Falling back to Invidious API')
             })
@@ -1153,7 +1150,7 @@ export default Vue.extend({
     createInvidiousDashManifest: function () {
       let url = `${this.currentInvidiousInstance}/api/manifest/dash/id/${this.videoId}`
 
-      if (this.proxyVideos || !this.usingElectron) {
+      if (this.proxyVideos || !process.env.IS_ELECTRON) {
         url = url + '?local=true'
       }