Merge pull request #110 from ajayyy/experimental

Update master

.gitignore

@@ -1,2 +1,2 @@
-content-config.js
+config.js
 ignored

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:
-
+ 
     <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

@@ -1,9 +1,15 @@
 ![Logo](icons/LogoSponsorBlocker256px.png)
 <br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
 
-# SponsorBlocker
+# SponsorBlock
 
-SponsorBlocker is an extension that will skip over sponsored segments of YouTube videos. SponsorBlocker 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
+
+Chrome: https://chrome.google.com/webstore/detail/ajjollijmimolcncegpgkbilohbhjnhi
+
+Firefox: https://addons.mozilla.org/addon/sponsorblock/
 
 # Server
 
@@ -15,14 +21,22 @@ 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.
 
-# Chrome extension
+# Build Yourself
 
-It will be on the chrome webstore soon once I get some more UI features in, such as an icon. For now, you can load this project as an unpacked extension. Make sure to rename the `content-config.js.example` file to `content-config.js` before installing.
+You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
 
-# Firefox extension
+# Credit
 
-None at the moment
+The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is used to grab the time the video was published.
+
+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> 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,55 +1,88 @@
-var previousVideoID = null
-
-//the id of this user, randomly generated once per install
-var userID = null;
-
-chrome.tabs.onUpdated.addListener( // On tab update
-  function(tabId, changeInfo, tab) {
-    if (changeInfo != undefined && changeInfo.url != undefined) {
-      let id = getYouTubeVideoID(changeInfo.url);
-      if (changeInfo.url && id) { // If URL changed and is youtube video message contentScript the video id
-        videoIDChange(id);
-
-        chrome.tabs.sendMessage( tabId, {
-          message: 'ytvideoid',
-          id: id
-        });
-      }
-    }
-  }
-);
-
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "submitTimes") {
-    submitTimes(request.videoID);
-
-    callback({
-      success: true
-    });
-  } else if (request.message == "ytvideoid") {
-    if (previousVideoID != request.videoID) {
-      videoIDChange(request.videoID);
-    }
-  } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time);
-  } else if (request.message == "getSponsorTimes") {
-    getSponsorTimes(request.videoID, function(sponsorTimes) {
-      callback({
-        sponsorTimes: sponsorTimes
-      })
-    });
-
-    //this allows the callback to be called later
-    return true;
-  }
+chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+	chrome.tabs.sendMessage(tabId, {
+		message: 'update',
+	});
 });
 
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+	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/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
+      });
+    }
+  });
+});
 
 //gets the sponsor times from memory
 function getSponsorTimes(videoID, callback) {
   let sponsorTimes = [];
   let sponsorTimeKey = "sponsorTimes" + videoID;
-  chrome.storage.local.get([sponsorTimeKey], function(result) {
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
     let sponsorTimesStorage = result[sponsorTimeKey];
     if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
       sponsorTimes = sponsorTimesStorage;
@@ -59,102 +92,129 @@ function getSponsorTimes(videoID, callback) {
   });
 }
 
-function addSponsorTime(time) {
-  getSponsorTimes(previousVideoID, function(sponsorTimes) {
+function addSponsorTime(time, videoID, callback) {
+  getSponsorTimes(videoID, function(sponsorTimes) {
     //add to sponsorTimes
     if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
       //it is an end time
-      sponsorTimes[sponsorTimes.length - 1][1] = parseInt(time);
+      sponsorTimes[sponsorTimes.length - 1][1] = time;
     } else {
       //it is a start time
       let sponsorTimesIndex = sponsorTimes.length;
       sponsorTimes[sponsorTimesIndex] = [];
 
-      sponsorTimes[sponsorTimesIndex][0] = parseInt(time);
+      sponsorTimes[sponsorTimesIndex][0] = time;
     }
 
     //save this info
-    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
-    chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+    let sponsorTimeKey = "sponsorTimes" + videoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, callback);
   });
 }
 
-function submitTimes(videoID) {
+function submitVote(type, UUID, callback) {
+  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) {
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        callback({
+          successType: 1
+        });
+      } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
+        //duplicate vote
+        callback({
+          successType: 0,
+          statusCode: xmlhttp.status
+        });
+      } else if (error) {
+        //error while connect
+        callback({
+          successType: -1,
+          statusCode: xmlhttp.status
+        });
+      }
+    })
+  })
+}
+
+function submitTimes(videoID, callback) {
   //get the video times from storage
   let sponsorTimeKey = 'sponsorTimes' + videoID;
-  chrome.storage.local.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++) {
-        let xmlhttp = new XMLHttpRequest();
-
-        let userIDStorage = getUserID(function(userIDStorage) {
           //submit the sponsorTime
-          xmlhttp.open('GET', 'http://localhost/api/postVideoSponsorTimes?videoID=' + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
-          + "&userID=" + userIDStorage, true);
-          xmlhttp.send();
+          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
+              });
+            }
         });
       }
     }
   });
 }
 
