Merge pull request #110 from ajayyy/experimental

Update master

README.md

@@ -3,7 +3,7 @@
 
 # SponsorBlock
 
-SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
+SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that lets anyone submit the start and end times of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
 
 # Available for Chrome and Firefox
 
@@ -23,11 +23,11 @@ Hopefully this project can be combined with projects like [this](https://github.
 
 # API
 
-You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#api-docs)
+You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#api-docs).
 
 # Previous extension
 
-This project is partially based off of [this experimental extension](https://github.com/OfficialNoob/YTSponsorSkip). That extension has the basic video skipping functionality.
+This project is partially based off of [this experimental extension](https://github.com/OfficialNoob/YTSponsorSkip), which has the basic video skipping functionality.
 
 # Build Yourself
 
@@ -39,4 +39,4 @@ The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is u
 
 Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
 
-Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>

background.js

@@ -1,75 +1,79 @@
-var previousVideoID = null
-
-//the id of this user, randomly generated once per install
-var userID = null;
-
-//the last video id loaded, to make sure it is a video id change
-var sponsorVideoID = null;
-
-//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
 chrome.runtime.onInstalled.addListener(function (object) {
-  chrome.storage.sync.get(["shownInstallPage"], function(result) {
-    let shownInstallPage = result.shownInstallPage;
-    if (shownInstallPage == undefined || !shownInstallPage) {
-      //open up the install page
-      chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+  // TODO (shownInstallPage): remove shownInstallPage logic after sufficient amount of time,
+  // so that people have time to upgrade and move to shownInstallPage-free code.
+  chrome.storage.sync.get(["userID", "shownInstallPage"], function(result) {
+    const userID = result.userID;
+    // TODO (shownInstallPage): delete row below
+    const shownInstallPage = result.shownInstallPage;
 
-      //save that this happened
-      chrome.storage.sync.set({shownInstallPage: true});
+    // If there is no userID, then it is the first install.
+    if (!userID){
+      // Show install page, if there is no user id
+      // and there is no shownInstallPage.
+      // 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")});
+      }
+
+      // TODO (shownInstallPage): delete if statement and contents
+      // If shownInstallPage is set, remove it.
+      if (!!shownInstallPage){
+        chrome.storage.sync.remove("shownInstallPage");
+      }
+
+      //generate a userID
+      const newUserID = generateUUID();
+      //save this UUID
+      chrome.storage.sync.set({
+        "userID": newUserID,
+        //the last video id loaded, to make sure it is a video id change
+        "sponsorVideoID": null,
+        "previousVideoID": null
+      });
     }
   });
 });
@@ -109,9 +113,11 @@ function addSponsorTime(time, videoID, callback) {
 }
 
 function submitVote(type, UUID, callback) {
-  getUserID(function(userID) {
+  chrome.storage.sync.get(["userID"], function(result) {
+    let userID = result.userID;
+
     //publish this vote
-    sendRequestToServer('GET', "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
+    sendRequestToServer("GET", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         callback({
           successType: 1
@@ -136,16 +142,16 @@ 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;
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
       //submit these times
       for (let i = 0; i < sponsorTimes.length; i++) {
-        getUserID(function(userIDStorage) {
           //submit the sponsorTime
-          sendRequestToServer('GET', "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
-          + "&userID=" + userIDStorage, function(xmlhttp, error) {
+          sendRequestToServer("GET", "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
+          + "&userID=" + userID, function(xmlhttp, error) {
             if (xmlhttp.readyState == 4 && !error) {
               callback({
                 statusCode: xmlhttp.status
@@ -169,81 +175,12 @@ function submitTimes(videoID, callback) {
                 statusCode: -1
               });
             }
-          });
         });
       }
     }
   });
 }
 
-function videoIDChange(currentVideoID, tabId) {
-  //send a message to the content script
-  chrome.tabs.sendMessage(tabId, {
-    message: 'ytvideoid',
-    id: currentVideoID
-  });
-
-  //not a url change
-  if (sponsorVideoID == currentVideoID){
-    return;
-  }
-  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
-      previousVideoID = currentVideoID;
-    });
-  } else {
-    previousVideoID = currentVideoID;
-  }
-}
-
-function getUserID(callback) {
-  if (userID != null) {
-    callback(userID);
-    return;
-  }
-
-  //if it is not cached yet, grab it from storage
-  chrome.storage.sync.get(["userID"], function(result) {
-    let userIDStorage = result.userID;
-    if (userIDStorage != undefined) {
-      userID = userIDStorage;
-      callback(userID);
-    } else {
-      //double check if a UUID hasn't been created since this was first called
-      if (userID != null) {
-        callback(userID);
-        return;
-      }
-
-      //generate a userID
-      userID = generateUUID();
-      
-      //save this UUID
-      chrome.storage.sync.set({"userID": userID});
-
-      callback(userID);
-    }
-  });
-}
-
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 
@@ -263,11 +200,21 @@ function sendRequestToServer(type, address, callback) {
   xmlhttp.send();
 }
 
-function getYouTubeVideoID(url) { // Return video id or false
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
+function generateUUID(length = 36) {
+    let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    let isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
+    if (window.crypto && window.crypto.getRandomValues) {
+        values = new Uint32Array(length);
+        window.crypto.getRandomValues(values);
+        for (i = 0; i < length; i++) {
+            result += charset[values[i] % charset.length];
+        }
+        return result;
+    } else {
+        for (let i = 0; i < length; i++) {
+          result += charset[Math.floor(Math.random() * charset.length)];
+        }
+        return result;
+    }
 }
-
-//uuid generator function from https://gist.github.com/jed/982883
-function generateUUID(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,generateUUID)}

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%;

content.js

@@ -1,34 +1,47 @@
 //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;
 
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
-  videoIDChange(id);
-}
-
 //the video
 var v;
 
+var listenerAdded;
+
 //the channel this video is about
 var channelURL;
 
 //is this channel whitelised from getting sponsors skipped
 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 = new PreviewBar(progressBar);
+
+if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+  videoIDChange(id);
+}
+
 //the last time looked at (used to see if this time is in the interval)
 var lastTime = -1;
 
 //the actual time (not video time) that the last skip happened
 var lastUnixTimeSkipped = -1;
 
+//the amount of times the sponsor lookup has retried
+//this only happens if there is an error
+var sponsorLookupRetries = 0;
+
 //the last time in the video a sponsor was skipped
 //used for the go back button
 var lastSponsorTimeSkipped = null;
@@ -77,14 +90,14 @@ 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);
+    }
+  
     if (request.message == "sponsorStart") {
       sponsorMessageStarted(sendResponse);
     }
@@ -98,6 +111,7 @@ function messageListener(request, sender, sendResponse) {
       sendResponse({
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
+        hiddenSponsorTimes: hiddenSponsorTimes,
         UUIDs: UUIDs
       });
 
@@ -115,6 +129,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
@@ -179,11 +203,33 @@ document.onkeydown = function(e){
 }
 
 function videoIDChange(id) {
-  //not a url change
-  if (sponsorVideoID == id){
-    return;
-  }
 
+  //not a url change
+  if (sponsorVideoID == id) return;
+
+  //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();
 
@@ -195,6 +241,10 @@ function videoIDChange(id) {
   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);
@@ -273,9 +323,21 @@ 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
+      console.log(v.duration)
+      if (isNaN(v.duration)) {
+        //wait until it is loaded
+        v.addEventListener('durationchange', updatePreviewBar);
+      } else {
+        //set it now
+        updatePreviewBar();
+      }
+
       getChannelID();
 
-    } else if (xmlhttp.readyState == 4) {
+      sponsorLookupRetries = 0;
+    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
       sponsorDataFound = false;
 
       //check if this video was uploaded recently
@@ -290,6 +352,13 @@ function sponsorsLookup(id) {
           }
         }
       });
+
+      sponsorLookupRetries = 0;
+    } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 90) {
+      //some error occurred, try again in a second
+      setTimeout(() => sponsorsLookup(id), 1000);
+
+      sponsorLookupRetries++;
     }
   });
 
@@ -299,6 +368,13 @@ function sponsorsLookup(id) {
   };
 }
 
