Category selections now save

src/components/CategoryChooserComponent.tsx

@@ -26,9 +26,11 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
     render() {
         return (
             <table id="categoryChooserTable"
-                className="categoryChooserTable"> <tbody>
-                {this.getCategorySkipOptions()}
-            </tbody> </table>
+                className="categoryChooserTable"> 
+                <tbody>
+                    {this.getCategorySkipOptions()}
+                </tbody> 
+            </table>
         );
     }
 
@@ -38,7 +40,8 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
         for (const category of CompileConfig.categoryList) {
             elements.push(
                 <CategorySkipOptionsComponent category={category}
-                    defaultColor={"00d400"}>
+                    defaultColor={"00d400"}
+                    key={category}>
                 </CategorySkipOptionsComponent>
             );
         }

src/components/CategorySkipOptionsComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import Config from "../config"
 
 export interface CategorySkipOptionsProps { 
@@ -22,6 +23,14 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 
     render() {
+        let defaultOption = "disable";
+        // Set the default opton properly
+        for (const categorySelection of Config.config.categorySelections) {
+            if (categorySelection.name === this.props.category) {
+                defaultOption = categorySelection.autoSkip ? "autoSkip" : "manualSkip";
+            }
+        }
+
         return (
             <tr id={this.props.category + "OptionsRow"}
                 className="categoryTableElement">
@@ -32,8 +41,10 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
                 <td id={this.props.category + "SkipOption"}>
                     <select
-                        className="categoryOptionsSelector">
-                            {this.getOptions(["disable", "manualSkip", "autoSkip"])}
+                        className="categoryOptionsSelector"
+                        defaultValue={defaultOption}
+                        onChange={this.skipOptionSelected.bind(this)}>
+                            {this.getCategorySkipOptions()}
                     </select>
                 </td>
 
@@ -42,15 +53,48 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         );
     }
 
-    /**
-     * @param optionNames List of option names as codes that will be sent to i18n
-     */
-    getOptions(optionNames: string[]): JSX.Element[] {
+    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+        switch (event.target.value) {
+            case "disable": 
+                this.removeCurrentCategorySelection();
+
+                break;
+            default:
+                this.removeCurrentCategorySelection();
+
+                Config.config.categorySelections.push({
+                    name: this.props.category,
+                    autoSkip: event.target.value === "autoSkip"
+                });
+
+                // Forces the Proxy to send this to the chrome storage API
+                Config.config.categorySelections = Config.config.categorySelections;
+        }
+    }
+
+    /** Removes this category from the config list of category selections */
+    removeCurrentCategorySelection(): void {
+        // Remove it if it exists
+        for (let i = 0; i < Config.config.categorySelections.length; i++) {
+            if (Config.config.categorySelections[i].name === this.props.category) {
+                Config.config.categorySelections.splice(i, 1);
+
+                // Forces the Proxy to send this to the chrome storage API
+                Config.config.categorySelections = Config.config.categorySelections;
+
+                break;
+            }
+        }
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
         let elements: JSX.Element[] = [];
 
+        let optionNames = ["disable", "manualSkip", "autoSkip"];
+
         for (const optionName of optionNames) {
             elements.push(
-                <option value={optionName}>
+                <option key={optionName} value={optionName}>
                     {chrome.i18n.getMessage(optionName)}
                 </option>
             );

src/config.ts

@@ -1,4 +1,5 @@
 import * as CompileConfig from "../config.json";
+import { CategorySelection } from "./types";
 
 interface SBConfig {
     userID: string,
@@ -25,7 +26,10 @@ interface SBConfig {
     serverAddress: string,
     minDuration: number,
     checkForUnlistedVideos: boolean,
-    mobileUpdateShowCount: number
+    mobileUpdateShowCount: number,
+
+    // What categories should be skipped
+    categorySelections: CategorySelection[]
 }
 
 interface SBObject {
@@ -120,7 +124,11 @@ var Config: SBObject = {
         serverAddress: CompileConfig.serverAddress,
         minDuration: 0,
         checkForUnlistedVideos: false,
-        mobileUpdateShowCount: 0
+        mobileUpdateShowCount: 0,
+        categorySelections: [{
+            name: "sponsor",
+            autoSkip: true
+        }]
     },
     localConfig: null,
     config: null,

src/types.ts

@@ -26,8 +26,13 @@ interface VideoDurationResponse {
     duration: number;
 }
 
+interface CategorySelection {
+    name: string;
+    autoSkip: boolean;
+}
 
 export {
     VideoDurationResponse,
-    ContentContainer
+    ContentContainer,
+    CategorySelection
 };