Merge pull request #116 from ajayyy/experimental

New notice + language support + preview fixes

_locales/en/messages.json

@@ -0,0 +1,115 @@
+{
+  "Name": {
+    "message": "SponsorBlock",
+    "description": "Name of the extension."
+  },
+  "fullName": {
+    "message": "SponsorBlock for YouTube - Skip Sponsorships",
+    "description": "Name of the extension."
+  },
+
+  "Description": {
+    "message": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
+    "description": "Description of the extension."
+  },
+  "helpPage": {
+    "message": "index_en.html"
+  },
+  "400": {
+    "message": "Server said this request was invalid"
+  },
+  "429": {
+    "message": "You have submitted too many sponsor times for this one video, are you sure there are this many?"
+  },
+  "409": {
+    "message": "This has already been submitted before"
+  },
+  "502": {
+    "message": "It seems the server is down. Contact the dev to inform them."
+  },
+  "channelWhitelisted": {
+    "message": "Channel Whitelisted!"
+  },
+  "Sponsor": {
+    "message": "Sponsor"
+  },
+  "Sponsors": {
+    "message": "Sponsors"
+  },
+   "Segment": {
+    "message": "sponsor segment"
+  },
+  "Segments": {
+    "message": "sponsor segments"
+  },
+  "noticeTitle": {
+    "message": "Sponsor Skipped"
+  },
+  "noticeClosingMessage": {
+    "message": "closes in 7s"
+  },
+  "Dismiss": {
+    "message": "Dismiss"
+  },
+  "Loading": {
+    "message": "Loading..."
+  },
+  "Mins": {
+    "message": "Minutes"
+  },
+  "Secs": {
+    "message": "Seconds"
+  },
+  "Hide": {
+    "message": "Never Show"
+  },
+  "hitGoBack": {
+    "message": "Hit unskip to get to where you came from."
+  },
+  "goBack": {
+    "message": "Unskip"
+  },
+  "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."
+  },
+  "clearThis": {
+    "message": "Are you sure you want to clear this?\n\n"
+  },
+  "Unknown": {
+    "message": "There was an error submitting your sponsor times, please try again later."
+  },
+  
+  "sponsorFound": {
+    "message": "This video's sponsors are in the database!"
+  },
+  "sponsor404": {
+    "message": "No sponsors found"
+  },
+  "sponsorStart": {
+    "message": "Sponsorship Starts Now"
+  },
+  "sponsorEnd": {
+    "message": "Sponsorship Ends Now"
+  },
+  "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": {
+    "message": "Voted!"
+  },
+  "voteFail": {
+    "message": "You have already voted this way before."
+  },
+  "serverDown": {
+    "message": "It seems the sever is down. Contact the dev immediately."
+  },
+  "connectionError": {
+    "message": "A connection error has occured. Error code: "
+  },
+  "wantToSubmit": {
+    "message": "Do you want to submit the sponsor times for video id"
+  },
+  "leftTimes": {
+    "message": "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted)."
+  }
+}

background.js