+function updatePreviewBar() {
+  previewBar.set(sponsorTimes, [], v.duration);
+
+  //the listener is only needed once
+  v.removeEventListener('durationchange', updatePreviewBar);
+}
+
 function getChannelID() {
   //get channel id
   let channelContainers = document.querySelectorAll("#owner-name");
@@ -378,7 +454,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);
 
@@ -889,6 +965,26 @@ function afterDownvote(UUID) {
   //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
+  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);
+    }
+  }
 }
 
 function addLoadingInfo(message, UUID) {
@@ -1048,6 +1144,9 @@ function sendSubmitMessage(){
         //clear the sponsor times
         let sponsorTimeKey = "sponsorTimes" + currentVideoID;
         chrome.storage.sync.set({[sponsorTimeKey]: []});
+
+        //request the sponsors from the server again
+        sponsorsLookup(currentVideoID);
       } else {
         //for a more detailed error message, they should check the popup
         //show that the upload failed
@@ -1143,26 +1242,3 @@ function sendRequestToCustomServer(type, fullAddress, callback) {
   //submit this request
   xmlhttp.send();
 }
-
-function getYouTubeVideoID(url) { // Returns with video id else returns false
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  var match = url.match(regExp);
-  var id = new URL(url).searchParams.get("v");
-  if (url.includes("/embed/")) {
-    //it is an embed, don't search for v
-    id = match[7];
-  }
-
-  return (match && match[7].length == 11) ? id : false;
-}
-
-//returns the start time of the video if there was one specified (ex. ?t=5s)
-function getYouTubeVideoStartTime(url) {
-  let searchParams = new URL(url).searchParams;
-  var startTime = searchParams.get("t");
-  if (startTime == null) {
-    startTime = searchParams.get("time_continue");
-  }
-
-  return startTime;
-}

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "SponsorBlock for YouTube - Skip Sponsorships",
   "short_name": "SponsorBlock",
-  "version": "1.0.29",
+  "version": "1.0.35",
   "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
@@ -11,6 +11,8 @@
       "all_frames": true,
       "js": [
         "config.js",
+        "utils/previewBar.js",
+        "utils.js",
         "content.js",
         "popup.js"
       ],
@@ -32,12 +34,9 @@
     "icons/downvote.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
-    "popup.html",
-    "help/index.html",
-    "help/style.css"
+    "popup.html"
   ],
   "permissions": [
-    "tabs",
     "storage",
     "notifications",
     "https://sponsor.ajay.app/*"
@@ -48,9 +47,11 @@
   }, 
   "background": {
     "scripts":[
+      "utils.js",
       "config.js",
       "background.js"
-    ]
+    ],
+    "persistent": false
   },
   "icons": {
     "16": "icons/IconSponsorBlocker16px.png",

popup.css

@@ -80,8 +80,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

@@ -93,6 +93,8 @@
         
                 </div>
               </b>
+
+              <br/>
       
               <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
@@ -112,6 +114,31 @@
       
             </div>
 
+            <div id="setUsernameContainer" class="popupElement">
+              <br/>
+              <br/>
+    
+              <button id="setUsernameButton" class="warningButton popupElement">Set Username</button>
+            </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 +146,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/>
 
@@ -193,5 +220,6 @@
 
   <!-- Scripts that need to load after the html -->
   <script src="config.js"></script>
+  <script src="utils.js"></script>
   <script src="popup.js"></script>
-</html>
+</html>

popup.js

@@ -54,6 +54,14 @@ function runThePopup() {
   // submitTimesInfoMessage
   "submitTimesInfoMessageContainer",
   "submitTimesInfoMessage",
+  // Username
+  "setUsernameContainer",
+  "setUsernameButton",
+  "setUsernameStatusContainer",
+  "setUsernameStatus",
+  "setUsername",
+  "usernameInput",
+  "submitUsername",
   // More
   "submissionSection",
   "mainControls",
@@ -78,6 +86,8 @@ 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);
@@ -123,26 +133,6 @@ function runThePopup() {
     }
   });
 
