Progress on Settings and Database setup

package-lock.json

@@ -2344,9 +2344,9 @@
       }
     },
     "@electron/get": {
-      "version": "1.7.2",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.7.6.tgz",
-      "integrity": "sha512-LSE4LZGMjGS9TloDx0yO44D2UTbaeKRk+QjlhWLiQlikV6J4spgDCjb6z4YIcqmPAwNzlNCnWF4dubytwI+ATA==",
+      "integrity": "sha512-zlNikt6ziVLNcm4lly1L4y62fJd/eYpEBjF5DiV/VAQq2vdPjH4sbUphXt9upmHz86lAhAj8g9lTnWrxJ/KBZw==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -2517,12 +2517,12 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.19.0",
+      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.20.0.tgz",
-      "integrity": "sha512-u7IcQ9qwsB6U806LupZmINRnQjC+RJyv36sV/ugaFWMHTbFm/hlLTRx3gGYJgHisxcGSTnf+I/fPDieRMhPSQQ==",
+      "integrity": "sha512-cimIdVDV3MakiGJqMXw51Xci6oEDEoPkvh8ggJe2IIzcc0fYqAxOXN6Vbeanahz6dLZq64W+40iUEc9g32FLDQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.19.0",
+        "@typescript-eslint/experimental-utils": "2.20.0",
         "eslint-utils": "^1.4.3",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
@@ -2538,25 +2538,25 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.19.0",
+      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.20.0.tgz",
-      "integrity": "sha512-zwpg6zEOPbhB3+GaQfufzlMUOO6GXCNZq6skk+b2ZkZAIoBhVoanWK255BS1g5x9bMwHpLhX0Rpn5Fc3NdCZdg==",
+      "integrity": "sha512-fEBy9xYrwG9hfBLFEwGW2lKwDRTmYzH3DwTmYbT+SMycmxAoPl0eGretnBFj/s+NfYBG63w/5c3lsvqqz5mYag==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.19.0",
+        "@typescript-eslint/typescript-estree": "2.20.0",
         "eslint-scope": "^5.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.19.0",
+      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.20.0.tgz",
-      "integrity": "sha512-s0jZoxAWjHnuidbbN7aA+BFVXn4TCcxEVGPV8lWMxZglSs3NRnFFAlL+aIENNmzB2/1jUJuySi6GiM6uACPmpg==",
+      "integrity": "sha512-o8qsKaosLh2qhMZiHNtaHKTHyCHc3Triq6aMnwnWj7budm3xAY9owSZzV1uon5T9cWmJRJGzTFa90aex4m77Lw==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.19.0",
+        "@typescript-eslint/experimental-utils": "2.20.0",
-        "@typescript-eslint/typescript-estree": "2.19.0",
+        "@typescript-eslint/typescript-estree": "2.20.0",
         "eslint-visitor-keys": "^1.1.0"
       },
       "dependencies": {
@@ -2569,9 +2569,9 @@
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.19.0",
+      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.20.0.tgz",
-      "integrity": "sha512-n6/Xa37k0jQdwpUszffi19AlNbVCR0sdvCs3DmSKMD7wBttKY31lhD2fug5kMD91B2qW4mQldaTEc1PEzvGu8w==",
+      "integrity": "sha512-WlFk8QtI8pPaE7JGQGxU7nGcnk1ccKAJkhbVookv94ZcAef3m6oCE/jEDL6dGte3JcD7reKrA0o55XhBRiVT3A==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -2656,9 +2656,9 @@
       }
     },
     "@vue/component-compiler-utils": {
-      "version": "3.1.0",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz",
-      "integrity": "sha512-OJ7swvl8LtKtX5aYP8jHhO6fQBIRIGkU6rvWzK+CGJiNOnvg16nzcBkd9qMZzW8trI2AsqAKx263nv7kb5rhZw==",
+      "integrity": "sha512-+lN3nsfJJDGMNz7fCpcoYIORrXo0K3OTsdr8jCM7FuqdI4+70TY6gxY6viJ2Xi1clqyPg7LpeOWwjF31vSMmUw==",
       "dev": true,
       "requires": {
         "consolidate": "^0.15.1",
@@ -2666,7 +2666,7 @@
         "lru-cache": "^4.1.2",
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.14",
-        "postcss-selector-parser": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
         "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
@@ -3390,9 +3390,9 @@
       "dev": true
     },
     "autolinker": {
-      "version": "3.11.1",
+      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.12.0.tgz",
-      "integrity": "sha512-6sAmetStorjXvwmV8MBxI5DGICHKD1B5EjdkIrq34X6YBDN6jj54EUHnoHgNqmNCclcf8c409zuVMNy449u80g==",
+      "integrity": "sha512-iQAz75LAZ0dmlaMaIXX0Z+X4yuI6gxONZ14h0YTO0j/3d9DltyD+qkbINpocVZ8oCjMSJUdBeRfrXzGf/zvGZQ==",
       "requires": {
         "tslib": "^1.9.3"
       }
@@ -3689,11 +3689,10 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "boolean": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz",
-      "integrity": "sha512-OElxJ1lUSinuoUnkpOgLmxp0DC4ytEhODEL6QJU0NpxE/mI4rUSh8h1P1Wkvfi3xQEBcxXR2gBIPNYNuaFcAbQ==",
+      "integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "boxen": {
       "version": "4.2.0",
@@ -5733,9 +5732,9 @@
       "dev": true
     },
     "electron": {
-      "version": "8.0.0",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-8.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-8.0.1.tgz",
-      "integrity": "sha512-vBXUKRqTUq0jv1upvISdvScDDH3uCPwXj4eA5BeR3UDbJp2hOhq7eJxwjIQbfLQql98aYz4X6pSlzBnhfyQqHA==",
+      "integrity": "sha512-kLZAQkbrAFNjQVpcHJUnjRYQNafuuWKnsdxzag5do1ewMqN0J4Pi/hPE27+5/1YAFMcbvCrPqhWIpcMsi8mKXQ==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -6096,14 +6095,26 @@
       }
     },
     "enhanced-resolve": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