-function videoIDChange(currentVideoID) {
-  //warn them if they had unsubmitted times
-  if (previousVideoID != null) {
-    //get the sponsor times from storage
-    let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
-    chrome.storage.local.get([sponsorTimeKey], function(result) {
-      let sponsorTimes = result[sponsorTimeKey];
+function sendRequestToServer(type, address, callback) {
+  let xmlhttp = new XMLHttpRequest();
 
-      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"
-        });
-      }
+  xmlhttp.open(type, serverAddress + address, true);
 
-      //set the previous video id to the currentID
-      previousVideoID = currentVideoID;
-    });
-  } else {
-    previousVideoID = currentVideoID;
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+  
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
   }
+
+  //submit this request
+  xmlhttp.send();
 }
 
-function getUserID(callback) {
-  if (userID != null) {
-    callback(userID);
-  }
-
-  //if it is not cached yet, grab it from storage
-  chrome.storage.local.get(["userID"], function(result) {
-    let userIDStorage = result.userID;
-    if (userIDStorage != undefined) {
-      userID = userIDStorage;
-      callback(userID);
+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 {
-      //generate a userID
-      userID = generateUUID();
-      
-      //save this UUID
-      chrome.storage.local.set({"userID": userID});
-
-      callback(userID);
+        for (let i = 0; i < length; i++) {
+          result += charset[Math.floor(Math.random() * charset.length)];
+        }
+        return result;
     }
-  });
 }
-
-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;
-}
-
-//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)}

config.js.example

@@ -1,3 +1,3 @@
 //this file is loaded along iwth content.js
 //this file sets the server to connect to, and is gitignored
-var serverAddresss = "https://sponsor.ajay.app";
+var serverAddress = "https://sponsor.ajay.app";

content.css

