From 618f8a52f72850534ce2b2f1ff9af8a067dcda76 Mon Sep 17 00:00:00 2001
From: opl- <opl-@users.noreply.github.com>
Date: Fri, 6 Nov 2020 13:21:39 +0100
Subject: [PATCH 1/2] Use formatted time inputs for segment editing

Additionally, removes unused util functions and saves the edits on changes to update the preview immediately
---
 public/content.css                          |  8 +--
 src/components/SponsorTimeEditComponent.tsx | 76 +++++++--------------
 src/utils.ts                                | 26 +++----
 3 files changed, 40 insertions(+), 70 deletions(-)

diff --git a/public/content.css b/public/content.css
index 651136fd..62420f2c 100644
--- a/public/content.css
+++ b/public/content.css
@@ -372,12 +372,8 @@ input::-webkit-inner-spin-button {
 	-moz-appearance: textfield;
 }
 
-.sponsorTimeEditMinutes {
-	width: 30px;
-}
-
-.sponsorTimeEditSeconds {
-	width: 60px;
+.sponsorTimeEditInput {
+	width: 90px;
 }
 
 .sponsorNowButton {
diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 0f608027..a99a96e7 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -20,7 +20,7 @@ export interface SponsorTimeEditProps {
 
 export interface SponsorTimeEditState {
     editing: boolean;
-    sponsorTimeEdits: string[][];
+    sponsorTimeEdits: [string, string];
 }
 
 class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
@@ -40,7 +40,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         this.state = {
             editing: false,
-            sponsorTimeEdits: [[null, null], [null, null]]
+            sponsorTimeEdits: [null, null]
         };
     }
 
@@ -96,29 +96,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 {chrome.i18n.getMessage("bracketNow")}
                         </span>
 
-                        <input id={"submittingTimeMinutes0" + this.idSuffix}
-                            className="sponsorTimeEdit sponsorTimeEditMinutes"
+                        <input id={"submittingTime0" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditInput"
                             ref={oldYouTubeDarkStyles}
-                            type="number"
-                            value={this.state.sponsorTimeEdits[0][0]}
+                            type="text"
+                            value={this.state.sponsorTimeEdits[0]}
                             onChange={(e) => {
                                 let sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                sponsorTimeEdits[0][0] = e.target.value;
+                                sponsorTimeEdits[0] = e.target.value;
 
                                 this.setState({sponsorTimeEdits});
-                            }}>
-                        </input>
 
-                        <input id={"submittingTimeSeconds0" + this.idSuffix}
-                            className="sponsorTimeEdit sponsorTimeEditSeconds"
-                            ref={oldYouTubeDarkStyles}
-                            type="number"
-                            value={this.state.sponsorTimeEdits[0][1]}
-                            onChange={(e) => {
-                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                sponsorTimeEdits[0][1] = e.target.value;
-
-                                this.setState({sponsorTimeEdits});
+                                this.saveEditTimes();
                             }}>
                         </input>
 
@@ -126,29 +115,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             {" " + chrome.i18n.getMessage("to") + " "}
                         </span>
 
-                        <input id={"submittingTimeMinutes1" + this.idSuffix}
-                            className="sponsorTimeEdit sponsorTimeEditMinutes"
+                        <input id={"submittingTime1" + this.idSuffix}
+                            className="sponsorTimeEdit sponsorTimeEditInput"
                             ref={oldYouTubeDarkStyles}
                             type="text"
-                            value={this.state.sponsorTimeEdits[1][0]}
+                            value={this.state.sponsorTimeEdits[1]}
                             onChange={(e) => {
                                 let sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                sponsorTimeEdits[1][0] = e.target.value;
+                                sponsorTimeEdits[1] = e.target.value;
 
                                 this.setState({sponsorTimeEdits});
-                            }}>
-                        </input>
 
-                        <input id={"submittingTimeSeconds1" + this.idSuffix}
-                            className="sponsorTimeEdit sponsorTimeEditSeconds"
-                            ref={oldYouTubeDarkStyles}
-                            type="text"
-                            value={this.state.sponsorTimeEdits[1][1]}
-                            onChange={(e) => {
-                                let sponsorTimeEdits = this.state.sponsorTimeEdits;
-                                sponsorTimeEdits[1][1] = e.target.value;
-
-                                this.setState({sponsorTimeEdits});
+                                this.saveEditTimes();
                             }}>
                         </input>
 
@@ -318,19 +296,23 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         }
     }
 
-    /** Returns an array in the sponsorTimeEdits form (minutes and seconds) from a normal seconds sponsor time */
-    getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): string[][] {
-        return [[String(utils.getFormattedMinutes(sponsorTime.segment[0])), String(utils.getFormattedSeconds(sponsorTime.segment[0]))], 
-            [String(utils.getFormattedMinutes(sponsorTime.segment[1])), String(utils.getFormattedSeconds(sponsorTime.segment[1]))]];
+    /** Returns an array in the sponsorTimeEdits form (formatted time string) from a normal seconds sponsor time */
+    getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): [string, string] {
+        return [utils.getFormattedTime(sponsorTime.segment[0], true),
+            utils.getFormattedTime(sponsorTime.segment[1], true)];
     }
 
     saveEditTimes() {
         let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
 
         if (this.state.editing) {
-            sponsorTimesSubmitting[this.props.index].segment = 
-                [utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[0][0]), parseFloat(this.state.sponsorTimeEdits[0][1])),
-                utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[1][0]), parseFloat(this.state.sponsorTimeEdits[1][1]))];
+            const startTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
+            const endTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
+
+            // Change segment time only if the format was correct
+            if (startTime !== null && endTime !== null) {
+                sponsorTimesSubmitting[this.props.index].segment = [startTime, endTime];
+            }
         }
 
         sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value;