-      "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
+      "integrity": "sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.4.0",
+        "memory-fs": "^0.5.0",
         "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        }
       }
     },
     "entities": {
@@ -6519,11 +6530,12 @@
       "dev": true
     },
     "eslint-plugin-vue": {
-      "version": "6.1.2",
+      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.1.tgz",
-      "integrity": "sha512-M75oAB+2a/LNkLKRbeEaS07EjzjIUaV7/hYoHAfRFeeF8ZMmCbahUn8nQLsLP85mkar24+zDU3QW2iT1JRsACw==",
+      "integrity": "sha512-MiIDOotoWseIfLIfGeDzF6sDvHkVvGd2JgkvjyHtN3q4RoxdAXrAMuI3SXTOKatljgacKwpNAYShmcKZa4yZzw==",
       "dev": true,
       "requires": {
+        "natural-compare": "^1.4.0",
         "semver": "^5.6.0",
         "vue-eslint-parser": "^7.0.0"
       }
@@ -6629,9 +6641,9 @@
       "dev": true
     },
     "events": {
-      "version": "3.0.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
-      "integrity": "sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==",
+      "integrity": "sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==",
       "dev": true
     },
     "eventsource": {
@@ -6912,16 +6924,17 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.1.1",
+      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.2.tgz",
-      "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+      "integrity": "sha512-UDV82o4uQyljznxwMxyVRJgZZt3O5wENYojjzbaGEGZgeOxkLFf+V4cnUD+krzb2F72E18RhamkMZ7AdeggF7A==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.0",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2"
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
       },
       "dependencies": {
         "braces": {
@@ -6976,6 +6989,12 @@
             "picomatch": "^2.0.5"
           }
         },
+        "picomatch": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
+          "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+          "dev": true
+        },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7055,22 +7074,22 @@
       }
     },
     "file-loader": {
-      "version": "5.0.2",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-5.1.0.tgz",
-      "integrity": "sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==",
+      "integrity": "sha512-u/VkLGskw3Ue59nyOwUwXI/6nuBCo7KBkniB/l7ICwr/7cPNGsL1WCXUp3GB0qgOOKU1TiP49bv4DZF/LJqprg==",
       "dev": true,
       "requires": {
-        "loader-utils": "^1.2.3",
+        "loader-utils": "^1.4.0",
         "schema-utils": "^2.5.0"
       },
       "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"
@@ -7088,6 +7107,18 @@
           "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",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -7098,13 +7129,13 @@
           }
         },
         "loader-utils": {
-          "version": "1.2.3",
+          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
+            "emojis-list": "^3.0.0",
             "json5": "^1.0.1"
           }
         },
@@ -7115,9 +7146,9 @@
           "dev": true
         },
         "schema-utils": {
-          "version": "2.6.1",
+          "version": "2.6.4",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.4.tgz",
-          "integrity": "sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==",
+          "integrity": "sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==",
           "dev": true,
           "requires": {
             "ajv": "^6.10.2",
@@ -7477,8 +7508,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7499,14 +7529,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7521,20 +7549,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7651,8 +7676,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7664,7 +7688,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7679,7 +7702,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7687,14 +7709,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7713,7 +7733,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7794,8 +7813,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7807,7 +7825,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7893,8 +7910,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7930,7 +7946,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7950,7 +7965,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7994,14 +8008,12 @@
         "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
         }
       }
     },
@@ -8164,9 +8176,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "7.1.2",
+          "version": "7.1.3",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
-          "integrity": "sha512-BJs9T/H8sEVHbeigqzIEo57Iu/3DG6c4QoqTfbQB3BPA4zgzAomh/Fk9E7QtjWQ8mx2dgA9YCfSF4y9k9bHNpQ==",
+          "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==",
           "dev": true,
           "optional": true
         }
@@ -10425,32 +10437,6 @@
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
           "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
           "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          },
-          "dependencies": {
-            "string_decoder": {
-              "version": "1.1.1",
-              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-              "dev": true,
-              "requires": {
-                "safe-buffer": "~5.1.0"
-              }
-            }
-          }
         }
       }
     },
@@ -11063,9 +11049,9 @@
       }
     },
     "pako": {
-      "version": "1.0.10",
+      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
     "parallel-transform": {
@@ -11494,22 +11480,14 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "5.0.0",
+      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
       "dev": true,
       "requires": {
-        "cssesc": "^2.0.0",
+        "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
         "uniq": "^1.0.1"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
-          "dev": true
-        }
       }
     },
     "postcss-value-parser": {
@@ -13100,9 +13078,9 @@
       }
     },
     "source-map-support": {
-      "version": "0.5.13",
+      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -13324,32 +13302,6 @@
       "requires": {
         "inherits": "~2.0.1",
         "readable-stream": "^2.0.2"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
       }
     },
     "stream-each": {
@@ -13373,32 +13325,6 @@
         "readable-stream": "^2.3.6",
         "to-arraybuffer": "^1.0.0",
         "xtend": "^4.0.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
       }
     },
     "stream-shift": {
@@ -13728,9 +13654,9 @@
       "dev": true
     },
     "terser": {
-      "version": "4.4.3",
+      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz",
-      "integrity": "sha512-0ikKraVtRDKGzHrzkCv5rUNDzqlhmhowOBqC0XqUHFpW+vJ45+20/IFBcebwKfiS2Z9fJin6Eo+F1zLZsxi8RA==",
+      "integrity": "sha512-Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -14023,9 +13949,9 @@
       }
     },
     "typescript": {
-      "version": "3.7.5",
+      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.2.tgz",
-      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "integrity": "sha512-EgOVgL/4xfVrCMbhYKUQTdF37SQn4Iw73H5BgCrF1Abdun7Kwy/QZsE/ssAy0y4LxBbvua3PIbFsbRczWWnDdQ==",
       "dev": true
     },
     "uglify-js": {
@@ -14504,6 +14430,11 @@
         "xhr": "2.4.0"
       }
     },
