diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 3848137c..35a27cf2 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -810,5 +810,8 @@ }, "LearnMore": { "message": "Learn More" + }, + "SponsorTimeEditScrollNewFeature": { + "message": "Use your mousewheel while hovering over the edit box to quickly adjust the time. Combinations of the ctrl or shift key can be used to fine tune the changes." } } diff --git a/public/content.css b/public/content.css index 7c7a7760..2bd1b113 100644 --- a/public/content.css +++ b/public/content.css @@ -554,4 +554,14 @@ input::-webkit-inner-spin-button { border-width: 15px; border-style: solid; border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent; -} \ No newline at end of file +} + +.sponsorBlockRectangleTooltip { + position: absolute; + border-radius: 5px; + padding: 10px; + min-width: 250px; + min-height: 75px; + white-space: normal; + line-height: 1.5em; +} diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx index a4422703..d16d4760 100644 --- a/src/components/SponsorTimeEditComponent.tsx +++ b/src/components/SponsorTimeEditComponent.tsx @@ -5,6 +5,7 @@ import { ActionType, ActionTypes, Category, CategoryActionType, ContentContainer import Utils from "../utils"; import { getCategoryActionType } from "../utils/categoryUtils"; import SubmissionNoticeComponent from "./SubmissionNoticeComponent"; +import { RectangleTooltip } from "../render/RectangleTooltip"; const utils = new Utils(); @@ -56,6 +57,11 @@ class SponsorTimeEditComponent extends React.Component this.configUpdate(); @@ -86,7 +92,6 @@ class SponsorTimeEditComponent extends React.Component this.setTimeToNow(0)}> {chrome.i18n.getMessage("bracketNow")} - { - const sponsorTimeEdits = this.state.sponsorTimeEdits; - sponsorTimeEdits[0] = e.target.value; - if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = e.target.value; - - this.setState({sponsorTimeEdits}); - this.saveEditTimes(); - }}> + onChange={(e) => {this.handleOnChange(0, e, sponsorTime, e.target.value)}} + onWheel={(e) => {this.changeTimesWhenScrolling(0, e, sponsorTime)}}> {getCategoryActionType(sponsorTime.category) === CategoryActionType.Skippable ? ( @@ -128,14 +126,8 @@ class SponsorTimeEditComponent extends React.Component { - const sponsorTimeEdits = this.state.sponsorTimeEdits; - sponsorTimeEdits[1] = e.target.value; - - this.setState({sponsorTimeEdits}); - - this.saveEditTimes(); - }}> + onChange={(e) => {this.handleOnChange(1, e, sponsorTime, e.target.value)}} + onWheel={(e) => {this.changeTimesWhenScrolling(1, e, sponsorTime)}}> + onClick={this.toggleEditTime.bind(this)} + onWheel={this.toggleEditTime.bind(this)}> {utils.getFormattedTime(segment[0], true) + ((!isNaN(segment[1]) && getCategoryActionType(sponsorTime.category) === CategoryActionType.Skippable) - ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")} + ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")} ); } @@ -240,6 +234,67 @@ class SponsorTimeEditComponent extends React.Component= step) { + timeAsNumber -= step; + } else { + timeAsNumber = 0; + } + sponsorTimeEdits[index] = utils.getFormattedTime(timeAsNumber, true); + if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = sponsorTimeEdits[0]; + this.setState({sponsorTimeEdits}); + this.saveEditTimes(); + } + } + + showToolTip(): void { + if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) { + const element = document.getElementById("sponsorTimesContainer" + this.idSuffix); + new RectangleTooltip({ + text: chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), + referenceNode: element.parentElement, + prependElement: element, + timeout: 15, + bottomOffset: 75 + "px", + leftOffset: -318 + "px", + backgroundColor: "rgba(28, 28, 28, 1.0)", + htmlId: "sponsorTimesContainer" + this.idSuffix, + buttonFunction: () => {Config.config.scrollToEditTimeUpdate = true} + }); + } + } + getCategoryOptions(): React.ReactElement[] { const elements = [(