Merge pull request #117 from ajayyy/experimental-ajay

Updated help page

_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

@@ -1,55 +1,43 @@
-//when a new tab is highlighted
-chrome.tabs.onActivated.addListener(
-  function(activeInfo) {
-    chrome.tabs.get(activeInfo.tabId, function(tab) {
-      let id = getYouTubeVideoID(tab.url);
-
-      //if this even is a YouTube tab
-      if (id) {
-        videoIDChange(id, activeInfo.tabId);
-      }
-    })
-  }
-);
-
-//when a tab changes URLs
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-    if (changeInfo != undefined && changeInfo.url != undefined) {
-      let id = getYouTubeVideoID(changeInfo.url);
-
-      //if URL changed and is youtube video message contentScript the video id
-      if (changeInfo.url && id) { 
-        videoIDChange(id, tabId);
-      }
-    }
+	chrome.tabs.sendMessage(tabId, {
+		message: 'update',
+	});
 });
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "submitTimes") {
-    submitTimes(request.videoID, callback);
-
-    //this allows the callback to be called later by the submitTimes function
-    return true;
-  } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time, request.videoID, callback);
-
-    //this allows the callback to be called later
-    return true;
-  } else if (request.message == "getSponsorTimes") {
-    getSponsorTimes(request.videoID, function(sponsorTimes) {
-      callback({
-        sponsorTimes: sponsorTimes
-      })
-    });
-
-    //this allows the callback to be called later
-    return true;
-  } else if (request.message == "submitVote") {
-    submitVote(request.type, request.UUID, callback);
-
-    //this allows the callback to be called later
-    return true;
-  }
+	switch(request.message) {
+		case "submitTimes":
+			submitTimes(request.videoID, callback);
+			
+			//this allows the callback to be called later by the submitTimes function
+			return true; 
+		case "addSponsorTime":
+			addSponsorTime(request.time, request.videoID, callback);
+			
+			//this allows the callback to be called later
+			return true; 
+		case "getSponsorTimes":
+			getSponsorTimes(request.videoID, function(sponsorTimes) {
+				callback({
+					sponsorTimes: sponsorTimes
+				})
+			});
+			
+			//this allows the callback to be called later
+			return true;
+		case "submitVote":
+			submitVote(request.type, request.UUID, callback);
+			
+			//this allows the callback to be called later
+			return true;
+		case "alertPrevious":
+			chrome.notifications.create("stillThere" + Math.random(), {
+				type: "basic",
+				title: "Do you want to submit the sponsor times for video id " + request.previousVideoID + "?",
+				message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
+				iconUrl: "./icons/LogoSponsorBlocker256px.png"
+			});
+	}
 });
 
 //add help page on install
@@ -68,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
@@ -154,7 +143,7 @@ function submitVote(type, UUID, callback) {
 function submitTimes(videoID, callback) {
   //get the video times from storage
   let sponsorTimeKey = 'sponsorTimes' + videoID;
-  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+  chrome.storage.sync.get([sponsorTimeKey, "userID"], function(result) {
     let sponsorTimes = result[sponsorTimeKey];
     let userID = result.userID;
 
@@ -193,56 +182,6 @@ function submitTimes(videoID, callback) {
   });
 }
 
-function videoIDChange(currentVideoID, tabId) {
-  //send a message to the content script
-  chrome.tabs.sendMessage(tabId, {
-    message: 'ytvideoid',
-    id: currentVideoID
-  });
-
-  chrome.storage.sync.get(["sponsorVideoID", "previousVideoID"], function(result) {
-    const sponsorVideoID = result.sponsorVideoID;
-    const previousVideoID = result.previousVideoID;
-
-    //not a url change
-    if (sponsorVideoID == currentVideoID){
-      return;
-    }
-
-    chrome.storage.sync.set({
-      "sponsorVideoID": currentVideoID
-    });
-
-    //warn them if they had unsubmitted times
-    if (previousVideoID != null) {
-      //get the sponsor times from storage
-      let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
-      chrome.storage.sync.get([sponsorTimeKey], function(result) {
-        let sponsorTimes = result[sponsorTimeKey];
-
-        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-          //warn them that they have unsubmitted sponsor times
-          chrome.notifications.create("stillThere" + Math.random(), {
-            type: "basic",
-            title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
-            message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-            iconUrl: "./icons/LogoSponsorBlocker256px.png"
-          });
-        }
-
-        //set the previous video id to the currentID
-        chrome.storage.sync.set({
-          "previousVideoID": currentVideoID
-        });
-      });
-    } else {
-      chrome.storage.sync.set({
-        "previousVideoID": currentVideoID
-      });
-    }
-  });
-}
-
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 

content.css

@@ -1,3 +1,21 @@
+#previewbar {
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+	pointer-events: none;
+	
+	height: 100%;
+	transform: scaleY(0.6) translateY(-30%) translateY(1.5px);
+	z-index: 40;
+}
+
+.previewbar {
+	display: inline-block;
+	height: 100%;
+}
+
 .popup {
     z-index: 10;
     width: 100%;
@@ -23,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;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	margin: auto;
-	margin-left: 10px;
+	height: 18px;
+
+	float: left;
 }
 
 @keyframes fadeIn {
@@ -40,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: 400px;
-    background-color: rgba(255, 217, 217, 0.8);
+    min-width: 280px;
+    background-color: rgba(28, 28, 28, 0.9);
     position: absolute;
-	border: 3px solid rgba(0, 0, 0, 0.8);
-	right: 0;
-	bottom: 90px;
-	zoom: 85%;
+	right: 5px;
+	bottom: 100px;
+	right: 10px;
+
+	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;
-    color: #000000;
-    text-align: center;
-    margin-top: 10px;
+	font-size: 14px;
 	font-weight: bold;
-	margin-top: 4px;
+	color: rgb(235, 235, 235);
+	
+	display: inline-block;
 }
 
 .sponsorSkipInfo {
@@ -93,16 +167,18 @@
 	margin-top: 0px;
 }
 
