diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 2653f270..6cfbcf71 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -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." diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx index 2260abe3..4a7e354f 100644 --- a/src/components/SponsorTimeEditComponent.tsx +++ b/src/components/SponsorTimeEditComponent.tsx @@ -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 { idSuffix: string; @@ -48,6 +51,7 @@ class SponsorTimeEditComponent extends React.Component { 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) { - new RectangleTooltip({ - text, - referenceNode: element.parentElement, - prependElement: element, - timeout: 15, - bottomOffset: 0 + "px", - leftOffset: -318 + "px", - backgroundColor: "rgba(28, 28, 28, 1.0)", - htmlId: "sponsorTimesContainer" + this.idSuffix, - buttonFunction, - fontSize: "14px", - maxHeight: "200px" - }); + if (element) { + const htmlId = `sponsorRectangleTooltip${id + this.idSuffix}`; + if (!document.getElementById(htmlId)) { + new RectangleTooltip({ + text, + referenceNode: element.parentElement, + prependElement: element, + timeout: 15, + bottomOffset: 0 + "px", + leftOffset: -318 + "px", + backgroundColor: "rgba(28, 28, 28, 1.0)", + htmlId, + buttonFunction, + fontSize: "14px", + maxHeight: "200px" + }); + } return true; } else { @@ -370,12 +378,25 @@ class SponsorTimeEditComponent extends React.Component 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 = [(