Fix web build script and fix errors when running web version

_scripts/webpack.web.config.js

@@ -53,6 +53,16 @@ const config = {
           {
             loader: 'css-loader',
           },
+          {
+            loader: 'sass-loader',
+            options: {
+              // eslint-disable-next-line
+              implementation: require('sass'),
+              sassOptions: {
+                indentedSyntax: true
+              }
+            }
+          },
         ],
       },
       {

src/index.ejs

@@ -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) {
+    if ("serviceWorker" in navigator && (window && window.process && window.process.type !== 'renderer')) {
       if (navigator.serviceWorker.controller) {
         console.log("[PWA Builder] active service worker found, no need to register");
       } else {

src/renderer/App.js

@@ -27,6 +27,7 @@ export default Vue.extend({
   },
   mounted: function () {
     this.$store.dispatch('grabUserSettings')
+    this.$store.commit('setUsingElectron', useElectron)
 
     let baseTheme = localStorage.getItem('baseTheme')
     let mainColor = localStorage.getItem('mainColor')

src/renderer/store/modules/settings.js

@@ -1,10 +1,23 @@
-import electron from 'electron'
 import Datastore from 'nedb'
-// TODO: Add logic for database when electron is not in use
-const localDataStorage = electron.remote.app.getPath('userData')
+
+let dbLocation
+
+if (window && window.process && window.process.type === 'renderer') {
+  // Electron is being used
+  let dbLocation = localStorage.getItem('dbLocation')
+
+  if (dbLocation === null) {
+    const electron = require('electron')
+    dbLocation = electron.remote.app.getPath('userData')
+  }
+
+  dbLocation += '/settings.db'
+} else {
+  dbLocation = 'settings.db'
+}
 
 const settingsDb = new Datastore({
-  filename: localDataStorage + '/settings.db',
+  filename: dbLocation,
   autoload: true
 })
 
@@ -35,6 +48,7 @@ const state = {
   debugMode: false,
   disctractionFreeMode: false,
   hideWatchedSubs: false,
+  usingElectron: true,
   profileList: [{ name: 'All Channels', color: '#304FFE' }],
   defaultProfile: 'All Channels'
 }
@@ -118,6 +132,10 @@ const getters = {
 
   getDefaultQuality: () => {
     return state.defaultQuality
+  },
+
+  getUsingElectron: () => {
+    return state.usingElectron
   }
 }
 
@@ -430,6 +448,9 @@ const mutations = {
   setHideWatchedSubs (state, hideWatchedSubs) {
     state.hideWatchedSubs = hideWatchedSubs
   },
+  setUsingElectron (state, usingElectron) {
+    state.usingElectron = usingElectron
+  },
   setVideoView (state, videoView) {
     state.videoView = videoView
   },

src/renderer/store/modules/subscriptions.js

@@ -1,10 +1,23 @@
-import electron from 'electron'
 import Datastore from 'nedb'
-// TODO: Add logic for database when electron is not in use
-const localDataStorage = electron.remote.app.getPath('userData')
+
+let dbLocation
+
+if (window && window.process && window.process.type === 'renderer') {
+  // Electron is being used
+  let dbLocation = localStorage.getItem('dbLocation')
+
+  if (dbLocation === null) {
+    const electron = require('electron')
+    dbLocation = electron.remote.app.getPath('userData')
+  }
+
+  dbLocation += '/subscriptions.db'
+} else {
+  dbLocation = 'subscriptions.db'
+}
 
 const subDb = new Datastore({
-  filename: localDataStorage + '/subscriptions.db',
+  filename: dbLocation,
   autoload: true
 })
 

src/renderer/views/Watch/Watch.js

@@ -52,6 +52,10 @@ export default Vue.extend({
     }
   },
   computed: {
+    usingElectron: function () {
+      return this.$store.getters.getUsingElectron
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -76,18 +80,14 @@ export default Vue.extend({
       return this.$store.getters.getForceLocalBackendForLegacy
     },
 
-    videoDashUrl: function () {
-      return `${this.invidiousInstance}/api/manifest/dash/id/${this.videoId}.mpd`
-    },
-
     youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
     },
 
     dashSrc: function () {
-      let url = `${this.invidiousInstance}/api/manifest/dash/${this.videoId}.mpd`
+      let url = `${this.invidiousInstance}/api/manifest/dash/id/${this.videoId}.mpd`
 
-      if (this.proxyVideos) {
+      if (this.proxyVideos || !this.usingElectron) {
         url = url + '?local=true'
       }
 
@@ -127,6 +127,9 @@ export default Vue.extend({
 
     this.activeFormat = this.defaultVideoFormat
 
+    if (!this.usingElectron) {
+      this.getVideoInformationInvidious()
+    } else {
       switch (this.backendPreference) {
         case 'local':
           this.getVideoInformationLocal()
@@ -135,6 +138,7 @@ export default Vue.extend({
           this.getVideoInformationInvidious()
           break
       }
+    }
   },
   methods: {
     toggleTheatreMode: function() {
@@ -202,8 +206,9 @@ export default Vue.extend({
           this.isLoading = false
         })
         .catch(err => {
+          console.log('Error grabbing video data through local API')
           console.log(err)
-          if (this.backendPreference === 'local' && this.backendFallback) {
+          if (!this.usingElectron || (this.backendPreference === 'local' && this.backendFallback)) {
             console.log(
               'Error getting data with local backend, falling back to Invidious'
             )