+.sponsorTimesVoteButtonMessage {
+	float: left;
+}
+
 .sponsorTimesInfoMessage {
-	font-size: 15px;
-	font-weight: bold;
-    color: #000000;
+	font-size: 13.3333px;
+    color: rgb(235, 235, 235);
 	text-align: center;
 }
 
 .voteButton {
-	height: 32px;
-	margin-right: 15px;
+	height: 18px;
 	cursor: pointer;
 }
 .voteButton:hover {

content.js

@@ -1,25 +1,39 @@
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
-
+var previousVideoID = null;
 //the actual sponsorTimes if loaded and UUIDs associated with them
 var sponsorTimes = null;
 var UUIDs = null;
 //what video id are these sponsors for
 var sponsorVideoID = null;
 
+//these are sponsors that have been downvoted
+var hiddenSponsorTimes = [];
+
 //the time this video is starting at when first played, if not zero
 var youtubeVideoStartTime = null;
 
 //the video
 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;
 
 //is this channel whitelised from getting sponsors skipped
 var channelWhitelisted = false;
 
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+// create preview bar
+var previewBar;
+
+if (id = getYouTubeVideoID(document.URL)) { // Direct Links
   videoIDChange(id);
 }
 
@@ -81,14 +95,18 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
 
 //get messages from the background script and the popup
 chrome.runtime.onMessage.addListener(messageListener);
-
+  
 function messageListener(request, sender, sendResponse) {
-    //message from background script
-    if (request.message == "ytvideoid") { 
-      videoIDChange(request.id);
-    }
-
     //messages from popup script
+  
+    if (request.message == "update") {
+      if(id = getYouTubeVideoID(document.URL)){
+        videoIDChange(id);
+      } else {
+        resetValues();
+      }
+    }
+  
     if (request.message == "sponsorStart") {
       sponsorMessageStarted(sendResponse);
     }
@@ -102,6 +120,7 @@ function messageListener(request, sender, sendResponse) {
       sendResponse({
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
+        hiddenSponsorTimes: hiddenSponsorTimes,
         UUIDs: UUIDs
       });
 
@@ -119,6 +138,16 @@ function messageListener(request, sender, sendResponse) {
       })
     }
 
+    if (request.message == "skipToTime") {
+      v.currentTime = request.time;
+    }
+
+    if (request.message == "getCurrentTime") {
+      sendResponse({
+        currentTime: v.currentTime
+      });
+    }
+
     if (request.message == "getChannelURL") {
       sendResponse({
         channelURL: channelURL
@@ -182,15 +211,7 @@ document.onkeydown = function(e){
   }
 }
 
-function videoIDChange(id) {
-  //not a url change
-  if (sponsorVideoID == id){
-    return;
-  }
-
-  //close popup
-  closeInfoMenu();
-
+function resetValues() {
   //reset last sponsor times
   lastTime = -1;
   lastUnixTimeSkipped = -1;
@@ -201,11 +222,54 @@ function videoIDChange(id) {
   sponsorVideoID = id;
   sponsorLookupRetries = 0;
 
-  //see if there is a video start time
-  youtubeVideoStartTime = getYouTubeVideoStartTime(document.URL);
+  //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
+    let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
+    chrome.storage.sync.get([sponsorTimeKey], function(result) {
+      let sponsorTimes = result[sponsorTimeKey];
+
+      if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        //warn them that they have unsubmitted sponsor times
+          chrome.runtime.sendMessage({
+            message: "alertPrevious",
+            previousVideoID: previousVideoID
+          })
+      }
+
+      //set the previous video id to the currentID
+      previousVideoID = id;
+    });
+  } else {
+    //set the previous id now, don't wait for chrome.storage.get
+    previousVideoID = id;
+  }
+  
+  //close popup
+  closeInfoMenu();
+
+  resetValues();
+
+  //see if there is a video start time
+  youtubeVideoStartTime = getYouTubeVideoStartTime(document.URL);
+
   sponsorsLookup(id);
 
   //make sure everything is properly added
@@ -263,12 +327,18 @@ 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) {
@@ -278,6 +348,14 @@ function sponsorsLookup(id) {
       sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
       UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
 
+      //update the preview bar
+      //leave the type blank for now until categories are added
+      if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(v.duration))) {
+        //set it now
+        //otherwise the listener can handle it
+        updatePreviewBar();
+      }
+
       getChannelID();
 
       sponsorLookupRetries = 0;
@@ -298,7 +376,7 @@ function sponsorsLookup(id) {
       });
 
       sponsorLookupRetries = 0;
-    } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 15) {
+    } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 90) {
       //some error occurred, try again in a second
       setTimeout(() => sponsorsLookup(id), 1000);
 
@@ -312,6 +390,13 @@ function sponsorsLookup(id) {
   };
 }
 
