From 69ce0655880d916c132489b539f7d5c92c00dc95 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Sun, 3 Oct 2021 20:56:10 +0200
Subject: [PATCH 01/19] Scrolling over the segment times will change them

---
 src/components/SponsorTimeEditComponent.tsx | 61 +++++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index a4422703..bba1a3c4 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -56,6 +56,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 +91,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,7 +105,6 @@ 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}
@@ -114,6 +117,24 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
                                 this.setState({sponsorTimeEdits});
                                 this.saveEditTimes();
+                            }}
+                            onWheel={(e) => {
+                                // Using mousewheel will increment the number in the edit box
+                                const step = 0.01;
+                                const sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
+                                if (timeAsNumber !== null) {
+                                    if (this.wheelUpOrDown(e)){
+                                        timeAsNumber += step;
+                                    }else if (timeAsNumber >= step){
+                                        timeAsNumber -= step;
+                                    } else {
+                                        timeAsNumber = 0;
+                                    }
+                                    sponsorTimeEdits[0] = utils.getFormattedTime(timeAsNumber, true);
+                                    this.setState({sponsorTimeEdits});
+                                    this.saveEditTimes();
+                                }
                             }}>
                         </input>
 
@@ -135,6 +156,24 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                         this.setState({sponsorTimeEdits});
 
                                         this.saveEditTimes();
+                                    }}
+                                    onWheel={(e) => {
+                                        // Using mousewheel will decrement the number in the edit box
+                                        const step = 0.01;
+                                        const sponsorTimeEdits = this.state.sponsorTimeEdits;
+                                        var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
+                                        if (timeAsNumber !== null) {
+                                            if (this.wheelUpOrDown(e)){
+                                                timeAsNumber += step;
+                                            }else if (timeAsNumber >= step){
+                                                timeAsNumber -= step;
+                                            } else {
+                                                timeAsNumber = 0;
+                                            }
+                                            sponsorTimeEdits[1] = utils.getFormattedTime(timeAsNumber, true);
+                                            this.setState({sponsorTimeEdits});
+                                            this.saveEditTimes();
+                                        }
                                     }}>
                                 </input>
 
@@ -155,12 +194,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 +281,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
+    wheelUpOrDown(e: React.WheelEvent): Boolean{
+        // Returns true if the wheel scrolls up and false if the wheel scrolls down
+        console.log("wheelUpOrDown")
+        if (e.deltaY < 0)
+        {
+            return true;
+        }
+        else if (e.deltaY > 0)
+        {
+            return false;
+        }
+    }
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}

From 143ca6f6e034a730fac1339f0becbaa05e514264 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Sun, 3 Oct 2021 21:19:06 +0200
Subject: [PATCH 02/19] Highlight time stamps are synchronized when scorlling

---
 src/components/SponsorTimeEditComponent.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index bba1a3c4..0790e24f 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -132,6 +132,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                         timeAsNumber = 0;
                                     }
                                     sponsorTimeEdits[0] = utils.getFormattedTime(timeAsNumber, true);
+                                    if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = sponsorTimeEdits[0];
                                     this.setState({sponsorTimeEdits});
                                     this.saveEditTimes();
                                 }

From fe7d9986fa37904779c78a2a6f64e2835844b3d8 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Sun, 3 Oct 2021 21:23:33 +0200
Subject: [PATCH 03/19] Boolean --> boolean; var --> let

---
 src/components/SponsorTimeEditComponent.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 0790e24f..6733a0c2 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -122,7 +122,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 // Using mousewheel will increment the number in the edit box
                                 const step = 0.01;
                                 const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
