Merge pull request #56 from ajayyy/experimental

Added help page on install

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/>
@@ -653,6 +657,7 @@ Also add information on how to contact you by electronic and paper mail.
 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

@@ -7,7 +7,7 @@ SponsorBlock is an extension that will skip over sponsored segments of YouTube v
 
 # Available for Chrome and Firefox
 
-Chrome: https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone/
+Chrome: https://chrome.google.com/webstore/detail/ajjollijmimolcncegpgkbilohbhjnhi
 
 Firefox: https://addons.mozilla.org/addon/sponsorblock/
 
@@ -34,3 +34,5 @@ You can load this project as an unpacked extension. Make sure to rename the `con
 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> 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>

background.js

@@ -3,6 +3,9 @@ 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) {
@@ -36,7 +39,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
     //this allows the callback to be called later by the submitTimes function
     return true;
   } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time);
+    addSponsorTime(request.time, request.videoID);
   } else if (request.message == "getSponsorTimes") {
     getSponsorTimes(request.videoID, function(sponsorTimes) {
       callback({
@@ -54,6 +57,19 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
   }
 });
 
+//add help page on install
+chrome.runtime.onInstalled.addListener(function (object) {
+  chrome.storage.sync.get(["shownInstallPage"], function(result) {
+    let shownInstallPage = result.shownInstallPage;
+    if (shownInstallPage == undefined || !shownInstallPage) {
+      //open up the install page
+      chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+
+      //save that this happened
+      chrome.storage.sync.set({shownInstallPage: true});
+    }
+  });
+});
 
 //gets the sponsor times from memory
 function getSponsorTimes(videoID, callback) {
@@ -69,22 +85,22 @@ function getSponsorTimes(videoID, callback) {
   });
 }
 
-function addSponsorTime(time) {
-  getSponsorTimes(previousVideoID, function(sponsorTimes) {
+function addSponsorTime(time, videoID) {
+  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;
+    let sponsorTimeKey = "sponsorTimes" + videoID;
     chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
   });
 }
@@ -100,12 +116,14 @@ function submitVote(type, UUID, callback) {
       } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
         //duplicate vote
         callback({
-          successType: 0
+          successType: 0,
+          statusCode: xmlhttp.status
         });
       } else if (error) {
         //error while connect
         callback({
-          successType: -1
+          successType: -1,
+          statusCode: xmlhttp.status
         });
       }
     })
@@ -160,6 +178,12 @@ function videoIDChange(currentVideoID, tabId) {
     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
@@ -198,6 +222,12 @@ function getUserID(callback) {
       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();
       

content.css

@@ -1,3 +1,15 @@
+.popup {
+    z-index: 10;
+    width: 100%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .playerButtonImage {
 	height: 60%;
 	top: 0;

content.js

@@ -1,13 +1,15 @@
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
-  videoIDChange(id);
-}
-
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
 
 //the actual sponsorTimes if loaded and UUIDs associated with them
-var sponsorTimes = undefined;
-var UUIDs = undefined;
+var sponsorTimes = null;
+var UUIDs = null;
+//what video id are these sponsors for
+var sponsorVideoID = null;
+
+if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+  videoIDChange(id);
+}
 
 //the video
 var v;
@@ -29,6 +31,12 @@ var showingStartSponsor = true;
 
 //should the video controls buttons be added
 var hideVideoPlayerControls = false;
+var hideInfoButtonPlayerControls = false;
+var hideDeleteButtonPlayerControls = false;
+
+//becomes true when isInfoFound is called
+//this is used to close the popup on YouTube when the other popup opens
+var popupInitialised = false;
 
 //should view counts be tracked
 var trackViewCount = false;
@@ -51,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
   }
 });
 
-chrome.runtime.onMessage.addListener( // Detect URL Changes
-  function(request, sender, sendResponse) {
+//get messages from the background script and the popup
+chrome.runtime.onMessage.addListener(messageListener);
+
+function messageListener(request, sender, sendResponse) {
     //message from background script
     if (request.message == "ytvideoid") { 
       videoIDChange(request.id);
@@ -60,7 +70,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
 
     //messages from popup script
     if (request.message == "sponsorStart") {
-      sponsorMessageStarted();
+      sponsorMessageStarted(sendResponse);
     }
 
     if (request.message == "isInfoFound") {
@@ -69,7 +79,14 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
         UUIDs: UUIDs
-      })
+      });
+
+      if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
+        //the popup should be closed now that another is opening
+        closeInfoMenu();
+      }
+
+      popupInitialised = true;
     }
 
     if (request.message == "getVideoID") {
@@ -89,19 +106,56 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
     if (request.message == "changeVideoPlayerControlsVisibility") {
       hideVideoPlayerControls = request.value;
 
+      updateVisibilityOfPlayerControlsButton();
+    } else if (request.message == "changeInfoButtonPlayerControlsVisibility") {
+      hideInfoButtonPlayerControls = request.value;
+
+      updateVisibilityOfPlayerControlsButton();
+    } else if (request.message == "changeDeleteButtonPlayerControlsVisibility") {
+      hideDeleteButtonPlayerControls = request.value;
+
       updateVisibilityOfPlayerControlsButton();
     }
 
     if (request.message == "trackViewCount") {
       trackViewCount = request.value;
     }
-});
+}
+
+//check for hotkey pressed
+document.onkeydown = function(e){
+  e = e || window.event;
+  var key = e.which || e.keyCode;
+
+  let video = document.getElementById("movie_player");
+
+  //is the video in focus, otherwise they could be typing a comment
+  if (document.activeElement === video) {
+    if(key == 186){
+      //semicolon
+      startSponsorClicked();
+    } else if (key == 222) {
+      //single quote
+      submitSponsorTimes();
+    }
+  }
+}
 
 function videoIDChange(id) {
+  //not a url change
+  if (sponsorVideoID == id){
+    return;
+  }
+
   //reset last sponsor times
   lastTime = -1;
   lastUnixTimeSkipped = -1;
 
+  //reset sponsor times
+  sponsorTimes = null;
+  UUIDs = null;
+  sponsorVideoID = id;
+
   //reset sponsor data found check
   sponsorDataFound = false;
   sponsorsLookup(id);
@@ -113,15 +167,17 @@ function videoIDChange(id) {
   }, function(response) {
     if (response != undefined) {
       let sponsorTimes = response.sponsorTimes;
-      if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
-        document.getElementById("submitButton").style.display = "unset";
-      } else if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
-        toggleStartSponsorButton();
+      if (sponsorTimes != null && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
+        changeStartSponsorButton(true, true);
+      } else if (sponsorTimes != null && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+        changeStartSponsorButton(false, true);
+      } else {
+        changeStartSponsorButton(true, false);
       }
     }
   });
 
-  //see if video control buttons should be added
+  //see if video controls buttons should be added
   chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
     if (result.hideVideoPlayerControls != undefined) {
       hideVideoPlayerControls = result.hideVideoPlayerControls;
@@ -129,6 +185,21 @@ function videoIDChange(id) {
 
     updateVisibilityOfPlayerControlsButton();
   });
+  chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
+    if (result.hideInfoButtonPlayerControls != undefined) {
+      hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
+    }
+
+    updateVisibilityOfPlayerControlsButton();
+  });
+  chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
+    if (result.hideDeleteButtonPlayerControls != undefined) {
+      hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
+    }
+
+    updateVisibilityOfPlayerControlsButton();
+  });
+  
 }
 
 function sponsorsLookup(id) {
@@ -209,7 +280,7 @@ function sponsorCheck(sponsorTimes) { // Video skipping
 }
 
 function goBackToPreviousTime(UUID) {
-  if (sponsorTimes != undefined) {
+  if (sponsorTimes != null) {
     //add a tiny bit of time to make sure it is not skipped again
     v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001;
 
@@ -250,30 +321,49 @@ function removePlayerControlsButton() {
 
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
+  addPlayerControlsButton();
+  addInfoButton();
+  addDeleteButton();
+  addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
-  } else {
-    addPlayerControlsButton();
-    addSubmitButton();
+  }
+  if (hideInfoButtonPlayerControls) {
+    document.getElementById("infoButton").style.display = "none";
+  }
+  if (hideDeleteButtonPlayerControls) {
+    document.getElementById("deleteButton").style.display = "none";
   }
 }
 
 function startSponsorClicked() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
   toggleStartSponsorButton();
 
   //send back current time with message
   chrome.runtime.sendMessage({
     message: "addSponsorTime",
-    time: v.currentTime
+    time: v.currentTime,
+    videoID: getYouTubeVideoID(document.URL)
   });
 }
 
 function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
+  //if it isn't visible, there is no data
+  if (uploadButtonVisible && !hideDeleteButtonPlayerControls) {
+    document.getElementById("deleteButton").style.display = "unset";
+  } else {
+    document.getElementById("deleteButton").style.display = "none";
+  }
+
   if (showStartSponsor) {
     showingStartSponsor = true;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
+    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Starts Now");
 
-    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible) {
+    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !hideInfoButtonPlayerControls) {
       document.getElementById("submitButton").style.display = "unset";
     } else if (!uploadButtonVisible) {
       //disable submit button
@@ -282,6 +372,7 @@ function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
   } else {
     showingStartSponsor = false;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
+    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Ends Now");
 
     //disable submit button
     document.getElementById("submitButton").style.display = "none";
@@ -292,6 +383,60 @@ function toggleStartSponsorButton() {
   changeStartSponsorButton(!showingStartSponsor, true);
 }
 
+//shows the info button on the video player
+function addInfoButton() {
+  if (document.getElementById("infoButton") != null) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let infoButton = document.createElement("button");
+  infoButton.id = "infoButton";
+  infoButton.className = "ytp-button playerButton";
+  infoButton.setAttribute("title", "Open SponsorBlock Popup");
+  infoButton.addEventListener("click", openInfoMenu);
+
+  let infoImage = document.createElement("img");
+  infoImage.id = "infoButtonImage";
+  infoImage.className = "playerButtonImage";
+  infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  infoButton.appendChild(infoImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(infoButton);
+}
+
+//shows the delete button on the video player
+function addDeleteButton() {
+  if (document.getElementById("deleteButton") != null) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let deleteButton = document.createElement("button");
+  deleteButton.id = "deleteButton";
+  deleteButton.className = "ytp-button playerButton";
+  deleteButton.setAttribute("title", "Clear Sponsor Times");
+  deleteButton.addEventListener("click", clearSponsorTimes);
+  //hide it at the start
+  deleteButton.style.display = "none";
+
+  let deleteImage = document.createElement("img");
+  deleteImage.id = "deleteButtonImage";
+  deleteImage.className = "playerButtonImage";
+  deleteImage.src = chrome.extension.getURL("icons/PlayerDeleteIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  deleteButton.appendChild(deleteImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(deleteButton);
+}
+
 //shows the submit button on the video player
 function addSubmitButton() {
   if (document.getElementById("submitButton") != null) {
@@ -320,6 +465,91 @@ function addSubmitButton() {
   referenceNode.prepend(submitButton);
 }
 
+function openInfoMenu() {
+  if (document.getElementById("sponsorBlockPopupContainer") != null) {
+    //it's already added
+    return;
+  }
+
+  popupInitialised = false;
+
+  //hide info button
+  document.getElementById("infoButton").style.display = "none";
+
+  sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
+    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+      var popup = document.createElement("div");
+      popup.id = "sponsorBlockPopupContainer";
+      popup.innerHTML = xmlhttp.responseText
+
+      //close button
+      let closeButton = document.createElement("div");
+      closeButton.innerText = "Close Popup";
+      closeButton.classList = "smallLink";
+      closeButton.setAttribute("align", "center");
+      closeButton.addEventListener("click", closeInfoMenu);
+
+      //add the close button
+      popup.prepend(closeButton);
+    
+      let parentNode = document.getElementById("secondary");
+      if (parentNode == null) {
+        //old youtube theme
+        parentNode = document.getElementById("watch7-sidebar-contents");
+      }
+
+      //make the logo source not 404
+      //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
+      let logo = popup.querySelector("#sponsorBlockPopupLogo");
+      logo.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
+      //remove the style sheet and font that are not necessary
+      popup.querySelector("#sponorBlockPopupFont").remove();
+      popup.querySelector("#sponorBlockStyleSheet").remove();
+
+      parentNode.insertBefore(popup, parentNode.firstChild);
+
+      //run the popup init script
+      runThePopup();
+    }
+  });
+}
+
+function closeInfoMenu() {
+  let popup = document.getElementById("sponsorBlockPopupContainer");
+  if (popup != null) {
+    popup.remove();
+
+    //show info button
+    document.getElementById("infoButton").style.display = "unset";
+  }
+}
+
+function clearSponsorTimes() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      let confirmMessage = "Are you sure you want to clear this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+      if(!confirm(confirmMessage)) return;
+
+      //clear the sponsor times
+      let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+      chrome.storage.sync.set({[sponsorTimeKey]: []});
+
+      //set buttons to be correct
+      changeStartSponsorButton(true, false);
+    }
+  });
+}
+
 //Opens the notice that tells the user that a sponsor was just skipped
 function openSkipNotice(UUID){
   if (dontShowNotice) {
@@ -525,8 +755,13 @@ function vote(type, UUID) {
         //failure: duplicate vote
         addLoadingInfo("It seems you've already voted before", UUID)
       } else if (response.successType == -1) {
-        //failure: duplicate vote
-        addLoadingInfo("A connection error has occured.", UUID)
+        if (response.statusCode == 502) {
+          addLoadingInfo("It seems the sever is down. Contact the dev immediately.", UUID)
+        } else {
+          //failure: unknown error
+          addLoadingInfo("A connection error has occured. Error code: " + response.statusCode, UUID)
+        }
+        
       }
     }
   });
@@ -556,20 +791,47 @@ function dontShowNoticeAgain() {
   closeAllSkipNotices();
 }
 
-function sponsorMessageStarted() {
+function sponsorMessageStarted(callback) {
     let v = document.querySelector('video');
 
     //send back current time
-    chrome.runtime.sendMessage({
-      message: "time",
+    callback({
       time: v.currentTime
-    });
+    })
 
     //update button
     toggleStartSponsorButton();
 }
 
 function submitSponsorTimes() {
+  if (document.getElementById("submitButton").style.display == "none") {
+    //don't submit, not ready
+    return;
+  }
+
+  //it can't update to this info yet
+  closeInfoMenu();
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      let confirmMessage = "Are you sure you want to submit this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += "\n\nTo edit or delete values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+      if(!confirm(confirmMessage)) return;
+
+      sendSubmitMessage();
+    }
+  });
+
+}
+
+//send the message to the background js
+//called after all the checks have been made that it's okay to do so
+function sendSubmitMessage(){
   //add loading animation
   document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
   document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
@@ -600,11 +862,59 @@ function submitSponsorTimes() {
         //show that the upload failed
         document.getElementById("submitButton").style.animation = "unset";
         document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
+
+        if(response.statusCode == 400) {
+          alert("Server said this request was invalid");
+        } else if(response.statusCode == 429) {
+          alert("You have submitted too many sponsor times for this one video, are you sure there are this many?");
+        } else if(response.statusCode == 409) {
+          alert("This has already been submitted before");
+        } else if(response.statusCode == 502) {
+          alert("It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode);
+        } else {
+          alert("There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode);
+        }
       }
     }
   });
 }
 
+//get the message that visually displays the video times
+function getSponsorTimesMessage(sponsorTimes) {
+  let sponsorTimesMessage = "";
+
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    for (let s = 0; s < sponsorTimes[i].length; s++) {
+      let timeMessage = getFormattedTime(sponsorTimes[i][s]);
+      //if this is an end time
+      if (s == 1) {
+        timeMessage = " to " + timeMessage;
+      } else if (i > 0) {
+        //add commas if necessary
+        timeMessage = ", " + timeMessage;
+      }
+
+      sponsorTimesMessage += timeMessage;
+    }
+  }
+
+  return sponsorTimesMessage;
+}
+
+//converts time in seconds to minutes:seconds
+function getFormattedTime(seconds) {
+  let minutes = Math.floor(seconds / 60);
+  let secondsDisplay = Math.round(seconds - minutes * 60);
+  if (secondsDisplay < 10) {
+    //add a zero
+    secondsDisplay = "0" + secondsDisplay;
+  }
+
+  let formatted = minutes+ ":" + secondsDisplay;
+
+  return formatted;
+}
+
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 
@@ -646,5 +956,6 @@ function sendRequestToCustomServer(type, fullAddress, callback) {
 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);
-  return (match && match[7].length == 11) ? match[7] : false;
+  var id = new URL(url).searchParams.get("v");
+  return (match && match[7].length == 11) ? id : false;
 }

firefox_manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "SponsorBlock - YouTube Sponsorship Blocker",
   "short_name": "SponsorBlock",
-  "version": "1.0.4",
+  "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": [
     {
@@ -10,11 +10,13 @@
       ],
       "js": [
         "config.js",
-        "content.js"
+        "content.js",
+        "popup.js"
       ],
       "css": [
         "content.css",
-        "./libs/Source+Sans+Pro.css"
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
@@ -26,7 +28,12 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
   ],
   "permissions": [
     "tabs",

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> 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></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,7 +1,7 @@
 {
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
   "short_name": "SponsorBlock",
-  "version": "1.0.4",
+  "version": "1.0.23",
   "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
@@ -10,11 +10,13 @@
       ],
       "js": [
         "config.js",
-        "content.js"
+        "content.js",
+        "popup.js"
       ],
       "css": [
         "content.css",
-        "./libs/Source+Sans+Pro.css"
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
@@ -26,7 +28,12 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
   ],
   "permissions": [
     "tabs",

popup.css

@@ -1,32 +1,93 @@
-* {
-  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;
 }
 
-.recordingSubtitle {
+.recordingSubtitle.popupElement {
 	margin-bottom: 10px;
 }
 
-.voteButton {
+.voteButton.popupElement {
 	height: 32px;
 	margin-right: 15px;
 	cursor: pointer;
 }
-.voteButton:hover {
+.voteButton:hover.popupElement {
 	filter: brightness(80%);
 }
 
-.greenButton {
-	background-color:#ec1c1c;
+#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;
+	padding-left: 15px;
+	padding-right: 15px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.greenButton.popupElement {
+  background-color:#ec1c1c;
   -moz-border-radius:28px;
   -webkit-border-radius:28px;
   border-radius:28px;
@@ -39,19 +100,19 @@ body {
   text-decoration:none;
   text-shadow:0px 0px 0px #662727;
 }
-.greenButton:hover {
+.greenButton:hover.popupElement {
   background-color:#bf2a2a;
 }
-.greenButton:focus {
+.greenButton:focus.popupElement {
 	outline: none;
 	background-color:#bf2a2a;
 }
-.greenButton:active {
+.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;
@@ -68,19 +129,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #854629;
 }
-.dangerButton:hover {
+.dangerButton:hover.popupElement {
 	background-color:#bc3315;
 }
-.dangerButton:focus {
+.dangerButton:focus.popupElement {
 	outline: none;
 	background-color:#bc3315;
 }
-.dangerButton:active {
+.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;
@@ -97,19 +158,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #856829;
 }
-.warningButton:hover {
+.warningButton:hover.popupElement {
 	background-color:#bc8215;
 }
-.warningButton:focus {
+.warningButton:focus.popupElement {
 	outline: none;
 	background-color:#bc8215;
 }
-.warningButton:active {
+.warningButton:active.popupElement {
 	position:relative;
 	top:1px;
 }
 
-.smallButton {
+.smallButton.popupElement {
 	background-color:#f9902d;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;
@@ -122,14 +183,14 @@ body {
 	padding:6px 10px;
 	text-decoration:none;
 }
-.smallButton:hover {
+.smallButton:hover.popupElement {
 	background-color:#fa9806;
 }
-.smallButton:focus {
+.smallButton:focus.popupElement {
 	outline: none;
 	background-color:#fa9806;
 }
-.smallButton:active {
+.smallButton:active.popupElement {
 	position:relative;
 	top:1px;
 }

popup.html

@@ -1,146 +1,184 @@
 <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>
-
-          <div id="downloadedSponsorMessageTimes">
-
-          </div>
-
-          <br/>
-
-          <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
-
-          <div id="issueReporterContainer" style="display: none">
-
-            <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
-
-            <div id="issueReporterTimeButtons">
+          <!-- 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>
+            <div id="downloadedSponsorMessageTimes" class="popupElement">
 
-          <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
-
-          <p>
-            <span id=sponsorTimesContributionsContainer style="display: none">
-                So far, you've submitted
-                <span id="sponsorTimesContributionsDisplay">
-                  0
-                </span>
-                <span id="sponsorTimesContributionsDisplayEndWord">
-                  sponsors.
-                </span>
-            </span>
-
-            <span id=sponsorTimesViewsContainer style="display: none">
-                You have saved people from 
-                <span id="sponsorTimesViewsDisplay">
-                  0
-                </span>
-                <span id="sponsorTimesViewsDisplayEndWord">
-                  sponsor segments.
-                </span>
-            </span>
-          </p>
-
-          <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>
+            </div>
 
-            <br/>
             <br/>
 
-            <div id="submitTimesContainer" style="display: none">
-              <button id="submitTimes" class="smallButton">Submit Times</button>
+            <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
 
-              <div id="submitTimesInfoMessageContainer" style="display: none">
-                <h3 id="submitTimesInfoMessage">
+            <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">
 
-                </h3>
               </div>
 
             </div>
 
-          </div>
+            <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
 
-          <div id="optionsButtonContainer">
-              <br/>
-              <br/>
+            <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>
 
-              <button id="optionsButton" class="dangerButton">Options</button>
-          </div>
+              <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>
 
-          <div id="options" style="display: none">
-              <br/>
+            <p class="popupElement"> 
+              Click the button below when the sponsorship starts and ends to record and 
+              submit it to the database.
+            </p>
     
-              <h3>Options</h3>
+            <div>
+              <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
+            </div>
 
-              <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>
-              <br/>
-              <sub>
-                This hides the button that appears 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>
+            <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>
+    
+            <div id="submissionSection"  class="popupElement" style="display: none">
+              <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
+              <b>
+                <div id="sponsorMessageTimes" class="popupElement">
+        
+                </div>
+              </b>
+      
+              <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
               <br/>
               <br/>
 
-              <button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
-              <button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
-              <br/>
-              <sub>
-                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>
+              <div id="submitTimesContainer" class="popupElement" style="display: none">
+                <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
 
-              <br/>
+                <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
+                  <h3 id="submitTimesInfoMessage" class="popupElement">
+
+                  </h3>
+                </div>
+
+              </div>
+      
+            </div>
+
+            <div id="discordButtonContainer" class="popupElement" style="display: none">
               <br/>
 
-              <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
+              <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>