Start on Mobile view and add Web Build option

_scripts/build.js

@@ -20,11 +20,11 @@ const config = {
   copyright: 'Copyleft ©2020 freetubeapp@protonmail.com',
   // asar: false,
   // compression: 'store',
-  // productName,
+  productName,
   directories: {
     output: './build/',
   },
-  files: ['_icons/icon.*', './dist/**/*'],
+  files: ['_icons/icon.*', './dist/**/*', '!./dist/web/**/*'],
   dmg: {
     contents: [
       {

_scripts/webpack.main.config.js

@@ -15,7 +15,7 @@ const whiteListedModules = []
 const config = {
   name: 'main',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? 'eval' : false,
+  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
   entry: {
     main: path.join(__dirname, '../src/main/index.js'),
   },
@@ -57,7 +57,13 @@ const config = {
   target: 'electron-main',
 }
 
-if (!isDevMode) {
+if (isDevMode) {
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
+    })
+  )
+} else {
   config.plugins.push(
     new CopyWebpackPlugin([
       {
@@ -67,8 +73,12 @@ if (!isDevMode) {
       {
         from: path.join(__dirname, '../static'),
         to: path.join(__dirname, '../dist/static'),
+        ignore: ['.*'],
       },
-    ])
+    ]),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    })
   )
 }
 

_scripts/webpack.renderer.config.js

@@ -18,7 +18,7 @@ const whiteListedModules = ['vue']
 const config = {
   name: 'renderer',
   mode: process.env.NODE_ENV,
-  devtool: isDevMode ? 'eval' : false,
+  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
   entry: {
     renderer: path.join(__dirname, '../src/renderer/main.js'),
   },
@@ -42,21 +42,10 @@ const config = {
       {
         test: /\.vue$/,
         loader: 'vue-loader',
-        // use: {
-        //   loader: 'vue-loader',
-        //   options: {
-        //     loaders: {
-        //       sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
-        //     },
-        //   },
-        // },
       },
       {
         test: /\.s(c|a)ss$/,
         use: [
-          // {
-          //   loader: 'vue-style-loader',
-          // },
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
@@ -84,7 +73,6 @@ const config = {
               hmr: isDevMode,
             },
           },
-          // 'style-loader',
           'css-loader',
         ],
       },
@@ -92,7 +80,8 @@ const config = {
         test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
         use: {
           loader: 'url-loader',
-          query: {
+          options: {
+            esModule: false,
             limit: 10000,
             name: 'imgs/[name]--[folder].[ext]',
           },
@@ -102,7 +91,8 @@ const config = {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         use: {
           loader: 'url-loader',
-          query: {
+          options: {
+            esModule: false,
             limit: 10000,
             name: 'fonts/[name]--[folder].[ext]',
           },
@@ -150,15 +140,24 @@ const config = {
  */
 if (isDevMode) {
   // any dev only config
-  config.plugins.push(new webpack.HotModuleReplacementPlugin())
+  config.plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
+    })
+  )
 } else {
   config.plugins.push(
     new CopyWebpackPlugin([
       {
         from: path.join(__dirname, '../static'),
         to: path.join(__dirname, '../dist/static'),
+        ignore: ['.*'],
       },
-    ])
+    ]),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    })
   )
 }
 

_scripts/webpack.web.config.js

@@ -0,0 +1,165 @@
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const { productName } = require('../package.json')
+
+const isDevMode = process.env.NODE_ENV === 'development'
+
+const config = {
+  name: 'web',
+  mode: process.env.NODE_ENV,
+  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
+  entry: {
+    web: path.join(__dirname, '../src/renderer/main.js'),
+  },
+  output: {
+    path: path.join(__dirname, '../dist/web'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(j|t)s$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            extractCSS: true,
+            loaders: {
+              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
+              scss: 'vue-style-loader!css-loader!sass-loader',
+              less: 'vue-style-loader!css-loader!less-loader',
+            },
+          },
+        },
+      },
+      {
+        test: /\.s(c|a)ss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: isDevMode,
+            },
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              hmr: isDevMode,
+            },
+          },
+          'css-loader',
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: 'vue-html-loader',
+      },
+      {
+        test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            esModule: false,
+            limit: 10000,
+            name: 'imgs/[name]--[folder].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            esModule: false,
+            limit: 10000,
+            name: 'fonts/[name]--[folder].[ext]',
+          },
+        },
+      },
+    ],
+  },
+  node: {
+    __dirname: isDevMode,
+    __filename: isDevMode,
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  },
+  plugins: [
+    // new WriteFilePlugin(),
+    new HtmlWebpackPlugin({
+      excludeChunks: ['processTaskWorker'],
+      filename: 'index.html',
+      template: path.resolve(__dirname, '../src/index.ejs'),
+      nodeModules: false,
+    }),
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.PRODUCT_NAME': JSON.stringify(productName),
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../src/renderer'),
+      vue$: 'vue/dist/vue.esm.js',
+      src: path.join(__dirname, '../src/'),
+      icons: path.join(__dirname, '../_icons/'),
+    },
+    extensions: ['.js', '.vue', '.json', '.css'],
+  },
+  target: 'web',
+}
+
+/**
+ * Adjust web for production settings
+ */
+if (isDevMode) {
+  // any dev only config
+  config.plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
+    })
+  )
+} else {
+  config.plugins.push(
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../static'),
+        to: path.join(__dirname, '../dist/web/static'),
+        ignore: ['.*'],
+      },
+      {
+        from: path.join(__dirname, '../__icons'),
+        to: path.join(__dirname, '../dist/web/icons'),
+        ignore: ['.*'],
+      },
+    ]),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    })
+  )
+}
+
+module.exports = config

_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 ? 'eval' : false,
+  devtool: isDevMode ? '#cheap-module-eval-source-map' : false,
   entry: {
     workerSample: path.join(__dirname, '../src/utilities/workerSample.ts'),
   },
@@ -62,6 +62,12 @@ const config = {
 if (isDevMode) {
   // any dev only config
   config.plugins.push(new webpack.HotModuleReplacementPlugin())
+} else {
+  config.plugins.push(
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    })
+  )
 }
 
 module.exports = config

package-lock.json

