Add warning when chapter name similar to category

This commit is contained in:
Ajay 2022-06-22 18:10:07 -04:00
parent 70731e42a5
commit 355572ba04
3 changed files with 43 additions and 19 deletions

View file

@ -883,6 +883,9 @@
"categoryPillTitleText": {
"message": "This entire video is labeled as this category and is too tightly integrated to be able to separate"
},
"chapterNameTooltipWarning": {
"message": "One of your chapter names is similar to a category. You should use categories when possible instead."
},
"experiementOptOut": {
"message": "Opt-out of all future experiments",
"description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."

View file

@ -34,6 +34,9 @@ export interface SponsorTimeEditState {
const DEFAULT_CATEGORY = "chooseACategory";
const categoryNames = CompileConfig.categoryList.filter((name) => name !== "chapter")
.map((name) => chrome.i18n.getMessage("category_" + name));
class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
idSuffix: string;
@ -48,6 +51,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
// Used when selecting POI or Full
timesBeforeChanging: number[] = [];
fullVideoWarningShown = false;
categoryNameWarningShown = false;
// For description auto-complete
fetchingSuggestions: boolean;
@ -101,6 +105,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
render(): React.ReactElement {
this.checkToShowFullVideoWarning();
this.checkToShowChapterWarning();
const style: React.CSSProperties = {
textAlign: "center"
@ -336,13 +341,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
showScrollToEditToolTip(): void {
if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), () => { Config.config.scrollToEditTimeUpdate = true });
this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), "scrollToEdit", () => { Config.config.scrollToEditTimeUpdate = true });
}
}
showToolTip(text: string, buttonFunction?: () => void): boolean {
showToolTip(text: string, id: string, buttonFunction?: () => void): boolean {
const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
if (element) {
const htmlId = `sponsorRectangleTooltip${id + this.idSuffix}`;
if (!document.getElementById(htmlId)) {
new RectangleTooltip({
text,
referenceNode: element.parentElement,
@ -351,11 +358,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
bottomOffset: 0 + "px",
leftOffset: -318 + "px",
backgroundColor: "rgba(28, 28, 28, 1.0)",
htmlId: "sponsorTimesContainer" + this.idSuffix,
htmlId,
buttonFunction,
fontSize: "14px",
maxHeight: "200px"
});
}
return true;
} else {
@ -370,12 +378,25 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
if (videoPercentage > 0.6 && !this.fullVideoWarningShown
&& (sponsorTime.category === "sponsor" || sponsorTime.category === "selfpromo" || sponsorTime.category === "chooseACategory")) {
if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"))) {
if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"), "fullVideoWarning")) {
this.fullVideoWarningShown = true;
}
}
}
checkToShowChapterWarning(): void {
const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
if (sponsorTime.actionType === ActionType.Chapter && sponsorTime.description
&& !this.categoryNameWarningShown
&& categoryNames.some(
(category) => sponsorTime.description.toLowerCase().includes(category.toLowerCase()))) {
if (this.showToolTip(chrome.i18n.getMessage("chapterNameTooltipWarning"), "chapterWarning")) {
this.categoryNameWarningShown = true;
}
}
}
getCategoryOptions(): React.ReactElement[] {
const elements = [(
<option value={DEFAULT_CATEGORY}

View file

@ -33,8 +33,8 @@ export class RectangleTooltip {
props.fontSize ??= "10px";
this.container = document.createElement('div');
props.htmlId ??= props.text;
this.container.id = "sponsorRectangleTooltip" + props.htmlId;
props.htmlId ??= "sponsorRectangleTooltip" + props.text;
this.container.id = props.htmlId;
this.container.style.display = "relative";
if (props.prependElement) {