Merge pull request #117 from ajayyy/experimental-ajay

Updated help page

LICENSE

@@ -1,4 +1,8 @@
-                    GNU GENERAL PUBLIC LICENSE
+SponsorBlock Copyright (C) 2019  Ajay Ramachandran and other SponsorBlock contributors.
+
+Please refer to the license below.
+                   
+                     GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
@@ -651,8 +655,9 @@ Also add information on how to contact you by electronic and paper mail.
 
   If the program does terminal interaction, make it output a short
 notice like this when it starts in an interactive mode:
-
-    SponsorBlock  Copyright (C) 2019  Ajay Ramachandran and other SponsorBlock contributors
+ 
+    <program>  Copyright (C) <year>  <name of author>
+    
     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
     This is free software, and you are welcome to redistribute it
     under certain conditions; type `show c' for details.

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
 
@@ -21,9 +21,13 @@ To make sure that this project doesn't die, I have made the database publicly do
 
 Hopefully this project can be combined with projects like [this](https://github.com/Sponsoff/sponsorship_remover) and use this data to create a neural network to predict when sponsored segments happen. That project is sadly abandoned now, so I have decided to attempt to revive this idea.
 
+# API
+
+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
 
@@ -35,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>

_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,62 +1,83 @@
-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);
-  } 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) {
+  // 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;
+
+    // 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/"+chrome.i18n.getMessage("helpPage"))});
+      }
+
+      // 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
+      });
+    }
+  });
+});
 
 //gets the sponsor times from memory
 function getSponsorTimes(videoID, callback) {
@@ -72,7 +93,7 @@ function getSponsorTimes(videoID, callback) {
   });
 }
 
-function addSponsorTime(time, videoID) {
+function addSponsorTime(time, videoID, callback) {
   getSponsorTimes(videoID, function(sponsorTimes) {
     //add to sponsorTimes
     if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
@@ -88,14 +109,16 @@ function addSponsorTime(time, videoID) {
 
     //save this info
     let sponsorTimeKey = "sponsorTimes" + videoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, 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
@@ -120,108 +143,41 @@ 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
               });
+
+              if (xmlhttp.status == 200) {
+                //add these to the storage log
+                chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
+                  let currentContributionAmount = 0;
+                  if (result.sponsorTimesContributed != undefined) {
+                    //current contribution amount is known
+                    currentContributionAmount = result.sponsorTimesContributed;
+                  }
+
+                  //save the amount contributed
+                  chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
+                });
+              }
             } else if (error) {
               callback({
                 statusCode: -1
               });
             }
-          });
         });
       }
-
-      //add these to the storage log
-      chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
-        let currentContributionAmount = 0;
-        if (result.sponsorTimesContributed != undefined) {
-          //current contribution amount is known
-          currentContributionAmount = result.sponsorTimesContributed;
-        }
-
-        //save the amount contributed
-        chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
-      });
-    }
-  });
-}
-
-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);
     }
   });
 }
@@ -245,11 +201,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%;
@@ -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,32 +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;
-	z-index: 1;
-	border: 3px solid rgba(0, 0, 0, 0.8);
-	margin-top: -50px;
+	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 {
-	margin-left: 500px;
+	bottom: 250px;
 
-  	transition: margin-left 0.2s;
+  	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 {
@@ -92,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 {

firefox_manifest.json

@@ -31,7 +31,9 @@
     "icons/downvote.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
-    "popup.html"
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
   ],
   "permissions": [
     "tabs",

help/index_en.html

@@ -0,0 +1,123 @@
+<head>
+  <title> SponsorBlock </title>
+
+  <link href="styles.css" rel="stylesheet"/>
+</head>
+
+<body>
+
+  <div id="title">
+    <img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+    SponsorBlock
+  </div>
+
+  <center>
+
+    <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
+
+    <p>
+        Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
+    </p>
+
+    <p class="projectPreview">
+      <span class="projectPreviewImage">
+          <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
+      </span>
+	  
+	  Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+    </p>
+
+    <h1>How skipping works</h1>
+
+    <p class="projectPreview">
+      <span class="projectPreviewImageLarge">
+          <img src="https://i.imgur.com/caf5Bju.png">
+      </span>
+
+      Videos will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are.
+      
+      <br/>
+      <br/>
+
+      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://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></center>
+
+    <h1>Submitting</h1>
+
+    <p class="projectPreview">
+        <span class="projectPreviewImageLargeRight">
+            <img src="https://i.imgur.com/A1ilk6x.gif">
+        </span>
+  
+        Submitting can either be done in the popup by hitting the "Sponsorship Starts Now" button or in the video player with the buttons on the player.
+        
+        <br/>
+        <br/>
+
+        Clicking the play button indicated the start of a sponsorship section and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete.
+    </p>
+
+    <h1>Editing</h1>
+
+    <p class="projectPreview">
+        <span class="projectPreviewImageLarge">
+            <img src="https://i.imgur.com/DZHqbsx.gif">
+        </span>
+  
+        If you messed up, you can edit or delete your sponsor times in the popup or in the info menu (by hitting the info icon).
+
+    </p>
+
+    <h1>This is too slow</h1>
+
+    <p>
+      There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit.
+    </p>
+
+    <h1>I hate these buttons, they are so ugly</h1>
+
+    <p>
+      All player buttons can be hidden in the options.
+    </p>
+
+    <h1>Can I get a copy of the Database? What happens if you disappear?</h1>
+
+    <p>
+      The database is public and available at <a href="https://sponsor.ajay.app/database.db">https://sponsor.ajay.app/database.db</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost.
+    </p>
+
+    <h1>News and how it is made</h1>
+
+    <p>
+      See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
+    </p>
+
+    <h1>I want more features!</h1>
+
+    <p>
+      Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
+    </p>
+
+    <h1>Where can I get the source code</h1>
+
+    <h4 style="display: inline">Client:</h4>
+    <!-- Github logo -->
+    <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+    <h4 style="display: inline; padding-left: 20px">Server:</h4>
+    <!-- Github logo -->
+    <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+    <h1>Credit</h1>
+
+    <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
+
+    <p>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></p>
+    
+    <p>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> 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></p>
+
+  </center>
+
+</body>

help/styles.css

@@ -0,0 +1,176 @@
+:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) {
+  background-color: #333333;
+}
+
+.projectPreview {
+  position: relative;
+}
+
+.projectPreviewImage {
+  position: absolute;
+  left: -90;
+  width: 80;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+  position: absolute;
+  left: -210;
+  width: 200;
+  top: 50%;
+  transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+  position: absolute;
+  right: -210;
+  width: 200;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.createdBy {
+  font-size: 14px;
+  text-align: center;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+#title {
+  background-color: #636363;
+
+  text-align: center;
+  vertical-align: middle;
+
+  font-family: sans-serif;
+  font-size: 50;
+  color: #212121;
+
+  /* height: 100; */
+
+  padding: 20;
+  
+  text-decoration: none;
+
+  transition: font-size 1s;
+}
+
+#title:hover {
+  font-size: 60;
+
+  transition: font-size 1s;
+}
+
+.subtitle {
+  font-family: sans-serif;
+  font-size: 40;
+  color: #dad8d8;
+
+  padding-top: 10;
+
+  transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+  font-size: 45;
+
+  transition: font-size 0.4s;
+}
+
+.profilepic {
+  background-color: #636363 !important;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+.link {
+  padding: 20;
+
+  height: 80px;
+
+  transition: height 0.2s;
+}
+
+.link:hover {
+  height: 95px;
+
+  transition: height 0.2s;
+}
+
+#contact,.smalllink {
+  font-family: sans-serif;
+  font-size: 25;
+  color: #e8e8e8;
+
+  text-align: center;
+  
+  padding: 10;
+}
+
+#contact {
+  text-decoration: none;
+}
+
+p,li {
+  font-family: sans-serif;
+  font-size: 20;
+  color: #c4c4c4;
+
+  padding: 10;
+}
+
+p,li,code,a {
+	max-width: 60%;
+	text-align: left;
+	overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+  p,li,code,a {
+	max-width: 100%;
+  }
+  
+  .projectPreviewImage {
+    position: unset;
+    width: 130;
+    display: block;
+    margin: auto;
+    transform: none;
+  }
+}
+
+.previewImage {
+	max-height: 200px;
+}
+
+img {
+	max-width: 100%;
+
+	text-align: center;
+}
+
+#recentPostTitle {
+  font-family: sans-serif;
+  font-size: 30;
+  color: #dad8d8;
+}
+
+#recentPostDate {
+  font-family: sans-serif;
+  font-size: 15;
+  color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-family: sans-serif;
+  color: #dad8d8;
+}
+
+svg {
+ text-decoration: none; 
+}

manifest.json

@@ -1,15 +1,19 @@
 {
-  "name": "SponsorBlock for YouTube - Skip Sponsorships",
-  "short_name": "SponsorBlock",
-  "version": "1.0.21",
-  "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": [
         "https://*.youtube.com/*"
       ],
+      "all_frames": true,
       "js": [
         "config.js",
+        "utils/previewBar.js",
+        "utils.js",
         "content.js",
         "popup.js"
       ],
@@ -29,25 +33,28 @@
     "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": {
     "scripts":[
+      "utils.js",
       "config.js",
       "background.js"
-    ]
+    ],
+    "persistent": false
   },
   "icons": {
     "16": "icons/IconSponsorBlocker16px.png",

popup.css

@@ -51,6 +51,10 @@ h1.popupElement {
 	padding: 5px;
 }
 
+.discreteLink.popupElement {
+	color: black;
+}
+
 .recordingSubtitle.popupElement {
 	margin-bottom: 10px;
 }
@@ -80,12 +84,44 @@ 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;
+}
+
+.whitelistButton.popupElement {
+	background-color:#3acc3a;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border: none;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:16px;
+	padding:8px 37px;
+	text-decoration:none;
+	text-shadow:0px 0px 0px #27663c;
+  }
+  .whitelistButton:hover.popupElement {
+	background-color:#218b26;
+  }
+  .whitelistButton:focus.popupElement {
+	  outline: none;
+	  background-color:#218b26;
+  }
+  .whitelistButton:active.popupElement {
+	position:relative;
+	top:1px;
+  }
+
 .greenButton.popupElement {
   background-color:#ec1c1c;
   -moz-border-radius:28px;

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>
@@ -25,7 +25,18 @@
             <div id="downloadedSponsorMessageTimes" class="popupElement">
 
             </div>
+            
+            <br/>
 
+            <div>
+              <button id="whitelistChannel" class="whitelistButton popupElement">Whitelist Channel</button>
+              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">Remove Channel From Whitelist</button>
+            </div>
+            <sub class="popupElement">
+              Whitelist the channels who do sponsorships ethically to encourage good behavior, or maybe if they are just entertaining and funny. Or don't, that's your call.
+            </sub>
+
+            <br/>
             <br/>
 
             <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
@@ -62,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"> 
@@ -82,6 +97,8 @@
         
                 </div>
               </b>
+
+              <br/>
       
               <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
@@ -101,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/>
 
@@ -108,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/>
 
@@ -182,5 +228,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

@@ -22,37 +22,59 @@ function runThePopup() {
       inPopup = false;
   }
   
-  // References
-  let SB = {};
-  
-  SB.sponsorStart = document.getElementById("sponsorStart");
-  SB.clearTimes = document.getElementById("clearTimes");
-  SB.submitTimes = document.getElementById("submitTimes");
-  SB.showNoticeAgain = document.getElementById("showNoticeAgain");
-  SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls");
-  SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls");
-  SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls");
-  SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls");
-  SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
-  SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
-  SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
-  SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
-  SB.optionsButton = document.getElementById("optionsButton");
-  SB.reportAnIssue = document.getElementById("reportAnIssue");
+  var SB = {};
+
+  ["sponsorStart",
+  "whitelistChannel",
+  "unwhitelistChannel",
+  "clearTimes",
+  "submitTimes",
+  "showNoticeAgain",
+  "hideVideoPlayerControls",
+  "showVideoPlayerControls",
+  "hideInfoButtonPlayerControls",
+  "showInfoButtonPlayerControls",
+  "hideDeleteButtonPlayerControls",
+  "showDeleteButtonPlayerControls",
+  "disableSponsorViewTracking",
+  "enableSponsorViewTracking",
+  "optionsButton",
+  "reportAnIssue",
   // sponsorTimesContributions
-  SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
-  SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
-  SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
+  "sponsorTimesContributionsContainer",
+  "sponsorTimesContributionsDisplay",
+  "sponsorTimesContributionsDisplayEndWord",
   // sponsorTimesViewsDisplay
-  SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
-  SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
-  SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
+  "sponsorTimesViewsContainer",
+  "sponsorTimesViewsDisplay",
+  "sponsorTimesViewsDisplayEndWord",
   // discordButtons
-  SB.discordButtonContainer = document.getElementById("discordButtonContainer");
-  SB.hideDiscordButton = document.getElementById("hideDiscordButton");
-  
+  "discordButtonContainer",
+  "hideDiscordButton",
+  // submitTimesInfoMessage
+  "submitTimesInfoMessageContainer",
+  "submitTimesInfoMessage",
+  // Username
+  "setUsernameContainer",
+  "setUsernameButton",
+  "setUsernameStatusContainer",
+  "setUsernameStatus",
+  "setUsername",
+  "usernameInput",
+  "submitUsername",
+  // More
+  "submissionSection",
+  "mainControls",
+  "loadingIndicator",
+  "videoFound",
+  "sponsorMessageTimes",
+  "downloadedSponsorMessageTimes",
+  ].forEach(id => SB[id] = document.getElementById(id));
+
   //setup click listeners
   SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
+  SB.whitelistChannel.addEventListener("click", whitelistChannel);
+  SB.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
   SB.clearTimes.addEventListener("click", clearTimes);
   SB.submitTimes.addEventListener("click", submitTimes);
   SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
@@ -64,11 +86,12 @@ 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);
-  
-  
+
   //if true, the button now selects the end time
   let startTimeChosen = false;
   
@@ -100,7 +123,7 @@ function runThePopup() {
       });
     }
   });
-  
+
   //if the don't show notice again letiable is true, an option to 
   //  disable should be available
   chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
@@ -146,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";
@@ -164,10 +187,11 @@ 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;
                 SB.sponsorTimesViewsContainer.style.display = "unset";
               }
@@ -178,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();
@@ -202,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;
@@ -210,7 +241,7 @@ function runThePopup() {
         displaySponsorTimes();
   
         //show submission section
-        document.getElementById("submissionSection").style.display = "unset";
+        SB.submissionSection.style.display = "unset";
   
         showSubmitTimesIfNecessary();
       }
@@ -238,17 +269,37 @@ function runThePopup() {
       isYouTubeTab = true;
   
       //remove loading text
-      document.getElementById("mainControls").style.display = "unset"
-      document.getElementById("loadingIndicator").innerHTML = "";
-  
+      SB.mainControls.style.display = "unset"
+      SB.loadingIndicator.innerHTML = "";
+
       if (request.found) {
-        document.getElementById("videoFound").innerHTML = "This video's sponsors are in the database!"
-  
+        SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
+
         displayDownloadedSponsorTimes(request);
       } else {
-        document.getElementById("videoFound").innerHTML = "No sponsors found"
+        SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsor404");
       }
     }
+
+    //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) {
@@ -282,7 +333,21 @@ function runThePopup() {
     sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
   
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    let localStartTimeChosen = startTimeChosen;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      //send a message to the client script
+      if (localStartTimeChosen) {
+        chrome.tabs.query({
+          active: true,
+          currentWindow: true
+        }, tabs => {
+          chrome.tabs.sendMessage(
+            tabs[0].id,
+            {message: "sponsorDataChanged"}
+          );
+        });
+      }
+    });
   
     updateStartTimeChosen();
   
@@ -290,37 +355,43 @@ function runThePopup() {
     displaySponsorTimes();
   
     //show submission section
-    document.getElementById("submissionSection").style.display = "unset";
+    SB.submissionSection.style.display = "unset";
   
     showSubmitTimesIfNecessary();
   }
   
   //display the video times from the array
   function displaySponsorTimes() {
-    //set it to the message
-    let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
-  
     //remove all children
-    while (sponsorMessageTimes.firstChild) {
-      sponsorMessageTimes.removeChild(sponsorMessageTimes.firstChild);
+    while (SB.sponsorMessageTimes.firstChild) {
+      SB.sponsorMessageTimes.removeChild(SB.sponsorMessageTimes.firstChild);
     }
-  
+
     //add sponsor times
-    sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
+    SB.sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
   }
   
   //display the video times from the array at the top, in a different section
   function displayDownloadedSponsorTimes(request) {
     if (request.sponsorTimes != undefined) {
       //set it to the message
-      document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
-  
+      if (SB.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
+        SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
+      }
+
       //add them as buttons to the issue reporting container
       let container = document.getElementById("issueReporterTimeButtons");
       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");
   
@@ -409,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;
@@ -432,28 +506,65 @@ 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) {
       //already open
       return;
     }
+
+    //hide submit button
+    document.getElementById("submitTimesContainer").style.display = "none";
   
     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;
@@ -468,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";
@@ -482,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 = ":";
@@ -494,6 +612,7 @@ function runThePopup() {
       sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
     }
   
+    sponsorTimeContainer.appendChild(startTimeNowButton);
     sponsorTimeContainer.appendChild(startTimeMinutes);
     sponsorTimeContainer.appendChild(colonText);
     sponsorTimeContainer.appendChild(startTimeSeconds);
@@ -501,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");
@@ -512,25 +632,59 @@ function runThePopup() {
     let editButton = document.getElementById("sponsorTimeEditButton" + index);
     let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
   
-    editButton.remove();
-    sponsorTimesContainer.appendChild(saveButton);
+    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;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
-    displaySponsorTimes();
+    if (closeEditMode) {
+      displaySponsorTimes();
+
+      showSubmitTimesIfNecessary();
+    }
   }
   
   //deletes the sponsor time submitted at an index
@@ -555,7 +709,17 @@ function runThePopup() {
   
     //save this
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
     //update display
     displaySponsorTimes();
@@ -598,7 +762,17 @@ function runThePopup() {
     sponsorTimes = [];
   
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
     displaySponsorTimes();
   
@@ -610,8 +784,8 @@ function runThePopup() {
   
   function submitTimes() {
     //make info message say loading
-    document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
-    document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+    SB.submitTimesInfoMessage.innerText = chrome.i18n.getMessage("Loading");
+    SB.submitTimesInfoMessageContainer.style.display = "unset";
   
     if (sponsorTimes.length > 0) {
       chrome.runtime.sendMessage({
@@ -621,24 +795,16 @@ function runThePopup() {
         if (response != undefined) {
           if (response.statusCode == 200) {
             //hide loading message
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "none";
-    
+            SB.submitTimesInfoMessageContainer.style.display = "none";
+
             clearTimes();
-          } else if(response.statusCode == 400) {
-            document.getElementById("submitTimesInfoMessage").innerText = "Server said this request was invalid";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 429) {
-            document.getElementById("submitTimesInfoMessage").innerText = "You have submitted too many sponsor times for this one video, are you sure there are this many?";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 409) {
-            document.getElementById("submitTimesInfoMessage").innerText = "This has already been submitted before";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 502) {
-            document.getElementById("submitTimesInfoMessage").innerText = "It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode;
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
           } else {
-            document.getElementById("submitTimesInfoMessage").innerText = "There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode;
+            let errorMessage = getErrorMessage(response.statusCode);
+
+            document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
             document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+
+            SB.submitTimesInfoMessageContainer.style.display = "unset";
           }
         }
       });
@@ -800,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();
     }
@@ -809,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
@@ -824,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() {
@@ -870,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)
           }
         }
       }
@@ -905,6 +1123,103 @@ function runThePopup() {
   
     return formatted;
   }
+
+  function whitelistChannel() {
+    //get the channel url
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {message: 'getChannelURL'},
+        function(response) {
+          //get whitelisted channels
+          chrome.storage.sync.get(["whitelistedChannels"], function(result) {
+            let whitelistedChannels = result.whitelistedChannels;
+            if (whitelistedChannels == undefined) {
+              whitelistedChannels = [];
+            }
+
+            //add on this channel
+            whitelistedChannels.push(response.channelURL);
+
+            //change button
+            SB.whitelistChannel.style.display = "none";
+            SB.unwhitelistChannel.style.display = "unset";
+
+            SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
+            SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
+
+            //save this
+            chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});
+
+            //send a message to the client
+            chrome.tabs.query({
+              active: true,
+              currentWindow: true
+            }, tabs => {
+              chrome.tabs.sendMessage(
+                tabs[0].id, {
+                  message: 'whitelistChange',
+                  value: true
+                });
+              }
+            );
+          });
+        }
+      );
+    });
+  }
+
+  function unwhitelistChannel() {
+    //get the channel url
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {message: 'getChannelURL'},
+        function(response) {
+          //get whitelisted channels
+          chrome.storage.sync.get(["whitelistedChannels"], function(result) {
+            let whitelistedChannels = result.whitelistedChannels;
+            if (whitelistedChannels == undefined) {
+              whitelistedChannels = [];
+            }
+
+            //remove this channel
+            let index = whitelistedChannels.indexOf(response.channelURL);
+            whitelistedChannels.splice(index, 1);
+
+            //change button
+            SB.whitelistChannel.style.display = "unset";
+            SB.unwhitelistChannel.style.display = "none";
+
+            SB.downloadedSponsorMessageTimes.innerText = "";
+            SB.downloadedSponsorMessageTimes.style.fontWeight = "unset";
+
+            //save this
+            chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});
+
+            //send a message to the client
+            chrome.tabs.query({
+              active: true,
+              currentWindow: true
+            }, tabs => {
+              chrome.tabs.sendMessage(
+                tabs[0].id, {
+                  message: 'whitelistChange',
+                  value: false
+                });
+              }
+            );
+          });
+        }
+      );
+    });
+  }
   
   //converts time in seconds to minutes
   function getTimeInMinutes(seconds) {
@@ -943,13 +1258,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
 }
 
@@ -960,4 +1268,3 @@ 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;
+	}
+}