@@ -2511,9 +2511,9 @@
       }
     },
     "@electron/get": {
-      "version": "1.8.0",
+      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.9.0.tgz",
-      "integrity": "sha512-p9q2KNfN12lhLzcSJwjOKbHHZcPCP+DMHXWLE/nFzJfyFDiPFAvOgLdKwz8WvGfzn2Y8YtYk1BhqvaNRow78ag==",
+      "integrity": "sha512-OBIKtF6ttIJotDXe4KJMUyTBO4xMii+mFjlA8R4CORuD4HvCUaCK3lPjhdTRCvuEv6gzWNbAvd9DNBv0v780lw==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -2522,6 +2522,7 @@
         "global-agent": "^2.0.2",
         "global-tunnel-ng": "^2.7.1",
         "got": "^9.6.0",
+        "progress": "^2.0.3",
         "sanitize-filename": "^1.6.2",
         "sumchecker": "^3.0.1"
       },
@@ -3459,12 +3460,12 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.22.0",
+      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.22.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.24.0.tgz",
-      "integrity": "sha512-BvxRLaTDVQ3N+Qq8BivLiE9akQLAOUfxNHIEhedOcg8B2+jY8Rc4/D+iVprvuMX1AdezFYautuGDwr9QxqSxBQ==",
+      "integrity": "sha512-wJRBeaMeT7RLQ27UQkDFOu25MqFOBus8PtOa9KaT5ZuxC1kAsd7JEHqWt4YXuY9eancX0GK9C68i5OROnlIzBA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.22.0",
+        "@typescript-eslint/experimental-utils": "2.24.0",
         "eslint-utils": "^1.4.3",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
@@ -3480,32 +3481,32 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.22.0",
+      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.22.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.24.0.tgz",
-      "integrity": "sha512-sJt1GYBe6yC0dWOQzXlp+tiuGglNhJC9eXZeC8GBVH98Zv9jtatccuhz0OF5kC/DwChqsNfghHx7OlIDQjNYAQ==",
+      "integrity": "sha512-DXrwuXTdVh3ycNCMYmWhUzn/gfqu9N0VzNnahjiDJvcyhfBy4gb59ncVZVxdp5XzBC77dCncu0daQgOkbvPwBw==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.22.0",
+        "@typescript-eslint/typescript-estree": "2.24.0",
         "eslint-scope": "^5.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.22.0",
+      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.22.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.24.0.tgz",
-      "integrity": "sha512-FaZKC1X+nvD7qMPqKFUYHz3H0TAioSVFGvG29f796Nc5tBluoqfHgLbSFKsh7mKjRoeTm8J9WX2Wo9EyZWjG7w==",
+      "integrity": "sha512-H2Y7uacwSSg8IbVxdYExSI3T7uM1DzmOn2COGtCahCC3g8YtM1xYAPi2MAHyfPs61VKxP/J/UiSctcRgw4G8aw==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.22.0",
+        "@typescript-eslint/experimental-utils": "2.24.0",
-        "@typescript-eslint/typescript-estree": "2.22.0",
+        "@typescript-eslint/typescript-estree": "2.24.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.22.0",
+      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.22.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.24.0.tgz",
-      "integrity": "sha512-2HFZW2FQc4MhIBB8WhDm9lVFaBDy6h9jGrJ4V2Uzxe/ON29HCHBTj3GkgcsgMWfsl2U5as+pTOr30Nibaw7qRQ==",
+      "integrity": "sha512-RJ0yMe5owMSix55qX7Mi9V6z2FDuuDpN6eR5fzRJrp+8in9UF41IGNQHbg5aMK4/PjVaEQksLvz0IA8n+Mr/FA==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -3600,11 +3601,27 @@
         "vue-template-es2015-compiler": "^1.9.0"
       },
       "dependencies": {
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+          "dev": true
         }
       }
     },