+function updatePreviewBar() {
+  previewBar.set(sponsorTimes, [], v.duration);
+
+  //update last video id
+  lastPreviewBarUpdate = getYouTubeVideoID(document.URL);
+}
+
 function getChannelID() {
   //get channel id
   let channelContainers = document.querySelectorAll("#owner-name");
@@ -391,7 +476,7 @@ function checkSponsorTime(sponsorTimes, index, openNotice) {
     lastTime = v.currentTime - 0.0001;
   }
 
-  if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0])) {
+  if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0]) && !hiddenSponsorTimes.includes(index)) {
     //skip it
     skipToTime(v, index, sponsorTimes, openNotice);
 
@@ -431,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);
     }
   }
 }
@@ -454,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");
@@ -546,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";
@@ -557,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";
@@ -745,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);
-      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."
+      let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += chrome.i18n.getMessage("confirmMSG")
       if(!confirm(confirmMessage)) return;
 
       //clear the sponsor times
@@ -785,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.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+  logoElement.className = "sponsorSkipLogo sponsorSkipObject";
+  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!";
-  
-  let noticeInfo = document.createElement("p");
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
-  noticeInfo.classList.add("sponsorSkipInfo");
-  noticeInfo.classList.add("sponsorSkipObject");
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  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("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");
-  buttonContainer.setAttribute("align", "center");
+  //add unskip button
+  let unskipContainer = document.createElement("td");
+  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
 
-  let goBackButton = document.createElement("button");
-  goBackButton.innerText = "Go back";
-  goBackButton.className = "sponsorSkipButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
+  let unskipButton = document.createElement("button");
+  unskipButton.innerText = chrome.i18n.getMessage("goBack");
+  unskipButton.className = "sponsorSkipObject sponsorSkipNoticeButton";
+  unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID));
 
-  let hideButton = document.createElement("button");
-  hideButton.innerText = "Dismiss";
-  hideButton.className = "sponsorSkipButton";
-  hideButton.addEventListener("click", () => closeSkipNotice(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 = "Don't Show This Again";
-  dontShowAgainButton.className = "sponsorSkipDontShowButton";
+  dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
+  dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
   dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
-  buttonContainer.appendChild(goBackButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
+  dontshowContainer.appendChild(dontShowAgainButton);
 
-  noticeElement.appendChild(logoElement);
-  noticeElement.appendChild(noticeMessage);
-  noticeElement.appendChild(noticeInfo);
-  noticeElement.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(buttonContainer);
+  //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) {
@@ -872,69 +986,94 @@ function openSkipNotice(UUID){
 }
 
 function afterDownvote(UUID) {
-  //change text to say thanks for voting
-  //remove buttons
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
+  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;
+    }
   }
-  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);
 }
 
