Update to Webpack 5 and Electron 12

.github/workflows/build.yml

@@ -156,12 +156,12 @@ jobs:
         name: freetube_${{ steps.versionNumber.outputs.result }}_amd64.pacman
         path: build/freetube-${{ steps.versionNumber.outputs.result }}.pacman
 
-    - name: Upload Web Build
+    # - name: Upload Web Build
-      uses: actions/upload-artifact@v2
+      # uses: actions/upload-artifact@v2
-      if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
+      # if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.runtime, 'linux-x64')
-      with:
+      # with:
-        name: freetube_${{ steps.versionNumber.outputs.result }}_static_web
+        # name: freetube_${{ steps.versionNumber.outputs.result }}_static_web
-        path: dist/web
+        # path: dist/web
 
     - name: Upload Windows .exe Artifact
       uses: actions/upload-artifact@v2

_scripts/webpack.main.config.js

@@ -15,7 +15,7 @@ const whiteListedModules = []
 const config = {
   name: 'main',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
+  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
   entry: {
     main: path.join(__dirname, '../src/main/index.js'),
   },
@@ -24,18 +24,19 @@ const config = {
     rules: [
       {
         test: /\.(j|t)s$/,
-        loader: ['babel-loader'],
+        use: 'babel-loader',
         exclude: /node_modules/,
       },
       {
         test: /\.node$/,
-        use: 'node-loader',
+        loader: 'node-loader',
       },
     ],
   },
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,
+    global: isDevMode,
   },
   plugins: [
     new webpack.DefinePlugin({

_scripts/webpack.renderer.config.js

@@ -18,7 +18,7 @@ const whiteListedModules = ['vue']
 const config = {
   name: 'renderer',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
+  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
   entry: {
     renderer: path.join(__dirname, '../src/renderer/main.js'),
   },
@@ -37,7 +37,7 @@ const config = {
       },
       {
         test: /\.node$/,
-        use: 'node-loader',
+        loader: 'node-loader',
       },
       {
         test: /\.vue$/,
@@ -102,6 +102,7 @@ const config = {
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,
+    global: isDevMode,
   },
   plugins: [
     // new WriteFilePlugin(),

_scripts/webpack.workers.config.js

@@ -13,7 +13,7 @@ const isDevMode = process.env.NODE_ENV === 'development'
 const config = {
   name: 'workers',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
+  devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
   entry: {
     workerSample: path.join(__dirname, '../src/utilities/workerSample.ts'),
   },
@@ -32,13 +32,14 @@ const config = {
       },
       {
         test: /\.node$/,
-        use: 'node-loader',
+        loader: 'node-loader',
       },
     ],
   },
   node: {
     __dirname: isDevMode,
     __filename: isDevMode,
+    global: isDevMode,
   },
   plugins: [
     // new WriteFilePlugin(),

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/FreeTubeApp/FreeTube/issues"
   },
   "dependencies": {
+    "@electron/remote": "^1.0.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
@@ -15,11 +16,11 @@
     "@silvermine/videojs-quality-selector": "^1.2.4",
     "autolinker": "^3.14.2",
     "bulma-pro": "^0.2.0",
-    "dateformat": "^4.4.1",
+    "dateformat": "^4.5.1",
-    "electron-context-menu": "^2.4.0",
+    "electron-context-menu": "^2.5.0",
     "http-proxy-agent": "^4.0.1",
     "https-proxy-agent": "^5.0.0",
-    "jquery": "^3.5.1",
+    "jquery": "^3.6.0",
     "js-yaml": "^4.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
@@ -28,7 +29,7 @@
     "material-design-icons": "^3.0.1",
     "nedb": "^1.8.0",
     "opml-to-json": "1.0.1",
-    "rss-parser": "^3.10.0",
+    "rss-parser": "^3.12.0",
     "socks-proxy-agent": "^5.0.0",
     "video.js": "7.10.2",
     "videojs-abloop": "^1.2.0",
@@ -39,73 +40,73 @@
     "videojs-vtt-thumbnails-freetube": "0.0.15",
     "vue": "^2.6.12",
     "vue-electron": "^1.0.6",
-    "vue-i18n": "^8.22.4",
+    "vue-i18n": "^8.23.0",
     "vue-observe-visibility": "^1.0.0",
-    "vue-router": "^3.4.9",
+    "vue-router": "^3.5.1",
-    "vuex": "^3.6.0",
+    "vuex": "^3.6.2",
     "xml2json": "^0.12.0",
     "youtube-chat": "^1.1.0",
     "youtube-suggest": "^1.1.0",
     "yt-channel-info": "^1.2.2",
-    "yt-comment-scraper": "^3.0.0",
+    "yt-comment-scraper": "^3.0.1",
     "yt-dash-manifest-generator": "1.1.0",
     "yt-trending-scraper": "1.1.0",
     "yt-xml2vtt": "^1.2.0",
-    "ytdl-core": "^4.4.5",
+    "ytdl-core": "4.4.5",
     "ytpl": "^2.0.5",
-    "ytsr": "^3.2.4"
+    "ytsr": "^3.3.1"
   },
   "description": "A private YouTube client",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.13.8",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.13.9",
-    "@babel/preset-typescript": "^7.12.7",
+    "@babel/preset-typescript": "^7.13.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@typescript-eslint/parser": "^4.16.1",
-    "acorn": "^8.0.4",
+    "acorn": "^8.0.5",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "6.4.0",
+    "copy-webpack-plugin": "7.0.0",
-    "css-loader": "^5.0.1",
+    "css-loader": "^5.1.1",
     "devtron": "^1.4.0",
-    "electron": "11.1.1",
+    "electron": "12.0.0",
-    "electron-builder": "^22.9.1",
+    "electron-builder": "^22.10.5",
-    "electron-builder-squirrel-windows": "^22.10.4",
+    "electron-builder-squirrel-windows": "^22.10.5",
     "electron-debug": "^3.2.0",
-    "electron-rebuild": "^2.3.4",
+    "electron-rebuild": "^2.3.5",
-    "eslint": "^7.18.0",
+    "eslint": "^7.21.0",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^7.4.1",
+    "eslint-plugin-vue": "^7.7.0",
     "fast-glob": "^3.2.5",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.2.0",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.3.4",
+    "mini-css-extract-plugin": "^1.3.9",
-    "node-abi": "^2.19.3",
+    "node-abi": "^2.20.0",
     "node-loader": "^1.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
-    "sass": "^1.32.5",
+    "sass": "^1.32.8",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "tree-kill": "1.2.2",
-    "typescript": "^4.1.3",
+    "typescript": "^4.2.2",
     "url-loader": "^4.1.1",
     "vue-devtools": "^5.1.4",
-    "vue-eslint-parser": "^7.4.1",
+    "vue-eslint-parser": "^7.6.0",
     "vue-loader": "^15.9.6",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "4.44.2",
+    "webpack": "5.24.2",
-    "webpack-cli": "3.3.12",
+    "webpack-cli": "4.5.0",
     "webpack-dev-server": "^3.11.2"
   },
   "license": "AGPL-3.0-or-later",
@@ -133,11 +134,11 @@
     "jest:watch": "jest --watch",
     "lint-fix": "eslint --fix --ext .js,.ts,.vue ./",
     "lint": "eslint --ext .js,.ts,.vue ./",
-    "pack": "run-p pack:main pack:renderer pack:web pack:workers",
+    "pack": "run-p pack:main pack:renderer pack:workers",
-    "pack:main": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.main.config.js",
+    "pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
-    "pack:renderer": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.renderer.config.js",
+    "pack:renderer": "webpack --mode=production --node-env=production --config _scripts/webpack.renderer.config.js",
-    "pack:web": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.web.config.js",
+    "pack:web": "webpack --mode=production --node-env=production --config _scripts/webpack.web.config.js",
-    "pack:workers": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.workers.config.js",
+    "pack:workers": "webpack --mode=production --node-env=production --config _scripts/webpack.workers.config.js",
     "postinstall": "electron-rebuild",
     "prettier": "prettier --write \"{src,_scripts}/**/*.{js,ts,vue}\"",
     "rebuild:electron": "run-s electron-builder-install electron-rebuild",

src/main/index.js

@@ -2,6 +2,8 @@ import { app, BrowserWindow, Menu, ipcMain, screen } from 'electron'
 import { productName } from '../../package.json'
 import Datastore from 'nedb'
 
+require('@electron/remote/main').initialize()
+
 require('electron-context-menu')({
   showSearchWithGoogle: false,
   showSaveImageAs: true,
@@ -32,6 +34,8 @@ let startupUrl
 // This line can possible be removed if the issue is fixed upstream
 app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')
 
+app.commandLine.appendSwitch('enable-accelerated-video')
+
 // See: https://stackoverflow.com/questions/45570589/electron-protocol-handler-not-working-on-windows
 // remove so we can register each time as we run the app.
 app.removeAsDefaultProtocolClient('freetube')
@@ -226,7 +230,8 @@ function createWindow (useProxy = false, proxyUrl = '') {
       nodeIntegrationInWorker: false,
       webSecurity: false,
       backgroundThrottling: false,
-      enableRemoteModule: true
+      enableRemoteModule: true,
+      contextIsolation: false
     },
     show: false
   })

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

@@ -6,11 +6,11 @@ import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 
-import { remote } from 'electron'
 import fs from 'fs'
 import { opmlToJSON } from 'opml-to-json'
 import ytch from 'yt-channel-info'
 
+const remote = require('@electron/remote')
 const app = remote.app
 const dialog = remote.dialog
 

src/renderer/store/modules/history.js

@@ -11,8 +11,8 @@ if (window && window.process && window.process.type === 'renderer') {
     dbLocation = electron.remote.app.getPath('userData')
   } */
 
-  const electron = require('electron')
+  const remote = require('@electron/remote')
-  dbLocation = electron.remote.app.getPath('userData')
+  dbLocation = remote.app.getPath('userData')
 
   dbLocation = dbLocation + '/history.db'
 } else {

src/renderer/store/modules/playlist.js

@@ -13,8 +13,8 @@ if (window && window.process && window.process.type === 'renderer') {
   //
   // dbLocation += '/playlists.db'
 
-  const electron = require('electron')
+  const remote = require('@electron/remote')
-  dbLocation = electron.remote.app.getPath('userData')
+  dbLocation = remote.app.getPath('userData')
 
   dbLocation = dbLocation + '/playlists.db'
 } else {

src/renderer/store/modules/profile.js

@@ -11,8 +11,8 @@ if (window && window.process && window.process.type === 'renderer') {
     dbLocation = electron.remote.app.getPath('userData')
   } */
 
-  const electron = require('electron')
+  const remote = require('@electron/remote')
-  dbLocation = electron.remote.app.getPath('userData')
+  dbLocation = remote.app.getPath('userData')
 
   dbLocation = dbLocation + '/profiles.db'
 } else {

src/renderer/store/modules/settings.js

@@ -15,7 +15,8 @@ if (window && window.process && window.process.type === 'renderer') {
 
   electron = require('electron')
   webframe = electron.webFrame
-  dbLocation = electron.remote.app.getPath('userData')
+  const remote = require('@electron/remote')
+  dbLocation = remote.app.getPath('userData')
 
   dbLocation = dbLocation + '/settings.db'
 } else {

src/renderer/views/Watch/Watch.js

@@ -3,7 +3,6 @@ import { mapActions } from 'vuex'
 import xml2vtt from 'yt-xml2vtt'
 import $ from 'jquery'
 import fs from 'fs'
-import electron from 'electron'
 import ytDashGen from 'yt-dash-manifest-generator'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
@@ -16,6 +15,8 @@ import WatchVideoLiveChat from '../../components/watch-video-live-chat/watch-vid
 import WatchVideoPlaylist from '../../components/watch-video-playlist/watch-video-playlist.vue'
 import WatchVideoRecommendations from '../../components/watch-video-recommendations/watch-video-recommendations.vue'
 
+const remote = require('@electron/remote')
+
 export default Vue.extend({
   name: 'Watch',
   components: {
@@ -911,7 +912,7 @@ export default Vue.extend({
 
     createLocalDashManifest: function (formats) {
       const xmlData = ytDashGen.generate_dash_file_from_formats(formats, this.videoLengthSeconds)
-      const userData = electron.remote.app.getPath('userData')
+      const userData = remote.app.getPath('userData')
       let fileLocation
       let uriSchema
       if (this.isDev) {
@@ -982,7 +983,7 @@ export default Vue.extend({
       })
       // TODO: MAKE A VARIABLE WHICH CAN CHOOSE BETWEEN STROYBOARD ARRAY ELEMENTS
       this.buildVTTFileLocally(storyboardArray[1]).then((results) => {
-        const userData = electron.remote.app.getPath('userData')
+        const userData = remote.app.getPath('userData')
         let fileLocation
         let uriSchema