@@ -3979,27 +3996,27 @@
       }
     },
     "app-builder-bin": {
-      "version": "3.5.4",
+      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.5.5.tgz",
-      "integrity": "sha512-Bta3I+OU64ePwvSdhpYyCj11XcR8VGdlPSINM87LPg0apCbprLu03zvnmnHRw/RvZB2RGAQ93Z8NO3JT3DbXdA==",
+      "integrity": "sha512-ZcHzJ9Xl+azPqdKzXZKdRZmkNmbxHHZyl4cbobNf8qMQpoPChpcov8riVrZSbu/0cT/JqJ8LOwJjy1OAwbChaQ==",
       "dev": true
     },
     "app-builder-lib": {
-      "version": "22.3.6",
+      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-22.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-22.4.1.tgz",
-      "integrity": "sha512-9TANMAFL7cFNuRB3cMc1BS5dBQzqY5RVEUD4VMZ0MYhFY/DM9+v2BvfY3Ef+7XSOzirA6p4TljAVz5ydIEdZFw==",
+      "integrity": "sha512-epwUzIM+2pcdy/If9koTP74CKx4v7xGPj75a2Z5cM4rrGN9yVZ3eDUBbfF0e0qE4Qmcv5pd0BAZJ26bGm8NWsQ==",
       "dev": true,
       "requires": {
         "7zip-bin": "~5.0.3",
         "@develar/schema-utils": "~2.1.0",
         "async-exit-hook": "^2.0.1",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "22.3.6",
+        "builder-util": "22.4.1",
-        "builder-util-runtime": "8.6.1",
+        "builder-util-runtime": "8.6.2",
         "chromium-pickle-js": "^0.2.0",
         "debug": "^4.1.1",
         "ejs": "^3.0.1",
-        "electron-publish": "22.3.6",
+        "electron-publish": "22.4.1",
         "fs-extra": "^8.1.0",
         "hosted-git-info": "^3.0.4",
         "is-ci": "^2.0.0",
@@ -5155,17 +5172,17 @@
       "dev": true
     },
     "builder-util": {
-      "version": "22.3.6",
+      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-22.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-22.4.1.tgz",
-      "integrity": "sha512-1fMRRouGzggUcPcy/ZR2NV8KZejwXPYNRD4vr/Ws/KvGQFNMTHA9VFscT7tGfOseQCLaLsa5C2gU5MOAiFx7AA==",
+      "integrity": "sha512-+ysLc7cC4w6P7rBxmZ5X2aU3QvcwFoWCl1us+mcUKdsGmJAtFUMPJqueeptdxjyPrPShIUOKHzA8uk5A3d1fHg==",
       "dev": true,
       "requires": {
         "7zip-bin": "~5.0.3",
         "@types/debug": "^4.1.5",
         "@types/fs-extra": "^8.1.0",
-        "app-builder-bin": "3.5.4",
+        "app-builder-bin": "3.5.5",
         "bluebird-lst": "^1.0.9",
-        "builder-util-runtime": "8.6.1",
+        "builder-util-runtime": "8.6.2",
         "chalk": "^3.0.0",
         "debug": "^4.1.1",
         "fs-extra": "^8.1.0",
@@ -5244,9 +5261,9 @@
       }
     },
     "builder-util-runtime": {
-      "version": "8.6.1",
+      "version": "8.6.2",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.6.2.tgz",
-      "integrity": "sha512-gwIUtMaICmc+e2EC3u3byXcwCyfhtG40LJRNnGfs8AYqacKl4ZLP50ab+uDttn7QAXe0LfMAuKz9v8bCODV0yg==",
+      "integrity": "sha512-9QnIBISfhgQ2BxtRLidVqf/v5HD73vSKZDllpUmGd2L6VORGQk7cZAPmPtw4HQM3gPBelyVJ5yIjMNZ8xjmd1A==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -6816,14 +6833,14 @@
       }
     },
     "dmg-builder": {
-      "version": "22.3.6",
+      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-22.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-22.4.1.tgz",
-      "integrity": "sha512-pUrvvzkSZfaCIXofqNH+YJ0ajgi4DDe/ZjMiL/T1yKrRXK3v7sfmnbSzHY8V/WtimSgzsK1izFg/SBsfwFsZWw==",
+      "integrity": "sha512-hEemh7n0zoVt7zPPwvn7iOttP03oENjJ4ApttPmt8oDnX8T4q42MjGWyDlLkPMplMJfoTxkkNqmm296f0OYM8Q==",
       "dev": true,
       "requires": {
-        "app-builder-lib": "~22.3.6",
+        "app-builder-lib": "~22.4.1",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "~22.3.6",
+        "builder-util": "~22.4.1",
         "fs-extra": "^8.1.0",
         "iconv-lite": "^0.5.1",
         "js-yaml": "^3.13.1",
@@ -7029,9 +7046,9 @@
       "dev": true
     },
     "electron": {
-      "version": "8.0.3",
+      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-8.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-8.1.1.tgz",
-      "integrity": "sha512-lr/tTr9cBzocREmL8r/P3WKnGqpKeaMFZjNVXDGd3npxwnJVUd7SHQW7LZIhZ1W2XoU3uBwTYbyH43iCIElsqw==",
+      "integrity": "sha512-t+5zzFo7VOgckJc9YpImHJkpqeWxwpmEjywWbAa4IT5MULS7h1XU52H9gMswK/y8xc5lBNwxLhJSty/15+gi1A==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -7040,18 +7057,18 @@
       }
     },
     "electron-builder": {
-      "version": "22.3.6",
+      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-22.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-22.4.1.tgz",
-      "integrity": "sha512-W1fMEtAT7WOqetwTR2uCesMIqmnr8DHR9ZKYlHMxGxQt0jGaBX/gQHPf6+R8d2SQq2Bup6e1eE0xoeX3ixCfTw==",
+      "integrity": "sha512-13CjZcGeJS+c3EKRwFT/Oty5Niif5g1FwDioBLEbjkPCPQgxdtDsr+rJtCu9qxkiKDYpAoPS+t/clNk0efONvQ==",
       "dev": true,
       "requires": {
         "@types/yargs": "^15.0.4",
-        "app-builder-lib": "22.3.6",
+        "app-builder-lib": "22.4.1",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "22.3.6",
+        "builder-util": "22.4.1",
-        "builder-util-runtime": "8.6.1",
+        "builder-util-runtime": "8.6.2",
         "chalk": "^3.0.0",
-        "dmg-builder": "22.3.6",
+        "dmg-builder": "22.4.1",
         "fs-extra": "^8.1.0",
         "is-ci": "^2.0.0",
         "lazy-val": "^1.0.4",
@@ -7167,15 +7184,15 @@
       }
     },
     "electron-publish": {
-      "version": "22.3.6",
+      "version": "22.4.1",
-      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-22.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-22.4.1.tgz",
-      "integrity": "sha512-u4PW4ec4rPcdFUVMvL5OrqoYX8WLJHab8DtPkh/oZ2HPzGGX3eWnUvulIIJ4SUnesSYkbUcZd1RDYtfV52Q72w==",
+      "integrity": "sha512-nwKNum3KXm+01rtWX2pc1jhazdzDy2zYnQx+zmXphZchjd6UOMX3ZN0xyZUCKugw5ZliflT6LkgbrcBXBtYD3A==",
       "dev": true,
       "requires": {
         "@types/fs-extra": "^8.1.0",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "~22.3.6",
+        "builder-util": "~22.4.1",
-        "builder-util-runtime": "8.6.1",
+        "builder-util-runtime": "8.6.2",
         "chalk": "^3.0.0",
         "fs-extra": "^8.1.0",
         "lazy-val": "^1.0.4",
@@ -7235,9 +7252,9 @@
       }
     },
     "electron-rebuild": {
-      "version": "1.10.0",
+      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/electron-rebuild/-/electron-rebuild-1.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron-rebuild/-/electron-rebuild-1.10.1.tgz",
-      "integrity": "sha512-n10i30GJg7JH8yZL3ZY3x80YtKmSYuuN8cl+3Feljm+sQDU4rUW1jbnYGu0eUHlK3kPOiNWPtW7srGcwZ9p1zQ==",
+      "integrity": "sha512-KSqp0Xiu7CCvKL2aEdPp/vNe2Rr11vaO8eM/wq9gQJTY02UjtAJ3l7WLV7Mf8oR+UJReJO8SWOWs/FozqK8ggA==",
       "dev": true,
       "requires": {
         "colors": "^1.3.3",
@@ -7315,9 +7332,9 @@
           }
         },
         "yargs": {
-          "version": "14.2.2",
+          "version": "14.2.3",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.2.tgz",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-          "integrity": "sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
@@ -7330,13 +7347,13 @@
             "string-width": "^3.0.0",
             "which-module": "^2.0.0",
             "y18n": "^4.0.0",
-            "yargs-parser": "^15.0.0"
+            "yargs-parser": "^15.0.1"
           }
         },
         "yargs-parser": {
-          "version": "15.0.0",
+          "version": "15.0.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.1.tgz",
-          "integrity": "sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==",
+          "integrity": "sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -7857,9 +7874,9 @@
       "dev": true
     },
     "eslint-plugin-vue": {
-      "version": "6.2.1",
+      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
-      "integrity": "sha512-MiIDOotoWseIfLIfGeDzF6sDvHkVvGd2JgkvjyHtN3q4RoxdAXrAMuI3SXTOKatljgacKwpNAYShmcKZa4yZzw==",
+      "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
       "dev": true,
       "requires": {
         "natural-compare": "^1.4.0",
@@ -8469,13 +8486,13 @@
       }
     },
     "file-loader": {
-      "version": "5.1.0",
+      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
-      "integrity": "sha512-u/VkLGskw3Ue59nyOwUwXI/6nuBCo7KBkniB/l7ICwr/7cPNGsL1WCXUp3GB0qgOOKU1TiP49bv4DZF/LJqprg==",
+      "integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
       "dev": true,
       "requires": {
-        "loader-utils": "^1.4.0",
+        "loader-utils": "^2.0.0",
-        "schema-utils": "^2.5.0"
+        "schema-utils": "^2.6.5"
       },
       "dependencies": {
         "ajv": {
@@ -8515,38 +8532,38 @@
           "dev": true
         },
         "json5": {
-          "version": "1.0.1",
+          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.2.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha512-MoUOQ4WdiN3yxhm7NEVJSJrieAo5hNSLQ5sj05OTRHPL9HOBy8u4Bu88jsC1jvqAdN+E1bJmsUcZH+1HQxliqQ==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.0"
+            "minimist": "^1.2.5"
           }
         },
         "loader-utils": {
-          "version": "1.4.0",
+          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
+            "json5": "^2.1.2"
           }
         },
         "minimist": {
-          "version": "1.2.0",
+          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         },
         "schema-utils": {
-          "version": "2.6.4",
+          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
-          "integrity": "sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
           "dev": true,
           "requires": {
-            "ajv": "^6.10.2",
+            "ajv": "^6.12.0",
             "ajv-keywords": "^3.4.1"
           }
         }