-  //see if whitelist button should be swapped
-  chrome.tabs.query({
-    active: true,
-    currentWindow: true
-  }, tabs => {
-    chrome.tabs.sendMessage(
-      tabs[0].id,
-      {message: 'isChannelWhitelisted'},
-      function(response) {
-        if (response.value) {
-          SB.whitelistChannel.style.display = "none";
-          SB.unwhitelistChannel.style.display = "unset";
-
-          SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
-          SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
-        }
-      });
-    }
-  );
-  
   //if the don't show notice again letiable is true, an option to 
   //  disable should be available
   chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
@@ -221,17 +211,25 @@ 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();
@@ -292,6 +290,26 @@ function runThePopup() {
         SB.videoFound.innerHTML = "No sponsors found"
       }
     }
+
+    //see if whitelist button should be swapped
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {message: 'isChannelWhitelisted'},
+        function(response) {
+          if (response.value) {
+            SB.whitelistChannel.style.display = "none";
+            SB.unwhitelistChannel.style.display = "unset";
+
+            SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
+            SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
+          }
+        });
+      }
+    );
   }
   
   function setVideoID(request) {
@@ -376,7 +394,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 +490,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 +516,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 +568,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 +589,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 +603,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 +622,7 @@ function runThePopup() {
       sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
     }
   
+    sponsorTimeContainer.appendChild(startTimeNowButton);
     sponsorTimeContainer.appendChild(startTimeMinutes);
     sponsorTimeContainer.appendChild(colonText);
     sponsorTimeContainer.appendChild(startTimeSeconds);
@@ -560,6 +630,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 +644,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 + "Minutes" + index);
+          let seconds = document.getElementById(idStartName + "Seconds" + 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 + "Minutes" + index);
+    let seconds = document.getElementById(idStartName + "Seconds" + 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 +690,11 @@ function runThePopup() {
       });
     });
   