-function addLoadingInfo(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);
-  }
-
+function addNoticeInfoMessage(message, UUID) {
   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) {
-  //add loading info
-  addLoadingInfo("Loading...", 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
+    addVoteButtonInfo("Loading...", UUID)
+    resetNoticeInfoMessage(UUID);
+  }
 
   chrome.runtime.sendMessage({
     message: "submitVote",
@@ -943,24 +1082,26 @@ function vote(type, UUID) {
   }, function(response) {
     if (response != undefined) {
       //see if it was a success or failure
-      if (response.successType == 1) {
-        //success
-        if (type == 0) {
-          afterDownvote(UUID);
-        } else if (type == 1) {
-          closeSkipNotice(UUID);
+      if (!inTheBackground) {
+        if (response.successType == 1) {
+          //success
+          if (type == 0) {
+            afterDownvote(UUID);
+          }
+        } else if (response.successType == 0) {
+          //failure: duplicate vote
+          addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
+          resetVoteButtonInfo(UUID);
+        } else if (response.successType == -1) {
+          if (response.statusCode == 502) {
+            addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
+            resetVoteButtonInfo(UUID);
+          } else {
+            //failure: unknown error
+            addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+            resetVoteButtonInfo(UUID);
+          }
         }
-      } else if (response.successType == 0) {
-        //failure: duplicate vote
-        addLoadingInfo("It seems you've already voted before", UUID)
-      } else if (response.successType == -1) {
-        if (response.statusCode == 502) {
-          addLoadingInfo("It seems the sever is down. Contact the dev immediately.", UUID)
-        } else {
-          //failure: unknown error
-          addLoadingInfo("A connection error has occured. Error code: " + response.statusCode, UUID)
-        }
-        
       }
     }
   });
@@ -1070,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) {
-          alert("Server said this request was invalid");
-        } 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);
+        if([400,429,409,502].includes(response.statusCode)) {
+          alert(chrome.i18n.getMessage(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);
         }
       }
     }

help/index_en.html

@@ -38,10 +38,11 @@
       
       <br/>
       <br/>
-      Whenever you skip a video, you will get a notice allowing you to vote on that submission. If it worked, upvote it! You can also vote in the popup.
+
+      Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary.
     </p>
 
-    <center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
+    <center><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></center>
 
     <h1>Submitting</h1>
 
@@ -119,4 +120,4 @@
 
   </center>
 
-</body>
+</body>

manifest.json

@@ -1,8 +1,9 @@
 {
-  "name": "SponsorBlock for YouTube - Skip Sponsorships",
-  "short_name": "SponsorBlock",
-  "version": "1.0.31",
-  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
+  "name": "__MSG_fullName__",
+  "short_name": "__MSG_Name__",
+  "version": "1.0.37",
+  "default_locale": "en",
+  "description": "__MSG_Description__",
   "content_scripts": [
     {
       "matches": [
@@ -11,6 +12,7 @@
       "all_frames": true,
       "js": [
         "config.js",
+        "utils/previewBar.js",
         "utils.js",
         "content.js",
         "popup.js"
@@ -31,18 +33,19 @@
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
     "icons/downvote.png",
+    "icons/report.png",
+    "icons/close.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
     "popup.html"
   ],
   "permissions": [
-    "tabs",
     "storage",
     "notifications",
     "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;
 }
@@ -80,8 +84,14 @@ h1.popupElement {
 
 .mediumLink.popupElement {
 	font-size: 15px;
-	padding-left: 15px;
-	padding-right: 15px;
+	margin-left: 25px;
+	margin-right: 25px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.tinyLink.popupElement {
+	font-size: 10px;
 	text-decoration: underline;
 	cursor: pointer;
 }

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"> 
@@ -93,6 +97,8 @@
         
                 </div>
               </b>
+
+              <br/>
       
               <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
@@ -112,6 +118,35 @@
       
             </div>
 
+            <div id="setUsernameContainer" class="popupElement">
+              <br/>
+              <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">
+                <br/>
+
+                <h3>Set Username</h3>
+
+                <div id="setUsernameStatusContainer" style="display: none">
+                    <h2 id="setUsernameStatus"></h2>
+                </div>
+
+
+                <input id="usernameInput" hint="Username"></input>
+
+                <br/>
+                <br/>
+
+                <button id="submitUsername" class="warningButton popupElement">Submit Username</button>
+            </div>
+
             <div id="discordButtonContainer" class="popupElement" style="display: none">
               <br/>
 
@@ -119,7 +154,7 @@
 
               <br/>
 
-              Come join the official discord server to give suggestions and feedback!
+                Come join the official discord server to give suggestions and feedback!
 
               <br/>
 

popup.js

@@ -54,6 +54,14 @@ function runThePopup() {
   // submitTimesInfoMessage
   "submitTimesInfoMessageContainer",
   "submitTimesInfoMessage",
+  // Username
+  "setUsernameContainer",
+  "setUsernameButton",
+  "setUsernameStatusContainer",
+  "setUsernameStatus",
+  "setUsername",
+  "usernameInput",
+  "submitUsername",
   // More
   "submissionSection",
   "mainControls",
@@ -78,18 +86,11 @@ function runThePopup() {
   SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
   SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
   SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
+  SB.setUsernameButton.addEventListener("click", setUsernameButton);
+  SB.submitUsername.addEventListener("click", submitUsername);
   SB.optionsButton.addEventListener("click", openOptions);
   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;
@@ -168,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";
@@ -186,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;
@@ -201,17 +202,24 @@ function runThePopup() {
     }
   });
   
-  
   chrome.tabs.query({
       active: true,
       currentWindow: true
-  }, loadTabData);
+  }, onTabs);
   
+  function onTabs(tabs) {
+	  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
+			  displayNoVideo();
+		  }
+	  });
+  }
   
   function loadTabData(tabs) {
-    //set current videoID
-    currentVideoID = getYouTubeVideoID(tabs[0].url);
-  
     if (!currentVideoID) {
       //this isn't a YouTube video then
       displayNoVideo();
@@ -225,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;
@@ -265,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");
       }
     }
 
@@ -367,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);
       }
 