@@ -1,8 +1,50 @@
+#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%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.playerButtonImage {
+	height: 60%;
+	top: 0;
+	bottom: 0;
+	display: block;
+	margin: auto;
+}
+
+.playerButton {
+	vertical-align: top;
+}
+
 .sponsorSkipObject {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
-#sponsorSkipLogo {
+.sponsorSkipLogo {
 	height: 64px;
 	position: absolute;
 	top: 0;
@@ -11,27 +53,114 @@
 	margin-left: 10px;
 }
 
-#sponsorSkipNotice {
-    min-height: 125px;
+@keyframes fadeIn {
+	from { opacity: 0; }
+	  to { opacity: 1; }
+}
+
+.sponsorSkipNotice {
+    min-height: 165px;
     min-width: 400px;
     background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
-	z-index: 1;
 	border: 3px solid rgba(0, 0, 0, 0.8);
+	right: 0;
+	bottom: 90px;
+	zoom: 85%;
+
+	animation: fadeIn 0.5s;
 }
 
-#sponsorSkipMessage {
+/* if two are very close to eachother */
+.secondSkipNotice {
+	bottom: 280px;
+
+  	transition: bottom 0.2s;
+}
+
+.sponsorSkipMessage {
     font-size: 18px;
     color: #000000;
     text-align: center;
     margin-top: 10px;
 	font-weight: bold;
+	margin-top: 4px;
 }
 
-#sponsorSkipInfo {
+.sponsorSkipInfo {
 	font-size: 10px;
     color: #000000;
-    text-align: center;
+	text-align: center;
+	margin-top: 0px;
+}
+
+#sponsorTimesThanksForVotingText {
+	font-size: 20px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+#sponsorTimesThanksForVotingInfoText {
+	font-size: 12px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+}
+
+.sponsorTimesInfoMessage {
+	font-size: 15px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
+}
+
+.submitButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+    
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.submitButton:hover {
+	background-color:#bf2a2a;
+}
+
+.submitButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.submitButton:active {
+	position:relative;
+	top:1px;
+}
+
+@keyframes rotate {
+	from { transform: rotate(0deg); }
+	  to { transform: rotate(360deg); }
 }
 
 .sponsorSkipButton {
@@ -54,6 +183,12 @@
 .sponsorSkipButton:hover {
 	background-color:#bf2a2a;
 }
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
 .sponsorSkipButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +214,12 @@
 .sponsorSkipDontShowButton:hover {
 	background-color:#bc3315;
 }
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
 .sponsorSkipDontShowButton:active {
 	position:relative;
 	top:1px;

firefox_manifest.json

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

help/index.html

@@ -0,0 +1,122 @@
+<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 allowing you to vote on that submission. If it worked, upvote it! You can also vote in the popup.
+    </p>
+
+    <center><img height="120px" src="https://i.imgur.com/1M0WZ99.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; 
+}

icons/upvote.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 478.2 478.2"
+   style="enable-background:new 0 0 478.2 478.2;"
+   xml:space="preserve"
+   sodipodi:docname="upvote.svg"
+   inkscape:export-filename="C:\_Projects\_____SponsorSkip\icons\upvote.png"
+   inkscape:export-xdpi="52.797993"
+   inkscape:export-ydpi="52.797993"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+   id="metadata41"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs39" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1001"
+   id="namedview37"
+   showgrid="false"
+   inkscape:zoom="0.98703469"
+   inkscape:cx="264.34466"
+   inkscape:cy="180.78075"
+   inkscape:window-x="-9"
+   inkscape:window-y="-9"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4">
+	<path
+   d="M457.575,325.1c9.8-12.5,14.5-25.9,13.9-39.7c-0.6-15.2-7.4-27.1-13-34.4c6.5-16.2,9-41.7-12.7-61.5   c-15.9-14.5-42.9-21-80.3-19.2c-26.3,1.2-48.3,6.1-49.2,6.3h-0.1c-5,0.9-10.3,2-15.7,3.2c-0.4-6.4,0.7-22.3,12.5-58.1   c14-42.6,13.2-75.2-2.6-97c-16.6-22.9-43.1-24.7-50.9-24.7c-7.5,0-14.4,3.1-19.3,8.8c-11.1,12.9-9.8,36.7-8.4,47.7   c-13.2,35.4-50.2,122.2-81.5,146.3c-0.6,0.4-1.1,0.9-1.6,1.4c-9.2,9.7-15.4,20.2-19.6,29.4c-5.9-3.2-12.6-5-19.8-5h-61   c-23,0-41.6,18.7-41.6,41.6v162.5c0,23,18.7,41.6,41.6,41.6h61c8.9,0,17.2-2.8,24-7.6l23.5,2.8c3.6,0.5,67.6,8.6,133.3,7.3   c11.9,0.9,23.1,1.4,33.5,1.4c17.9,0,33.5-1.4,46.5-4.2c30.6-6.5,51.5-19.5,62.1-38.6c8.1-14.6,8.1-29.1,6.8-38.3   c19.9-18,23.4-37.9,22.7-51.9C461.275,337.1,459.475,330.2,457.575,325.1z M48.275,447.3c-8.1,0-14.6-6.6-14.6-14.6V270.1   c0-8.1,6.6-14.6,14.6-14.6h61c8.1,0,14.6,6.6,14.6,14.6v162.5c0,8.1-6.6,14.6-14.6,14.6h-61V447.3z M431.975,313.4   c-4.2,4.4-5,11.1-1.8,16.3c0,0.1,4.1,7.1,4.6,16.7c0.7,13.1-5.6,24.7-18.8,34.6c-4.7,3.6-6.6,9.8-4.6,15.4c0,0.1,4.3,13.3-2.7,25.8   c-6.7,12-21.6,20.6-44.2,25.4c-18.1,3.9-42.7,4.6-72.9,2.2c-0.4,0-0.9,0-1.4,0c-64.3,1.4-129.3-7-130-7.1h-0.1l-10.1-1.2   c0.6-2.8,0.9-5.8,0.9-8.8V270.1c0-4.3-0.7-8.5-1.9-12.4c1.8-6.7,6.8-21.6,18.6-34.3c44.9-35.6,88.8-155.7,90.7-160.9   c0.8-2.1,1-4.4,0.6-6.7c-1.7-11.2-1.1-24.9,1.3-29c5.3,0.1,19.6,1.6,28.2,13.5c10.2,14.1,9.8,39.3-1.2,72.7   c-16.8,50.9-18.2,77.7-4.9,89.5c6.6,5.9,15.4,6.2,21.8,3.9c6.1-1.4,11.9-2.6,17.4-3.5c0.4-0.1,0.9-0.2,1.3-0.3   c30.7-6.7,85.7-10.8,104.8,6.6c16.2,14.8,4.7,34.4,3.4,36.5c-3.7,5.6-2.6,12.9,2.4,17.4c0.1,0.1,10.6,10,11.1,23.3   C444.875,295.3,440.675,304.4,431.975,313.4z"
+   id="path2" />
+</g>
+<g
+   id="g6">
+</g>
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+</svg>

manifest.json

@@ -1,19 +1,25 @@
 {
-  "name": "YTSponsorSkip",
-  "version": "1.0",
-  "description": "Skip youtube video sponsors.",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
+  "short_name": "SponsorBlock",
+  "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": [
     {
       "matches": [
         "https://*.youtube.com/*"
       ],
+      "all_frames": true,
       "js": [
-        "content-config.js",
-        "content.js"
+        "config.js",
+        "utils/previewBar.js",
+        "utils.js",
+        "content.js",
+        "popup.js"
       ],
       "css": [
         "content.css",
-        "./libs/Source+Sans+Pro.css"
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
@@ -21,19 +27,31 @@
     "icons/LogoSponsorBlocker256px.png",
     "icons/IconSponsorBlocker256px.png",
     "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png"
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/PlayerUploadIconSponsorBlocker256px.png",
+    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
-    "tabs",
     "storage",
-    "notifications"
+    "notifications",
+    "https://sponsor.ajay.app/*"
   ],
   "browser_action": {
     "default_title": "SponsorBlock",
     "default_popup": "popup.html"
   }, 
   "background": {
-    "scripts":["background.js"]
+    "scripts":[
+      "utils.js",
+      "config.js",
+      "background.js"
+    ],
+    "persistent": false
   },
   "icons": {
     "16": "icons/IconSponsorBlocker16px.png",

popup.css

@@ -1,19 +1,125 @@
-* {
-  font-family: 'Source Sans Pro', sans-serif;
+/* reset some properties to default (youtube messes with them */
+p.popupElement {
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
 }
 
-h1 {
+h1.popupElement {
+	margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+h2.popupElement {
+	margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+h3.popupElement {
+	margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+sub.popupElement {
+	font-size: smaller;
+}
+/* end reset */
+
+.popupElement {
+  font-family: 'Source Sans Pro', sans-serif;
+
+  color: black;
+}
+
+h1.popupElement {
 	margin-top: 0px;
 }
 
-body {
-  font-size: 14px;
-  width: 300px;
-  background-color: #ffd9d9;
+.popupBody {
+	font-size: 14px;
+	background-color: #ffd9d9;
+	padding: 5px;
 }
 
-.greenButton {
-	background-color:#ec1c1c;
+.recordingSubtitle.popupElement {
+	margin-bottom: 10px;
+}
+
+.voteButton.popupElement {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover.popupElement {
+	filter: brightness(80%);
+}
+
+#discordButtonContainer.popupElement {
+	font-size: 12px;
+}
+
+.sponsorTime.popupElement {
+	font-size: 20px;
+}
+
+.smallLink.popupElement {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.mediumLink.popupElement {
+	font-size: 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;
   -webkit-border-radius:28px;
   border-radius:28px;
@@ -26,15 +132,19 @@ body {
   text-decoration:none;
   text-shadow:0px 0px 0px #662727;
 }
-.greenButton:hover {
+.greenButton:hover.popupElement {
   background-color:#bf2a2a;
 }
-.greenButton:active {
+.greenButton:focus.popupElement {
+	outline: none;
+	background-color:#bf2a2a;
+}
+.greenButton:active.popupElement {
   position:relative;
   top:1px;
 }
 
-.dangerButton {
+.dangerButton.popupElement {
 	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
 	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
 	box-shadow:inset 0px 1px 0px 0px #cf866c;
@@ -51,15 +161,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #854629;
 }
-.dangerButton:hover {
+.dangerButton:hover.popupElement {
 	background-color:#bc3315;
 }
-.dangerButton:active {
+.dangerButton:focus.popupElement {
+	outline: none;
+	background-color:#bc3315;
+}
+.dangerButton:active.popupElement {
 	position:relative;
 	top:1px;
 }
 
-.warningButton {
+.warningButton.popupElement {
 	-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
 	-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
 	box-shadow:inset 0px 1px 0px 0px #cfbd6c;
@@ -76,15 +190,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #856829;
 }
-.warningButton:hover {
+.warningButton:hover.popupElement {
 	background-color:#bc8215;
 }
-.warningButton:active {
+.warningButton:focus.popupElement {
+	outline: none;
+	background-color:#bc8215;
+}
+.warningButton:active.popupElement {
 	position:relative;
 	top:1px;
 }
 
-.smallButton {
+.smallButton.popupElement {
 	background-color:#f9902d;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;
@@ -97,10 +215,14 @@ body {
 	padding:6px 10px;
 	text-decoration:none;
 }
-.smallButton:hover {
+.smallButton:hover.popupElement {
 	background-color:#fa9806;
 }
-.smallButton:active {
+.smallButton:focus.popupElement {
+	outline: none;
+	background-color:#fa9806;
+}
+.smallButton:active.popupElement {
 	position:relative;
 	top:1px;
-}
+}

popup.html

@@ -1,79 +1,225 @@
 <html>
   <head>
     <title>Set Page Color Popup</title>
-    <link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
-    <link rel="stylesheet" type="text/css" href="popup.css"/>
+    <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>
 
-  <center>
-    <div id="app">
-        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+  <body class="popupBody">
+    <center>
+      <div id="app" class="popupBody">
+          <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
 
-        <h1>SponsorBlock</h1>
+          <h1 class="popupElement">SponsorBlock</h1>
 
-        <!-- Loading text -->
-        <p id="loadingIndicator">Loading...</p>
+          <!-- Loading text -->
+          <p id="loadingIndicator" class="popupElement">Loading...</p>
 
-        <!-- Hidden until loading complete -->
-        <div id="mainControls" class="main" style="display: none">
-          <!-- If the video was found in the database -->
-          <div id="videoFound">
-              
-          </div>
+          <!-- Hidden until loading complete -->
+          <div id="mainControls" class="main popupElement" style="display: none">
+            <!-- If the video was found in the database -->
+            <div id="videoFound">
+                
+            </div>
 
-          <div id="downloadedSponsorMessageTimes">
+            <div id="downloadedSponsorMessageTimes" class="popupElement">
 
-          </div>
-          
-          <h2>Record the times of a sponsorship</h2>
+            </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>
+
+            <div id="issueReporterContainer"  class="popupElement" style="display: none">
+
+              <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
+
+              <div id="issueReporterTimeButtons" class="popupElement">
 
-          <p> 
-            Click the button below when the sponsorship starts and ends to record and 
-            submit it to the database.
-          </p>
-  
-          <div>
-            <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
-          </div>
-    
-          <div id="submissionSection" style="display: none">
-            <h3>Latest Sponsor Message Times Chosen</h3>
-            <b>
-              <div id="sponsorMessageTimes">
-      
               </div>
-            </b>
-    
-            <button id="clearTimes" class="smallButton">Clear Times</button>
-    
-            <br/>
-            <br/>
-    
-            <button id="submitTimes" style="display: none" class="smallButton">Submit Times</button>
-          </div>
 
-          <div id="optionsButtonContainer">
-              <br/>
-              <br/>
-    
-              <button id="optionsButton" class="dangerButton">Options</button>
-          </div>
+            </div>
 
-          <div id="options" style="display: none">
-              <br/>
+            <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
 
-              <h3>Options</h3>
+            <p class="popupElement">
+              <span id=sponsorTimesContributionsContainer  class="popupElement" style="display: none">
+                  So far, you've submitted
+                  <span id="sponsorTimesContributionsDisplay" class="popupElement">
+                    0
+                  </span>
+                  <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
+                    sponsors.
+                  </span>
+              </span>
+
+              <span id=sponsorTimesViewsContainer  class="popupElement" style="display: none">
+                  You have saved people from 
+                  <span id="sponsorTimesViewsDisplay" class="popupElement">
+                    0
+                  </span>
+                  <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
+                    sponsor segments.
+                  </span>
+              </span>
+            </p>
+
+            <p class="popupElement"> 
+              Click the button below when the sponsorship starts and ends to record and 
+              submit it to the database.
+            </p>
     
-              <button id="hideVideoPlayerControls" class="warningButton">Hide Button On YouTube Player</button>
-              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Button On YouTube Player</button>
+            <div>
+              <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
+            </div>
+
+            <sub class="popupElement">Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
     
-              <br/>
-              <br/>
+            <div id="submissionSection"  class="popupElement" style="display: none">
+              <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
+              <b>
+                <div id="sponsorMessageTimes" class="popupElement">
         
-              <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
+                </div>
+              </b>
+
+              <br/>
+      
+              <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
+      
+              <br/>
+              <br/>
+
+              <div id="submitTimesContainer" class="popupElement" style="display: none">
+                <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
+
+                <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
+                  <h3 id="submitTimesInfoMessage" class="popupElement">
+
+                  </h3>
+                </div>
+
+              </div>
+      
+            </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/>
+
+              <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
+
+              <br/>
+
+                Come join the official discord server to give suggestions and feedback!
+
+              <br/>
+
+              <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
+            </div>
+
+            <div id="optionsButtonContainer" class="popupElement">
+                <br/>
+                <br/>
+      
+                <button id="optionsButton" class="dangerButton popupElement">Options</button>
+            </div>
+
+            <div id="options" class="popupElement" style="display: none">
+                <br/>
+
+                <h3>Options</h3>
+      
+                <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
+                <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
+                <br/>
+                <sub class="popupElement">
+                  This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some 
+                  people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears, 
+                  use the button that appears on the notice saying "Don't show this again". You can always enable these settings again 
+                  later.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
+                <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
+                <br/>
+                <sub class="popupElement">
+                  This is the button that opens up a popup in the YouTube page.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
+                <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
+                <br/>
+                <sub class="popupElement">
+                  This is the button that allows you to clear all sponsors on the YouTube player.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
+                <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
+                <br/>
+                <sub class="popupElement">
+                  This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
+                  used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message
+                  to the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers
+                  are accurate. :)
+                </sub>
+      
+                <br/>
+                <br/>
+
+                <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">Show Notice Again</button>
+            </div>
           </div>
         </div>
-      </div>
-  </center>
+    </center>
+  </body>
+
+  <!-- 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>

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