Add exclusive access category

This commit is contained in:
Ajay
2022-01-13 23:44:09 -05:00
parent c986860a42
commit 917e644822
6 changed files with 73 additions and 15 deletions

View File

@@ -33,15 +33,16 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
render(): React.ReactElement {
const style: React.CSSProperties = {
backgroundColor: Config.config.barTypes["preview-" + this.state.segment?.category]?.color,
backgroundColor: this.getColor(),
display: this.state.show ? "flex" : "none",
color: this.state.segment?.category === "sponsor" ? "white" : "black",
color: this.state.segment?.category === "sponsor"
|| this.state.segment?.category === "exclusive_access" ? "white" : "black",
}
return (
<span style={style}
className={"sponsorBlockCategoryPill"}
title={chrome.i18n.getMessage("categoryPillTitleText")}
title={this.getTitleText()}
onClick={(e) => this.toggleOpen(e)}>
<span className="sponsorBlockCategoryPillTitleSection">
<img className="sponsorSkipLogo sponsorSkipObject"
@@ -108,6 +109,17 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
}
}
}
private getColor(): string {
const configObject = Config.config.barTypes["preview-" + this.state.segment?.category]
|| Config.config.barTypes[this.state.segment?.category];
return configObject?.color;
}
getTitleText(): string {
const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");
}
}
export default CategoryPillComponent;

View File

@@ -4,7 +4,7 @@ import Config from "../config"
import * as CompileConfig from "../../config.json";
import { Category, CategorySkipOption } from "../types";
import { getCategoryActionType } from "../utils/categoryUtils";
import { getCategorySuffix } from "../utils/categoryUtils";
export interface CategorySkipOptionsProps {
category: Category;
@@ -78,14 +78,16 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
value={this.state.color} />
</td>
<td id={this.props.category + "PreviewColorOption"}
className="previewColorOption">
<input
className="categoryColorTextBox option-text-box"
type="color"
onChange={(event) => this.setColorState(event, true)}
value={this.state.previewColor} />
</td>
{this.props.category !== "exclusive_access" &&
<td id={this.props.category + "PreviewColorOption"}
className="previewColorOption">
<input
className="categoryColorTextBox option-text-box"
type="color"
onChange={(event) => this.setColorState(event, true)}
value={this.state.previewColor} />
</td>
}
</tr>
@@ -154,12 +156,13 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
getCategorySkipOptions(): JSX.Element[] {
const elements: JSX.Element[] = [];
const optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
for (const optionName of optionNames) {
elements.push(
<option key={optionName} value={optionName}>
{chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategoryActionType(this.props.category)
{chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category)
: optionName)}
</option>
);

View File

@@ -199,7 +199,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
</div>
{/* Action Type */}
{CompileConfig.categorySupport[sponsorTime.category]?.length > 1 ? (
{CompileConfig.categorySupport[sponsorTime.category]?.length > 1
|| CompileConfig.categorySupport[sponsorTime.category][0] !== "skip" ? (
<div style={{position: "relative"}}>
<select id={"sponsorTimeActionTypes" + this.idSuffix}
className="sponsorTimeEditSelector sponsorTimeActionTypes"