Added basic category chooser UI

public/_locales/en/messages.json

@@ -498,5 +498,14 @@
     },
     "category_merchandise": {
         "message": "Merchandise and self-promotion"
+    },
+    "disable": {
+        "message": "Disable"
+    },
+    "manualSkip": {
+        "message": "Manual Skip"
+    },
+    "autoSkip": {
+        "message": "Auto Skip"
     }
 }

public/options/options.css

@@ -324,3 +324,26 @@ svg {
     font-size: 14px;
     color: white;
 }
+
+/* React styles */
+
+.categoryTableElement {
+    font-size: 16px;
+
+    color: white;
+}
+
+.categoryTableElement > * {
+    padding-right: 15px;
+    padding-bottom: 15px;
+}
+
+.categoryOptionsSelector {
+    background-color: #c00000;
+    color: white;
+    
+    border: none;
+    font-size: 14px;
+    padding: 5px;
+    border-radius: 5px;
+}

public/options/options.html

@@ -24,6 +24,13 @@
 	
 		<div id="options" class="hidden">
 
+			<div id="category-type" option-type="react-CategoryChooserComponent">
+
+			</div>
+
+			<br/>
+			<br/>
+
 			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
 				<label class="switch-container" label-name="__MSG_supportInvidious__">
 					<label class="switch">

src/components/CategoryChooserComponent.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import Config from "../config"
+import * as CompileConfig from "../../config.json";
+import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+
+export interface CategoryChooserProps { 
+
+}
+
+export interface CategoryChooserState {
+
+}
+
+class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
+
+    constructor(props: CategoryChooserProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            
+        }
+    }
+
+    render() {
+        return (
+            <table id="categoryChooserTable"
+                className="categoryChooserTable"> <tbody>
+                {this.getCategorySkipOptions()}
+            </tbody> </table>
+        );
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+
+        for (const category of CompileConfig.categoryList) {
+            elements.push(
+                <CategorySkipOptionsComponent category={category}
+                    defaultColor={"00d400"}>
+                </CategorySkipOptionsComponent>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategoryChooserComponent;

src/components/CategorySkipOptionsComponent.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import Config from "../config"
+
+export interface CategorySkipOptionsProps { 
+    category: string;
+    defaultColor: string;
+}
+
+export interface CategorySkipOptionsState {
+    color: string;
+}
+
+class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
+
+    constructor(props: CategorySkipOptionsProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            color: props.defaultColor
+        }
+    }
+
+    render() {
+        return (
+            <tr id={this.props.category + "OptionsRow"}
+                className="categoryTableElement">
+                <td id={this.props.category + "OptionName"}
+                    className="categoryTableLabel">
+                        {chrome.i18n.getMessage("category_" + this.props.category)}
+                </td>
+
+                <td id={this.props.category + "SkipOption"}>
+                    <select
+                        className="categoryOptionsSelector">
+                            {this.getOptions(["disable", "manualSkip", "autoSkip"])}
+                    </select>
+                </td>
+
+                {/* TODO: Add colour chooser */}
+            </tr>
+        );
+    }
+
+    /**
+     * @param optionNames List of option names as codes that will be sent to i18n
+     */
+    getOptions(optionNames: string[]): JSX.Element[] {
+        let elements: JSX.Element[] = [];
+
+        for (const optionName of optionNames) {
+            elements.push(
+                <option value={optionName}>
+                    {chrome.i18n.getMessage(optionName)}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default CategorySkipOptionsComponent;

src/options.ts

@@ -5,6 +5,7 @@ import * as CompileConfig from "../config.json";
 (<any> window).SB = Config;
 
 import Utils from "./utils";
+import CategoryChooser from "./render/CategoryChooser";
 var utils = new Utils();
 
 window.addEventListener('DOMContentLoaded', init);
@@ -164,6 +165,9 @@ async function init() {
                 });
 
                 break;
+            case "react-CategoryChooserComponent":
+                new CategoryChooser(optionsElements[i]);
+            break;
         }
     }
 

src/render/CategoryChooser.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import CategoryChooserComponent from "../components/CategoryChooserComponent";
+
+class CategoryChooser {
+
+    constructor(element: Element) {
+        ReactDOM.render(
+            <CategoryChooserComponent/>,
+            element
+        );
+    }
+}
+
+export default CategoryChooser;