@@ -8959,7 +8976,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9076,7 +9094,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9118,6 +9137,7 @@
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9136,6 +9156,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9229,6 +9250,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9314,7 +9336,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9350,6 +9373,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9413,12 +9437,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9870,17 +9896,6 @@
       "dev": true,
       "requires": {
         "lru-cache": "^5.1.1"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        }
       }
     },
     "hpack.js": {
@@ -10728,9 +10743,9 @@
       "dev": true
     },
     "isbinaryfile": {
-      "version": "4.0.4",
+      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.5.tgz",
-      "integrity": "sha512-pEutbN134CzcjlLS1myKX/uxNjwU5eBVSprvkpv3+3dqhBHUZLIWJQowC40w5c0Zf19vBY8mrZl88y5J4RAPbQ==",
+      "integrity": "sha512-Jvz0gpTh1AILHMCBUyqq7xv1ZOQrxTDwyp1/QUq1xFpOBvp4AH5uEobPePJht8KnBGqQIH7We6OR73mXsjG0cA==",
       "dev": true
     },
     "isemail": {
@@ -12965,21 +12980,12 @@
       "dev": true
     },
     "lru-cache": {
-      "version": "4.1.5",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "dev": true,
       "requires": {
-        "pseudomap": "^1.0.2",
+        "yallist": "^3.0.2"
-        "yallist": "^2.1.2"
-      },
-      "dependencies": {
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true
-        }
       }
     },
     "m3u8-parser": {
@@ -13097,9 +13103,9 @@
       "dev": true
     },
     "mediaelement": {
-      "version": "4.2.14",
+      "version": "4.2.16",
-      "resolved": "https://registry.npmjs.org/mediaelement/-/mediaelement-4.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/mediaelement/-/mediaelement-4.2.16.tgz",
-      "integrity": "sha512-mUs01DCJzE1A3mYBUqswqINkqaxy2G/pbWveE04OLM5AqvJAL0v5K3vIGBdBfo5MbfQuaZknVFMfi+bpxyiz3w==",
+      "integrity": "sha512-5GinxsRpVA36w6tAD6nTqVSiZ0LzIhqUrzD8wzOAtZPPM7NOwOBtz6Oa85VemS+3Jvoo38jM1RvNqwKYJBBxtQ==",
       "requires": {
         "global": "^4.3.1"
       }
@@ -13583,9 +13589,9 @@
       }
     },
     "node-abi": {
-      "version": "2.14.0",
+      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.15.0.tgz",
-      "integrity": "sha512-y54KGgEOHnRHlGQi7E5UiryRkH8bmksmQLj/9iLAjoje743YS+KaKB/sDYXgqtT0J16JT3c3AYJZNI98aU/kYg==",
+      "integrity": "sha512-FeLpTS0F39U7hHZU1srAK4Vx+5AHNVOTP+hxBNQknR/54laTHSFIJkDWDqiquY1LeLUgTfPN7sLPhMubx0PLAg==",
       "dev": true,
       "requires": {
         "semver": "^5.4.1"
@@ -13770,9 +13776,9 @@
       }
     },
     "nopt": {
-      "version": "4.0.1",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
       "dev": true,
       "requires": {
         "abbrev": "1",
@@ -15149,9 +15155,9 @@
       },
       "dependencies": {
         "minimist": {
-          "version": "1.2.0",
+          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -15965,9 +15971,9 @@
       }
     },
     "sass": {
-      "version": "1.26.2",
+      "version": "1.26.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.2.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.3.tgz",
-      "integrity": "sha512-9TRp1d1NH0mWH8rqaR/jCS05f/TFD1ykPF2zSYviprMhLb0EmXVqtKMUHsvDt3YIT/jbSK6qAvUlfCW/HJkdCw==",
+      "integrity": "sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
@@ -17848,23 +17854,23 @@
       }
     },
     "url-loader": {
-      "version": "3.0.0",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.0.0.tgz",
-      "integrity": "sha512-a84JJbIA5xTFTWyjjcPdnsu+41o/SNE8SpXMdUvXs6Q+LuhCD9E2+0VCiuDWqgo3GGXVlFHzArDmBpj9PgWn4A==",
+      "integrity": "sha512-sPsoBs8NkSJt9k/2zLUMDAf0rYaG00EtrFQpHRIphKrR6stGsO92LUJf/uUeQNKEoxqoJ4R4qDLqHl+AOEqolA==",
       "dev": true,
       "requires": {
-        "loader-utils": "^1.2.3",
+        "loader-utils": "^2.0.0",
-        "mime": "^2.4.4",
+        "mime-types": "^2.1.26",
-        "schema-utils": "^2.5.0"
+        "schema-utils": "^2.6.5"
       },
       "dependencies": {
         "ajv": {
-          "version": "6.10.2",
+          "version": "6.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
-          "integrity": "sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==",
+          "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^2.0.1",
+            "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
             "json-schema-traverse": "^0.4.1",
             "uri-js": "^4.2.2"
@@ -17882,45 +17888,51 @@
           "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
           "dev": true
         },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "dev": true
+        },
         "json5": {
-          "version": "1.0.1",
+          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.2.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "integrity": "sha512-MoUOQ4WdiN3yxhm7NEVJSJrieAo5hNSLQ5sj05OTRHPL9HOBy8u4Bu88jsC1jvqAdN+E1bJmsUcZH+1HQxliqQ==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.0"
+            "minimist": "^1.2.5"
           }
         },
         "loader-utils": {
-          "version": "1.2.3",
+          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
+            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
+            "json5": "^2.1.2"
           }
         },