+    "videojs-abloop": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/videojs-abloop/-/videojs-abloop-1.0.3.tgz",
+      "integrity": "sha512-Cj7L6qqLUzDq2Urc0qknafmIHnu/qdB7eQSJxz5HCY96kR81kMFmR3oubwbqoHFrrxyv59TxhQ7cWME/AMFDrA=="
+    },
     "videojs-contrib-quality-levels": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.0.9.tgz",
@@ -14711,9 +14642,9 @@
       "dev": true
     },
     "vue-loader": {
-      "version": "15.8.3",
+      "version": "15.9.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.0.tgz",
-      "integrity": "sha512-yFksTFbhp+lxlm92DrKdpVIWMpranXnTEuGSc0oW+Gk43M9LWaAmBTnfj5+FCdve715mTHvo78IdaXf5TbiTJg==",
+      "integrity": "sha512-FeDHvTSpwyLeF7LIV1PYkvqUQgTJ8UmOxhSlCyRSxaXCKk+M6NF4tDQsLsPPNeDPyR7TfRQ8MLg6v+8PsDV9xQ==",
       "dev": true,
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -14817,9 +14748,9 @@
       }
     },
     "webpack": {
-      "version": "4.41.5",
+      "version": "4.41.6",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.5.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.6.tgz",
-      "integrity": "sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==",
+      "integrity": "sha512-yxXfV0Zv9WMGRD+QexkZzmGIh54bsvEs+9aRWxnN8erLWEOehAKUTeNBoUbA6HPEZPlRo7KDi2ZcNveoZgK9MA==",
       "dev": true,
       "requires": {
         "@webassemblyjs/ast": "1.8.5",
@@ -14854,12 +14785,12 @@
           "dev": true
         },
         "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"
@@ -14877,6 +14808,12 @@
           "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
+        },
         "eslint-scope": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -14887,6 +14824,12 @@
             "estraverse": "^4.1.1"
           }
         },
+        "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",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -14897,13 +14840,13 @@
           }
         },
         "loader-utils": {
-          "version": "1.2.3",
+          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
+            "emojis-list": "^3.0.0",
             "json5": "^1.0.1"
           }
         },
@@ -14916,9 +14859,9 @@
       }
     },
     "webpack-cli": {
-      "version": "3.3.10",
+      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.10.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.11.tgz",
-      "integrity": "sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==",
+      "integrity": "sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==",
       "dev": true,
       "requires": {
         "chalk": "2.4.2",
@@ -14979,17 +14922,16 @@
             "wrap-ansi": "^5.1.0"
           }
         },
-        "get-caller-file": {
+        "enhanced-resolve": {
-          "version": "2.0.5",
+          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
-          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
-          "dev": true
+          "dev": true,
-        },
+          "requires": {
-        "is-fullwidth-code-point": {
+            "graceful-fs": "^4.1.2",
-          "version": "2.0.0",
+            "memory-fs": "^0.4.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+            "tapable": "^1.0.0"
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          }
-          "dev": true
         },
         "json5": {
           "version": "1.0.1",
@@ -15017,12 +14959,6 @@
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
-        "require-main-filename": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-          "dev": true
-        },
         "string-width": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
@@ -15725,9 +15661,9 @@
       }
     },
     "ytdl-core": {
-      "version": "1.0.9",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ytdl-core/-/ytdl-core-1.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/ytdl-core/-/ytdl-core-2.0.0.tgz",
-      "integrity": "sha512-HhFeLfjXU34h0FNHmSkSpKygdaYijSt8VNsC770VYBRFb+dyUKcm11cIKxu2MUSwT9znISZ0k1wFdaV/N5VW+Q==",
+      "integrity": "sha512-cYdcxXhgldJeOaWaN/mxT+j07XFZdR+qUqfz5eddx4WcyWCha66FfJvmQBOPqyQo1TCyj/IkgZqdGADWlNdTcQ==",
       "requires": {
         "html-entities": "^1.1.3",
         "m3u8stream": "^0.6.3",

package.json

@@ -12,7 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@silvermine/videojs-quality-selector": "^1.2.3",
-    "autolinker": "^3.11.1",
+    "autolinker": "^3.12.0",
     "bulma-pro": "^0.1.8",
     "dateformat": "^3.0.3",
     "electron-context-menu": "^0.16.0",
@@ -23,6 +23,7 @@
     "nedb": "^1.8.0",
     "opml-to-json": "0.0.3",
     "video.js": "^7.6.6",
+    "videojs-abloop": "^1.0.3",
     "videojs-contrib-quality-levels": "^2.0.9",
     "videojs-http-source-selector": "^1.1.6",
     "videojs-replay": "^1.1.0",
@@ -37,7 +38,7 @@
     "youtube-comments-task": "^1.3.14",
     "youtube-suggest": "^1.1.0",
     "yt-xml2srt": "^1.1.0",
-    "ytdl-core": "^1.0.9",
+    "ytdl-core": "^2.0.0",
     "ytpl": "^0.1.20",
     "ytsr": "^0.1.10"
   },
@@ -48,15 +49,15 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-typescript": "^7.8.3",
-    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.19.0",
+    "@typescript-eslint/parser": "^2.20.0",
     "acorn": "^7.1.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
     "devtron": "^1.4.0",
-    "electron": "^8.0.0",
+    "electron": "^8.0.1",
     "electron-builder": "^22.3.2",
     "electron-debug": "^3.0.1",
     "electron-rebuild": "^1.10.0",
@@ -68,9 +69,9 @@
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.1.2",
+    "eslint-plugin-vue": "^6.2.1",
-    "fast-glob": "^3.1.1",
+    "fast-glob": "^3.2.2",
-    "file-loader": "^5.0.2",
+    "file-loader": "^5.1.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-loader": "^0.6.0",
@@ -80,15 +81,15 @@
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "tree-kill": "1.2.2",
-    "typescript": "^3.7.5",
+    "typescript": "^3.8.2",
     "url-loader": "^3.0.0",
     "vue-devtools": "^5.1.3",
     "vue-eslint-parser": "^7.0.0",
-    "vue-loader": "^15.8.3",
+    "vue-loader": "^15.9.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.41.5",
+    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"
   },
   "license": "GPL-3.0-or-later",