@@ -376,7 +384,14 @@ function runThePopup() {
       for (let i = 0; i < request.sponsorTimes.length; i++) {
         let sponsorTimeButton = document.createElement("button");
         sponsorTimeButton.className = "warningButton popupElement";
-        sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
+
+        let extraInfo = "";
+        if (request.hiddenSponsorTimes.includes(i)) {
+          //this one is hidden
+          extraInfo = " (hidden)";
+        }
+
+        sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]) + extraInfo;
         
         let votingButtons = document.createElement("div");
   
@@ -465,8 +480,11 @@ function runThePopup() {
       let index = i;
       deleteButton.addEventListener("click", () => deleteSponsorTime(index));
   
-      let spacer = document.createElement("span");
-      spacer.innerText = " ";
+      let previewButton = document.createElement("span");
+      previewButton.id = "sponsorTimePreviewButton" + i;
+      previewButton.innerText = "Preview";
+      previewButton.className = "mediumLink popupElement";
+      previewButton.addEventListener("click", () => previewSponsorTime(index));
   
       let editButton = document.createElement("span");
       editButton.id = "sponsorTimeEditButton" + i;
@@ -488,19 +506,46 @@ function runThePopup() {
       }
   
       currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
-      currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
   
       sponsorTimesContainer.appendChild(currentSponsorTimeContainer);
       sponsorTimesContainer.appendChild(deleteButton);
   
       //only if it is a complete sponsor time
       if (sponsorTimes[i].length > 1) {
+        sponsorTimesContainer.appendChild(previewButton);
         sponsorTimesContainer.appendChild(editButton);
+
+        currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
       }
     }
   
     return sponsorTimesContainer;
   }
