Added a sponsor time preview.

It skips 2 seconds before the start time so you can preview how it feels.

Also increased the space between the times and the clear times button.

Resolves https://github.com/ajayyy/SponsorBlock/issues/66

content.js

@@ -119,6 +119,10 @@ function messageListener(request, sender, sendResponse) {
       })
     }
 
+    if (request.message == "skipToTime") {
+      v.currentTime = request.time;
+    }
+
     if (request.message == "getChannelURL") {
       sendResponse({
         channelURL: channelURL

popup.html

@@ -93,6 +93,8 @@
         
                 </div>
               </b>
+
+              <br/>
       
               <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       

popup.js

@@ -210,7 +210,7 @@ function runThePopup() {
 	  chrome.tabs.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) {
 		  if (result != undefined && result.videoID) {
         currentVideoID = result.videoID;
-        
+
 		    loadTabData(tabs);
 		  } else if (result == undefined && chrome.runtime.lastError) {
         //this isn't a YouTube video then, or at least the content script is not loaded
@@ -473,8 +473,11 @@ function runThePopup() {
       let index = i;
       deleteButton.addEventListener("click", () => deleteSponsorTime(index));
   
-      let spacer = document.createElement("span");
+      let previewButton = document.createElement("span");
-      spacer.innerText = " ";
+      previewButton.id = "sponsorTimePreviewButton" + i;
+      previewButton.innerText = "Preview";
+      previewButton.className = "mediumLink popupElement";
+      previewButton.addEventListener("click", () => previewSponsorTime(index));
   
       let editButton = document.createElement("span");
       editButton.id = "sponsorTimeEditButton" + i;
@@ -502,6 +505,7 @@ function runThePopup() {
   
       //only if it is a complete sponsor time
       if (sponsorTimes[i].length > 1) {
+        sponsorTimesContainer.appendChild(previewButton);
         sponsorTimesContainer.appendChild(editButton);
 
         currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
@@ -510,6 +514,28 @@ function runThePopup() {
   
     return sponsorTimesContainer;
   }
+
+  function previewSponsorTime(index) {
+    let skipTime = sponsorTimes[index][0];
+
+    if (document.getElementById("startTimeMinutes" + index) != null) {
+      //edit is currently open, use that time
+
+      skipTime = getSponsorTimeEditTimes("startTime", index);
+    }
+
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      chrome.tabs.sendMessage(
+        tabs[0].id, {
+          message: "skipToTime",
+          time: skipTime - 2
+        }
+      );
+    });
+  }
   
   function editSponsorTime(index) {
     if (document.getElementById("startTimeMinutes" + index) != null) {
@@ -582,16 +608,19 @@ function runThePopup() {
   
     sponsorTimesContainer.replaceChild(saveButton, editButton);
   }
+
+  //id start name is whether it is the startTime or endTime
+  //gives back the time in seconds
+  function getSponsorTimeEditTimes(idStartName, index) {
+    let minutes = document.getElementById(idStartName + "Minutes" + index);
+    let seconds = document.getElementById(idStartName + "Seconds" + index);
+
+    return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
+  }
   
   function saveSponsorTimeEdit(index) {
-    let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
+    sponsorTimes[index][0] = getSponsorTimeEditTimes("startTime", index);
-    let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
+    sponsorTimes[index][1] = getSponsorTimeEditTimes("endTime", index);
-  
-    let endTimeMinutes = document.getElementById("endTimeMinutes" + index);
-    let endTimeSeconds = document.getElementById("endTimeSeconds" + index);
-  
-    sponsorTimes[index][0] = parseInt(startTimeMinutes.value) * 60 + parseFloat(startTimeSeconds.value);
-    sponsorTimes[index][1] = parseInt(endTimeMinutes.value) * 60 + parseFloat(endTimeSeconds.value);
   
     //save this
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;