-        "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
-          "dev": true
-        },
         "minimist": {
-          "version": "1.2.0",
+          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         },
         "schema-utils": {
-          "version": "2.6.1",
+          "version": "2.6.5",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
-          "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==",
+          "integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
           "dev": true,
           "requires": {
-            "ajv": "^6.10.2",
+            "ajv": "^6.12.0",
             "ajv-keywords": "^3.4.1"
           }
         }
@@ -18281,9 +18293,9 @@
       "dev": true
     },
     "vue-loader": {
-      "version": "15.9.0",
+      "version": "15.9.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.1.tgz",
-      "integrity": "sha512-FeDHvTSpwyLeF7LIV1PYkvqUQgTJ8UmOxhSlCyRSxaXCKk+M6NF4tDQsLsPPNeDPyR7TfRQ8MLg6v+8PsDV9xQ==",
+      "integrity": "sha512-IaPU2KOPjs/QjMlxFs/TiTtQUSbftQ7lsAvoxe21rtcQohsMhx+1AltXCNhZIpIn46PtODiAgz+o8RbMpKtmJw==",
       "dev": true,
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -18325,9 +18337,9 @@
       "dev": true
     },
     "vuex": {
-      "version": "3.1.2",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
-      "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
+      "integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
     },
     "w3c-hr-time": {
       "version": "1.0.1",
@@ -19392,9 +19404,9 @@
       }
     },
     "ytsr": {
-      "version": "0.1.10",
+      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-0.1.10.tgz",
+      "resolved": "https://registry.npmjs.org/ytsr/-/ytsr-0.1.11.tgz",
-      "integrity": "sha512-9wq0TiFejj6T5t9WXx/7Uw7Pix6vtXq3nd7BbPvz3BwUjJ4rdW4maylj1/sW+AUaSNgZgVbVngH/Y1a7V1kzsA==",
+      "integrity": "sha512-f7RILud27ufqsw3+Zi0J5itQ7qOt7BzN2EhqQARFhZq9HdxrlSfwvymiO/wvzFALCR2bgyxfz/cJhWyjUlokCA==",
       "requires": {
         "html-entities": "^1.1.3"
       }

package.json

@@ -19,7 +19,7 @@
     "jquery": "^3.4.1",
     "lodash.isequal": "^4.5.0",
     "material-design-icons": "^3.0.1",
-    "mediaelement": "^4.2.14",
+    "mediaelement": "^4.2.16",
     "nedb": "^1.8.0",
     "opml-to-json": "0.0.3",
     "video.js": "^7.6.6",
@@ -31,7 +31,7 @@
     "vue": "^2.6.11",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.1.6",
-    "vuex": "^3.1.2",
+    "vuex": "^3.1.3",
     "xml2json": "^0.12.0",
     "youtube-chat": "^1.0.2",
     "youtube-comments-fetch": "^1.0.1",
@@ -40,7 +40,7 @@
     "yt-xml2vtt": "^1.0.1",
     "ytdl-core": "^2.0.0",
     "ytpl": "^0.1.20",
-    "ytsr": "^0.1.10"
+    "ytsr": "^0.1.11"
   },
   "description": "A private YouTube client",
   "devDependencies": {
@@ -49,18 +49,18 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-typescript": "^7.8.3",
-    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/eslint-plugin": "^2.24.0",
-    "@typescript-eslint/parser": "^2.22.0",
+    "@typescript-eslint/parser": "^2.24.0",
     "acorn": "^7.1.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
     "devtron": "^1.4.0",
-    "electron": "^8.0.3",
+    "electron": "^8.1.1",
-    "electron-builder": "^22.3.6",
+    "electron-builder": "^22.4.1",
     "electron-debug": "^3.0.1",
-    "electron-rebuild": "^1.10.0",
+    "electron-rebuild": "^1.10.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-config-standard": "^14.1.0",
@@ -69,24 +69,24 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.1",
+    "eslint-plugin-vue": "^6.2.2",
     "fast-glob": "^3.2.2",
-    "file-loader": "^5.1.0",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-loader": "^0.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "sass": "^1.26.2",
+    "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "tree-kill": "1.2.2",
     "typescript": "^3.8.3",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.0.0",
     "vue-devtools": "^5.1.3",
     "vue-eslint-parser": "^7.0.0",
-    "vue-loader": "^15.9.0",
+    "vue-loader": "^15.9.1",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.42.0",
@@ -115,9 +115,10 @@
     "jest:coverage": "jest --collect-coverage",
     "jest:watch": "jest --watch",
     "lint": "eslint --fix --ext .js,.ts,.vue ./",
-    "pack": "run-p pack:main pack:renderer pack:workers",
+    "pack": "run-p pack:main pack:renderer pack:web pack:workers",
     "pack:main": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.main.config.js",
     "pack:renderer": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.renderer.config.js",
+    "pack:web": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.web.config.js",
     "pack:workers": "webpack --mode=production --env.NODE_ENV=production --hide-modules --config _scripts/webpack.workers.config.js",
     "postinstall": "electron-rebuild",
     "prettier": "prettier --write \"{src,_scripts}/**/*.{js,ts,vue}\"",

src/index.ejs

@@ -19,10 +19,12 @@
     <div id="app"></div>
     <!-- Set `__static` path to static files in production -->
     <script>
+    try {
       if (process.env.NODE_ENV !== 'development')
         window.__static = require('path')
           .join(__dirname, '/static')
           .replace(/\\/g, '\\\\')
+      } catch {}
     </script>
     <!-- webpack builds are automatically injected -->
   </body>

src/renderer/App.css

@@ -22,3 +22,10 @@ body {
 .expand {
   margin-left: 80px;
 }
+
+@media only screen and (max-width: 680px) {
+  .expand, .routerView {
+    margin-left: 0px;
+    margin-bottom: 80px;
+  }
+}

src/renderer/App.js

@@ -2,7 +2,17 @@ import Vue from 'vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
 import $ from 'jquery'
-import { shell } from 'electron'
+
+let useElectron
+let shell
+
+if (window && window.process && window.process.type === 'renderer') {
+  /* eslint-disable-next-line */
+  shell = require('electron').shell
+  useElectron = true
+} else {
+  useElectron = false
+}
 
 export default Vue.extend({
   name: 'App',
@@ -42,9 +52,12 @@ export default Vue.extend({
 
     this.updateTheme(theme)
 
+    console.log(useElectron)
+
     // Open links externally by default
     $(document).on('click', 'a[href^="http"]', (event) => {
       const el = event.currentTarget
+      console.log(useElectron)
       console.log(el)
       if (typeof (shell) !== 'undefined') {
         event.preventDefault()

src/renderer/components/ft-search-filters/ft-search-filters.css

@@ -2,6 +2,8 @@
   background-color: var(--card-bg-color);
   padding: 20px;
   padding-bottom: 70px;
+  max-height: 400px;
+  overflow-y: auto;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }
 
@@ -18,3 +20,9 @@
   max-width: 1000px;
   margin: 0 auto;
 }
+
+@media only screen and (max-width: 600px) {
+  .searchRadio {
+    border-right: 0px;
+  }
+}

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

@@ -7,3 +7,15 @@
   margin: 0 auto;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}
+
+@media only screen and (max-width: 460px) {
+  .generalSettingsFlexBox {
+    justify-content: flex-start;
+  }
+}

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

@@ -6,7 +6,7 @@
     >
       {{ title }}
     </h3>
-    <ft-flex-box>
+    <ft-flex-box class="generalSettingsFlexBox">
       <ft-toggle-switch
         label="Fallback to Non-Preferred Backend on Failure"
         :default-value="backendFallback"

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

@@ -7,3 +7,15 @@
   margin: 0 auto;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}
+
+@media only screen and (max-width: 460px) {
+  .playerSettingsFlexBox {
+    justify-content: flex-start;
+  }
+}

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

@@ -6,7 +6,7 @@
     >
       {{ title }}
     </h3>
-    <ft-flex-box>
+    <ft-flex-box class="playerSettingsFlexBox">
       <ft-toggle-switch
         label="Remember History"
         :default-value="rememberHistory"

src/renderer/components/playlist-info/playlist-info.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
-import { shell } from 'electron'
+// import { shell } from 'electron'
 
 export default Vue.extend({
   name: 'FtElementList',
@@ -75,13 +75,13 @@ export default Vue.extend({
           navigator.clipboard.writeText(youtubeUrl)
           break
         case 'openYoutube':
-          shell.openExternal(youtubeUrl)
+          // shell.openExternal(youtubeUrl)
           break
         case 'copyInvidious':
           navigator.clipboard.writeText(invidiousUrl)
           break
         case 'openInvidious':
-          shell.openExternal(invidiousUrl)
+          // shell.openExternal(invidiousUrl)
           break
       }
     }

src/renderer/components/side-nav-more-options/side-nav-more-options.css

@@ -0,0 +1,76 @@
+.sideNavMoreOptions {
+  display: none;
+}
+
+.navOption {
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.navOption:hover {
+  background-color: var(--side-nav-hover-color);
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.navOption:active {
+  background-color: var(--side-nav-active-color);
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.moreOptionContainer {
+  position: fixed;
+  background-color: var(--side-nav-color);
+  bottom: 60px;
+  width: 70px;
+  z-index: 0;
+  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
+  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
+  box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
+}
+
+@media only screen and (max-width: 680px) {
+  .sideNavMoreOptions {
+    display: block;
+  }
+
+  .sideNav, .closed {
+    margin-top: 0px;
+    height: 60px;
+    width: 100%;
+    bottom: 0px;
+    top: auto;
+    overflow-y: inherit;
+  }
+
+  .navOption, .closed .navOption {
+    width: 70px;
+    height: 40px;
+    padding: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .navLabel {
+    margin-left: 0px;
+    width: 100%;
+    text-align: center;
+    left: 0px;
+    font-size: 11px;
+  }
+
+  .navIcon {
+    margin-left: 0px;
+    width: 100%;
+    display: block;
+    margin-bottom: 0px;
+  }
+
+  .moreOption {
+    display: block;
+  }
+}

src/renderer/components/side-nav-more-options/side-nav-more-options.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'SideNav',
+  data: function () {
+    return {
+      openMoreOptions: false
+    }
+  },
+  methods: {
+    navigate: function (route) {
+      this.openMoreOptions = false
+      this.$emit('navigate', route)
+    }
+  }
+})

src/renderer/components/side-nav-more-options/side-nav-more-options.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="sideNavMoreOptions">
+    <div
+      class="navOption moreOptionNav"
+      @click="openMoreOptions = !openMoreOptions"
+    >
+      <font-awesome-icon
+        icon="ellipsis-h"
+        class="navIcon"
+      />
+      <p class="navLabel">
+        More
+      </p>
+    </div>
+    <div
+      v-if="openMoreOptions"
+      class="moreOptionContainer"
+    >
+      <div
+        class="navOption"
+        @click="navigate('trending')"
+      >
+        <font-awesome-icon
+          icon="fire"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Trending
+        </p>
+      </div>
+      <div
+        class="navOption"
+        @click="navigate('popular')"
+      >
+        <font-awesome-icon
+          icon="users"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Most Popular
+        </p>
+      </div>
+      <div
+        class="navOption"
+        @click="navigate('about')"
+      >
+        <font-awesome-icon
+          icon="info-circle"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          About
+        </p>
+      </div>
+    </div>
+    <div
+      class="navOption mobileShow"
+      @click="navigate('history')"
+    >
+      <font-awesome-icon
+        icon="history"
+        class="navIcon"
+      />
+      <p class="navLabel">
+        History
+      </p>
+    </div>
+    <hr>
+    <div
+      class="navOption mobileShow"
+      @click="navigate('settings')"
+    >
+      <font-awesome-icon
+        icon="sliders-h"
+        class="navIcon"
+      />
+      <p class="navLabel">
+        Settings
+      </p>
+    </div>
+    <div
+      class="navOption mobileHidden"
+      @click="navigate('about')"
+    >
+      <font-awesome-icon
+        icon="info-circle"
+        class="navIcon"
+      />
+      <p class="navLabel">
+        About
+      </p>
+    </div>
+  </div>
+</template>
+
+<script src="./side-nav-more-options.js" />
+<style scoped src="./side-nav-more-options.css" />

src/renderer/components/side-nav/side-nav.css

@@ -1,4 +1,5 @@
 .sideNav {
+  display: block;
   height: calc(100vh - 60px);
   width: 200px;
   overflow-y: auto;
@@ -24,6 +25,10 @@
   cursor: pointer;
 }
 
+.moreOption {
+  display: none;
+}
+
 .navOption:hover {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
@@ -90,3 +95,55 @@
   left: 0px;
   font-size: 11px;
 }
+
+@media only screen and (max-width: 680px) {
+  hr, .mobileHidden, .refreshIcon {
+    display: none;
+  }
+
+  .sideNav {
+    display: flex;
+  }
+
+  .topNavOption {
+    margin-top: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .sideNav, .closed {
+    margin-top: 0px;
+    height: 60px;
+    width: 100%;
+    bottom: 0px;
+    top: auto;
+    overflow-y: inherit;
+  }
+
+  .navOption, .closed .navOption {
+    width: 70px;
+    height: 40px;
+    padding: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .navLabel {
+    margin-left: 0px;
+    width: 100%;
+    text-align: center;
+    left: 0px;
+    font-size: 11px;
+  }
+
+  .navIcon {
+    margin-left: 0px;
+    width: 100%;
+    display: block;
+    margin-bottom: 0px;
+  }
+
+  .moreOption {
+    display: block;
+  }
+}

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

@@ -1,8 +1,14 @@
 import Vue from 'vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import SideNavMoreOptions from '../side-nav-more-options/side-nav-more-options.vue'
 import router from '../../router/index.js'
 
 export default Vue.extend({
   name: 'SideNav',
+  components: {
+    'ft-flex-box': FtFlexBox,
+    'side-nav-more-options': SideNavMoreOptions
+  },
   computed: {
     isOpen: function () {
       return this.$store.getters.getIsSideNavOpen

src/renderer/components/side-nav/side-nav.vue

@@ -1,11 +1,11 @@
 <template>
-  <div
+  <ft-flex-box
     ref="sideNav"
     class="sideNav"
     :class="{closed: !isOpen}"
   >
     <div
-      class="navOption topNavOption"
+      class="navOption topNavOption mobileShow"
       @click="navigate('subscriptions')"
     >
       <font-awesome-icon
@@ -21,7 +21,7 @@
       />
     </div>
     <div
-      class="navOption"
+      class="navOption mobileHidden"
       @click="navigate('trending')"
     >
       <font-awesome-icon
@@ -33,7 +33,7 @@
       </p>
     </div>
     <div
-      class="navOption"
+      class="navOption mobileHidden"
       @click="navigate('popular')"
     >
       <font-awesome-icon
@@ -45,7 +45,7 @@
       </p>
     </div>
     <div
-      class="navOption"
+      class="navOption mobileShow"
       @click="navigate('userplaylists')"
     >
       <font-awesome-icon
@@ -56,8 +56,11 @@
         Playlists
       </p>
     </div>
+    <side-nav-more-options
+      @navigate="navigate"
+    />
     <div
-      class="navOption"
+      class="navOption mobileShow"
       @click="navigate('history')"
     >
       <font-awesome-icon
@@ -70,7 +73,7 @@
     </div>
     <hr>
     <div
-      class="navOption"
+      class="navOption mobileShow"
       @click="navigate('settings')"
     >
       <font-awesome-icon
@@ -82,7 +85,7 @@
       </p>
     </div>
     <div
-      class="navOption"
+      class="navOption mobileHidden"
       @click="navigate('about')"
     >
       <font-awesome-icon
@@ -94,7 +97,7 @@
       </p>
     </div>
     <hr>
-  </div>
+  </ft-flex-box>
 </template>
 
 <script src="./side-nav.js" />

src/renderer/components/subscription-settings/subscription-settings.css

@@ -7,3 +7,15 @@
   margin: 0 auto;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .subscriptionSettingsFlexBox {
+    justify-content: flex-start;
+  }
+}

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

@@ -6,7 +6,7 @@
     >
       {{ title }}
     </h3>
-    <ft-flex-box>
+    <ft-flex-box class="subscriptionSettingsFlexBox">
       <ft-toggle-switch
         label="Hide Videos When Watched"
       />

src/renderer/components/theme-settings/theme-settings.css

@@ -7,3 +7,9 @@
   margin: 0 auto;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

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

@@ -71,6 +71,12 @@
   left: 85px;
 }
 
+.navSearchIcon {
+  position: absolute;
+  top: 10px;
+  display: none;
+}
+
 .logoIcon {
   background-image: var(--logo-icon);
   background-repeat: no-repeat;
@@ -132,3 +138,57 @@
 .expand {
   margin-left: 100px;
 }
+
+@media only screen and (max-width: 680px) {
+  .menuIcon {
+    display: none;
+  }
+
+  .navBackIcon {
+    left: 45px;
+  }
+
+  .navForwardIcon {
+    left: 80px;
+  }
+
+  .navSearchIcon {
+    display: block;
+    left: 120px;
+  }
+
+  .logoIcon {
+    left: 10px;
+  }
+
+  .logoText {
+    display: none;
+  }
+
+  .searchContainer {
+    position: fixed;
+    display: none;
+    width: 100%;
+    top: 60px;
+    background-color: var(--side-nav-color);
+  }
+
+  .topNavBarColor .searchContainer {
+    background-color: var(--primary-color-hover);
+  }
+
+  .searchInput {
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .navFilterIcon {
+    right: 0px;
+  }
+
+  .searchFilters {
+    margin-top: 130px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}

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

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtSearchFilters from '../ft-search-filters/ft-search-filters.vue'
+import $ from 'jquery'
 import router from '../../router/index.js'
 
 export default Vue.extend({
@@ -28,10 +29,29 @@ export default Vue.extend({
       return this.$store.getters.getBarColor
     }
   },
+  mounted: function () {
+    window.addEventListener('resize', function(event) {
+      const width = event.srcElement.innerWidth
+      const searchContainer = $('.searchContainer').get(0)
+
+      if (width > 680) {
+        searchContainer.style.display = 'block'
+      } else {
+        searchContainer.style.display = 'none'
+      }
+    })
+  },
   methods: {
     goToSearch: function (query) {
       console.log(this)
       this.showFilters = false
+      const appWidth = $(window).width()
+
+      if (appWidth <= 680) {
+        const searchContainer = $('.searchContainer').get(0)
+        searchContainer.style.display = 'none'
+      }
+
       router.push(
         {
           path: `/search/${query}`,
@@ -45,6 +65,18 @@ export default Vue.extend({
       )
     },
 
+    toggleSearchContainer: function () {
+      const searchContainer = $('.searchContainer').get(0)
+
+      if (searchContainer.style.display === 'none' || searchContainer.style.display === '') {
+        searchContainer.style.display = 'block'
+      } else {
+        searchContainer.style.display = 'none'
+      }
+
+      this.showFilters = false
+    },
+
     historyBack: function () {
       window.history.back()
     },

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

@@ -18,6 +18,11 @@
       icon="arrow-right"
       @click="historyForward"
     />
+    <font-awesome-icon
+      class="navSearchIcon navIcon"
+      icon="search"
+      @click="toggleSearchContainer"
+    />
     <div
       class="logoIcon"
       :class="{ logoIconBarColor: barColor }"

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

@@ -3,7 +3,7 @@ import FtCard from '../ft-card/ft-card.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import { shell } from 'electron'
+// import { shell } from 'electron'
 
 export default Vue.extend({
   name: 'WatchVideoInfo',
@@ -147,19 +147,19 @@ export default Vue.extend({
           navigator.clipboard.writeText(this.youtubeUrl)
           break
         case 'openYoutube':
-          shell.openExternal(this.youtubeUrl)
+          // shell.openExternal(this.youtubeUrl)
           break
         case 'copyYoutubeEmbed':
           navigator.clipboard.writeText(this.youtubeEmbedUrl)
           break
         case 'openYoutubeEmbed':
-          shell.openExternal(this.youtubeEmbedUrl)
+          // shell.openExternal(this.youtubeEmbedUrl)
           break
         case 'copyInvidious':
           navigator.clipboard.writeText(this.invidiousUrl)
           break
         case 'openInvidious':
-          shell.openExternal(this.invidiousUrl)
+          // shell.openExternal(this.invidiousUrl)
           break
       }
     }

src/renderer/main.js

@@ -1,5 +1,4 @@
 // import the styles
-import { ipcRenderer } from 'electron'
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router/index'
@@ -26,9 +25,14 @@ new Vue({
   render: h => h(App)
 })
 
+// to avoild accesing electorn api from web app build
+if (window && window.process && window.process.type === 'renderer') {
+  const { ipcRenderer } = require('electron')
+
   // handle menu event updates from main script
   ipcRenderer.on('change-view', (event, data) => {
     if (data.route) {
       router.push(data.route)
     }
   })
+}

src/renderer/store/modules/settings.js

@@ -1,6 +1,5 @@
-import electron from 'electron'
 import Datastore from 'nedb'
-const localDataStorage = electron.remote.app.getPath('userData')
+const localDataStorage = '/db'
 
 const settingsDb = new Datastore({
   filename: localDataStorage + '/settings.db',

src/renderer/store/modules/subscriptions.js

@@ -1,6 +1,5 @@
-import electron from 'electron'
 import Datastore from 'nedb'
-const localDataStorage = electron.remote.app.getPath('userData')
+const localDataStorage = '/db'
 
 const subDb = new Datastore({
   filename: localDataStorage + '/subscriptions.db',

src/renderer/store/modules/ytdl.js

@@ -114,8 +114,7 @@ const actions = {
     })
   },
 
-  /* eslint-disable-next-line */
+  ytGetPlaylistInfo (_, playlistId) {
-  ytGetPlaylistInfo ({}, playlistId) {
     return new Promise((resolve, reject) => {
       console.log(playlistId)
       console.log('Getting playlist info please wait...')

src/renderer/views/About/About.css

@@ -5,7 +5,8 @@
 }
 
 .logo {
-  max-width: 500px;
+  width: 500px;
+  max-width: 100%;
 }
 
 .center {
@@ -15,3 +16,9 @@
 .leftAlign {
   text-align: left;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/About/About.vue

@@ -5,7 +5,7 @@
         About
       </h3>
       <img
-        src="/_icons/logoColor.png"
+        src="_icons/logoColor.png"
         class="logo"
       >
       <h1>

src/renderer/views/History/History.css

@@ -3,3 +3,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/Popular/Popular.css

@@ -3,3 +3,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/Search/Search.css

@@ -12,3 +12,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/Subscriptions/Subscriptions.css

@@ -3,3 +3,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/Trending/Trending.css

@@ -3,3 +3,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/UserPlaylists/UserPlaylists.css

@@ -3,3 +3,9 @@
   margin: 0 auto;
   margin-bottom: 60px;
 }
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}