@@ -346,11 +328,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         let skipTime = sponsorTimes[index].segment[0];
 
-        if (this.state.editing) {
-            // Save edits before previewing
-            this.saveEditTimes();
-        }
-
         this.props.contentContainer().previewTime(skipTime - 2);
     }
 
@@ -360,11 +337,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         let skipTime = sponsorTimes[index].segment[0];
 
-        if (this.state.editing) {
-            // Save edits before inspecting
-            this.saveEditTimes();
-        }
-
         this.props.contentContainer().previewTime(skipTime + 0.000001, false);
     }
 
diff --git a/src/utils.ts b/src/utils.ts
index 91c8eb86..eb7d09f8 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -323,14 +323,6 @@ class Utils {
         });
     }
 
-    getFormattedMinutes(seconds: number) {
-        return Math.floor(seconds / 60);
-    }
-
-    getFormattedSeconds(seconds: number) {
-        return seconds % 60;
-    }
-
     getFormattedTime(seconds: number, precise?: boolean): string {
         let hours = Math.floor(seconds / 60 / 60);
         let minutes = Math.floor(seconds / 60) % 60;
@@ -356,12 +348,22 @@ class Utils {
         return formatted;
     }
 
-    shortCategoryName(categoryName: string): string {
-        return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName);
+    getFormattedTimeToSeconds(formatted: string): number | null {
+        const fragments = /^(?:(?:(\d+):)?(\d+):)?(\d*(?:\.\d+)?)$/.exec(formatted);
+
+        if (fragments === null) {
+            return null;
+        }
+
+        const hours = fragments[1] ? parseInt(fragments[1]) : 0;
+        const minutes = fragments[2] ? parseInt(fragments[2] || '0') : 0;
+        const seconds = fragments[3] ? parseFloat(fragments[3]) : 0;
+
+        return hours * 3600 + minutes * 60 + seconds;
     }
 
-    getRawSeconds(minutes: number, seconds: number): number {
-        return minutes * 60 + seconds;
+    shortCategoryName(categoryName: string): string {
+        return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName);
     }
 
     isContentScript(): boolean {

From cb5e770014d75412f517d8105c15967a6fe98ac6 Mon Sep 17 00:00:00 2001
From: opl- <opl-@users.noreply.github.com>
Date: Sun, 8 Nov 2020 06:13:09 +0100
Subject: [PATCH 2/2] Add support for commas in the time editor

Makes numpad input easier on some locales.
---
 src/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index eb7d09f8..38f8688d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -349,7 +349,7 @@ class Utils {
     }
 
     getFormattedTimeToSeconds(formatted: string): number | null {
-        const fragments = /^(?:(?:(\d+):)?(\d+):)?(\d*(?:\.\d+)?)$/.exec(formatted);
+        const fragments = /^(?:(?:(\d+):)?(\d+):)?(\d*(?:[.,]\d+)?)$/.exec(formatted);
 
         if (fragments === null) {
             return null;
@@ -357,7 +357,7 @@ class Utils {
 
         const hours = fragments[1] ? parseInt(fragments[1]) : 0;
         const minutes = fragments[2] ? parseInt(fragments[2] || '0') : 0;
-        const seconds = fragments[3] ? parseFloat(fragments[3]) : 0;
+        const seconds = fragments[3] ? parseFloat(fragments[3].replace(',', '.')) : 0;
 
         return hours * 3600 + minutes * 60 + seconds;
     }