-    displaySponsorTimes();
+    if (closeEditMode) {
+      displaySponsorTimes();
 
-    showSubmitTimesIfNecessary();
+      showSubmitTimesIfNecessary();
+    }
   }
   
   //deletes the sponsor time submitted at an index
@@ -911,11 +1005,64 @@ 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() {
@@ -1127,13 +1274,6 @@ function runThePopup() {
     xmlhttp.send();
   }
   
-  function getYouTubeVideoID(url) { // Returns with video id else returns false
-    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-    var match = url.match(regExp);
-    var id = new URL(url).searchParams.get("v");
-    return (match && match[7].length == 11) ? id : false;
-  }
-  
 //end of function
 }
 
@@ -1143,4 +1283,4 @@ if (chrome.tabs != undefined) {
 
   //this means it is actually opened in the popup
   runThePopup();
-}
+}

utils.js

@@ -0,0 +1,37 @@
+function getYouTubeVideoID(url) {
+    //Attempt to parse url
+    let urlObject = null;
+    try { 
+        urlObject = new URL(url);
+    } catch (e) {      
+        console.error("[SB] Unable to parse URL: " + url);
+        return false
+    }
+  
+    //Check if valid hostname
+    if(!["www.youtube.com","www.youtube-nocookie.com"].includes(urlObject.host)) return false; 
+    
+    //Get ID from searchParam
+    if ((urlObject.pathname == "/watch" || urlObject.pathname == "/watch/") && urlObject.searchParams.has("v")) {
+      id = urlObject.searchParams.get("v"); 
+      return id.length == 11 ? id : false;
+    } else if (urlObject.pathname.startsWith("/embed/")) {
+      try {
+        return urlObject.pathname.substr(7, 11);
+      } catch (e) {
+        console.error("[SB] Video ID not valid for " + url);
+        return false;
+      }
+    }
+}
+
+//returns the start time of the video if there was one specified (ex. ?t=5s)
+function getYouTubeVideoStartTime(url) {
+  let searchParams = new URL(url).searchParams;
+  let startTime = searchParams.get("t");
+  if (startTime == null) {
+    startTime = searchParams.get("time_continue");
+  }
+
+  return startTime;
+}

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;
+	}
+}