@@ -56,7 +56,8 @@ chrome.runtime.onInstalled.addListener(function (object) {
       // TODO (shownInstallPage): remove this if statement, but leave contents
       if (!shownInstallPage){
         //open up the install page
-        chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+	      
+        chrome.tabs.create({url: chrome.extension.getURL("/help/"+chrome.i18n.getMessage("helpPage"))});
       }
 
       // TODO (shownInstallPage): delete if statement and contents

content.css

@@ -41,16 +41,16 @@
 }
 
 .sponsorSkipObject {
-    font-family: 'Source Sans Pro', sans-serif;
+	font-family: Roboto, Arial, Helvetica, sans-serif;
+		
+	margin-left: 2px;
+	margin-right: 2px;
 }
 
 .sponsorSkipLogo {
-	height: 64px;
+	height: 18px;
-	position: absolute;
+
-	top: 0;
+	float: left;
-	bottom: 0;
-	margin: auto;
-	margin-left: 10px;
 }
 
 @keyframes fadeIn {
@@ -58,33 +58,89 @@
 	  to { opacity: 1; }
 }
 
+.sponsorBlockSpacer {
+	background-color: rgb(100, 100, 100);
+	border-color: rgb(100, 100, 100);
+
+	margin-left: 5px;
+}
+
 .sponsorSkipNotice {
-    min-height: 165px;
+    min-width: 280px;
-    min-width: 400px;
+    background-color: rgba(28, 28, 28, 0.9);
-    background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
-	border: 3px solid rgba(0, 0, 0, 0.8);
+	right: 5px;
-	right: 0;
+	bottom: 100px;
-	bottom: 90px;
+	right: 10px;
-	zoom: 85%;
+
+	border-radius: 5px;
 
 	animation: fadeIn 0.5s;
+
+	border-spacing: 5px 10px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.sponsorSkipNoticeTimeLeft {
+	color: #eeeeee;
+
+	border-radius: 4px;
+    padding: 2px 5px;
+    font-size: 12px;
+
+	border: 1px solid #eeeeee;
 }
 
 /* if two are very close to eachother */
 .secondSkipNotice {
-	bottom: 280px;
+	bottom: 250px;
 
   	transition: bottom 0.2s;
 }
 
+.sponsorSkipNoticeUnskipSection {
+	float: left;
+
+	border-left: 1px solid rgb(150, 150, 150);
+}
+
+.sponsorSkipNoticeCloseButton {
+	height: 10px;
+    width: 10px;
+}
+
+.sponsorSkipNoticeButton {
+	background: none;
+	color: rgb(235, 235, 235);
+	border: none;
+	display: inline-block;
+
+	cursor: pointer;
+
+	margin-right: 10px;
+}
+
+.sponsorSkipNoticeRightSection {
+    right: 0;
+	position: absolute;
+
+	float: right;
+
+	margin-right: 5px;
+}
+
+.sponsorSkipNoticeRightButton {
+    margin-left: 7px;
+	padding: 0px;
+}
+
 .sponsorSkipMessage {
-    font-size: 18px;
+	font-size: 14px;
-    color: #000000;
-    text-align: center;
-    margin-top: 10px;
 	font-weight: bold;
-	margin-top: 4px;
+	color: rgb(235, 235, 235);
+	
+	display: inline-block;
 }
 
 .sponsorSkipInfo {
@@ -111,16 +167,18 @@
 	margin-top: 0px;
 }
 
+.sponsorTimesVoteButtonMessage {
+	float: left;
+}
+
 .sponsorTimesInfoMessage {
-	font-size: 15px;
+	font-size: 13.3333px;
-	font-weight: bold;
+    color: rgb(235, 235, 235);
-    color: #000000;
 	text-align: center;
 }
 
 .voteButton {
-	height: 32px;
+	height: 18px;
-	margin-right: 15px;
 	cursor: pointer;
 }
 .voteButton:hover {

content.js

@@ -18,6 +18,12 @@ var v;
 
 var listenerAdded;
 
+//the video id of the last preview bar update
+var lastPreviewBarUpdate;
+
+//whether the duration listener listening for the duration changes of the video has been setup yet
+var durationListenerSetUp = false;
+
 //the channel this video is about
 var channelURL;
 
@@ -25,10 +31,9 @@ var channelURL;
 var channelWhitelisted = false;
 
 // create preview bar
-let progressBar = document.getElementsByClassName("ytp-progress-bar-container")[0] || document.getElementsByClassName("no-model cue-range-markers")[0];
+var previewBar;
-var previewBar = new PreviewBar(progressBar);
 
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+if (id = getYouTubeVideoID(document.URL)) { // Direct Links
   videoIDChange(id);
 }
 
@@ -95,7 +100,11 @@ function messageListener(request, sender, sendResponse) {
     //messages from popup script
   
     if (request.message == "update") {
-      if(id = getYouTubeVideoID(document.URL)) videoIDChange(id);
+      if(id = getYouTubeVideoID(document.URL)){
+        videoIDChange(id);
+      } else {
+        resetValues();
+      }
     }
   
     if (request.message == "sponsorStart") {
@@ -202,11 +211,34 @@ document.onkeydown = function(e){
   }
 }
 
-function videoIDChange(id) {
+function resetValues() {
+  //reset last sponsor times
+  lastTime = -1;
+  lastUnixTimeSkipped = -1;
 
+  //reset sponsor times
+  sponsorTimes = null;
+  UUIDs = null;
+  sponsorVideoID = id;
+  sponsorLookupRetries = 0;
+
+  //empty the preview bar
+  previewBar.set([], [], 0);
+
+  //reset sponsor data found check
+  sponsorDataFound = false;
+}
+
+function videoIDChange(id) {
   //not a url change
   if (sponsorVideoID == id) return;
 
+  if (previewBar == null) {
+    //create it
+    let progressBar = document.getElementsByClassName("ytp-progress-bar-container")[0] || document.getElementsByClassName("no-model cue-range-markers")[0];
+    previewBar = new PreviewBar(progressBar);
+  }
+
   //warn them if they had unsubmitted times
   if (previousVideoID != null) {
     //get the sponsor times from storage
@@ -233,24 +265,11 @@ function videoIDChange(id) {
   //close popup
   closeInfoMenu();
 
-  //reset last sponsor times
+  resetValues();
-  lastTime = -1;
-  lastUnixTimeSkipped = -1;
-
-  //reset sponsor times
-  sponsorTimes = null;
-  UUIDs = null;
-  sponsorVideoID = id;
-  sponsorLookupRetries = 0;
-
-  //empty the preview bar
-  previewBar.set([], [], 0);
 
   //see if there is a video start time
   youtubeVideoStartTime = getYouTubeVideoStartTime(document.URL);
 
-  //reset sponsor data found check
-  sponsorDataFound = false;
   sponsorsLookup(id);
 
   //make sure everything is properly added
@@ -308,13 +327,19 @@ function videoIDChange(id) {
 
 function sponsorsLookup(id) {
   v = document.querySelector('video') // Youtube video player
-
   //there is no video here
   if (v == null) {
     setTimeout(() => sponsorsLookup(id), 100);
     return;
   }
 
+  if (!durationListenerSetUp) {
+    durationListenerSetUp = true;
+
+    //wait until it is loaded
+    v.addEventListener('durationchange', updatePreviewBar);
+  }
+  
   //check database for sponsor times
   sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
@@ -325,12 +350,9 @@ function sponsorsLookup(id) {
 
       //update the preview bar
       //leave the type blank for now until categories are added
-      console.log(v.duration)
+      if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(v.duration))) {
-      if (isNaN(v.duration)) {
-        //wait until it is loaded
-        v.addEventListener('durationchange', updatePreviewBar);
-      } else {
         //set it now
+        //otherwise the listener can handle it
         updatePreviewBar();
       }
 
@@ -371,8 +393,8 @@ function sponsorsLookup(id) {
 function updatePreviewBar() {
   previewBar.set(sponsorTimes, [], v.duration);
 
-  //the listener is only needed once
+  //update last video id
-  v.removeEventListener('durationchange', updatePreviewBar);
+  lastPreviewBarUpdate = getYouTubeVideoID(document.URL);
 }
 
 function getChannelID() {
@@ -494,6 +516,9 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
     //send telemetry that a this sponsor was skipped happened
     if (trackViewCount) {
       sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+
+      //upvote this
+      vote(1, currentUUID, true);
     }
   }
 }
@@ -517,7 +542,7 @@ function addPlayerControlsButton() {
   let startSponsorButton = document.createElement("button");
   startSponsorButton.id = "startSponsorButton";
   startSponsorButton.className = "ytp-button playerButton";
-  startSponsorButton.setAttribute("title", "Sponsor Starts Now");
+  startSponsorButton.setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
   startSponsorButton.addEventListener("click", startSponsorClicked);
 
   let startSponsorImage = document.createElement("img");
@@ -609,7 +634,7 @@ function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
   if (showStartSponsor) {
     showingStartSponsor = true;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
-    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Starts Now");
+    document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
 
     if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !hideInfoButtonPlayerControls) {
       document.getElementById("submitButton").style.display = "unset";
@@ -620,7 +645,7 @@ function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
   } else {
     showingStartSponsor = false;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
-    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Ends Now");
+    document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorEND"));
 
     //disable submit button
     document.getElementById("submitButton").style.display = "none";
@@ -808,8 +833,8 @@ function clearSponsorTimes() {
     let sponsorTimes = result[sponsorTimeKey];
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-      let confirmMessage = "Are you sure you want to clear this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
-      confirmMessage += "\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."
+      confirmMessage += chrome.i18n.getMessage("confirmMSG")
       if(!confirm(confirmMessage)) return;
 
       //clear the sponsor times
@@ -848,73 +873,99 @@ function openSkipNotice(UUID){
   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";
+  logoElement.className = "sponsorSkipLogo sponsorSkipObject";
-  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+  logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
 
-  let noticeMessage = document.createElement("div");
+  let noticeMessage = document.createElement("span");
   noticeMessage.id = "sponsorSkipMessage" + UUID;
   noticeMessage.classList.add("sponsorSkipMessage");
   noticeMessage.classList.add("sponsorSkipObject");
-  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
+  noticeMessage.innerText = chrome.i18n.getMessage("noticeTitle");
 
-  let noticeInfo = document.createElement("p");
+  //create the first column
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
+  logoColumn.appendChild(logoElement);
-  noticeInfo.classList.add("sponsorSkipInfo");
+  logoColumn.appendChild(noticeMessage);
-  noticeInfo.classList.add("sponsorSkipObject");
+
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  //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("div");
+  let voteButtonsContainer = document.createElement("td");
   voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-  voteButtonsContainer.setAttribute("align", "center");
-
-  let upvoteButton = document.createElement("img");
-  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-  upvoteButton.className = "sponsorSkipObject voteButton";
-  upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
-  upvoteButton.addEventListener("click", () => vote(1, UUID));
 
   let downvoteButton = document.createElement("img");
   downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
   downvoteButton.className = "sponsorSkipObject voteButton";
-  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+  downvoteButton.src = chrome.extension.getURL("icons/report.png");
   downvoteButton.addEventListener("click", () => vote(0, UUID));
 
   //add thumbs up and down buttons to the container
-  voteButtonsContainer.appendChild(upvoteButton);
   voteButtonsContainer.appendChild(downvoteButton);
 
-  let buttonContainer = document.createElement("div");
+  //add unskip button
-  buttonContainer.setAttribute("align", "center");
+  let unskipContainer = document.createElement("td");
+  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
 
-  let goBackButton = document.createElement("button");
+  let unskipButton = document.createElement("button");
-  goBackButton.innerText = "Go back";
+  unskipButton.innerText = chrome.i18n.getMessage("goBack");
-  goBackButton.className = "sponsorSkipButton";
+  unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
+  unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID));
 
-  let hideButton = document.createElement("button");
+  unskipContainer.appendChild(unskipButton);
-  hideButton.innerText = "Dismiss";
+
-  hideButton.className = "sponsorSkipButton";
+  //add don't show again button
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+  let dontshowContainer = document.createElement("td");
+  dontshowContainer.className = "sponsorSkipNoticeRightSection";
 
   let dontShowAgainButton = document.createElement("button");
-  dontShowAgainButton.innerText = "Don't Show This Again";
+  dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
-  dontShowAgainButton.className = "sponsorSkipDontShowButton";
+  dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
   dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
-  buttonContainer.appendChild(goBackButton);
+  dontshowContainer.appendChild(dontShowAgainButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
 
-  noticeElement.appendChild(logoElement);
+  //add to row
-  noticeElement.appendChild(noticeMessage);
+  secondRow.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(noticeInfo);
+  secondRow.appendChild(unskipContainer);
-  noticeElement.appendChild(voteButtonsContainer);
+  secondRow.appendChild(dontshowContainer);
-  noticeElement.appendChild(buttonContainer);
+
+  noticeElement.appendChild(firstRow);
+  noticeElement.appendChild(spacer);
+  noticeElement.appendChild(secondRow);
 
   let referenceNode = document.getElementById("movie_player");
   if (referenceNode == null) {
@@ -935,36 +986,8 @@ function openSkipNotice(UUID){
 }
 
 function afterDownvote(UUID) {
-  //change text to say thanks for voting
+  addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID);
-  //remove buttons
+  addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID);
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add thanks for voting text
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesThanksForVotingText";
-  thanksForVotingText.innerText = "Thanks for voting!"
-
-  //add extra info for voting
-  let thanksForVotingInfoText = document.createElement("p");
-  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
-  thanksForVotingInfoText.innerText = "Hit go back to get to where you came from."
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
 
   //remove this sponsor from the sponsors looked up
   //find which one it is
@@ -983,41 +1006,74 @@ function afterDownvote(UUID) {
 
       //update the preview
       previewBar.set(sponsorTimesLeft, [], v.duration);
+
+      break;
     }
   }
 }
 
-function addLoadingInfo(message, UUID) {
+function addNoticeInfoMessage(message, UUID) {
-  //change text to say thanks for message
-  //remove buttons
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
   let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
   if (previousInfoMessage != null) {
     //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
+    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
   }
 
-  //add thanks for voting text
+  //add info
   let thanksForVotingText = document.createElement("p");
   thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
   thanksForVotingText.className = "sponsorTimesInfoMessage";
   thanksForVotingText.innerText = message;
 
   //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
+  document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + UUID));
 }
 
-function vote(type, 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) {
     //add loading info
-  addLoadingInfo("Loading...", UUID)
+    addVoteButtonInfo("Loading...", UUID)
+    resetNoticeInfoMessage(UUID);
+  }
 
   chrome.runtime.sendMessage({
     message: "submitVote",
@@ -1026,24 +1082,26 @@ function vote(type, UUID) {
   }, function(response) {
     if (response != undefined) {
       //see if it was a success or failure
+      if (!inTheBackground) {
         if (response.successType == 1) {
           //success
           if (type == 0) {
             afterDownvote(UUID);
-        } else if (type == 1) {
-          closeSkipNotice(UUID);
           }
         } else if (response.successType == 0) {
           //failure: duplicate vote
-        addLoadingInfo("It seems you've already voted before", UUID)
+          addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
+          resetVoteButtonInfo(UUID);
         } else if (response.successType == -1) {
           if (response.statusCode == 502) {
-          addLoadingInfo("It seems the sever is down. Contact the dev immediately.", UUID)
+            addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
+            resetVoteButtonInfo(UUID);
           } else {
             //failure: unknown error
-          addLoadingInfo("A connection error has occured. Error code: " + response.statusCode, UUID)
+            addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+            resetVoteButtonInfo(UUID);
+          }
         }
-        
       }
     }
   });
@@ -1153,16 +1211,10 @@ function sendSubmitMessage(){
         document.getElementById("submitButton").style.animation = "unset";
         document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
 
-        if(response.statusCode == 400) {
+        if([400,429,409,502].includes(response.statusCode)) {
-          alert("Server said this request was invalid");
+          alert(chrome.i18n.getMessage(response.statusCode));
-        } else if(response.statusCode == 429) {
-          alert("You have submitted too many sponsor times for this one video, are you sure there are this many?");
-        } else if(response.statusCode == 409) {
-          alert("This has already been submitted before");
-        } else if(response.statusCode == 502) {
-          alert("It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode);
         } else {
-          alert("There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode);
+          alert(chrome.i18n.getMessage("connectionError") + response.statusCode);
         }
       }
     }

manifest.json

@@ -1,8 +1,9 @@
 {
-  "name": "SponsorBlock for YouTube - Skip Sponsorships",
+  "name": "__MSG_fullName__",
-  "short_name": "SponsorBlock",
+  "short_name": "__MSG_Name__",
-  "version": "1.0.35",
+  "version": "1.0.37",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
+  "default_locale": "en",
+  "description": "__MSG_Description__",
   "content_scripts": [
     {
       "matches": [
@@ -32,6 +33,8 @@
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
     "icons/downvote.png",
+    "icons/report.png",
+    "icons/close.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
     "popup.html"
@@ -42,7 +45,7 @@
     "https://sponsor.ajay.app/*"
   ],
   "browser_action": {
-    "default_title": "SponsorBlock",
+    "default_title": "__MSG_Name__",
     "default_popup": "popup.html"
   }, 
   "background": {

popup.css

@@ -51,6 +51,10 @@ h1.popupElement {
 	padding: 5px;
 }
 
+.discreteLink.popupElement {
+	color: black;
+}
+
 .recordingSubtitle.popupElement {
 	margin-bottom: 10px;
 }

popup.html

@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Set Page Color Popup</title>
+    <title>SponsorBlock Popup</title>
     <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
     <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
   </head>
@@ -73,6 +73,10 @@
                     sponsor segments.
                   </span>
               </span>
+
+              <div class="popupElement">
+                View the leaderboard <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
+              </div>
             </p>
 
             <p class="popupElement"> 
@@ -119,6 +123,10 @@
               <br/>
     
               <button id="setUsernameButton" class="warningButton popupElement">Set Username</button>
+              <br/>
+              <sub class="popupElement">
+                This is used on the public stats page to show off how much you've contributed. See it <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
+              </sub>
             </div>
 
             <div id="setUsername" class="popupElement" style="display: none">

popup.js

@@ -92,15 +92,6 @@ function runThePopup() {
   SB.reportAnIssue.addEventListener("click", reportAnIssue);
   SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
 
-  //setup error message languages
-  var EN_US = new Map();
-
-  EN_US.set(400, 'Server said this request was invalid"')
-     .set(429, 'You have submitted too many sponsor times for this one video, are you sure there are this many?')
-     .set(409, 'This has already been submitted before')
-     .set(502, 'It seems the server is down. Contact the dev to inform them.')
-     .set('Unknown', 'There was an error submitting your sponsor times, please try again later.');
-
   //if true, the button now selects the end time
   let startTimeChosen = false;
   
@@ -178,9 +169,9 @@ function runThePopup() {
   chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
     if (result.sponsorTimesContributed != undefined) {
       if (result.sponsorTimesContributed > 1) {
-        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
       } else {
-        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
       }
       SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
       SB.sponsorTimesContributionsContainer.style.display = "unset";
@@ -196,9 +187,9 @@ function runThePopup() {
               let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
               if (viewCount != 0) {
                 if (viewCount > 1) {
-                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
                 } else {
-                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
                 }
 
                 SB.sponsorTimesViewsDisplay.innerText = viewCount;
@@ -220,7 +211,6 @@ function runThePopup() {
 	  chrome.tabs.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) {
 		  if (result != undefined && result.videoID) {
 			  currentVideoID = result.videoID;
-
 			  loadTabData(tabs);
 		  } else if (result == undefined && chrome.runtime.lastError) {
 			  //this isn't a YouTube video then, or at least the content script is not loaded
@@ -243,7 +233,7 @@ function runThePopup() {
       if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
         if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
           startTimeChosen = true;
-          SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+          SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
         }
   
         sponsorTimes = sponsorTimesStorage;
@@ -283,11 +273,11 @@ function runThePopup() {
       SB.loadingIndicator.innerHTML = "";
 
       if (request.found) {
-        SB.videoFound.innerHTML = "This video's sponsors are in the database!"
+        SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
 
         displayDownloadedSponsorTimes(request);
       } else {
-        SB.videoFound.innerHTML = "No sponsors found"
+        SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
       }
     }
 
@@ -385,7 +375,7 @@ function runThePopup() {
   function displayDownloadedSponsorTimes(request) {
     if (request.sponsorTimes != undefined) {
       //set it to the message
-      if (SB.downloadedSponsorMessageTimes.innerText != "Channel Whitelisted!") {
+      if (SB.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
         SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
       }
 
@@ -654,8 +644,8 @@ function runThePopup() {
         tabs[0].id,
         {message: "getCurrentTime"},
         function (response) {
-          let minutes = document.getElementById(idStartName + "Minutes" + index);
+          let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
-          let seconds = document.getElementById(idStartName + "Seconds" + index);
+          let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
     
           minutes.value = getTimeInMinutes(response.currentTime);
           seconds.value = getTimeInFormattedSeconds(response.currentTime);
@@ -666,8 +656,8 @@ function runThePopup() {
   //id start name is whether it is the startTime or endTime
   //gives back the time in seconds
   function getSponsorTimeEditTimes(idStartName, index) {
-    let minutes = document.getElementById(idStartName + "Minutes" + index);
+    let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
-    let seconds = document.getElementById(idStartName + "Seconds" + index);
+    let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
 
     return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
   }
@@ -792,14 +782,9 @@ function runThePopup() {
     resetStartTimeChosen();
   }
   
-  function getErrorMessage(lang, statusCode) {
-    if(lang.has(statusCode)) return lang.get(statusCode);
-    return lang.get('Unknown').concat(" Error code: ") + statusCode;
-  } 
-
   function submitTimes() {
     //make info message say loading
-    SB.submitTimesInfoMessage.innerText = "Loading...";
+    SB.submitTimesInfoMessage.innerText = chrome.i18n.getMessage("Loading");
     SB.submitTimesInfoMessageContainer.style.display = "unset";
   
     if (sponsorTimes.length > 0) {
@@ -814,7 +799,7 @@ function runThePopup() {
 
             clearTimes();
           } else {
-            let errorMessage = getErrorMessage(EN_US, response.statusCode);
+            let errorMessage = getErrorMessage(response.statusCode);
 
             document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
             document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -981,7 +966,7 @@ function runThePopup() {
     //update startTimeChosen letiable
     if (!startTimeChosen) {
       startTimeChosen = true;
-    SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+    SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
     } else {
       resetStartTimeChosen();
     }
@@ -990,7 +975,7 @@ function runThePopup() {
   //set it to false
   function resetStartTimeChosen() {
     startTimeChosen = false;
-    SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
+    SB.sponsorStart.innerHTML = "SP_START";
   }
   
   //hides and shows the submit times button when needed
@@ -1066,8 +1051,7 @@ function runThePopup() {
   
   //this is not a YouTube video page
   function displayNoVideo() {
-    document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
+    document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
-        "If you know this is a YouTube tab, close this popup and open it again.";
   }
   
   function reportAnIssue() {
@@ -1104,16 +1088,16 @@ function runThePopup() {
         //see if it was a success or failure
         if (response.successType == 1) {
           //success
-          addVoteMessage("Thanks for voting!", UUID)
+          addVoteMessage(chrome.i18n.getMessage("Voted"), UUID)
         } else if (response.successType == 0) {
           //failure: duplicate vote
-          addVoteMessage("You have already voted this way before.", UUID)
+          addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)
         } else if (response.successType == -1) {
           if (response.statusCode == 502) {
-            addVoteMessage("It seems the sever is down. Contact the dev immediately.", UUID)
+            addVoteMessage(chrome.i18n.getMessage("serverDown"), UUID)
           } else {
             //failure: unknown error
-            addVoteMessage("A connection error has occured. Error code: " + response.statusCode, UUID)
+            addVoteMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID)
           }
         }
       }