src/renderer/App.js

@@ -16,6 +16,15 @@ export default Vue.extend({
     }
   },
   mounted: function () {
+    this.$store.dispatch('grabUserSettings')
+
+    const theme = localStorage.getItem('theme')
+    console.log(theme)
+
+    if (theme !== null) {
+      this.updateTheme(theme)
+    }
+
     // Open links externally by default
     $(document).on('click', 'a[href^="http"]', (event) => {
       const el = event.currentTarget
@@ -25,5 +34,13 @@ export default Vue.extend({
         shell.openExternal(el.href)
       }
     })
+  },
+  methods: {
+    updateTheme: function (theme) {
+      console.log(theme)
+      const body = document.getElementsByTagName('body')[0]
+      body.className = theme
+      localStorage.setItem('theme', theme)
+    }
   }
 })

src/renderer/components/ft-input/ft-input.css

@@ -14,11 +14,12 @@
     margin-bottom: 10px;
     font: 16px;
     height: 45px;
-    border-bottom: 1px solid var(--primary-input-color);
+    color: var(--teritary-text-color);
+    border-bottom: 1px solid var(--teritary-text-color);
 }
 
 .ft-input-component ::-webkit-input-placeholder {
-  color: var(--primary-input-color);
+  color: var(--teritary-text-color);
 }
 
 .inputAction {

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

@@ -35,8 +35,8 @@ export default Vue.extend({
       return this.$store.getters.getListType
     },
 
-    clickBaitRemoverPreference: function () {
+    thumbnailPreference: function () {
-      return this.$store.getters.getClickBaitRemoverPreference
+      return this.$store.getters.getThumbnailPreference
     }
   },
   mounted: function () {
@@ -49,7 +49,6 @@ export default Vue.extend({
     ) {
       this.parseInvidiousData()
     } else {
-      console.log('parsing local data')
       this.parseLocalData()
     }
   },
@@ -102,7 +101,7 @@ export default Vue.extend({
       this.id = this.data.videoId
       this.title = this.data.title
       // this.thumbnail = this.data.videoThumbnails[4].url
-      switch (this.clickBaitRemoverPreference) {
+      switch (this.thumbnailPreference) {
         case 'start':
           this.thumbnail = `https://i.ytimg.com/vi/${this.id}/mq1.jpg`
           break
@@ -145,7 +144,7 @@ export default Vue.extend({
       this.title = this.data.title
       // this.thumbnail = this.data.thumbnail
 
-      switch (this.clickBaitRemoverPreference) {
+      switch (this.thumbnailPreference) {
         case 'start':
           this.thumbnail = `https://i.ytimg.com/vi/${this.id}/mq1.jpg`
           break

src/renderer/components/ft-slider/ft-slider.css

@@ -0,0 +1,243 @@
+.pure-material-slider {
+    --pure-material-safari-helper1: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+    --pure-material-safari-helper2: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+    --pure-material-safari-helper3: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+    --pure-material-safari-helper4: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+    display: inline-block;
+    width: 220px;
+    color: rgba(var(--primary-text-color), 0.87);
+    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
+    font-size: 16px;
+    line-height: 1.5;
+    padding: 5px;
+}
+
+/* Input */
+.pure-material-slider > input {
+    -webkit-appearance: none;
+    position: relative;
+    top: 24px;
+    display: block;
+    margin: 0 0 -36px;
+    width: 100%;
+    height: 36px;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+/* Without Span */
+.pure-material-slider > input:last-child {
+    position: static;
+    margin: 0;
+}
+
+/* Span */
+.pure-material-slider > span {
+    display: inline-block;
+    margin-bottom: 36px;
+}
+
+/* Focus */
+.pure-material-slider > input:focus {
+    outline: none;
+}
+
+/* Disabled */
+.pure-material-slider > input:disabled {
+    cursor: default;
+    opacity: 0.38;
+}
+
+.pure-material-slider > input:disabled + span {
+    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+}
+
+/* Webkit | Track */
+.pure-material-slider > input::-webkit-slider-runnable-track {
+    margin: 17px 0;
+    border-radius: 1px;
+    width: 100%;
+    height: 2px;
+    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+}
+
+/* Webkit | Thumb */
+.pure-material-slider > input::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: 50%;
+    height: 2px;
+    width: 2px;
+    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    transform: scale(6, 6);
+    transition: box-shadow 0.2s;
+}
+
+/* Webkit | Hover, Focus */
+.pure-material-slider:hover > input::-webkit-slider-thumb {
+    box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
+}
+
+.pure-material-slider > input:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
+}
+
+.pure-material-slider:hover > input:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
+}
+
+/* Webkit | Active */
+.pure-material-slider > input:active::-webkit-slider-thumb {
+     box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
+}
+
+/* Webkit | Disabled */
+.pure-material-slider > input:disabled::-webkit-slider-runnable-track {
+    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+}
+
+.pure-material-slider > input:disabled::-webkit-slider-thumb {
+    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+    color: rgb(var(--pure-material-surface-rgb, 255, 255, 255)); /* Safari */
+    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+    transform: scale(4, 4);
+}
+
+/* Moz | Track */
+.pure-material-slider > input::-moz-range-track {
+    margin: 17px 0;
+    border-radius: 1px;
+    width: 100%;
+    height: 2px;
+    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+}
+
+/* Moz | Thumb */
+.pure-material-slider > input::-moz-range-thumb {
+    appearance: none;
+    -moz-appearance: none;
+    border: none;
+    border-radius: 50%;
+    height: 2px;
+    width: 2px;
+    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    transform: scale(6, 6);
+    transition: box-shadow 0.2s;
+}
+
+/* Moz | Progress */
+.pure-material-slider > input::-moz-range-progress {
+    border-radius: 1px;
+    height: 2px;
+    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+}
+
+/* Moz | Hover, Focus */
+.pure-material-slider:hover > input:hover::-moz-range-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+}
+
+.pure-material-slider > input:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+}
+
+.pure-material-slider:hover > input:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+}
+
+/* Moz | Active */
+.pure-material-slider > input:active::-moz-range-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+}
+
+/* Moz | Disabled */
+.pure-material-slider > input:disabled::-moz-range-track {
+    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+}
+
+.pure-material-slider > input:disabled::-moz-range-progress {
+    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
+}
+
+.pure-material-slider > input:disabled::-moz-range-thumb {
+    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+    transform: scale(4, 4);
+}
+
+.pure-material-slider > input::-moz-focus-outer {
+    border: none;
+}
+
+/* MS | Track */
+.pure-material-slider > input::-ms-track {
+    box-sizing: border-box;
+    margin: 17px 0;
+    border: none;
+    border-radius: 1px;
+    padding: 0 17px;
+    width: 100%;
+    height: 2px;
+    background-color: transparent;
+}
+
+.pure-material-slider > input::-ms-fill-lower {
+    border-radius: 1px;
+    height: 2px;
+    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+}
+
+/* MS | Progress */
+.pure-material-slider > input::-ms-fill-upper {
+    border-radius: 1px;
+    height: 2px;
+    background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24);
+}
+
+/* MS | Thumb */
+.pure-material-slider > input::-ms-thumb {
+    appearance: none;
+    margin: 0 17px;
+    border: none;
+    border-radius: 50%;
+    height: 2px;
+    width: 2px;
+    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
+    transform: scale(6, 6);
+    transition: box-shadow 0.2s;
+}
+
+/* MS | Hover, Focus */
+.pure-material-slider:hover > input::-ms-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04);
+}
+
+.pure-material-slider > input:focus::-ms-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12);
+}
+
+.pure-material-slider:hover > input:focus::-ms-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16);
+}
+
+/* MS | Active */
+.pure-material-slider > input:active::-ms-thumb {
+    box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important;
+}
+
+/* MS | Disabled */
+.pure-material-slider > input:disabled::-ms-fill-lower {
+    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+}
+
+.pure-material-slider > input:disabled::-ms-fill-upper {
+    background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
+    opacity: 0.38;
+}
+
+.pure-material-slider > input:disabled::-ms-thumb {
+    background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
+    box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
+    transform: scale(4, 4);
+}

