Added change category button for testing server

public/_locales/en/messages.json

@@ -558,5 +558,11 @@
     },
     "forceChannelCheckPopup": {
         "message": "Consider Enabling Force Channel Check Before Skipping Sponsors"
+    },
+    "downvoteDescription": {
+        "message": "Incorrect"
+    },
+    "incorrectCategory": {
+        "message": "Wrong Category"
     }
 }

src/background.ts

@@ -47,7 +47,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
             //this allows the callback to be called later
             return true;
         case "submitVote":
-            submitVote(request.type, request.UUID, callback);
+            submitVote(request.type, request.UUID, request.category, callback);
         
             //this allows the callback to be called later
             return true;
@@ -147,7 +147,7 @@ function addSponsorTime(time, videoID, callback) {
     });
 }
 
-function submitVote(type, UUID, callback) {
+function submitVote(type, UUID, category, callback) {
     let userID = Config.config.userID;
 
     if (userID == undefined || userID === "undefined") {
@@ -156,8 +156,10 @@ function submitVote(type, UUID, callback) {
         Config.config.userID = userID;
     }
 
+    let typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
+
     //publish this vote
-    utils.sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
+    utils.sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection, function(xmlhttp, error) {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             callback({
                 successType: 1

src/components/SkipNoticeComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import * as CompileConfig from "../../config.json";
 import Config from "../config"
 import { ContentContainer, SponsorHideType } from "../types";
 
@@ -19,16 +20,19 @@ export interface SkipNoticeProps {
 }
 
 export interface SkipNoticeState {
-    noticeTitle: string,
+    noticeTitle: string;
 
-    messages: string[],
+    messages: string[];
 
-    countdownTime: number,
+    countdownTime: number;
     maxCountdownTime: () => number;
-    countdownText: string,
+    countdownText: string;
 
-    unskipText: string,
+    unskipText: string;
-    unskipCallback: () => void
+    unskipCallback: () => void;
+
+    downvoting: boolean;
+    choosingCategory: boolean;
 }
 
 class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
@@ -43,10 +47,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     idSuffix: any;
 
     noticeRef: React.MutableRefObject<NoticeComponent>;
+    categoryOptionRef: React.RefObject<HTMLSelectElement>;
+
+    // Used to update on config change
+    configListener: () => void;
 
     constructor(props: SkipNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
+        this.categoryOptionRef = React.createRef();
 
         this.UUID = props.UUID;
         this.autoSkip = props.autoSkip;
@@ -83,7 +92,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             countdownText: null,
 
             unskipText: chrome.i18n.getMessage("unskip"),
-            unskipCallback: this.unskip.bind(this)
+            unskipCallback: this.unskip.bind(this),
+
+            downvoting: false,
+            choosingCategory: false
         }
 
         if (!this.autoSkip) {
@@ -115,7 +127,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 ref={this.noticeRef}
-                closeListener={this.props.closeListener}>
+                closeListener={() => this.closeListener()}>
                     
                 {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
                     <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
@@ -124,7 +136,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}
               
-                {/* Last Row */}
+                {/* Bottom Row */}
                 <tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
 
                     {/* Vote Button Container */}
@@ -145,7 +157,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                             className="sponsorSkipObject voteButton"
                             src={chrome.extension.getURL("icons/report.png")}
                             title={chrome.i18n.getMessage("reportButtonInfo")}
-                            onClick={() => this.contentContainer().vote(0, this.UUID, this)}>
+                            onClick={() => this.adjustDownvotingState(true)}>
                         
                         </img>
 
@@ -174,6 +186,52 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     }
                 </tr>
 
+                {/* Downvote Options Row */}
+                {this.state.downvoting &&
+                    <tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}>
+
+                        {/* Normal downvote */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                onClick={() => this.contentContainer().vote(0, this.UUID, undefined, this)}>
+                            {chrome.i18n.getMessage("downvoteDescription")}
+                        </button>
+
+                        {/* Category vote */}
+                        {Config.config.testingServer &&
+                            <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                    onClick={() => this.openCategoryChooser()}>
+
+                                {chrome.i18n.getMessage("incorrectCategory")}
+                            </button>
+                        }
+
+                    </tr>
+                }
+
+                {/* Category Chooser Row */}
+                {this.state.choosingCategory &&
+                    <tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}>
+
+                        {/* Category Selector */}
+                        <select id={"sponsorTimeCategories" + this.idSuffix}
+                                className="sponsorTimeCategories"
+                                defaultValue={utils.getSponsorTimeFromUUID(this.props.contentContainer().sponsorTimes, this.props.UUID).category}
+                                ref={this.categoryOptionRef}
+                                onChange={this.categorySelectionChange.bind(this)}>
+
+                            {this.getCategoryOptions()}
+                        </select>
+
+                        {/* Submit Button */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                onClick={() => this.contentContainer().vote(undefined, this.UUID, this.categoryOptionRef.current.value, this)}>
+
+                            {chrome.i18n.getMessage("submit")}
+                        </button>
+
+                    </tr>
+                }
+
             </NoticeComponent>
         );
     }
@@ -202,6 +260,70 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         return elements;
     }
 
+    adjustDownvotingState(value: boolean) {
+        if (!value) this.clearConfigListener();
+
+        this.setState({
+            downvoting: value,
+            choosingCategory: false
+        });
+    }
+
+    clearConfigListener() {
+        if (this.configListener) {
+            Config.configListeners.splice(Config.configListeners.indexOf(this.configListener), 1);
+            this.configListener = null;
+        }
+    }
+
+    openCategoryChooser() {
+        // Add as a config listener
+        this.configListener = () => this.forceUpdate();
+        Config.configListeners.push(this.configListener);
+
+        this.setState({
+            choosingCategory: true,
+            downvoting: false
+        });
+    }
+
+    getCategoryOptions() {
+        let elements = [];
+
+        for (const category of Config.config.categorySelections) {
+            elements.push(
+                <option value={category.name}
+                        key={category.name}>
+                    {chrome.i18n.getMessage("category_" + category.name)}
+                </option>
+            );
+        }
+
+        if (elements.length < CompileConfig.categoryList.length) {
+            // Add show more button
+            elements.push(
+                <option value={"moreCategories"}
+                        key={"moreCategories"}>
+                    {chrome.i18n.getMessage("moreCategories")}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+
+    categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>) {
+        // See if show more categories was pressed
+        if (event.target.value === "moreCategories") {
+            // Open options page
+            chrome.runtime.sendMessage({"message": "openConfig"});
+
+            // Reset option to original
+            event.target.value = utils.getSponsorTimeFromUUID(this.props.contentContainer().sponsorTimes, this.props.UUID).category;
+            return;
+        }
+    }
+
     unskip() {
         this.contentContainer().unskipSponsorTime(this.UUID);
 
@@ -258,22 +380,22 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    afterDownvote() {
+    afterDownvote(type: number, category: string) {
         this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
         this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
+
+        this.adjustDownvotingState(false);
         
-        //remove this sponsor from the sponsors looked up
+        // Change the sponsor locally
-        //find which one it is
+        let sponsorTime = utils.getSponsorTimeFromUUID(this.contentContainer().sponsorTimes, this.UUID);
-        for (let i = 0; i < this.contentContainer().sponsorTimes.length; i++) {
+        if (sponsorTime) {
-            if (this.contentContainer().sponsorTimes[i].UUID == this.UUID) {
+            if (type === 0) {
-                //this one is the one to hide
+                sponsorTime.hidden = SponsorHideType.Downvoted;
-                
+            } else if (category) {
-                //add this as a hidden sponsorTime
+                sponsorTime.category = category;
-                this.contentContainer().sponsorTimes[i].hidden = SponsorHideType.Downvoted;
-            
-                this.contentContainer().updatePreviewBar();
-                break;
             }
+
+            this.contentContainer().updatePreviewBar();
         }
     }
 
@@ -316,6 +438,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         //show button again
         document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
     }
+
+    closeListener() {
+        this.clearConfigListener();
+
+        this.props.closeListener();
+    }
 }
 
 export default SkipNoticeComponent;

src/content.ts

@@ -968,7 +968,7 @@ function skipToTime(v: HTMLVideoElement, index: number, sponsorTimes: SponsorTim
 
             //auto-upvote this sponsor
             if (Config.config.trackViewCount && autoSkip && Config.config.autoUpvote) {
-                vote(1, currentUUID, null);
+                vote(1, currentUUID);
             }
         }
 
@@ -1307,7 +1307,7 @@ function clearSponsorTimes() {
 }
 
 //if skipNotice is null, it will not affect the UI
-function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
+function vote(type: number, UUID: string, category?: string, skipNotice?: SkipNoticeComponent) {
     if (skipNotice !== null && skipNotice !== undefined) {
         //add loading info
         skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
@@ -1320,7 +1320,7 @@ function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
     if (sponsorIndex == -1 || sponsorTimes[sponsorIndex].UUID === null) return;
 
     // See if the local time saved count and skip count should be saved
-    if (type == 0 && sponsorSkipped[sponsorIndex] || type == 1 && !sponsorSkipped[sponsorIndex]) {
+    if (type === 0 && sponsorSkipped[sponsorIndex] || type === 1 && !sponsorSkipped[sponsorIndex]) {
         let factor = 1;
         if (type == 0) {
             factor = -1;
@@ -1337,15 +1337,16 @@ function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
     chrome.runtime.sendMessage({
         message: "submitVote",
         type: type,
-        UUID: UUID
+        UUID: UUID,
+        category: category
     }, function(response) {
         if (response != undefined) {
             //see if it was a success or failure
             if (skipNotice != null) {
                 if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
                     //success (treat rate limits as a success)
-                    if (type == 0) {
+                    if (type === 0 || category) {
-                        skipNotice.afterDownvote.bind(skipNotice)();
+                        skipNotice.afterDownvote.bind(skipNotice)(type, category);
                     }
                 } else if (response.successType == 0) {
                     //failure: duplicate vote

src/types.ts

@@ -3,7 +3,7 @@ import SkipNoticeComponent from "./components/SkipNoticeComponent";
 
 interface ContentContainer {
     (): {
-        vote: (type: any, UUID: any, skipNotice?: SkipNoticeComponent) => void,
+        vote: (type: any, UUID: any, category?: string, skipNotice?: SkipNoticeComponent) => void,
         dontShowNoticeAgain: () => void,
         unskipSponsorTime: (UUID: any) => void,
         sponsorTimes: SponsorTime[],