Added customizable seek bar colors

public/_locales/en/messages.json

@@ -510,6 +510,23 @@
     "showOverlay": {
         "message": "Show In Seek Bar"
     },
+    "colorFormatIncorrect": {
+        "message": "Your color is formatted incorrectly. It should be a 3 or 6 digit hex code with a number sign at the beginning."
+    },
+    "previewColor": {
+        "message": "Preview Color",
+        "description": "Referring to submissions that have not been sent to the server yet."
+    },
+    "seekBarColor": {
+        "message": "Seek Bar Color"
+    },
+    "category": {
+        "message": "Category"
+    },
+    "skipOption": {
+        "message": "Skip Option",
+        "description": "Used on the options page to describe the ways to skip the segment (auto skip, manual, etc.)"
+    },
     "enableTestingServer": {
         "message": "Enable Beta Testing Server"
     },

src/components/CategoryChooserComponent.tsx

@@ -28,6 +28,26 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
             <table id="categoryChooserTable"
                 className="categoryChooserTable"> 
                 <tbody>
+                    {/* Headers */}
+                    <tr id={"CategoryOptionsRow"}
+                            className="categoryTableElement categoryTableHeader">
+                        <td id={"CategoryOptionName"}>
+                            {chrome.i18n.getMessage("category")}
+                        </td>
+
+                        <td id={"CategorySkipOption"}>
+                            {chrome.i18n.getMessage("skipOption")}
+                        </td>
+
+                        <td id={"CategoryColorOption"}>
+                            {chrome.i18n.getMessage("seekBarColor")}
+                        </td>
+
+                        <td id={"CategoryPreviewColorOption"}>
+                            {chrome.i18n.getMessage("previewColor")}
+                        </td>
+                    </tr>
+
                     {this.getCategorySkipOptions()}
                 </tbody> 
             </table>
@@ -40,7 +60,6 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
         for (const category of CompileConfig.categoryList) {
             elements.push(
                 <CategorySkipOptionsComponent category={category}
-                    defaultColor={"00d400"}
                     key={category}>
                 </CategorySkipOptionsComponent>
             );

src/components/CategorySkipOptionsComponent.tsx

@@ -2,14 +2,19 @@ import * as React from "react";
 
 import Config from "../config"
 import { CategorySkipOption } from "../types";
+import Utils from "../utils";
+
+const utils = new Utils();
 
 export interface CategorySkipOptionsProps { 
     category: string;
-    defaultColor: string;
+    defaultColor?: string;
+    defaultPreviewColor?: string;
 }
 
 export interface CategorySkipOptionsState {
     color: string;
+    previewColor: string;
 }
 
 class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
@@ -19,7 +24,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
         // Setup state
         this.state = {
-            color: props.defaultColor
+            color: props.defaultColor || Config.config.barTypes[this.props.category].color,
+            previewColor: props.defaultPreviewColor || Config.config.barTypes["preview-" + this.props.category].color,
         }
     }
 
@@ -53,13 +59,36 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 <td id={this.props.category + "SkipOption"}>
                     <select
                         className="categoryOptionsSelector"
-                        defaultValue={defaultOption}
                         onChange={this.skipOptionSelected.bind(this)}>
                             {this.getCategorySkipOptions()}
                     </select>
                 </td>
+                
+                <td id={this.props.category + "ColorOption"}>
+                    <input
+                        className="categoryColorTextBox option-text-box"
+                        type="text"
+                        onChange={(event) => this.setColorState(event, false)}
+                        value={this.state.color} />
+                </td>
 
-                {/* TODO: Add colour chooser */}
+                <td id={this.props.category + "PreviewColorOption"}>
+                    <input
+                        className="categoryColorTextBox option-text-box"
+                        type="text"
+                        onChange={(event) => this.setColorState(event, true)}
+                        value={this.state.previewColor} />
+                </td>
+
+                <td id={this.props.category + "SaveButton"}>
+                    <div 
+                        className="option-button trigger-button"
+                        onClick={() => this.save()}>
+                        {chrome.i18n.getMessage("save")}
+                    </div>
+                </td>
+
+                
             </tr>
         );
     }
@@ -112,7 +141,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
     getCategorySkipOptions(): JSX.Element[] {
         let elements: JSX.Element[] = [];
-""
+
         let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
 
         for (const optionName of optionNames) {
@@ -125,6 +154,36 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
 
         return elements;
     }
+
+    setColorState(event: React.ChangeEvent<HTMLInputElement>, preview: boolean) {
+        if (preview) {
+            this.setState({
+                previewColor: event.target.value
+            });
+        } else {
+            this.setState({
+                color: event.target.value
+            });
+        }
+    }
+
+    // Save text box data
+    save() {
+        // Validate colors
+        let checkVar = [this.state.color, this.state.previewColor]
+        for (const color of checkVar) {
+            if (color[0] !== "#" || (color.length !== 7 && color.length !== 4) || !utils.isHex(color.slice(1))) {
+                alert(chrome.i18n.getMessage("colorFormatIncorrect") + " " + color.slice(1) + " " + utils.isHex(color.slice(1)) + " " + utils.isHex("abcd123"));
+                return;
+            }
+        }
+
+        // Save colors
+        Config.config.barTypes[this.props.category].color = this.state.color;
+        Config.config.barTypes["preview-" + this.props.category].color = this.state.previewColor;
+        // Make listener get called
+        Config.config.barTypes = Config.config.barTypes;
+    }
 }
 
 export default CategorySkipOptionsComponent;

src/config.ts

