Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into chapters

public/_locales/en/messages.json

@@ -816,5 +816,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."
     }
 }

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;
-}
+}
+
+.sponsorBlockRectangleTooltip {
+    position: absolute;
+    border-radius: 5px;
+    padding: 10px;
+    min-width: 250px;
+    min-height: 75px;
+    white-space: normal;
+    line-height: 1.5em;
+}

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<SponsorTimeEditProps, Spo
             event.stopPropagation();
         });
 
+        // Prevent scrolling while changing times
+        document.getElementById("sponsorTimesContainer" + this.idSuffix).addEventListener('wheel', function (event) {
+            event.preventDefault();
+        }, {passive: false});
+
         // Add as a config listener
         if (!this.configUpdateListener) {
             this.configUpdateListener = () => this.configUpdate();
@@ -86,7 +92,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 node.style.setProperty("text-shadow", "none", "important");
             }
         };
-
         // Create time display
         let timeDisplay: JSX.Element;
         const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
@@ -101,20 +106,13 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             onClick={() => this.setTimeToNow(0)}>
                                 {chrome.i18n.getMessage("bracketNow")}
                         </span>
-
                         <input id={"submittingTime0" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput"
                             ref={oldYouTubeDarkStyles}
                             type="text"
                             value={this.state.sponsorTimeEdits[0]}
-                            onChange={(e) => {
-                                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)}}>
                         </input>
 
                         {getCategoryActionType(sponsorTime.category) === CategoryActionType.Skippable ? (
@@ -128,14 +126,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                     ref={oldYouTubeDarkStyles}
                                     type="text"
                                     value={this.state.sponsorTimeEdits[1]}
-                                    onChange={(e) => {
-                                        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)}}>
                                 </input>
 
                                 <span id={"nowButton1" + this.idSuffix}
@@ -155,12 +147,14 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             );
         } else {
             timeDisplay = (
+                
                 <div id={"sponsorTimesContainer" + this.idSuffix}
                     className="sponsorTimeDisplay"
-                    onClick={this.toggleEditTime.bind(this)}>
+                    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) : "")}
                 </div>
             );
         }
@@ -240,6 +234,67 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
+    handleOnChange(index: number, e: React.ChangeEvent, sponsorTime: SponsorTime, targetValue: string): void {
+        const sponsorTimeEdits = this.state.sponsorTimeEdits;
+        
+        // check if change is small engough to show tooltip
+        const before = utils.getFormattedTimeToSeconds(sponsorTimeEdits[index]);
+        const after = utils.getFormattedTimeToSeconds(targetValue);
+        const difference = Math.abs(before - after);
+        if (0 < difference && difference< 0.5) this.showToolTip();
+
+        sponsorTimeEdits[index] = targetValue;
+        if (index === 0 && getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = targetValue;
+
+        this.setState({sponsorTimeEdits});
+        this.saveEditTimes();
+    }
+    changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
+        let step = 0;
+        // shift + ctrl = 1
+        // ctrl = 0.1
+        // default = 0.01
+        // shift = 0.001
+        if (e.shiftKey) {
+            step = (e.ctrlKey) ? 1 : 0.001;
+        } else {
+            step = (e.ctrlKey) ? 0.1 : 0.01;
+        }
+        
+        const sponsorTimeEdits = this.state.sponsorTimeEdits;
+        let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
+        if (timeAsNumber !== null && e.deltaY != 0) {
+            if (e.deltaY < 0) {
+                timeAsNumber += step;
+            } else if (timeAsNumber >= 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 = [(
             <option value={DEFAULT_CATEGORY}

src/config.ts

@@ -43,7 +43,8 @@ interface SBConfig {
     showDonationLink: boolean,
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
-    highlightCategoryUpdate: boolean
+    highlightCategoryUpdate: boolean,
+    scrollToEditTimeUpdate: boolean
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -191,6 +192,7 @@ const Config: SBObject = {
         autoHideInfoButton: true,
         autoSkipOnMusicVideos: false,
         highlightCategoryUpdate: false, // TODO: Remove this once update is done
+        scrollToEditTimeUpdate: false, // false means the tooltip will be shown
 
         categorySelections: [{
             name: "sponsor" as Category,

src/render/RectangleTooltip.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export interface RectangleTooltipProps {
+    text: string, 
+    link?: string,
+    referenceNode: HTMLElement,
+    prependElement?: HTMLElement, // Element to append before
+    bottomOffset?: string,
+    leftOffset?: string,
+    timeout?: number,
+    htmlId?: string,
+    maxHeight?: string,
+    maxWidth?: string,
+    backgroundColor?: string,
+    buttonFunction?: () => void;
+}
+
+export class RectangleTooltip {
+    text: string;   
+    container: HTMLDivElement;
+
+    timer: NodeJS.Timeout;
+    
+    constructor(props: RectangleTooltipProps) {
+        props.bottomOffset ??= "0px";
+        props.leftOffset ??= "0px";
+        props.maxHeight ??= "100px";
+        props.maxWidth ??= "300px";
+        props.backgroundColor ??= "rgba(28, 28, 28, 0.7)";
+        this.text = props.text;
+
+        this.container = document.createElement('div');
+        props.htmlId ??= props.text;
+        this.container.id = "sponsorRectangleTooltip" + props.htmlId;
+        this.container.style.display = "relative";
+
+        if (props.prependElement) {
+            props.referenceNode.insertBefore(this.container, props.prependElement);
+        } else {
+            props.referenceNode.appendChild(this.container);
+        }
+
+        if (props.timeout) {
+            this.timer = setTimeout(() => this.close(), props.timeout * 1000);
+        }
+
+        ReactDOM.render(
+            <div style={{
+                bottom: props.bottomOffset, 
+                left: props.leftOffset,
+                maxHeight: props.maxHeight,
+                maxWidth: props.maxWidth,
+                backgroundColor: props.backgroundColor}} 
+                    className="sponsorBlockRectangleTooltip" >
+                    <div>
+                        <img className="sponsorSkipLogo sponsorSkipObject"
+                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        </img>
+                        <span className="sponsorSkipObject">
+                            {this.text + (props.link ? ". " : "")}
+                            {props.link ? 
+                                <a style={{textDecoration: "underline"}} 
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        href={props.link}>
+                                    {chrome.i18n.getMessage("LearnMore")}
+                                    </a> 
+                            : null}
+                        </span>
+                    </div>
+                    <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                        style ={{float: "right" }}
+                        onClick={() => {
+                            if (props.buttonFunction) props.buttonFunction();
+                            this.close();
+                        }}>
+
+                        {chrome.i18n.getMessage("GotIt")}
+                    </button>
+            </div>,
+            this.container
+        )
+    }
+
+    close(): void {
+        ReactDOM.unmountComponentAtNode(this.container);
+        this.container.remove();
+
+        if (this.timer) clearTimeout(this.timer);
+    }
+}