+
+  function previewSponsorTime(index) {
+    let skipTime = sponsorTimes[index][0];
+
+    if (document.getElementById("startTimeMinutes" + index) != null) {
+      //edit is currently open, use that time
+
+      skipTime = getSponsorTimeEditTimes("startTime", index);
+
+      //save the edit
+      saveSponsorTimeEdit(index, false);
+    }
+
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id, {
+          message: "skipToTime",
+          time: skipTime - 2
+        }
+      );
+    });
+  }
   
   function editSponsorTime(index) {
     if (document.getElementById("startTimeMinutes" + index) != null) {
@@ -513,6 +558,13 @@ function runThePopup() {
   
     let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
   
+    //the button to set the current time
+    let startTimeNowButton = document.createElement("span");
+    startTimeNowButton.id = "startTimeNowButton" + index;
+    startTimeNowButton.innerText = "(Now)";
+    startTimeNowButton.className = "tinyLink popupElement";
+    startTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("startTime", index));
+
     //get sponsor time minutes and seconds boxes
     let startTimeMinutes = document.createElement("input");
     startTimeMinutes.id = "startTimeMinutes" + index;
@@ -527,7 +579,7 @@ function runThePopup() {
     startTimeSeconds.type = "text";
     startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
     startTimeSeconds.style.width = "60px";
-  
+
     let endTimeMinutes = document.createElement("input");
     endTimeMinutes.id = "endTimeMinutes" + index;
     endTimeMinutes.className = "sponsorTime popupElement";
@@ -541,6 +593,13 @@ function runThePopup() {
     endTimeSeconds.type = "text";
     endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
     endTimeSeconds.style.width = "60px";
+
+    //the button to set the current time
+    let endTimeNowButton = document.createElement("span");
+    endTimeNowButton.id = "endTimeNowButton" + index;
+    endTimeNowButton.innerText = "(Now)";
+    endTimeNowButton.className = "tinyLink popupElement";
+    endTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("endTime", index));
   
     let colonText = document.createElement("span");
     colonText.innerText = ":";
@@ -553,6 +612,7 @@ function runThePopup() {
       sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
     }
   
+    sponsorTimeContainer.appendChild(startTimeNowButton);
     sponsorTimeContainer.appendChild(startTimeMinutes);
     sponsorTimeContainer.appendChild(colonText);
     sponsorTimeContainer.appendChild(startTimeSeconds);
@@ -560,6 +620,7 @@ function runThePopup() {
     sponsorTimeContainer.appendChild(endTimeMinutes);
     sponsorTimeContainer.appendChild(colonText);
     sponsorTimeContainer.appendChild(endTimeSeconds);
+    sponsorTimeContainer.appendChild(endTimeNowButton);
   
     //add save button and remove edit button
     let saveButton = document.createElement("span");
@@ -573,16 +634,37 @@ function runThePopup() {
   
     sponsorTimesContainer.replaceChild(saveButton, editButton);
   }
+
+  function setEditTimeToCurrentTime(idStartName, index) {
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {message: "getCurrentTime"},
+        function (response) {
+          let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
+          let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
+    
+          minutes.value = getTimeInMinutes(response.currentTime);
+          seconds.value = getTimeInFormattedSeconds(response.currentTime);
+        });
+    });
+  }
+
+  //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 + chrome.i18n.getMessage("Mins") + index);
+    let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
+
+    return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
+  }
   
-  function saveSponsorTimeEdit(index) {
-    let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
-    let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
-  
-    let endTimeMinutes = document.getElementById("endTimeMinutes" + index);
-    let endTimeSeconds = document.getElementById("endTimeSeconds" + index);
-  
-    sponsorTimes[index][0] = parseInt(startTimeMinutes.value) * 60 + parseFloat(startTimeSeconds.value);
-    sponsorTimes[index][1] = parseInt(endTimeMinutes.value) * 60 + parseFloat(endTimeSeconds.value);
+  function saveSponsorTimeEdit(index, closeEditMode = true) {
+    sponsorTimes[index][0] = getSponsorTimeEditTimes("startTime", index);
+    sponsorTimes[index][1] = getSponsorTimeEditTimes("endTime", index);
   
     //save this
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
@@ -598,9 +680,11 @@ function runThePopup() {
       });
     });
   
-    displaySponsorTimes();
+    if (closeEditMode) {
+      displaySponsorTimes();
 
-    showSubmitTimesIfNecessary();
+      showSubmitTimesIfNecessary();
+    }
   }
   
   //deletes the sponsor time submitted at an index
@@ -698,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) {
@@ -720,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";
@@ -887,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();
     }
@@ -896,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
@@ -911,16 +990,68 @@ function runThePopup() {
     }
   }
   
-  //make the options div visisble
+  //make the options div visible
   function openOptions() {
     document.getElementById("optionsButtonContainer").style.display = "none";
     document.getElementById("options").style.display = "unset";
   }
