feat(settings): change the way the settings page is constructed

config/webpack.common.config.js

@@ -21,11 +21,36 @@ const config = {
         use: {
           loader: 'ts-loader',
           options: {
-            transpileOnly: production
+            transpileOnly: false
           }
         }
       },
-      { test: /webpack\..+\.config\.js$/, use: 'webpack-loader' }
+      { test: /webpack\..+\.config\.js$/, use: 'webpack-loader' },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader/useable',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true
+            }
+          },
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader/useable',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: false
+            }
+          }
+        ]
+      }
     ]
   },
   plugins: []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-maia",
-  "version": "0.1.16",
+  "version": "0.2.0",
   "description": "Enhances the user experience on YouTube by providing useful features.",
   "keywords": [
     "YouTube",
@@ -47,6 +47,7 @@
     "archiver": "^2.1.0",
     "async": "^2.5.0",
     "cross-env": "^5.1.1",
+    "css-loader": "^0.28.11",
     "istanbul-instrumenter-loader": "^3.0.0",
     "jasmine-core": "^2.99.1",
     "karma": "^2.0.0",
@@ -59,6 +60,9 @@
     "karma-webpack": "^3.0.0",
     "memory-fs": "^0.4.1",
     "mkdirp": "^0.5.1",
+    "node-sass": "^4.8.3",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.20.3",
     "ts-loader": "^4.0.0",
     "typescript": "^2.4.2",
     "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
@@ -72,6 +76,8 @@
     "immutable": "^3.8.1",
     "inversify": "^4.11.1",
     "preact": "^8.2.5",
+    "preact-material-components": "^1.3.8",
+    "preact-router": "^2.6.0",
     "reflect-metadata": "^0.1.12",
     "sprintf-js": "^1.1.1",
     "uuid": "^3.1.0",

src/app/bootstrap.userscript.ts

@@ -44,8 +44,10 @@ const run = async () => {
     app.enterDocument();
 
     injectJS(injectModule);
+
+    const settingsBasePath = "/settings/maia";
 
-    if (location.hostname === "www.youtube.com" && location.pathname === "/settings/maia") {
+    if (location.hostname === "www.youtube.com" && location.pathname.substring(0, settingsBasePath.length) === settingsBasePath) {
       let handler = new EventHandler();
       handler.listen(document, "readystatechange", () => {
         switch (document.readyState) {
@@ -55,7 +57,7 @@ const run = async () => {
             document.body.innerHTML = "";
             document.head.innerHTML = "";
             const settings = container.get<Settings>(Settings);
-            settings.render();
+            settings.render(settingsBasePath);
             break;
         }
       });

src/app/bootstrap.webextension.ts

@@ -38,8 +38,10 @@ const run = async () => {
     app.enterDocument();
 
     injectJSFile(browser.runtime.getURL('inject.js'));
+
+    const settingsBasePath = "/settings/maia";
 
-    if (location.hostname === "www.youtube.com" && location.pathname === "/settings/maia") {
+    if (location.hostname === "www.youtube.com" && location.pathname.substring(0, settingsBasePath.length) === settingsBasePath) {
       let handler = new EventHandler();
       handler.listen(document, "readystatechange", () => {
         switch (document.readyState) {
@@ -49,7 +51,7 @@ const run = async () => {
             document.body.innerHTML = "";
             document.head.innerHTML = "";
             const settings = container.get<Settings>(Settings);
-            settings.render();
+            settings.render(settingsBasePath);
             break;
         }
       });

src/app/components/IComponent.ts

@@ -31,10 +31,6 @@ export interface onPageNavigationFinish {
   onPageNavigationFinish(detail: PageNavigationDetail): void;
 }
 
-export interface onSettingsReactRegister {
-  onSettingsReactRegister(): ISettingsReact;
-}
-
 export interface onPlayerApiCall {
   onPlayerApiCall(player: Player, name: string, ...args: any[]): onPlayerApiCallResponse|undefined|void;
 }

src/app/components/adblock/index.ts

@@ -1,16 +1,15 @@
-import { onPlayerData, onSettingsReactRegister } from "../IComponent";
+import { onPlayerData } from "../IComponent";
 import { PlayerConfig, PlayerData } from "../../youtube/PlayerConfig";
 import { Player } from "../../player/Player";
 import { Logger } from '../../libs/logging/Logger';
 import { EventType } from '../../youtube/EventType';
 import { ISettingsReact } from "../../settings-storage/ISettings";
-import { AdblockSettings as SettingsReact } from './settings';
 import { AdblockApi } from "./api";
 import { injectable } from "inversify";
 const logger = new Logger("AdblockComponent");
 
 @injectable()
-export class AdblockComponent implements onPlayerData, onSettingsReactRegister {
+export class AdblockComponent implements onPlayerData {
   private _api: AdblockApi;
 
   constructor(api: AdblockApi) {
@@ -70,8 +69,4 @@ export class AdblockComponent implements onPlayerData, onSettingsReactRegister {
 
     return data;
   }
-
-  onSettingsReactRegister(): ISettingsReact {
-    return new SettingsReact(this._api);
-  }
 }

src/app/components/auto-navigation/index.ts

@@ -1,17 +1,16 @@
-import { onPlayerCreated, onSettingsReactRegister, onPlayerApiCall, onPlayerApiCallResponse } from "../IComponent";
+import { onPlayerCreated, onPlayerApiCall, onPlayerApiCallResponse } from "../IComponent";
 import { PlayerData } from "../../youtube/PlayerConfig";
 import { Player } from "../../player/Player";
 import { Logger } from '../../libs/logging/Logger';
 import { EventType } from '../../youtube/EventType';
 import { ISettingsReact } from "../../settings-storage/ISettings";
-import { AutoNavigationSettings as SettingsReact } from './settings';
 import { AutoNavigationApi } from "./api";
 import { AutoNavigationState } from "../../youtube/PlayerApi";
 import { injectable } from "inversify";
 const logger = new Logger("AutoNavigationComponent");
 
 @injectable()
-export class AutoNavigationComponent implements onPlayerCreated, onSettingsReactRegister, onPlayerApiCall {
+export class AutoNavigationComponent implements onPlayerCreated, onPlayerApiCall {
   private _autoNavigationCalls: {[key: string]: number} = {};
   private _api: AutoNavigationApi;
 
@@ -51,8 +50,4 @@ export class AutoNavigationComponent implements onPlayerCreated, onSettingsReact
     }
     this._autoNavigationCalls[id] = 0;
   }
-
-  onSettingsReactRegister(): ISettingsReact {
-    return new SettingsReact(this._api);
-  }
 }

src/app/components/autoplay/index.ts

@@ -1,17 +1,16 @@
-import { onPlayerCreated, onPlayerData, onSettingsReactRegister, onPlayerApiCall, onPlayerApiCallResponse, onPlayerDispose } from "../IComponent";
+import { onPlayerCreated, onPlayerData, onPlayerApiCall, onPlayerApiCallResponse, onPlayerDispose } from "../IComponent";
 import { PlayerConfig, PlayerData } from "../../youtube/PlayerConfig";
 import { Player } from "../../player/Player";
 import { Logger } from '../../libs/logging/Logger';
 import { EventType } from '../../youtube/EventType';
 import { ISettingsReact } from "../../settings-storage/ISettings";
-import { AutoPlaySettings as SettingsReact } from './settings';
 import { AutoPlayApi, AutoPlayMode } from "./api";
 import { FlagsParser } from "../../youtube/FlagsParser";
 import { injectable } from "inversify";
 const logger = new Logger("AutoPlayComponent");
 
 @injectable()
-export class AutoPlayComponent implements onPlayerCreated, onPlayerData, onSettingsReactRegister, onPlayerApiCall, onPlayerDispose {
+export class AutoPlayComponent implements onPlayerCreated, onPlayerData, onPlayerApiCall, onPlayerDispose {
   private _api: AutoPlayApi;
 
   // Ready variable to prevent loadVideoByPlayerVars from being called due to
@@ -132,8 +131,4 @@ export class AutoPlayComponent implements onPlayerCreated, onPlayerData, onSetti
       player.setLoaded(false);
     }
   }
-
-  onSettingsReactRegister(): ISettingsReact {
-    return new SettingsReact(this._api);
-  }
 }