From ca2727655eff4cbcfa6e3e7eff2befd0fd2bb331 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 3 Jun 2020 20:20:02 -0400 Subject: [PATCH] Added customizable seek bar colors --- public/_locales/en/messages.json | 17 +++++ src/components/CategoryChooserComponent.tsx | 21 +++++- .../CategorySkipOptionsComponent.tsx | 69 +++++++++++++++-- src/config.ts | 74 ++++++++++++++++++- src/js-components/previewBar.ts | 59 +-------------- src/types.ts | 8 +- src/utils.ts | 4 + 7 files changed, 186 insertions(+), 66 deletions(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 30e9be2e..06863e14 100644 --- a/public/_locales/en/messages.json +++ b/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" }, diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/CategoryChooserComponent.tsx index 3ec272fa..1aa401c1 100644 --- a/src/components/CategoryChooserComponent.tsx +++ b/src/components/CategoryChooserComponent.tsx @@ -28,6 +28,26 @@ class CategoryChooserComponent extends React.Component + {/* Headers */} + + + {chrome.i18n.getMessage("category")} + + + + {chrome.i18n.getMessage("skipOption")} + + + + {chrome.i18n.getMessage("seekBarColor")} + + + + {chrome.i18n.getMessage("previewColor")} + + + {this.getCategorySkipOptions()} @@ -40,7 +60,6 @@ class CategoryChooserComponent extends React.Component ); diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 58301d7b..eef5636d 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/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 { @@ -19,7 +24,8 @@ class CategorySkipOptionsComponent extends React.Component + + + this.setColorState(event, false)} + value={this.state.color} /> + - {/* TODO: Add colour chooser */} + + this.setColorState(event, true)} + value={this.state.previewColor} /> + + + +
this.save()}> + {chrome.i18n.getMessage("save")} +
+ + + ); } @@ -112,7 +141,7 @@ class CategorySkipOptionsComponent extends React.Component, 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; \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 1b0a56d1..ce7efc91 100644 --- a/src/config.ts +++ b/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, diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index a7e5c8ec..e0931d91 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -5,60 +5,7 @@ 'use strict'; -let barTypes = { - "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" - } -}; +import Config from "../config"; 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; - if (!this.onMobileYouTube) bar.style.opacity = barTypes[types[i]].opacity; + bar.style.backgroundColor = Config.config.barTypes[types[i]].color; + 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" diff --git a/src/types.ts b/src/types.ts index 3bef9248..3d0f783e 100644 --- a/src/types.ts +++ b/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 }; \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index f3501b5d..6e12a0e5 100644 --- a/src/utils.ts +++ b/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) */