+
+  //make the options username setting option visible
+  function setUsernameButton() {
+    //get the userID
+    chrome.storage.sync.get(["userID"], function(result) {
+      //get username from the server
+      sendRequestToServer("GET", "/api/getUsername?userID=" + result.userID, function (xmlhttp, error) {
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+          SB.usernameInput.value = JSON.parse(xmlhttp.responseText).userName;
+
+          SB.submitUsername.style.display = "unset";
+          SB.usernameInput.style.display = "unset";
+
+          SB.setUsernameContainer.style.display = "none";
+          SB.setUsername.style.display = "unset";
+        } else {
+          SB.setUsername.style.display = "unset";
+          SB.submitUsername.style.display = "none";
+          SB.usernameInput.style.display = "none";
+
+          SB.setUsernameStatus.innerText = "Couldn't connect to server. Error code: " + xmlhttp.status;
+        }
+      });
+    });
+  }
+
+  //submit the new username
+  function submitUsername() {
+    //add loading indicator
+    SB.setUsernameStatusContainer.style.display = "unset";
+    SB.setUsernameStatus.innerText = "Loading...";
+
+    //get the userID
+    chrome.storage.sync.get(["userID"], function(result) {
+      sendRequestToServer("POST", "/api/setUsername?userID=" + result.userID + "&username=" + SB.usernameInput.value, function (xmlhttp, error) {
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+          //submitted
+          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";
+        } else {
+          SB.setUsernameStatus.innerText = getErrorMessage(EN_US, xmlhttp.status);
+        }
+      });
+    });
+
+
+    SB.setUsernameContainer.style.display = "none";
+    SB.setUsername.style.display = "unset";
+  }
   
   //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. " +
-        "If you know this is a YouTube tab, close this popup and open it again.";
+    document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
   }
   
   function reportAnIssue() {
@@ -957,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)
           }
         }
       }

utils/previewBar.js

@@ -0,0 +1,86 @@
+/*
+	This is based on code from VideoSegments.
+	https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
+*/
+
+'use strict';
+
+let barTypes = {
+	"undefined": {
+		color: "#00d400",
+		opacity: "0.5"
+	},
+	"sponsor": {
+		color: "#00d400",
+		opacity: "0.5"
+	}
+};
+
+class PreviewBar {
+	constructor(parent) {
+		this.container = document.createElement('ul');
+		this.container.id = 'previewbar';
+		this.parent = parent;
+		this.bars = []
+
+		this.updatePosition();
+	}
+
+	updatePosition() {
+		//below the seek bar
+		// this.parent.insertAdjacentElement("afterEnd", this.container);
+		
+		//on the seek bar
+		this.parent.insertAdjacentElement("afterBegin", this.container);
+	}
+
+	updateColor(segment, color, opacity) {
+		let bars = document.querySelectorAll('[data-vs-segment-type=' + segment + ']');
+		for (let bar of bars) {
+			bar.style.backgroundColor = color;
+			bar.style.opacity = opacity;
+		}
+	}
+
+	set(timestamps, types, duration) {
+		while (this.container.firstChild) {
+			this.container.removeChild(this.container.firstChild);
+		}
+
+		if (!timestamps || !types) {
+			return;
+		}
+
+		// to avoid rounding error resulting in width more than 100% 
+		duration = Math.floor(duration * 100) / 100;
+		let width;
+		for (let i = 0; i < timestamps.length; i++) {
+			width = (timestamps[i][1] - timestamps[i][0]) / duration * 100;
+			width = Math.floor(width * 100) / 100;
+
+			let bar = this.createBar();
+			bar.setAttribute('data-vs-segment-type', types[i]);
+
+			bar.style.backgroundColor = barTypes[types[i]].color;
+			bar.style.opacity = barTypes[types[i]].opacity;
+			bar.style.width = width + '%';
+			bar.style.left = (timestamps[i][0] / duration * 100) + "%";
+			bar.style.position = "absolute"
+
+			this.container.insertAdjacentElement('beforeEnd', bar);
+			this.bars[i] = bar;
+		}
+	}
+
+	createBar() {
+		let bar = document.createElement('li');
+		bar.classList.add('previewbar');
+		bar.innerHTML = '&nbsp;';
+		return bar;
+	}
+
+	remove() {
+		this.container.remove();
+		this.container = undefined;
+	}
+}