Merge pull request #120 from ajayyy/experimental-ajay

Update version number

_locales/en/messages.json

@@ -45,9 +45,6 @@
     "noticeTitle": {
         "message": "Sponsor Skipped"
     },
-  "noticeClosingMessage": {
-    "message": "closes in 7s"
-  },
     "reportButtonTitle": {
         "message": "Report"
     },
@@ -72,9 +69,15 @@
     "hitGoBack": {
         "message": "Hit unskip to get to where you came from."
     },
-  "goBack": {
+    "unskip": {
         "message": "Unskip"
     },
+    "reskip": {
+        "message": "Reskip"
+    },
+    "paused": {
+        "message": "Paused"
+    },
     "confirmMSG": {
         "message": "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
     },
@@ -100,7 +103,10 @@
     "noVideoID": {
         "message": "This probably isn't a YouTube tab, or you clicked too early. \n If you know this is a YouTube tab,\n close this popup and open it again."
     },
-  "Voted": {
+    "success": {
+        "message": "Success!"
+    },
+    "voted": {
         "message": "Voted!"
     },
     "voteFail": {

content.css

@@ -58,6 +58,11 @@
 	  to { opacity: 1; }
 }
 
+@keyframes fadeOut {
+	from { opacity: 1; }
+	  to { opacity: 0; }
+}
+
 .sponsorBlockSpacer {
 	background-color: rgb(100, 100, 100);
 	border-color: rgb(100, 100, 100);
@@ -82,6 +87,10 @@
 	padding-right: 5px;
 }
 
+.sponsorSkipNoticeFadeOut {
+	animation: fadeOut 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
 .sponsorSkipNoticeTimeLeft {
 	color: #eeeeee;
 
@@ -105,11 +114,6 @@
 	border-left: 1px solid rgb(150, 150, 150);
 }
 
-.sponsorSkipNoticeCloseButton {
-	height: 10px;
-    width: 10px;
-}
-
 .sponsorSkipNoticeButton {
 	background: none;
 	color: rgb(235, 235, 235);
@@ -119,6 +123,23 @@
 	cursor: pointer;
 
 	margin-right: 10px;
+
+    padding: 2px 5px;
+}
+
+.sponsorSkipNoticeButton:hover {
+	background-color: rgba(235, 235, 235,0.2);
+	border-radius: 4px;
+	
+	transition: background-color 0.4s;
+}
+
+.sponsorTimesVoteButtonsContainer {
+	float: left;
+	
+	padding: 2px 5px;
+
+	margin-right: 4px;
 }
 
 .sponsorSkipNoticeRightSection {
@@ -131,8 +152,17 @@
 }
 
 .sponsorSkipNoticeRightButton {
-    margin-left: 7px;
-	padding: 0px;
+	margin-right: 0;
+}
+
+.sponsorSkipNoticeCloseButton {
+	height: 10px;
+	width: 10px;
+	
+	padding: 2px 5px;
+
+	margin-left: 2px;
+    float: right;
 }
 
 .sponsorSkipMessage {

content.js

@@ -40,9 +40,6 @@ if (id = getYouTubeVideoID(document.URL)) { // Direct Links
 //the last time looked at (used to see if this time is in the interval)
 var lastTime = -1;
 
-//the actual time (not video time) that the last skip happened
-var lastUnixTimeSkipped = -1;
-
 //the amount of times the sponsor lookup has retried
 //this only happens if there is an error
 var sponsorLookupRetries = 0;
@@ -61,10 +58,6 @@ var hideVideoPlayerControls = false;
 var hideInfoButtonPlayerControls = false;
 var hideDeleteButtonPlayerControls = false;
 
-//the downloaded sponsor times
-var sponsorTimes = [];
-var UUIDs = [];
-
 //the sponsor times being prepared to be submitted
 var sponsorTimesSubmitting = [];
 
@@ -214,7 +207,6 @@ document.onkeydown = function(e){
 function resetValues() {
     //reset last sponsor times
     lastTime = -1;
-  lastUnixTimeSkipped = -1;
 
     //reset sponsor times
     sponsorTimes = null;
@@ -488,14 +480,12 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
 }
 
 function checkIfTimeToSkip(currentVideoTime, startTime) {
-  let currentTime = Date.now();
-
     //If the sponsor time is in between these times, skip it
     //Checks if the last time skipped to is not too close to now, to make sure not to get too many
     //  sponsor times in a row (from one troll)
     //the last term makes 0 second start times possible only if the video is not setup to start at a different time from zero
-  return (Math.abs(currentVideoTime - startTime) < 0.3 && startTime >= lastTime && startTime <= currentVideoTime && 
-      (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && startTime == 0 && youtubeVideoStartTime == null)
+    return (Math.abs(currentVideoTime - startTime) < 3 && startTime >= lastTime && startTime <= currentVideoTime) || 
+                (lastTime == -1 && startTime == 0 && youtubeVideoStartTime == null)
 }
 
 //skip fromt he start time to the end time for a certain index sponsor time
@@ -509,13 +499,13 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
 
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
-    openSkipNotice(currentUUID);
-
-    setTimeout(() => closeSkipNotice(currentUUID), 7000);
+        if (!dontShowNotice) {
+            new SkipNotice(this, currentUUID);
 
             //auto-upvote this sponsor
             if (trackViewCount) {
-      vote(1, currentUUID, true);
+                vote(1, currentUUID, null);
+            }
         }
     }
 
@@ -525,12 +515,17 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
     }
 }
 
-function goBackToPreviousTime(UUID) {
+function unskipSponsorTime(UUID) {
     if (sponsorTimes != null) {
         //add a tiny bit of time to make sure it is not skipped again
         v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001;
+    }
+}
 
-    closeSkipNotice(UUID);
+function reskipSponsorTime(UUID) {
+    if (sponsorTimes != null) {
+        //add a tiny bit of time to make sure it is not skipped again
+        v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][1];
     }
 }
 
@@ -852,238 +847,12 @@ function clearSponsorTimes() {
     });
 }
 
-//Opens the notice that tells the user that a sponsor was just skipped
-function openSkipNotice(UUID){
-  if (dontShowNotice) {
-    //don't show, return
-    return;
-  }
-
-  let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
-
-  if (amountOfPreviousNotices > 0) {
-    //already exists
-
-    let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
-    previousNotice.classList.add("secondSkipNotice")
-  }
-
-  let noticeElement = document.createElement("div");
-  //what sponsor time this is about
-  noticeElement.id = "sponsorSkipNotice" + UUID;
-  noticeElement.classList.add("sponsorSkipObject");
-  noticeElement.classList.add("sponsorSkipNotice");
-  noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
-
-  //the row that will contain the info
-  let firstRow = document.createElement("tr");
-  firstRow.id = "sponsorSkipNoticeFirstRow" + UUID;
-
-  let logoColumn = document.createElement("td");
-
-  let logoElement = document.createElement("img");
-  logoElement.id = "sponsorSkipLogo" + UUID;
-  logoElement.className = "sponsorSkipLogo sponsorSkipObject";
-  logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
-
-  let noticeMessage = document.createElement("span");
-  noticeMessage.id = "sponsorSkipMessage" + UUID;
-  noticeMessage.classList.add("sponsorSkipMessage");
-  noticeMessage.classList.add("sponsorSkipObject");
-  noticeMessage.innerText = chrome.i18n.getMessage("noticeTitle");
-
-  //create the first column
-  logoColumn.appendChild(logoElement);
-  logoColumn.appendChild(noticeMessage);
-
-  //add the x button
-  let closeButtonContainer = document.createElement("td");
-  closeButtonContainer.className = "sponsorSkipNoticeRightSection";
-  closeButtonContainer.style.top = "11px";
-
-  let timeLeft = document.createElement("span");
-  timeLeft.innerText = chrome.i18n.getMessage("noticeClosingMessage");
-  timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft";
-
-  let hideButton = document.createElement("img");
-  hideButton.src = chrome.extension.getURL("icons/close.png");
-  hideButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton";
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
-
-  closeButtonContainer.appendChild(timeLeft);
-  closeButtonContainer.appendChild(hideButton);
-
-  //add all objects to first row
-  firstRow.appendChild(logoColumn);
-  firstRow.appendChild(closeButtonContainer);
-
-  let spacer = document.createElement("hr");
-  spacer.id = "sponsorSkipNoticeSpacer" + UUID;
-  spacer.className = "sponsorBlockSpacer";
-
-  //the row that will contain the buttons
-  let secondRow = document.createElement("tr");
-  secondRow.id = "sponsorSkipNoticeSecondRow" + UUID;
-  
-  //thumbs up and down buttons
-  let voteButtonsContainer = document.createElement("td");
-  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-
-  let reportText = document.createElement("span");
-  reportText.id = "sponsorTimesReportText" + UUID;
-  reportText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
-  reportText.innerText = chrome.i18n.getMessage("reportButtonTitle");
-  reportText.style.marginRight = "5px";
-  reportText.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-  let downvoteButton = document.createElement("img");
-  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-  downvoteButton.className = "sponsorSkipObject voteButton";
-  downvoteButton.src = chrome.extension.getURL("icons/report.png");
-  downvoteButton.addEventListener("click", () => vote(0, UUID));
-  downvoteButton.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
-
-  //add downvote and report text to container
-  voteButtonsContainer.appendChild(reportText);
-  voteButtonsContainer.appendChild(downvoteButton);
-
-  //add unskip button
-  let unskipContainer = document.createElement("td");
-  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
-
-  let unskipButton = document.createElement("button");
-  unskipButton.innerText = chrome.i18n.getMessage("goBack");
-  unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
-  unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID));
-
-  unskipContainer.appendChild(unskipButton);
-
-  //add don't show again button
-  let dontshowContainer = document.createElement("td");
-  dontshowContainer.className = "sponsorSkipNoticeRightSection";
-
-  let dontShowAgainButton = document.createElement("button");
-  dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
-  dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
-  dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
-
-  dontshowContainer.appendChild(dontShowAgainButton);
-
-  //add to row
-  secondRow.appendChild(voteButtonsContainer);
-  secondRow.appendChild(unskipContainer);
-  secondRow.appendChild(dontshowContainer);
-
-  noticeElement.appendChild(firstRow);
-  noticeElement.appendChild(spacer);
-  noticeElement.appendChild(secondRow);
-
-  let referenceNode = document.getElementById("movie_player");
-  if (referenceNode == null) {
-    //for embeds
-    let player = document.getElementById("player");
-    referenceNode = player.firstChild;
-    let index = 1;
-
-    //find the child that is the video player (sometimes it is not the first)
-    while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
-      referenceNode = player.children[index];
-
-      index++;
-    }
-  }
-
-  referenceNode.prepend(noticeElement);
-}
-
-function afterDownvote(UUID) {
-  addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID);
-  addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID);
-
-  //remove this sponsor from the sponsors looked up
-  //find which one it is
-  for (let i = 0; i < sponsorTimes.length; i++) {
-    if (UUIDs[i] == UUID) {
-      //this one is the one to hide
-      
-      //add this as a hidden sponsorTime
-      hiddenSponsorTimes.push(i);
-
-      let sponsorTimesLeft = sponsorTimes.slice();
-      for (let j = 0; j < hiddenSponsorTimes.length; j++) {
-        //remove this sponsor time
-        sponsorTimesLeft.splice(hiddenSponsorTimes[j], 1);
-      }
-
-      //update the preview
-      previewBar.set(sponsorTimesLeft, [], v.duration);
-
-      break;
-    }
-  }
-}
-
-function addNoticeInfoMessage(message, UUID) {
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add info
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
-  thanksForVotingText.className = "sponsorTimesInfoMessage";
-  thanksForVotingText.innerText = message;
-
-  //add element to div
-  document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + UUID));
-}
-
-function resetNoticeInfoMessage(UUID) {
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
-  }
-}
-
-function addVoteButtonInfo(message, UUID) {
-  resetVoteButtonInfo(UUID);
-
-  //hide vote button
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.display = "none";
-  }
-
-  //add info
-  let thanksForVotingText = document.createElement("td");
-  thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + UUID;
-  thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
-  thanksForVotingText.innerText = message;
-
-  //add element to div
-  document.getElementById("sponsorSkipNoticeSecondRow" + UUID).prepend(thanksForVotingText);
-}
-
-function resetVoteButtonInfo(UUID) {
-  let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorSkipNoticeSecondRow" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //show button again
-  document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.removeProperty("display");
-}
-
-//if inTheBackground is true, then no UI methods will be called
-function vote(type, UUID, inTheBackground = false) {
-  if (!inTheBackground) {
+//if skipNotice is null, it will not affect the UI
+function vote(type, UUID, skipNotice) {
+    if (skipNotice != null) {
         //add loading info
-    addVoteButtonInfo("Loading...", UUID)
-    resetNoticeInfoMessage(UUID);
+        skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
+        skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
     }
 
     chrome.runtime.sendMessage({
@@ -1093,24 +862,24 @@ function vote(type, UUID, inTheBackground = false) {
     }, function(response) {
         if (response != undefined) {
             //see if it was a success or failure
-      if (!inTheBackground) {
+            if (skipNotice != null) {
                 if (response.successType == 1) {
                     //success
                     if (type == 0) {
-            afterDownvote(UUID);
+                        skipNotice.afterDownvote.bind(skipNotice)();
                     }
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
-          addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
-          resetVoteButtonInfo(UUID);
+                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
+                    skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 } else if (response.successType == -1) {
                     if (response.statusCode == 502) {
-            addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
-            resetVoteButtonInfo(UUID);
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("serverDown"))
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                     } else {
                         //failure: unknown error
-            addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
-            resetVoteButtonInfo(UUID);
+                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("connectionError") + response.statusCode);
+                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                     }
                 }
             }
@@ -1118,14 +887,6 @@ function vote(type, UUID, inTheBackground = false) {
     });
 }
 
-//Closes the notice that tells the user that a sponsor was just skipped for this UUID
-function closeSkipNotice(UUID){
-  let notice = document.getElementById("sponsorSkipNotice" + UUID);
-  if (notice != null) {
-    notice.remove();
-  }
-}
-
 //Closes all notices that tell the user that a sponsor was just skipped
 function closeAllSkipNotices(){
     let notices = document.getElementsByClassName("sponsorSkipNotice");
@@ -1217,7 +978,6 @@ function sendSubmitMessage(){
                 //request the sponsors from the server again
                 sponsorsLookup(currentVideoID);
             } else {
-        //for a more detailed error message, they should check the popup
                 //show that the upload failed
                 document.getElementById("submitButton").style.animation = "unset";
                 document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");

firefox_manifest-extra.json

@@ -0,0 +1,8 @@
+{
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "57.0"
+    }
+  }
+}

firefox_manifest.json

@@ -1,68 +0,0 @@
-{
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
-  "short_name": "SponsorBlock",
-  "version": "1.0.12",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
-  "content_scripts": [
-    {
-      "matches": [
-        "https://*.youtube.com/*"
-      ],
-      "js": [
-        "config.js",
-        "content.js",
-        "popup.js"
-      ],
-      "css": [
-        "content.css",
-        "./libs/Source+Sans+Pro.css",
-        "popup.css"
-      ]
-    }
-  ],
-  "web_accessible_resources": [
-    "icons/LogoSponsorBlocker256px.png",
-    "icons/IconSponsorBlocker256px.png",
-    "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png",
-    "icons/PlayerUploadIconSponsorBlocker256px.png",
-    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
-    "icons/upvote.png",
-    "icons/downvote.png",
-    "icons/PlayerInfoIconSponsorBlocker256px.png",
-    "icons/PlayerDeleteIconSponsorBlocker256px.png",
-    "popup.html",
-    "help/index.html",
-    "help/style.css"
-  ],
-  "permissions": [
-    "tabs",
-    "storage",
-    "notifications",
-    "https://sponsor.ajay.app/*"
-  ],
-  "browser_action": {
-    "default_title": "SponsorBlock",
-    "default_popup": "popup.html"
-  }, 
-  "background": {
-    "scripts":[
-      "config.js",
-      "background.js"
-    ]
-  },
-  "icons": {
-    "16": "icons/IconSponsorBlocker16px.png",
-    "32": "icons/IconSponsorBlocker32px.png",
-    "64": "icons/LogoSponsorBlocker64px.png",
-    "128": "icons/LogoSponsorBlocker128px.png",
-    "256": "icons/LogoSponsorBlocker256px.png"
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "57.0"
-    }
-  },
-  "manifest_version": 2
-}

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_fullName__",
   "short_name": "__MSG_Name__",
-  "version": "1.0.38",
+  "version": "1.1.0",
   "default_locale": "en",
   "description": "__MSG_Description__",
   "content_scripts": [
@@ -13,6 +13,7 @@
       "js": [
         "config.js",
         "utils/previewBar.js",
+        "utils/skipNotice.js",
         "utils.js",
         "content.js",
         "popup.js"

popup.css

@@ -110,17 +110,17 @@ h1.popupElement {
 	text-decoration:none;
 	text-shadow:0px 0px 0px #27663c;
     }
-  .whitelistButton:hover.popupElement {
+.whitelistButton:hover.popupElement {
     background-color:#218b26;
-  }
-  .whitelistButton:focus.popupElement {
+}
+.whitelistButton:focus.popupElement {
     outline: none;
     background-color:#218b26;
-  }
-  .whitelistButton:active.popupElement {
+}
+.whitelistButton:active.popupElement {
     position:relative;
     top:1px;
-  }
+}
 
 .greenButton.popupElement {
     background-color:#ec1c1c;

popup.js

@@ -799,7 +799,13 @@ function runThePopup() {
 
                         clearTimes();
                     } else {
-            let errorMessage = getErrorMessage(response.statusCode);
+                        let errorMessage = "";
+                        
+                        if([400,429,409,502].includes(response.statusCode)) {
+                            errorMessage = chrome.i18n.getMessage(response.statusCode);
+                        } else {
+                            errorMessage = chrome.i18n.getMessage("connectionError") + response.statusCode;
+                        }
 
                         document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
                         document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -1010,11 +1016,14 @@ function runThePopup() {
 
                     SB.setUsernameContainer.style.display = "none";
                     SB.setUsername.style.display = "unset";
-        } else {
+                    
+                    SB.setUsernameStatusContainer.style.display = "none";
+                } else if (xmlhttp.readyState == 4) {
                     SB.setUsername.style.display = "unset";
                     SB.submitUsername.style.display = "none";
                     SB.usernameInput.style.display = "none";
 
+                    SB.setUsernameStatusContainer.style.display = "unset";
                     SB.setUsernameStatus.innerText = "Couldn't connect to server. Error code: " + xmlhttp.status;
                 }
             });
@@ -1035,11 +1044,17 @@ function runThePopup() {
                     SB.submitUsername.style.display = "none";
                     SB.usernameInput.style.display = "none";
 
-          SB.setUsernameStatus.innerText = "Success!";
-        } else if (xmlhttp.readyState == 4 && xmlhttp.status == 400) {
-          SB.setUsernameStatus.innerText = "Bad Request";
+                    SB.setUsernameStatus.innerText = chrome.i18n.getMessage("success");
+                } else if (xmlhttp.readyState == 4) {
+                    let errorMessage = "";
+                        
+                    if([400, 429, 409, 502].includes(xmlhttp.status)) {
+                        errorMessage = chrome.i18n.getMessage(xmlhttp.status);
                     } else {
-          SB.setUsernameStatus.innerText = getErrorMessage(EN_US, xmlhttp.status);
+                        errorMessage = chrome.i18n.getMessage("connectionError") + xmlhttp.status;
+                    }
+
+                    SB.setUsernameStatus.innerText = errorMessage;
                 }
             });
         });
@@ -1088,7 +1103,7 @@ function runThePopup() {
                 //see if it was a success or failure
                 if (response.successType == 1) {
                     //success
-          addVoteMessage(chrome.i18n.getMessage("Voted"), UUID)
+                    addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
                     addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)

utils/skipNotice.js

@@ -0,0 +1,364 @@
+'use strict';
+
+//The notice that tells the user that a sponsor was just skipped
+class SkipNotice {
+	constructor(parent, UUID) {
+        this.parent = parent;
+        this.UUID = UUID;
+
+        this.maxCountdownTime = () => 4;
+        //the countdown until this notice closes
+        this.countdownTime = this.maxCountdownTime();
+        //the id for the setInterval running the countdown
+        this.countdownInterval = -1;
+
+        //the unskip button's callback
+        this.unskipCallback = this.unskip.bind(this);
+
+        //add notice
+        let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+
+        //this is the suffix added at the end of every id
+        this.idSuffix = this.UUID + amountOfPreviousNotices;
+
+        if (amountOfPreviousNotices > 0) {
+            //already exists
+
+            let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
+            previousNotice.classList.add("secondSkipNotice")
+        }
+
+        let noticeElement = document.createElement("div");
+        //what sponsor time this is about
+        noticeElement.id = "sponsorSkipNotice" + this.idSuffix;
+        noticeElement.classList.add("sponsorSkipObject");
+        noticeElement.classList.add("sponsorSkipNotice");
+        noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
+
+        //add mouse enter and leave listeners
+        noticeElement.addEventListener("mouseenter", this.pauseCountdown.bind(this));
+        noticeElement.addEventListener("mouseleave", this.startCountdown.bind(this));
+
+        //the row that will contain the info
+        let firstRow = document.createElement("tr");
+        firstRow.id = "sponsorSkipNoticeFirstRow" + this.idSuffix;
+
+        let logoColumn = document.createElement("td");
+
+        let logoElement = document.createElement("img");
+        logoElement.id = "sponsorSkipLogo" + this.idSuffix;
+        logoElement.className = "sponsorSkipLogo sponsorSkipObject";
+        logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
+
+        let noticeMessage = document.createElement("span");
+        noticeMessage.id = "sponsorSkipMessage" + this.idSuffix;
+        noticeMessage.classList.add("sponsorSkipMessage");
+        noticeMessage.classList.add("sponsorSkipObject");
+        noticeMessage.innerText = chrome.i18n.getMessage("noticeTitle");
+
+        //create the first column
+        logoColumn.appendChild(logoElement);
+        logoColumn.appendChild(noticeMessage);
+
+        //add the x button
+        let closeButtonContainer = document.createElement("td");
+        closeButtonContainer.className = "sponsorSkipNoticeRightSection";
+        closeButtonContainer.style.top = "11px";
+
+        let timeLeft = document.createElement("span");
+        timeLeft.id = "sponsorSkipNoticeTimeLeft" + this.idSuffix;
+        timeLeft.innerText = this.countdownTime + "s";
+        timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft";
+
+        let hideButton = document.createElement("img");
+        hideButton.src = chrome.extension.getURL("icons/close.png");
+        hideButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton";
+        hideButton.addEventListener("click", this.close.bind(this));
+
+        closeButtonContainer.appendChild(timeLeft);
+        closeButtonContainer.appendChild(hideButton);
+
+        //add all objects to first row
+        firstRow.appendChild(logoColumn);
+        firstRow.appendChild(closeButtonContainer);
+
+        let spacer = document.createElement("hr");
+        spacer.id = "sponsorSkipNoticeSpacer" + this.idSuffix;
+        spacer.className = "sponsorBlockSpacer";
+
+        //the row that will contain the buttons
+        let secondRow = document.createElement("tr");
+        secondRow.id = "sponsorSkipNoticeSecondRow" + this.idSuffix;
+        
+        //thumbs up and down buttons
+        let voteButtonsContainer = document.createElement("td");
+        voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + this.idSuffix;
+        voteButtonsContainer.className = "sponsorTimesVoteButtonsContainer"
+
+        let reportText = document.createElement("span");
+        reportText.id = "sponsorTimesReportText" + this.idSuffix;
+        reportText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+        reportText.innerText = chrome.i18n.getMessage("reportButtonTitle");
+        reportText.style.marginRight = "5px";
+        reportText.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
+
+        let downvoteButton = document.createElement("img");
+        downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + this.idSuffix;
+        downvoteButton.className = "sponsorSkipObject voteButton";
+        downvoteButton.src = chrome.extension.getURL("icons/report.png");
+        downvoteButton.addEventListener("click", () => vote(0, this.UUID, this));
+        downvoteButton.setAttribute("title", chrome.i18n.getMessage("reportButtonInfo"));
+
+        //add downvote and report text to container
+        voteButtonsContainer.appendChild(reportText);
+        voteButtonsContainer.appendChild(downvoteButton);
+
+        //add unskip button
+        let unskipContainer = document.createElement("td");
+        unskipContainer.className = "sponsorSkipNoticeUnskipSection";
+
+        let unskipButton = document.createElement("button");
+        unskipButton.id = "sponsorSkipUnskipButton" + this.idSuffix;
+        unskipButton.innerText = chrome.i18n.getMessage("unskip");
+        unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        unskipButton.style.marginLeft = "4px";
+
+        unskipContainer.appendChild(unskipButton);
+
+        //add don't show again button
+        let dontshowContainer = document.createElement("td");
+        dontshowContainer.className = "sponsorSkipNoticeRightSection";
+
+        let dontShowAgainButton = document.createElement("button");
+        dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
+        dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
+        dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
+
+        dontshowContainer.appendChild(dontShowAgainButton);
+
+        //add to row
+        secondRow.appendChild(voteButtonsContainer);
+        secondRow.appendChild(unskipContainer);
+        secondRow.appendChild(dontshowContainer);
+
+        noticeElement.appendChild(firstRow);
+        noticeElement.appendChild(spacer);
+        noticeElement.appendChild(secondRow);
+
+        //get reference node
+        let referenceNode = document.getElementById("movie_player");
+        if (referenceNode == null) {
+            //for embeds
+            let player = document.getElementById("player");
+            referenceNode = player.firstChild;
+            let index = 1;
+
+            //find the child that is the video player (sometimes it is not the first)
+            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
+                referenceNode = player.children[index];
+
+                index++;
+            }
+        }
+
+        referenceNode.prepend(noticeElement);
+
+        this.startCountdown();
+    }
+
+    //called every second to lower the countdown before hiding the notice
+    countdown() {
+        this.countdownTime--;
+
+        if (this.countdownTime <= 0) {
+            //remove this from setInterval
+            clearInterval(this.countdownInterval);
+
+            //time to close this notice
+            this.close();
+
+            return;
+        }
+
+        if (this.countdownTime == 3) {
+            //start fade out animation
+            let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+            notice.style.removeProperty("animation");
+            notice.classList.add("sponsorSkipNoticeFadeOut");
+        }
+
+        this.updateTimerDisplay();
+    }
+
+    pauseCountdown() {
+        //remove setInterval
+        clearInterval(this.countdownInterval);
+        this.countdownInterval = -1;
+
+        //reset countdown
+        this.countdownTime = this.maxCountdownTime();
+        
+        //inform the user
+        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
+        timeLeft.innerText = chrome.i18n.getMessage("paused");
+
+        //remove the fade out class if it exists
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        notice.classList.remove("sponsorSkipNoticeFadeOut");
+        notice.style.animation = "none";
+    }
+
+    startCountdown() {
+        //if it has already started, don't start it again
+        if (this.countdownInterval != -1) return;
+
+        this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
+
+        this.updateTimerDisplay();
+    }
+
+    updateTimerDisplay() {
+        //update the timer display
+        let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix);
+        timeLeft.innerText = this.countdownTime + "s";
+    }
+
+    unskip() {
+        unskipSponsorTime(this.UUID);
+
+        //change unskip button to a reskip button
+        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
+        unskipButton.innerText = chrome.i18n.getMessage("reskip");
+        unskipButton.removeEventListener("click", this.unskipCallback);
+
+        //setup new callback
+        this.unskipCallback = this.reskip.bind(this);
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        //change max duration to however much of the sponsor is left
+        this.maxCountdownTime = function() {
+            let sponsorTime = sponsorTimes[UUIDs.indexOf(this.UUID)];
+            let duration = Math.round(sponsorTime[1] - v.currentTime);
+
+            return Math.max(duration, 4);
+        };
+
+        this.countdownTime = this.maxCountdownTime();
+        this.updateTimerDisplay();
+    }
+
+    reskip() {
+        reskipSponsorTime(this.UUID);
+
+        //change unskip button to a reskip button
+        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
+        unskipButton.innerText = chrome.i18n.getMessage("unskip");
+        unskipButton.removeEventListener("click", this.unskipCallback);
+
+        //setup new callback
+        this.unskipCallback = this.unskip.bind(this);
+        unskipButton.addEventListener("click", this.unskipCallback);
+
+        //reset duration
+        this.maxCountdownTime = () => 4;
+        this.countdownTime = this.maxCountdownTime();
+        this.updateTimerDisplay();
+    }
+
+    afterDownvote() {
+        this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
+        this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
+        
+        //remove this sponsor from the sponsors looked up
+        //find which one it is
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            if (UUIDs[i] == this.UUID) {
+                //this one is the one to hide
+                
+                //add this as a hidden sponsorTime
+                hiddenSponsorTimes.push(i);
+            
+                let sponsorTimesLeft = sponsorTimes.slice();
+                for (let j = 0; j < hiddenSponsorTimes.length; j++) {
+                    //remove this sponsor time
+                    sponsorTimesLeft.splice(hiddenSponsorTimes[j], 1);
+                }
+            
+                //update the preview
+                previewBar.set(sponsorTimesLeft, [], v.duration);
+            
+                break;
+            }
+        }
+    }
+    
+    addNoticeInfoMessage(message) {
+        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("p");
+        thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage";
+        thanksForVotingText.innerText = message;
+        
+        //add element to div
+        document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+    }
+    
+    resetNoticeInfoMessage() {
+        let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+    }
+    
+    addVoteButtonInfo(message) {
+        this.resetVoteButtonInfo();
+        
+        //hide report button and text for it
+        let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix);
+        if (downvoteButton != null) {
+            downvoteButton.style.display = "none";
+        }
+        let downvoteButtonText = document.getElementById("sponsorTimesReportText" + this.idSuffix);
+        if (downvoteButtonText != null) {
+            downvoteButtonText.style.display = "none";
+        }
+        
+        //add info
+        let thanksForVotingText = document.createElement("td");
+        thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + this.idSuffix;
+        thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+        thanksForVotingText.innerText = message;
+        
+        //add element to div
+        document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).prepend(thanksForVotingText);
+    }
+    
+    resetVoteButtonInfo() {
+        let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + this.idSuffix);
+        if (previousInfoMessage != null) {
+            //remove it
+            document.getElementById("sponsorSkipNoticeSecondRow" + this.idSuffix).removeChild(previousInfoMessage);
+        }
+        
+        //show button again
+        document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
+    }
+    
+    //close this notice
+    close() {
+        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        if (notice != null) {
+            notice.remove();
+        }
+    }
+
+}