Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-08 04:27:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added customizable seek bar colors

Browse Source
This commit is contained in:
Ajay Ramachandran
2020-06-03 20:20:02 -04:00
parent 5336399365
commit ca2727655e
7 changed files with 186 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/_locales/en/messages.json
View File

@@ -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"
},

21
src/components/CategoryChooserComponent.tsx
View File

@@ -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>
);

69
src/components/CategorySkipOptionsComponent.tsx
View File

@@ -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;

74
src/config.ts
View File

@@ -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,

59
src/js-components/previewBar.ts
View File

@@ -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"

8
src/types.ts
View File

@@ -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
};

4
src/utils.ts
View File

@@ -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)
*/