+                                let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
                                 if (timeAsNumber !== null) {
                                     if (this.wheelUpOrDown(e)){
                                         timeAsNumber += step;
@@ -162,7 +162,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                         // Using mousewheel will decrement the number in the edit box
                                         const step = 0.01;
                                         const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                        var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
+                                        let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
                                         if (timeAsNumber !== null) {
                                             if (this.wheelUpOrDown(e)){
                                                 timeAsNumber += step;
@@ -282,7 +282,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
-    wheelUpOrDown(e: React.WheelEvent): Boolean{
+    wheelUpOrDown(e: React.WheelEvent): boolean{
         // Returns true if the wheel scrolls up and false if the wheel scrolls down
         console.log("wheelUpOrDown")
         if (e.deltaY < 0)

From f3f598d6c75f6e33dc1d9e0a1839de5d7419706c Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Sun, 3 Oct 2021 21:48:12 +0200
Subject: [PATCH 04/19] combined similar code into function. More readable
 function names

---
 src/components/SponsorTimeEditComponent.tsx | 61 ++++++++-------------
 1 file changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 0790e24f..7bafb9c9 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -118,25 +118,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 this.setState({sponsorTimeEdits});
                                 this.saveEditTimes();
                             }}
-                            onWheel={(e) => {
-                                // Using mousewheel will increment the number in the edit box
-                                const step = 0.01;
-                                const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
-                                if (timeAsNumber !== null) {
-                                    if (this.wheelUpOrDown(e)){
-                                        timeAsNumber += step;
-                                    }else if (timeAsNumber >= step){
-                                        timeAsNumber -= step;
-                                    } else {
-                                        timeAsNumber = 0;
-                                    }
-                                    sponsorTimeEdits[0] = utils.getFormattedTime(timeAsNumber, true);
-                                    if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = sponsorTimeEdits[0];
-                                    this.setState({sponsorTimeEdits});
-                                    this.saveEditTimes();
-                                }
-                            }}>
+                            onWheel={(e) => {this.changeTimesWhenScrolling(0, e, sponsorTime)}}>
                         </input>
 
                         {getCategoryActionType(sponsorTime.category) === CategoryActionType.Skippable ? (
@@ -158,24 +140,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
                                         this.saveEditTimes();
                                     }}
-                                    onWheel={(e) => {
-                                        // Using mousewheel will decrement the number in the edit box
-                                        const step = 0.01;
-                                        const sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                        var timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
-                                        if (timeAsNumber !== null) {
-                                            if (this.wheelUpOrDown(e)){
-                                                timeAsNumber += step;
-                                            }else if (timeAsNumber >= step){
-                                                timeAsNumber -= step;
-                                            } else {
-                                                timeAsNumber = 0;
-                                            }
-                                            sponsorTimeEdits[1] = utils.getFormattedTime(timeAsNumber, true);
-                                            this.setState({sponsorTimeEdits});
-                                            this.saveEditTimes();
-                                        }
-                                    }}>
+                                    onWheel={(e) => {this.changeTimesWhenScrolling(1, e, sponsorTime)}}>
                                 </input>
 
                                 <span id={"nowButton1" + this.idSuffix}
@@ -282,8 +247,26 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         );
     }
 
-    wheelUpOrDown(e: React.WheelEvent): Boolean{
-        // Returns true if the wheel scrolls up and false if the wheel scrolls down
+    changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
+        const step = 0.01;
+        const sponsorTimeEdits = this.state.sponsorTimeEdits;
+        let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
+        if (timeAsNumber !== null) {
+            if (this.isWheelScrollingUp(e)){
+                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();
+        }   
+    }
+
+    isWheelScrollingUp(e: React.WheelEvent): boolean {
         console.log("wheelUpOrDown")
         if (e.deltaY < 0)
         {

From 620e75517c7b56812a95fed45decb5b278bd7fd3 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Sun, 3 Oct 2021 22:11:33 +0200
Subject: [PATCH 05/19] Now handeling deltaY=0 and shrunk down code

---
 src/components/SponsorTimeEditComponent.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 7bafb9c9..4daabcdb 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -251,8 +251,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const step = 0.01;
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
         let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
-        if (timeAsNumber !== null) {
-            if (this.isWheelScrollingUp(e)){
+        if (timeAsNumber !== null && e.deltaY != 0) {
+            if (e.deltaY < 0){
                 timeAsNumber += step;
             }else if (timeAsNumber >= step){
                 timeAsNumber -= step;
@@ -266,17 +266,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }   
     }
 
-    isWheelScrollingUp(e: React.WheelEvent): boolean {
-        console.log("wheelUpOrDown")
-        if (e.deltaY < 0)
-        {
-            return true;
-        }
-        else if (e.deltaY > 0)
-        {
-            return false;
-        }
-    }
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}

From 4de55ea5fe53d5a3c425172a66d96b5d5f18446e Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 04:24:14 +0200
Subject: [PATCH 06/19] Scroll amount now 1/1000th while pressing "shift"

---
 src/components/SponsorTimeEditComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 4daabcdb..6a23d6de 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -248,7 +248,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
-        const step = 0.01;
+        const step = (e.shiftKey) ? 0.001 : 0.01;
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
         let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
         if (timeAsNumber !== null && e.deltaY != 0) {

From 142cc2881f2b980b441b22c015c3aac59dd0564f Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 14:26:24 +0200
Subject: [PATCH 07/19] added step modifier ctrl

---
 src/components/SponsorTimeEditComponent.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 6a23d6de..08813440 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -248,7 +248,13 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     changeTimesWhenScrolling(index: number, e: React.WheelEvent, sponsorTime: SponsorTime): void {
-        const step = (e.shiftKey) ? 0.001 : 0.01;
+        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) {
@@ -263,7 +269,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             if (getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = sponsorTimeEdits[0];
             this.setState({sponsorTimeEdits});
             this.saveEditTimes();
-        }   
+        }
     }
 
     getCategoryOptions(): React.ReactElement[] {

From 3fc32a68c35a19c83988fd66e37a199c9cef2801 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 20:20:04 +0200
Subject: [PATCH 08/19] Changing the time a little manually opens a popup

---
 public/content.css                          | 11 +++
 src/components/SponsorTimeEditComponent.tsx | 50 ++++++++----
 src/config.ts                               |  4 +-
 src/render/RectangleTooltip.tsx             | 90 +++++++++++++++++++++
 4 files changed, 138 insertions(+), 17 deletions(-)
 create mode 100644 src/render/RectangleTooltip.tsx

diff --git a/public/content.css b/public/content.css
index 7c7a7760..aa297e95 100644
--- a/public/content.css
+++ b/public/content.css
@@ -554,4 +554,15 @@ 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;
+    background-color: rgba(28, 28, 28, 0.7);
+    border-radius: 5px;
+    padding: 10px;
+	min-width: 250px;
+	min-height: 75px;
+    white-space: normal;
+    line-height: 1.5em;
 }
\ No newline at end of file
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 08813440..08b80479 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();
@@ -110,14 +111,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             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>
 
@@ -132,14 +126,7 @@ 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>
 
@@ -247,6 +234,21 @@ 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
@@ -272,6 +274,22 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
     }
 
+    showToolTip(): void {
+        if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
+            const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
+            new RectangleTooltip({
+                text: "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.",
+                referenceNode: element.parentElement,
+                prependElement: element,
+                timeout: 15,
+                bottomOffset: 75 + "px",
+                leftOffset: -318 + "px",
+                htmlId: "sponsorTimesContainer" + this.idSuffix,
+                buttonFunction: () => {Config.config.scrollToEditTimeUpdate = true}
+            });
+        }
+    }
+
     getCategoryOptions(): React.ReactElement[] {
         const elements = [(
             <option value={DEFAULT_CATEGORY}
diff --git a/src/config.ts b/src/config.ts
index 5d8a58e4..3e211671 100644
--- a/src/config.ts
+++ b/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,
diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx
new file mode 100644
index 00000000..af101959
--- /dev/null
+++ b/src/render/RectangleTooltip.tsx
@@ -0,0 +1,90 @@
+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,
+    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";
+        this.text = props.text;
+        props.buttonFunction ??= () => {};
+
+        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}} 
+                    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={() => {
+                            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);
+    }
+}
\ No newline at end of file

From e5fe99c89b28bdeea79d5b25f892001b23fbf43c Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 20:24:52 +0200
Subject: [PATCH 09/19] Changed empty arrow function to empty function

---
 src/render/RectangleTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx
index af101959..1fa5d2df 100644
--- a/src/render/RectangleTooltip.tsx
+++ b/src/render/RectangleTooltip.tsx
@@ -27,7 +27,7 @@ export class RectangleTooltip {
         props.maxHeight ??= "100px";
         props.maxWidth ??= "300px";
         this.text = props.text;
-        props.buttonFunction ??= () => {};
+        props.buttonFunction ??= function () {};
 
         this.container = document.createElement('div');
         props.htmlId ??= props.text;

From 1ad60720df59a3502c99963096e31c0b314dce86 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 21:04:02 +0200
Subject: [PATCH 10/19] empty function fix

---
 src/render/RectangleTooltip.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx
index 1fa5d2df..be929f35 100644
--- a/src/render/RectangleTooltip.tsx
+++ b/src/render/RectangleTooltip.tsx
@@ -27,7 +27,6 @@ export class RectangleTooltip {
         props.maxHeight ??= "100px";
         props.maxWidth ??= "300px";
         this.text = props.text;
-        props.buttonFunction ??= function () {};
 
         this.container = document.createElement('div');
         props.htmlId ??= props.text;
@@ -70,7 +69,7 @@ export class RectangleTooltip {
                     <button className="sponsorSkipObject sponsorSkipNoticeButton"
                         style ={{float: "right" }}
                         onClick={() => {
-                            props.buttonFunction();
+                            if (props.buttonFunction) props.buttonFunction();
                             this.close();
                         }}>
 

From c571a9ecb66268a6d4cdda3787fcf83a37c8752e Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Mon, 4 Oct 2021 21:37:15 +0200
Subject: [PATCH 11/19] made the tool tip fully opaque for better readability

---
 public/content.css                          | 1 -
 src/components/SponsorTimeEditComponent.tsx | 1 +
 src/render/RectangleTooltip.tsx             | 5 ++++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/content.css b/public/content.css
index aa297e95..060d98de 100644
--- a/public/content.css
+++ b/public/content.css
@@ -558,7 +558,6 @@ input::-webkit-inner-spin-button {
 
 .sponsorBlockRectangleTooltip {
     position: absolute;
-    background-color: rgba(28, 28, 28, 0.7);
     border-radius: 5px;
     padding: 10px;
 	min-width: 250px;
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 08b80479..774c9b90 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -284,6 +284,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 timeout: 15,
                 bottomOffset: 75 + "px",
                 leftOffset: -318 + "px",
+                backgroundColor: "rgba(28, 28, 28, 1.0)",
                 htmlId: "sponsorTimesContainer" + this.idSuffix,
                 buttonFunction: () => {Config.config.scrollToEditTimeUpdate = true}
             });
diff --git a/src/render/RectangleTooltip.tsx b/src/render/RectangleTooltip.tsx
index be929f35..d08e260e 100644
--- a/src/render/RectangleTooltip.tsx
+++ b/src/render/RectangleTooltip.tsx
@@ -12,6 +12,7 @@ export interface RectangleTooltipProps {
     htmlId?: string,
     maxHeight?: string,
     maxWidth?: string,
+    backgroundColor?: string,
     buttonFunction?: () => void;
 }
 
@@ -26,6 +27,7 @@ export class RectangleTooltip {
         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');
@@ -48,7 +50,8 @@ export class RectangleTooltip {
                 bottom: props.bottomOffset, 
                 left: props.leftOffset,
                 maxHeight: props.maxHeight,
-                maxWidth: props.maxWidth}} 
+                maxWidth: props.maxWidth,
+                backgroundColor: props.backgroundColor}} 
                     className="sponsorBlockRectangleTooltip" >
                     <div>
                         <img className="sponsorSkipLogo sponsorSkipObject"

From 6ea226c97230f77d36422848abeaef58f5789775 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Wed, 6 Oct 2021 23:38:06 +0200
Subject: [PATCH 12/19] Added string to the language file

---
 public/_locales/en/messages.json            | 3 +++
 src/components/SponsorTimeEditComponent.tsx | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 5ec3f3e3..74a68aa9 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/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 774c9b90..5a975fc2 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -278,7 +278,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
             const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
             new RectangleTooltip({
-                text: "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.",
+                text: chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"),
                 referenceNode: element.parentElement,
                 prependElement: element,
                 timeout: 15,

From 2e254cb9178faa5c81763980fb3a4d775d8470f4 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Wed, 13 Oct 2021 06:13:32 +0200
Subject: [PATCH 13/19] prettier spaces

Co-authored-by: Ajay Ramachandran <dev@ajay.app>
---
 src/components/SponsorTimeEditComponent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 5a975fc2..7c162cef 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -260,9 +260,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         const sponsorTimeEdits = this.state.sponsorTimeEdits;
         let timeAsNumber = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[index]);
         if (timeAsNumber !== null && e.deltaY != 0) {
-            if (e.deltaY < 0){
+            if (e.deltaY < 0) {
                 timeAsNumber += step;
-            }else if (timeAsNumber >= step){
+            } else if (timeAsNumber >= step) {
                 timeAsNumber -= step;
             } else {
                 timeAsNumber = 0;

From b18f631d332612d2bdd20ef9f599b104dc454bd7 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Wed, 13 Oct 2021 06:14:03 +0200
Subject: [PATCH 14/19] better if/else readability

Co-authored-by: Ajay Ramachandran <dev@ajay.app>
---
 src/components/SponsorTimeEditComponent.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 7c162cef..d16d4760 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -255,8 +255,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         // 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;
+        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) {

From 3162ab93a1d9a4967b6195a866d65565bbcd88d3 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Wed, 13 Oct 2021 06:19:48 +0200
Subject: [PATCH 15/19] Formatting

---
 public/content.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/content.css b/public/content.css
index 060d98de..2bd1b113 100644
--- a/public/content.css
+++ b/public/content.css
@@ -560,8 +560,8 @@ input::-webkit-inner-spin-button {
     position: absolute;
     border-radius: 5px;
     padding: 10px;
-	min-width: 250px;
-	min-height: 75px;
+    min-width: 250px;
+    min-height: 75px;
     white-space: normal;
     line-height: 1.5em;
-}
\ No newline at end of file
+}

From 5b353b05ac4db02a1d0b604fab79f50b3b6e7890 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Wed, 13 Oct 2021 06:22:50 +0200
Subject: [PATCH 16/19] replaced tab with 4 spaces

---
 public/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 84886c01..35a27cf2 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -811,7 +811,7 @@
     "LearnMore": {
         "message": "Learn More"
     },
-	"SponsorTimeEditScrollNewFeature": {
+    "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."
     }
 }

From 7698be8462c792881950358eed0697d8bb5c92f0 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Thu, 14 Oct 2021 07:21:07 +0200
Subject: [PATCH 17/19] Remove merge mistake

---
 src/config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/config.ts b/src/config.ts
index a685e8d8..51c1f06e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -46,7 +46,6 @@ interface SBConfig {
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
     highlightCategoryUpdate: boolean,
-    copySegment,
     colorPalette: {
         red: string,
         white: string,

From a457a8009ec4f9f55199a3b6603cd8bd411a9ba3 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Thu, 14 Oct 2021 08:05:55 +0200
Subject: [PATCH 18/19] SkipNotice countdown now updates again on config update

---
 src/components/SkipNoticeComponent.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 4664ff76..b20776b7 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -631,6 +631,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
         switch (type) {
             case 0:
+                this.clearConfigListener();
                 this.setNoticeInfoMessageWithOnClick(() => window.open(wikiLinkText), chrome.i18n.getMessage("OpenCategoryWikiPage"));
                 this.setState({
                     voted: utils.replaceArrayElement(this.state.voted, SkipNoticeAction.Downvote, index)
@@ -694,11 +695,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     closeListener(): void {
-        //this.clearConfigListener();
+        this.clearConfigListener();
 
         this.props.closeListener();
     }
 
+    clearConfigListener(): void {
+        if (this.configListener) {
+            Config.configListeners.splice(Config.configListeners.indexOf(this.configListener), 1);
+            this.configListener = null;
+        }
+    }
+
     unmutedListener(): void {
         if (this.props.segments.length === 1 
                 && this.props.segments[0].actionType === ActionType.Mute 

From d82ef63d894ab94f936dafdd51caac330ebe33f7 Mon Sep 17 00:00:00 2001
From: FlorianZahn <anderes.zeug@outlook.com>
Date: Thu, 14 Oct 2021 19:05:36 +0200
Subject: [PATCH 19/19] fix loading text not displaying upon voting

---
 src/components/SkipNoticeComponent.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index b20776b7..1a0b0f16 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -502,20 +502,17 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     SkipNoticeActionUpvote(index: number): void {
-        this.contentContainer().vote(1, this.segments[index].UUID, undefined, this);
         if (this.segments.length === 1) this.resetStateToStart();
+        this.contentContainer().vote(1, this.segments[index].UUID, undefined, this);
     }
 
     SkipNoticeActionDownvote(index: number): void {
-        this.contentContainer().vote(0, this.segments[index].UUID, undefined, this);
-        
         if (this.segments.length === 1) this.resetStateToStart();
+        this.contentContainer().vote(0, this.segments[index].UUID, undefined, this);
     }
 
     SkipNoticeActionCategoryVote(index: number): void {
         this.contentContainer().vote(undefined, this.segments[index].UUID, this.categoryOptionRef.current.value as Category, this)
-        
-        //this.resetStateToStart();
     }
 
     skipNoticeActionCopyDownvote(index: number): void {