Fix some web build errors (#3687)

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

@@ -8,7 +8,6 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtInput from '../ft-input/ft-input.vue'
 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'
@@ -61,6 +60,10 @@ export default defineComponent({
     }
   },
   computed: {
+    usingElectron: function () {
+      return process.env.IS_ELECTRON
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -226,7 +229,11 @@ export default defineComponent({
     },
 
     getScreenshotEmptyFolderPlaceholder: async function() {
-      return path.join(await getPicturesPath(), 'Freetube')
+      if (process.env.IS_ELECTRON) {
+        return path.join(await getPicturesPath(), 'Freetube')
+      } else {
+        return ''
+      }
     },
 
     getScreenshotFolderPlaceholder: function() {
@@ -234,21 +241,26 @@ export default defineComponent({
         this.screenshotFolderPlaceholder = this.screenshotFolder
         return
       }
-      this.getScreenshotEmptyFolderPlaceholder().then((res) => {
-        this.screenshotFolderPlaceholder = res
-      })
+      if (process.env.IS_ELECTRON) {
+        this.getScreenshotEmptyFolderPlaceholder().then((res) => {
+          this.screenshotFolderPlaceholder = res
+        })
+      }
     },
 
     chooseScreenshotFolder: async function() {
       // only use with electron
-      const folder = await ipcRenderer.invoke(
-        IpcChannels.SHOW_OPEN_DIALOG,
-        { properties: ['openDirectory'] }
-      )
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        const folder = await ipcRenderer.invoke(
+          IpcChannels.SHOW_OPEN_DIALOG,
+          { properties: ['openDirectory'] }
+        )
 
-      if (!folder.canceled) {
-        await this.updateScreenshotFolderPath(folder.filePaths[0])
-        this.getScreenshotFolderPlaceholder()
+        if (!folder.canceled) {
+          await this.updateScreenshotFolderPath(folder.filePaths[0])
+          this.getScreenshotFolderPlaceholder()
+        }
       }
     },
 

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

@@ -169,14 +169,16 @@
       />
     </ft-flex-box>
     <br>
-    <ft-flex-box>
+    <ft-flex-box
+      v-if="usingElectron"
+    >
       <ft-toggle-switch
         :label="$t('Settings.Player Settings.Screenshot.Enable')"
         :default-value="enableScreenshot"
         @change="updateEnableScreenshot"
       />
     </ft-flex-box>
-    <div v-if="enableScreenshot">
+    <div v-if="usingElectron && enableScreenshot">
       <ft-flex-box>
         <ft-select
           :placeholder="$t('Settings.Player Settings.Screenshot.Format Label')"
@@ -204,7 +206,7 @@
         />
       </ft-flex-box>
       <ft-flex-box
-        v-if="!screenshotAskPath"
+        v-if="usingElectron && !screenshotAskPath"
         class="screenshotFolderContainer"
       >
         <p class="screenshotFolderLabel">
@@ -223,7 +225,10 @@
           @click="chooseScreenshotFolder"
         />
       </ft-flex-box>
-      <ft-flex-box class="screenshotFolderContainer">
+      <ft-flex-box
+        v-if="usingElectron"
+        class="screenshotFolderContainer"
+      >
         <p class="screenshotFilenamePatternTitle">
           {{ $t('Settings.Player Settings.Screenshot.File Name Label') }}
           <ft-tooltip

src/renderer/store/modules/invidious.js

@@ -1,5 +1,6 @@
 import fs from 'fs/promises'
 import { pathExists } from '../../helpers/filesystem'
+import { createWebURL } from '../../helpers/utils'
 
 const state = {
   currentInvidiousInstance: '',
@@ -41,9 +42,10 @@ const actions = {
       const fileName = 'invidious-instances.json'
       /* eslint-disable-next-line n/no-path-concat */
       const fileLocation = process.env.NODE_ENV === 'development' ? './static/' : `${__dirname}/static/`
-      if (await pathExists(`${fileLocation}${fileName}`)) {
+      const filePath = `${fileLocation}${fileName}`
+      if (!process.env.IS_ELECTRON || await pathExists(filePath)) {
         console.warn('reading static file for invidious instances')
-        const fileData = await fs.readFile(`${fileLocation}${fileName}`)
+        const fileData = process.env.IS_ELECTRON ? JSON.parse(await fs.readFile(filePath)) : await (await fetch(createWebURL(filePath))).text()
         instances = JSON.parse(fileData).filter(e => {
           return process.env.IS_ELECTRON || e.cors
         }).map(e => {

src/renderer/store/modules/settings.js

@@ -163,8 +163,8 @@ const defaultSideEffectsTriggerId = settingId =>
 const state = {
   autoplayPlaylists: true,
   autoplayVideos: true,
-  backendFallback: true,
-  backendPreference: 'local',
+  backendFallback: process.env.IS_ELECTRON,
+  backendPreference: !process.env.IS_ELECTRON ? 'invidious' : 'local',
   barColor: false,
   checkForBlogPosts: true,
   checkForUpdates: true,
@@ -225,7 +225,7 @@ const state = {
   proxyHostname: '127.0.0.1',
   proxyPort: '9050',
   proxyProtocol: 'socks5',
-  proxyVideos: false,
+  proxyVideos: !process.env.IS_ELECTRON,
   region: 'US',
   rememberHistory: true,
   removeVideoMetaFiles: true,

static/pwabuilder-sw.js

@@ -53,10 +53,6 @@ self.addEventListener('install', function (event) {
       console.log('[PWA Builder] Caching pages during install')
 
       return cache.addAll(precacheFiles).then(function () {
-        if (offlineFallbackPage === 'ToDo-replace-this-name.html') {
-          return cache.add(new Response('TODO: Update the value of the offlineFallbackPage constant in the serviceworker.'))
-        }
-
         return cache.add(offlineFallbackPage)
       })
     })