@@ -1,5 +1,5 @@
 import * as CompileConfig from "../config.json";
-import { CategorySelection, CategorySkipOption } from "./types";
+import { CategorySelection, CategorySkipOption, PreviewBarOption } from "./types";
 
 import Utils from "./utils";
 const utils = new Utils();
@@ -33,7 +33,23 @@ interface SBConfig {
     testingServer: boolean,
 
     // What categories should be skipped
-    categorySelections: CategorySelection[]
+    categorySelections: CategorySelection[],
+
+    // Preview bar
+    barTypes: {
+        "sponsor": PreviewBarOption,
+        "preview-sponsor": PreviewBarOption,
+        "intro": PreviewBarOption,
+        "preview-intro": PreviewBarOption,
+        "outro": PreviewBarOption,
+        "preview-outro": PreviewBarOption,
+        "interaction": PreviewBarOption,
+        "preview-interaction": PreviewBarOption,
+        "selfpromo": PreviewBarOption,
+        "preview-selfpromo": PreviewBarOption,
+        "music_offtopic": PreviewBarOption,
+        "preview-music_offtopic": PreviewBarOption
+    }
 }
 
 interface SBObject {
@@ -134,7 +150,59 @@ var Config: SBObject = {
         categorySelections: [{
             name: "sponsor",
             option: CategorySkipOption.AutoSkip
-        }]
+        }],
+
+        // Preview bar
+        barTypes: {
+            "sponsor": {
+                color: "#00d400",
+                opacity: "0.7"
+            },
+            "preview-sponsor": {
+                color: "#007800",
+                opacity: "0.7"
+            },
+            "intro": {
+                color: "#00ffff",
+                opacity: "0.7"
+            },
+            "preview-intro": {
+                color: "#008080",
+                opacity: "0.7"
+            },
+            "outro": {
+                color: "#0202ed",
+                opacity: "0.7"
+            },
+            "preview-outro": {
+                color: "#000070",
+                opacity: "0.7"
+            },
+            "interaction": {
+                color: "#cc00ff",
+                opacity: "0.7"
+            },
+            "preview-interaction": {
+                color: "#6c0087",
+                opacity: "0.7"
+            },
+            "selfpromo": {
+                color: "#ffff00",
+                opacity: "0.7"
+            },
+            "preview-selfpromo": {
+                color: "#bfbf35",
+                opacity: "0.7"
+            },
+            "music_offtopic": {
+                color: "#ff9900",
+                opacity: "0.7"
+            },
+            "preview-music_offtopic": {
+                color: "#a6634a",
+                opacity: "0.7"
+            }
+        }
     },
     localConfig: null,
     config: null,

src/js-components/previewBar.ts

@@ -5,60 +5,7 @@
 
 'use strict';
 
-let barTypes = {
+import Config from "../config";
-	"undefined": {
-		color: "#00d400",
-		opacity: "0.7"
-	},
-	"sponsor": {
-		color: "#00d400",
-		opacity: "0.7"
-	},
-	"preview-sponsor": {
-		color: "#007800",
-		opacity: "0.7"
-	},
-	"intro": {
-		color: "#00ffff",
-		opacity: "0.7"
-	},
-	"preview-intro": {
-		color: "#008080",
-		opacity: "0.7"
-	},
-	"outro": {
-		color: "#0202ed",
-		opacity: "0.7"
-	},
-	"preview-outro": {
-		color: "#000070",
-		opacity: "0.7"
-	},
-	"interaction": {
-		color: "#cc00ff",
-		opacity: "0.7"
-	},
-	"preview-interaction": {
-		color: "#6c0087",
-		opacity: "0.7"
-	},
-	"selfpromo": {
-		color: "#ffff00",
-		opacity: "0.7"
-	},
-	"preview-selfpromo": {
-		color: "#bfbf35",
-		opacity: "0.7"
-	},
-	"music_offtopic": {
-		color: "#ff9900",
-		opacity: "0.7"
-	},
-	"preview-music_offtopic": {
-		color: "#a6634a",
-		opacity: "0.7"
-	}
-};
 
 class PreviewBar {
 	container: HTMLUListElement;
@@ -208,8 +155,8 @@ class PreviewBar {
 			let bar = this.createBar();
 			bar.setAttribute('data-vs-segment-type', types[i]);
 
-			bar.style.backgroundColor = barTypes[types[i]].color;
+			bar.style.backgroundColor = Config.config.barTypes[types[i]].color;
-			if (!this.onMobileYouTube) bar.style.opacity = barTypes[types[i]].opacity;
+			if (!this.onMobileYouTube) bar.style.opacity = Config.config.barTypes[types[i]].opacity;
 			bar.style.width = width + '%';
 			bar.style.left = (timestamps[i][0] / duration * 100) + "%";
 			bar.style.position = "absolute"

src/types.ts

@@ -58,6 +58,11 @@ interface SponsorTime {
     hidden?: SponsorHideType;
 }
 
+interface PreviewBarOption {
+    color: string,
+    opacity: string
+}
+
 type VideoID = string;
 
 export {
@@ -68,5 +73,6 @@ export {
     CategorySkipOption,
     SponsorTime,
     VideoID,
-    SponsorHideType
+    SponsorHideType,
+    PreviewBarOption
 };

src/utils.ts

@@ -358,6 +358,10 @@ class Utils {
         return window.location.protocol === "http:" || window.location.protocol === "https:";
     }
 
+    isHex(num: string): boolean {
+        return Boolean(num.match(/^[0-9a-f]+$/i));
+    }
+
     /**
      * Is this Firefox (web-extensions)
      */