src/renderer/components/ft-slider/ft-slider.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtSlider',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    defaultValue: {
+      type: Number,
+      required: true
+    },
+    minValue: {
+      type: Number,
+      required: true
+    },
+    maxValue: {
+      type: Number,
+      required: true
+    },
+    step: {
+      type: Number,
+      required: true
+    },
+    valueExtension: {
+      type: String,
+      default: null
+    }
+  },
+  data: function () {
+    return {
+      id: '',
+      currentValue: 0
+    }
+  },
+  computed: {
+    displayLabel: function () {
+      if (this.valueExtension === null) {
+        return this.currentValue
+      } else {
+        return `${this.currentValue}${this.valueExtension}`
+      }
+    }
+  },
+  mounted: function () {
+    this.id = this._uid
+    this.currentValue = this.defaultValue
+  }
+})

src/renderer/components/ft-slider/ft-slider.vue

@@ -0,0 +1,23 @@
+<template>
+  <label
+    class="pure-material-slider"
+  >
+    <input
+      :id="id"
+      type="range"
+      :min="minValue"
+      :max="maxValue"
+      :step="step"
+      v-model.number="currentValue"
+    >
+      <span>
+        {{ label }} -
+        <span>
+          {{ displayLabel }}
+        </span>
+      </span>
+  </label>
+</template>
+
+<script src="./ft-slider.js" />
+<style scoped src="./ft-slider.css" />

src/renderer/components/ft-toggle-switch/ft-toggle-switch.js

@@ -18,6 +18,11 @@ export default Vue.extend({
       currentValue: false
     }
   },
