Category submission notice now works.

It still submits to the server without a category since the server-side is not done.

src/components/SponsorTimeEditComponent.tsx

@@ -27,9 +27,13 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
     idSuffix: string;
 
+    categoryOptionRef: React.RefObject<HTMLSelectElement>;
+
     constructor(props: SponsorTimeEditProps) {
         super(props);
 
+        this.categoryOptionRef = React.createRef();
+
         this.idSuffix = this.idSuffix;
 
         this.state = {
@@ -57,8 +61,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         // Create time display
         let timeDisplay: JSX.Element;
         let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+        let segment = sponsorTime.segment;
         if (this.state.editing) {
-            
             timeDisplay = (
                 <div id={"sponsorTimesContainer" + this.idSuffix}
                     className="sponsorTimeDisplay">
@@ -133,8 +137,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 <div id={"sponsorTimesContainer" + this.idSuffix}
                     className="sponsorTimeDisplay"
                     onClick={this.toggleEditTime.bind(this)}>
-                        {utils.getFormattedTime(sponsorTime[0], true) +
+                        {utils.getFormattedTime(segment[0], true) +
-                            ((!isNaN(sponsorTime[1])) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(sponsorTime[1], true) : "")}
+                            ((!isNaN(segment[1])) ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segment[1], true) : "")}
                 </div>
             );
         }
@@ -147,7 +151,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 {/* Category */}
 
                 <select id={"sponsorTimeCategories" + this.idSuffix}
-                    className="sponsorTimeCategories">
+                    className="sponsorTimeCategories"
+                    defaultValue={sponsorTime.category}
+                    ref={this.categoryOptionRef}
+                    onChange={this.saveEditTimes.bind(this)}>
                     {this.getCategoryOptions()}
                 </select>
 
@@ -161,7 +168,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     {chrome.i18n.getMessage("delete")}
                 </span>
 
-                {(!isNaN(sponsorTime[1])) ? (
+                {(!isNaN(segment[1])) ? (
                     <span id={"sponsorTimePreviewButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={this.previewTime.bind(this)}>
@@ -169,7 +176,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </span>
                 ): ""}
 
-                {(!isNaN(sponsorTime[1])) ? (
+                {(!isNaN(segment[1])) ? (
                     <span id={"sponsorTimeEditButton" + this.idSuffix}
                         className="sponsorTimeEditButton"
                         onClick={this.toggleEditTime.bind(this)}>
@@ -198,7 +205,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     setTimeToNow(index: number) {
         let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
 
-        sponsorTime[index] = 
+        sponsorTime.segment[index] = 
             this.props.contentContainer().v.currentTime;
 
         this.setState({
@@ -231,13 +238,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     saveEditTimes() {
-        //TODO: Properly save categories and times
+        let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
-        // Save sponsorTimes
-        // this.props.contentContainer().sponsorTimesSubmitting[this.props.index] = 
-        //     [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]))];
 
-        Config.config.sponsorTimes.set(this.props.contentContainer().sponsorVideoID, 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]))];
+        }
+
+        sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value;
+
+        Config.config.sponsorTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimesSubmitting);
 
         this.props.contentContainer().updatePreviewBar();
     }

src/content.ts

@@ -824,13 +824,7 @@ function updatePreviewBar() {
         types.push("preview-" + sponsorTimesSubmitting[i].category);
     }
 
-    // Convert sponsorTimes into segments
+    utils.wait(() => previewBar !== null).then((result) => previewBar.set(utils.getSegmentsFromSponsorTimes(allSponsorTimes), types, video.duration));
-    let allSegments: number[][] = [];
-    for (const sponsorTime of allSponsorTimes) {
-        allSegments.push(sponsorTime.segment);
-    }
-
-    utils.wait(() => previewBar !== null).then((result) => previewBar.set(allSegments, types, video.duration));
 
     //update last video id
     lastPreviewBarUpdate = sponsorVideoID;
@@ -1287,7 +1281,7 @@ function clearSponsorTimes() {
     let sponsorTimes = Config.config.sponsorTimes.get(currentVideoID);
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-        let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes)
+        let confirmMessage = chrome.i18n.getMessage("clearThis") + getSegmentsMessage(sponsorTimes)
                                 + "\n" + chrome.i18n.getMessage("confirmMSG")
         if(!confirm(confirmMessage)) return;
 
@@ -1395,26 +1389,23 @@ function submitSponsorTimes() {
 
     let currentVideoID = sponsorVideoID;
 
-    let sponsorTimes =  Config.config.sponsorTimes.get(currentVideoID);
+    if (sponsorTimesSubmitting !== undefined && sponsorTimesSubmitting.length > 0) {
-
-    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
         //check if a sponsor exceeds the duration of the video
-        for (let i = 0; i < sponsorTimes.length; i++) {
+        for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
-            if (sponsorTimes[i][1] > video.duration) {
+            if (sponsorTimesSubmitting[i].segment[1] > video.duration) {
-                sponsorTimes[i][1] = video.duration;
+                sponsorTimesSubmitting[i].segment[1] = video.duration;
             }
         }
-        //update sponsorTimes
-        Config.config.sponsorTimes.set(currentVideoID, sponsorTimes);
 
-        //update sponsorTimesSubmitting
+        //update sponsorTimes
-        sponsorTimesSubmitting = sponsorTimes;
+        Config.config.sponsorTimes.set(currentVideoID, utils.getSegmentsFromSponsorTimes(sponsorTimesSubmitting));
 
         // Check to see if any of the submissions are below the minimum duration set
         if (Config.config.minDuration > 0) {
-            for (let i = 0; i < sponsorTimes.length; i++) {
+            for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
-                if (sponsorTimes[i][1] - sponsorTimes[i][0] < Config.config.minDuration) {
+                if (sponsorTimesSubmitting[i].segment[1] - sponsorTimesSubmitting[i].segment[0] < Config.config.minDuration) {
-                    let confirmShort = chrome.i18n.getMessage("shortCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes);
+                    let confirmShort = chrome.i18n.getMessage("shortCheck") + "\n\n" + 
+                        getSegmentsMessage(utils.getSegmentsFromSponsorTimes(sponsorTimesSubmitting));
                     
                     if(!confirm(confirmShort)) return;
                 }
@@ -1480,12 +1471,12 @@ function sendSubmitMessage(){
 }
 
 //get the message that visually displays the video times
-function getSponsorTimesMessage(sponsorTimes) {
+function getSegmentsMessage(segments: number[][]): string {
     let sponsorTimesMessage = "";
 
-    for (let i = 0; i < sponsorTimes.length; i++) {
+    for (let i = 0; i < segments.length; i++) {
-        for (let s = 0; s < sponsorTimes[i].length; s++) {
+        for (let s = 0; s < segments[i].length; s++) {
-            let timeMessage = utils.getFormattedTime(sponsorTimes[i][s]);
+            let timeMessage = utils.getFormattedTime(segments[i][s]);
             //if this is an end time
             if (s == 1) {
                 timeMessage = " to " + timeMessage;

src/utils.ts

@@ -155,6 +155,20 @@ class Utils {
         });
     }
 
+    /**
+     * Gets just the timestamps from a sponsorTimes array
+     * 
+     * @param sponsorTimes 
+     */
+    getSegmentsFromSponsorTimes(sponsorTimes: SponsorTime[]): number[][] {
+        let segments: number[][] = [];
+        for (const sponsorTime of sponsorTimes) {
+            segments.push(sponsorTime.segment);
+        }
+
+        return segments;
+    }
+
     getSponsorIndexFromUUID(sponsorTimes: SponsorTime[], UUID: string): number {
         for (let i = 0; i < sponsorTimes.length; i++) {
             if (sponsorTimes[i].UUID === UUID) {