+  watch: {
+    defaultValue: function () {
+      this.currentValue = this.defaultValue
+    }
+  },
   mounted: function () {
     this.id = this._uid
     this.currentValue = this.defaultValue

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

@@ -5,5 +5,5 @@
 .card {
   width: 85%;
   margin: 0 auto;
-  margin-bottom: 60px;
+  margin-bottom: 10px;
 }

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

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@@ -15,15 +16,16 @@ export default Vue.extend({
   data: function () {
     return {
       title: 'General Settings',
+      currentTheme: '',
       themeNames: [
         'Light Red',
         'Dark Red',
         'Gray Red'
       ],
       themeValues: [
-        'lightRed',
+        'redLight',
-        'darkRed',
+        'redDark',
-        'grayRed'
+        'redGray'
       ],
       backendNames: [
         'Invidious API',
@@ -55,6 +57,18 @@ export default Vue.extend({
         'grid',
         'list'
       ],
+      thumbnailTypeNames: [
+        'Default',
+        'Beginning',
+        'Middle',
+        'End'
+      ],
+      thumbnailTypeValues: [
+        '',
+        'start',
+        'middle',
+        'end'
+      ],
       regionNames: [
         'Afghanistan',
         'Albania',
@@ -538,15 +552,48 @@ export default Vue.extend({
     }
   },
   computed: {
-    invidiousInstance: function () {
+    backendFallback: function () {
-      return this.$store.getters.getInvidiousInstance
+      return this.$store.getters.getBackendFallback
+    },
+    checkForUpdates: function () {
+      return this.$store.getters.getCheckForUpdates
+    },
+    barColor: function () {
+      return this.$store.getters.getBarColor
+    },
+    backendPreference: function () {
+      return this.$store.getters.getBackendPreference
+    },
+    landingPage: function () {
+      return this.$store.getters.getLandingPage
+    },
+    region: function () {
+      return this.$store.getters.getRegion
+    },
+    listType: function () {
+      return this.$store.getters.getListType
+    },
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
     }
   },
   mounted: function () {
+    this.currentTheme = localStorage.getItem('theme')
   },
   methods: {
-    goToChannel: function () {
+    updateTheme: function (theme) {
-      console.log('TODO: Handle goToChannel')
+      this.$parent.$parent.updateTheme(theme)
-    }
+    },
+
+    ...mapActions([
+      'updateBackendFallback',
+      'updateCheckForUpdates',
+      'updateBarColor',
+      'updateBackendPreference',
+      'updateLandingPage',
+      'updateRegion',
+      'updateListType',
+      'updateThumbnailPreference'
+    ])
   }
 })

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

@@ -9,42 +9,63 @@
     <ft-flex-box>
       <ft-toggle-switch
         label="Fallback to Non-Preferred Backend on Failure"
+        :default-value="backendFallback"
+        @change="updateBackendFallback"
       />
       <ft-toggle-switch
         label="Check for Updates"
+        :default-value="checkForUpdates"
+        @change="updateCheckForUpdates"
+      />
+      <ft-toggle-switch
+        label="Match Top Bar with Theme Color"
+        :default-value="barColor"
+        @change="updateBarColor"
       />
     </ft-flex-box>
     <br>
     <ft-flex-box>
       <ft-select
         placeholder="Preferred API Backend"
-        :value="backendValues[0]"
+        :value="backendPreference"
         :select-names="backendNames"
         :select-values="backendValues"
+        @change="updateBackendPreference"
       />
       <ft-select
         placeholder="Default Theme"
-        :value="themeValues[0]"
+        :value="currentTheme"
         :select-names="themeNames"
         :select-values="themeValues"
+        @change="updateTheme"
       />
       <ft-select
         placeholder="Default Landing Page"
-        :value="defaultPageValues[0]"
+        :value="landingPage"
         :select-names="defaultPageNames"
         :select-values="defaultPageValues"
+        @change="updateLandingPage"
       />
       <ft-select
         placeholder="Region for Trending"
-        :value="regionValues[0]"
+        :value="region"
         :select-names="regionNames"
         :select-values="regionValues"
+        @change="updateRegion"
       />
       <ft-select
         placeholder="Video View Type"
-        :value="viewTypeValues[0]"
+        :value="listType"
         :select-names="viewTypeNames"
         :select-values="viewTypeValues"
+        @change="updateListType"
+      />
+      <ft-select
+        placeholder="Thumbnail Preference"
+        :value="thumbnailPreference"
+        :select-names="thumbnailTypeNames"
+        :select-values="thumbnailTypeValues"
+        @change="updateThumbnailPreference"
       />
     </ft-flex-box>
   </ft-card>

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

@@ -5,5 +5,5 @@
 .card {
   width: 85%;
   margin: 0 auto;
-  margin-bottom: 60px;
+  margin-bottom: 10px;
 }

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

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
@@ -10,6 +11,7 @@ export default Vue.extend({
     'ft-card': FtCard,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
+    'ft-slider': FtSlider,
     'ft-flex-box': FtFlexBox
   },
   data: function () {
@@ -56,8 +58,6 @@ export default Vue.extend({
       return this.$store.getters.getInvidiousInstance
     }
   },
-  mounted: function () {
-  },
   methods: {
     goToChannel: function () {
       console.log('TODO: Handle goToChannel')

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

@@ -30,6 +30,25 @@
       />
     </ft-flex-box>
     <br>
+    <ft-flex-box>
+      <ft-slider
+        label="Default Volume"
+        :default-value="100"
+        :min-value="0"
+        :max-value="100"
+        :step="1"
+        value-extension="%"
+      />
+      <ft-slider
+        label="Default Playback Rate"
+        :default-value="1"
+        :min-value="0.25"
+        :max-value="3"
+        :step="0.25"
+        value-extension="x"
+      />
+    </ft-flex-box>
+    <br>
     <ft-flex-box>
       <ft-select
         placeholder="Default Video Format"

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

@@ -0,0 +1,9 @@
+.relative {
+  position: relative;
+}
+
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import FtCard from '../ft-card/ft-card.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtSelect from '../ft-select/ft-select.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+export default Vue.extend({
+  name: 'PlayerSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-button': FtButton,
+    'ft-select': FtSelect,
+    'ft-flex-box': FtFlexBox
+  },
+  data: function () {
+    return {
+      title: 'Subscription Settings',
+      viewNames: [
+        'Basic',
+        'Modern'
+      ],
+      viewValues: [
+        'basic',
+        'modern'
+      ]
+    }
+  },
+  methods: {
+    goToChannel: function () {
+      console.log('TODO: Handle goToChannel')
+    }
+  }
+})

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

@@ -0,0 +1,33 @@
+<template>
+  <ft-card
+    class="relative card">
+    <h3
+      class="videoTitle"
+    >
+      {{ title }}
+    </h3>
+    <ft-flex-box>
+      <ft-toggle-switch
+        label="Hide Videos When Watched"
+      />
+    </ft-flex-box>
+    <br>
+    <ft-flex-box>
+      <ft-select
+        placeholder="Subscription View Type"
+        :value="viewValues[0]"
+        :select-names="viewNames"
+        :select-values="viewValues"
+      />
+    </ft-flex-box>
+    <br>
+    <ft-flex-box>
+      <ft-button
+        label="Manage My Subscriptions"
+      />
+    </ft-flex-box>
+  </ft-card>
+</template>
+
+<script src="./subscription-settings.js" />
+<style scoped src="./subscription-settings.css" />

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

@@ -10,6 +10,10 @@
     -webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color);
 }
 
+.topNavBarColor {
+  background-color: var(--primary-color);
+}
+
 .menuIcon {
   position: absolute;
   top: 10px;
@@ -101,7 +105,7 @@
 }
 
 .logoIcon {
-  background-image: url("/_icons/iconColorSmall.png");
+  background-image: var(--logo-icon);
   background-repeat: no-repeat;
   background-position: right top;
   background-size: 25px;
@@ -112,8 +116,12 @@
   height: 25px;
 }
 
+.logoIconBarColor {
+  background-image: var(--logo-icon-bar-color);
+}
+
 .logoText {
-  background-image: url("/_icons/textColorSmall.png");
+  background-image: var(--logo-text);
   background-repeat: no-repeat;
   background-position: right top;
   background-size: 100px;
@@ -124,6 +132,10 @@
   height: 40px;
 }
 
+.logoTextBarColor {
+  background-image: var(--logo-text-bar-color);
+}
+
 .searchContainer {
   margin: 0 auto;
   width: 500px;

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

@@ -22,6 +22,10 @@ export default Vue.extend({
 
     isSideNavOpen: function () {
       return this.$store.getters.getIsSideNavOpen
+    },
+
+    barColor: function () {
+      return this.$store.getters.getBarColor
     }
   },
   methods: {

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="topNav">
+  <div
+    class="topNav"
+    :class="{ topNavBarColor: barColor }"
+  >
     <font-awesome-icon
       class="menuIcon"
       icon="bars"
@@ -15,8 +18,14 @@
       icon="arrow-right"
       @click="historyForward"
     />
-    <div class="logoIcon" />
+    <div
-    <div class="logoText" />
+      class="logoIcon"
+      :class="{ logoIconBarColor: barColor }"
+    />
+    <div
+      class="logoText"
+      :class="{ logoTextBarColor: barColor }"
+    />
     <div class="searchContainer">
       <ft-input
         placeholder="Search / Go to URL"

src/renderer/store/modules/settings.js

@@ -8,75 +8,183 @@ const settingsDb = new Datastore({
 })
 
 const state = {
+  currentTheme: 'lightRed',
+  barColor: false,
   listType: 'grid',
   invidiousInstance: 'https://invidio.us',
   backendPreference: 'local',
   useClickBaitRemover: true,
-  clickBaitRemoverPreference: '',
+  thumbnailPreference: '',
   backendFallback: true,
   videoFormatPreference: 'dash',
-  autoplay: true,
+  defaultQuality: 'Auto',
+  videoAutoplay: true,
+  playlistAutoplay: true,
+  playNextVideo: false,
+  checkForUpdates: true,
   useTor: false,
   history: true,
-  autoplayPlaylists: true,
-  playNextVideo: false,
   subtitles: false,
-  updates: true,
-  localScrape: true,
   player: 'dash',
-  quality: 'Auto',
   volume: 1,
   rate: '1',
   proxy: 'SOCKS5://127.0.0.1:9050',
   proxyVideos: false,
   region: 'US',
   debugMode: false,
-  startScreen: 'subscriptions',
+  landingPage: 'subscriptions',
   disctractionFreeMode: false,
   hideWatchedSubs: false,
-  videoView: 'grid',
   profileList: [{ name: 'All Channels', color: '#304FFE' }],
   defaultProfile: 'All Channels'
 }
 
 const getters = {
-  getListType: () => {
+  getBackendFallback: () => {
-    return state.listType
+    return state.backendFallback
+  },
+
+  getCheckForUpdates: () => {
+    return state.checkForUpdates
+  },
+
+  getBarColor: () => {
+    return state.barColor
   },
 
   getBackendPreference: () => {
     return state.backendPreference
   },
 
-  getBackendFallback: () => {
+  getLandingPage: () => {
-    return state.backendFallback
+    return state.landingPage
+  },
+
+  getRegion: () => {
+    return state.region
+  },
+
+  getListType: () => {
+    return state.listType
+  },
+
+  getThumbnailPreference: () => {
+    return state.thumbnailPreference
   },
 
   getInvidiousInstance: () => {
     return state.invidiousInstance
   },
 
-  getUseClickBaitRemover: () => {
-    return state.useClickBaitRemover
-  },
-
-  getClickBaitRemoverPreference: () => {
-    return state.clickBaitRemoverPreference
-  },
-
   getVideoFormatPreference: () => {
     return state.videoFormatPreference
   },
 
   getAutoplay: () => {
-    return state.autoplay
+    return state.videoAutoplay
   }
 }
 
 const actions = {
-  save: ({ rootState }) => {
+  grabUserSettings ({ commit }) {
-    console.log(rootState)
+    settingsDb.find({}, (err, results) => {
+      if (!err) {
+        results.forEach((result) => {
+          switch (result._id) {
+            case 'backendFallback':
+              commit('setBackendFallback', result.value)
+              break
+            case 'checkForUpdates':
+              commit('setCheckForUpdates', result.value)
+              break
+            case 'barColor':
+              commit('setBarColor', result.value)
+              break
+            case 'backendPreference':
+              commit('setBackendPreference', result.value)
+              break
+            case 'landingPage':
+              commit('setLandingPage', result.value)
+              break
+            case 'region':
+              commit('setRegion', result.value)
+              break
+            case 'listType':
+              commit('setListType', result.value)
+              break
+            case 'thumbnailPreference':
+              commit('setThumbnailPreference', result.value)
+              break
+          }
+        })
+      }
+    })
   },
+
+  updateBackendFallback ({ commit }, backendFallback) {
+    settingsDb.update({ _id: 'backendFallback' }, { _id: 'backendFallback', value: backendFallback }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setBackendFallback', backendFallback)
+      }
+    })
+  },
+
+  updateCheckForUpdates ({ commit }, checkForUpdates) {
+    settingsDb.update({ _id: 'checkForUpdates' }, { _id: 'checkForUpdates', value: checkForUpdates }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setCheckForUpdates', checkForUpdates)
+      }
+    })
+  },
+
+  updateBarColor ({ commit }, barColor) {
+    settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setBarColor', barColor)
+      }
+    })
+  },
+
+  updateBackendPreference ({ commit }, backendPreference) {
+    settingsDb.update({ _id: 'backendPreference' }, { _id: 'backendPreference', value: backendPreference }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setBackendPreference', backendPreference)
+      }
+    })
+  },
+
+  updateLandingPage ({ commit }, landingPage) {
+    settingsDb.update({ _id: 'landingPage' }, { _id: 'landingPage', value: landingPage }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setLandingPage', landingPage)
+      }
+    })
+  },
+
+  updateRegion ({ commit }, region) {
+    settingsDb.update({ _id: 'region' }, { _id: 'region', value: region }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setRegion', region)
+      }
+    })
+  },
+
+  updateListType ({ commit }, listType) {
+    settingsDb.update({ _id: 'listType' }, { _id: 'listType', value: listType }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setListType', listType)
+      }
+    })
+  },
+
+  updateThumbnailPreference ({ commit }, thumbnailPreference) {
+    settingsDb.update({ _id: 'thumbnailPreference' }, { _id: 'thumbnailPreference', value: thumbnailPreference }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setThumbnailPreference', thumbnailPreference)
+      }
+    })
+  },
+
   updateUseTor ({ commit }, useTor) {
     settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
       if (!err) {
@@ -84,6 +192,7 @@ const actions = {
       }
     })
   },
+
   updateSetHistory ({ commit }, history) {
     settingsDb.update({ _id: history }, { value: history }, { upsert: true }, (err, history) => {
       if (!err) {
@@ -91,6 +200,7 @@ const actions = {
       }
     })
   },
+
   updateAutoPlay ({ commit }, autoplay) {
     settingsDb.update({ _id: autoplay }, { value: autoplay }, { upsert: true }, (err, autoplay) => {
       if (!err) {
@@ -98,6 +208,7 @@ const actions = {
       }
     })
   },
+
   updateAutoPlayPlaylists ({ commit }, autoplayPlaylists) {
     settingsDb.update({ _id: autoplayPlaylists }, { value: autoplayPlaylists }, { upsert: true }, (err, autoplayPlaylists) => {
       if (!err) {
@@ -105,10 +216,36 @@ const actions = {
       }
     })
   }
-
 }
 
 const mutations = {
+  setCurrentTheme (state, currentTheme) {
+    state.barColor = currentTheme
+  },
+  setBackendFallback (state, backendFallback) {
+    state.backendFallback = backendFallback
+  },
+  setCheckForUpdates (state, checkForUpdates) {
+    state.checkForUpdates = checkForUpdates
+  },
+  setBarColor (state, barColor) {
+    state.barColor = barColor
+  },
+  setBackendPreference (state, backendPreference) {
+    state.backendPreference = backendPreference
+  },
+  setLandingPage (state, defaultLandingPage) {
+    state.defaultLandingPage = defaultLandingPage
+  },
+  setRegion (state, region) {
+    state.region = region
+  },
+  setListType (state, listType) {
+    state.listType = listType
+  },
+  setThumbnailPreference (state, thumbnailPreference) {
+    state.thumbnailPreference = thumbnailPreference
+  },
   setUseTor (state, useTor) {
     state.useTor = useTor
   },
@@ -151,9 +288,6 @@ const mutations = {
   setProxyVideos (state, proxyVideos) {
     state.proxyVideos = proxyVideos
   },
-  setRegion (state, region) {
-    state.region = region
-  },
   setDebugMode (state, debugMode) {
     state.debugMode = debugMode
   },

src/renderer/themes.css

@@ -16,6 +16,58 @@
   --side-nav-hover-color: #e0e0e0;
   --side-nav-active-color: #757575;
   --search-bar-color: #f5f5f5;
+  --logo-icon: url("/_icons/iconColorSmall.png");
+  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.redDark {
+  --primary-color: #f44336;
+  --primary-color-hover: #e53935;
+  --primary-color-active: #c62828;
+  --accent-color: #2196F3;
+  --primary-text-color: #EEEEEE;
+  --secondary-text-color: #E0E0E0;
+  --teritary-text-color: #F5F5F5;
+  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-shadow-color: rgba(0, 0, 0, 0.75);
+  --title-color: #EEEEEE;
+  --bg-color: #212121;
+  --card-bg-color: #303030;
+  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
+  --side-nav-color: #262626;
+  --side-nav-hover-color: #212121;
+  --side-nav-active-color: #303030;
+  --search-bar-color: #f5f5f5;
+  --logo-icon: url("/_icons/iconColorSmall.png");
+  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
+}
+
+.redGray {
+  --primary-color: #f44336;
+  --primary-color-hover: #e53935;
+  --primary-color-active: #c62828;
+  --accent-color: #2196F3;
+  --primary-text-color: #212121;
+  --secondary-text-color: #424242;
+  --teritary-text-color: #757575;
+  --primary-input-color: rgba(0, 0, 0, 0.50);
+  --primary-shadow-color: rgba(232, 232, 232, 1);
+  --title-color: #3f7ac6;
+  --bg-color: #f1f1f1;
+  --card-bg-color: #FFFFFF;
+  --secondary-card-bg-color: #eeeeee;
+  --side-nav-color: #FFFFFF;
+  --side-nav-hover-color: #e0e0e0;
+  --side-nav-active-color: #757575;
+  --search-bar-color: #f5f5f5;
+  --logo-icon: url("/_icons/iconColorSmall.png");
+  --logo-text: url("/_icons/textColorSmall.png");
+  --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
+  --logo-text-bar-color: url("/_icons/textBlackSmall.png");
 }
 
 body {

src/renderer/views/Settings/Settings.css

@@ -1,5 +0,0 @@
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 60px;
-}

src/renderer/views/Settings/Settings.js

@@ -3,6 +3,7 @@ import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
+import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'
 
 export default Vue.extend({
   name: 'Settings',
@@ -10,7 +11,8 @@ export default Vue.extend({
     'ft-card': FtCard,
     'ft-element-list': FtElementList,
     'general-settings': GeneralSettings,
-    'player-settings': PlayerSettings
+    'player-settings': PlayerSettings,
+    'subscription-settings': SubscriptionSettings
   },
   mounted: function () {
   },

src/renderer/views/Settings/Settings.vue

@@ -2,6 +2,7 @@
   <div>
     <general-settings />
     <player-settings />
+    <subscription-settings />
   </div>
 </template>
 

src/renderer/views/Watch/Watch.js

@@ -141,6 +141,8 @@ export default Vue.extend({
         this.videoDescription = result.player_response.videoDetails.shortDescription
         this.recommendedVideos = result.related_videos
         this.videoSourceList = result.player_response.streamingData.formats
+        this.videoLikeCount = result.likes
+        this.videoDislikeCount = result.dislikes
 
         // The response provides a storyboard, however it returns a 403 error.
         // Uncomment this line if that ever changes.