Merge pull request #59 from ajayyy/experimental

Moved notice, embed support and bug fixes

background.js

@@ -57,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) {
@@ -134,6 +147,20 @@ function submitTimes(videoID, callback) {
               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
@@ -142,18 +169,6 @@ function submitTimes(videoID, callback) {
           });
         });
       }
-
-      //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});
-      });
     }
   });
 }

content.css

@@ -45,18 +45,19 @@
     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);
-	margin-top: -50px;
+	right: 0;
+	bottom: 90px;
+	zoom: 85%;
 
 	animation: fadeIn 0.5s;
 }
 
 /* if two are very close to eachother */
 .secondSkipNotice {
-	margin-left: 500px;
+	bottom: 280px;
 
-  	transition: margin-left 0.2s;
+  	transition: bottom 0.2s;
 }
 
 .sponsorSkipMessage {

content.js

@@ -34,6 +34,13 @@ var hideVideoPlayerControls = false;
 var hideInfoButtonPlayerControls = false;
 var hideDeleteButtonPlayerControls = false;
 
+//the downloaded sponsor times
+var sponsorTimes = [];
+var UUIDs = [];
+
+//the sponsor times being prepared to be submitted
+var sponsorTimesSubmitting = [];
+
 //becomes true when isInfoFound is called
 //this is used to close the popup on YouTube when the other popup opens
 var popupInitialised = false;
@@ -73,6 +80,10 @@ function messageListener(request, sender, sendResponse) {
       sponsorMessageStarted(sendResponse);
     }
 
+    if (request.message == "sponsorDataChanged") {
+      updateSponsorTimesSubmitting();
+    }
+
     if (request.message == "isInfoFound") {
       //send the sponsor times along with if it's found
       sendResponse({
@@ -160,6 +171,9 @@ function videoIDChange(id) {
   sponsorDataFound = false;
   sponsorsLookup(id);
 
+  //reset sponsor times submitting
+  sponsorTimesSubmitting = [];
+
   //see if the onvideo control image needs to be changed
   chrome.runtime.sendMessage({
     message: "getSponsorTimes",
@@ -174,6 +188,11 @@ function videoIDChange(id) {
       } else {
         changeStartSponsorButton(true, false);
       }
+
+      //see if this data should be saved in the sponsorTimesSubmitting variable
+      if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        sponsorTimesSubmitting = sponsorTimes;
+      }
     }
   });
 
@@ -203,82 +222,121 @@ function videoIDChange(id) {
 }
 
 function sponsorsLookup(id) {
-    v = document.querySelector('video') // Youtube video player
+  v = document.querySelector('video') // Youtube video player
-    
+  
-    //check database for sponsor times
+  //check database for sponsor times
-    sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
+  sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        sponsorDataFound = true;
+      sponsorDataFound = true;
 
-        sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
+      sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
-        UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
+      UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
+    } else if (xmlhttp.readyState == 4) {
+      sponsorDataFound = false;
 
-        // If the sponsor data exists, add the event to run on the videos "ontimeupdate"
+      //check if this video was uploaded recently
-        v.ontimeupdate = function () { 
+      //use the invidious api to get the time published
-            sponsorCheck(sponsorTimes);
+      sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id, function(xmlhttp, error) {
-        };
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-      } else if (xmlhttp.readyState == 4) {
+          let unixTimePublished = JSON.parse(xmlhttp.responseText).published;
-        sponsorDataFound = false;
 
-        //check if this video was uploaded recently
+          //if less than 3 days old
-        //use the invidious api to get the time published
+          if ((Date.now() / 1000) - unixTimePublished < 259200) {
-        sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id, function(xmlhttp, error) {
+            setTimeout(() => sponsorsLookup(id), 10000);
-          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            let unixTimePublished = JSON.parse(xmlhttp.responseText).published;
-
-            //if less than 3 days old
-            if ((Date.now() / 1000) - unixTimePublished < 259200) {
-              setTimeout(() => sponsorsLookup(id), 10000);
-            }
           }
-        });
+        }
-      }
+      });
-    });
+    }
+  });
+
+  //add the event to run on the videos "ontimeupdate"
+  v.ontimeupdate = function () { 
+    sponsorCheck();
+  };
 }
 
-function sponsorCheck(sponsorTimes) { // Video skipping
+//video skipping
-  //see if any sponsor start time was just passed
+function sponsorCheck() {
-  for (let i = 0; i < sponsorTimes.length; i++) {
+  let skipHappened = false;
-    //this means part of the video was just skipped
+
-    if (Math.abs(v.currentTime - lastTime) > 1 && lastTime != -1) {
+  if (sponsorTimes != null) {
-      //make lastTime as if the video was playing normally
+    //see if any sponsor start time was just passed
-      lastTime = v.currentTime - 0.0001;
+    for (let i = 0; i < sponsorTimes.length; i++) {
+      //if something was skipped
+      if (checkSponsorTime(sponsorTimes, i, true)) {
+        skipHappened = true;
+        break;
+      }
     }
+  }
 
-    let currentTime = Date.now();
+  if (!skipHappened) {
-
+    //check for the "preview" sponsors (currently edited by this user)
-    //If the sponsor time is in between these times, skip it
+    for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
-    //Checks if the last time skipped to is not too close to now, to make sure not to get too many
+      //must be a finished sponsor and be valid
-    //  sponsor times in a row (from one troll)
+      if (sponsorTimesSubmitting[i].length > 1 && sponsorTimesSubmitting[i][1] > sponsorTimesSubmitting[i][0]) {
-    //the last term makes 0 second start times possible
+        checkSponsorTime(sponsorTimesSubmitting, i, false);
-    if ((Math.abs(v.currentTime - sponsorTimes[i][0]) < 0.3 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime
-          && (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && sponsorTimes[i][0] == 0)) {
-      //skip it
-      v.currentTime = sponsorTimes[i][1];
-
-      lastSponsorTimeSkipped = sponsorTimes[i][0];
-      
-      let currentUUID =  UUIDs[i];
-      lastSponsorTimeSkippedUUID = currentUUID; 
-
-      //send out the message saying that a sponsor message was skipped
-      openSkipNotice(currentUUID);
-
-      setTimeout(() => closeSkipNotice(currentUUID), 7000);
-
-      //send telemetry that a this sponsor was skipped happened
-      if (trackViewCount) {
-        sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
       }
     }
   }
 
   //don't keep track until they are loaded in
-  if (sponsorTimes.length > 0) {
+  if (sponsorTimes != null || sponsorTimesSubmitting.length > 0) {
     lastTime = v.currentTime;
   }
 }
 
+function checkSponsorTime(sponsorTimes, index, openNotice) {
+  //this means part of the video was just skipped
+  if (Math.abs(v.currentTime - lastTime) > 1 && lastTime != -1) {
+    //make lastTime as if the video was playing normally
+    lastTime = v.currentTime - 0.0001;
+  }
+
+  if (checkIfTimeToSkip(v.currentTime, sponsorTimes[index][0])) {
+    //skip it
+    skipToTime(v, index, sponsorTimes, openNotice);
+
+    //something was skipped
+    return true;
+  }
+
+  return false;
+}
+
+function checkIfTimeToSkip(currentVideoTime, startTime) {
+  let currentTime = Date.now();
+
+  //If the sponsor time is in between these times, skip it
+  //Checks if the last time skipped to is not too close to now, to make sure not to get too many
+  //  sponsor times in a row (from one troll)
+  //the last term makes 0 second start times possible
+  return (Math.abs(currentVideoTime - startTime) < 0.3 && startTime >= lastTime && startTime <= currentVideoTime && 
+      (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && startTime == 0);
+}
+
+//skip fromt he start time to the end time for a certain index sponsor time
+function skipToTime(v, index, sponsorTimes, openNotice) {
+  v.currentTime = sponsorTimes[index][1];
+
+  lastSponsorTimeSkipped = sponsorTimes[index][0];
+  
+  let currentUUID =  UUIDs[index];
+  lastSponsorTimeSkippedUUID = currentUUID; 
+
+  if (openNotice) {
+    //send out the message saying that a sponsor message was skipped
+    openSkipNotice(currentUUID);
+
+    setTimeout(() => closeSkipNotice(currentUUID), 7000);
+
+    //send telemetry that a this sponsor was skipped happened
+    if (trackViewCount) {
+      sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+    }
+  }
+}
+
 function goBackToPreviousTime(UUID) {
   if (sponsorTimes != null) {
     //add a tiny bit of time to make sure it is not skipped again
@@ -347,6 +405,25 @@ function startSponsorClicked() {
     message: "addSponsorTime",
     time: v.currentTime,
     videoID: getYouTubeVideoID(document.URL)
+  }, function(response) {
+    //see if the sponsorTimesSubmitting needs to be updated
+    updateSponsorTimesSubmitting();
+  });
+}
+
+function updateSponsorTimesSubmitting() {
+  chrome.runtime.sendMessage({
+    message: "getSponsorTimes",
+    videoID: getYouTubeVideoID(document.URL)
+  }, function(response) {
+    if (response != undefined) {
+      let sponsorTimes = response.sponsorTimes;
+
+      //see if this data should be saved in the sponsorTimesSubmitting variable
+      if (sponsorTimes != undefined) {
+        sponsorTimesSubmitting = sponsorTimes;
+      }
+    }
   });
 }
 
@@ -544,6 +621,9 @@ function clearSponsorTimes() {
       let sponsorTimeKey = "sponsorTimes" + currentVideoID;
       chrome.storage.sync.set({[sponsorTimeKey]: []});
 
+      //clear sponsor times submitting
+      sponsorTimesSubmitting = [];
+
       //set buttons to be correct
       changeStartSponsorButton(true, false);
     }
@@ -557,29 +637,6 @@ function openSkipNotice(UUID){
     return;
   }
 
-  //check if page is loaded yet (for 0 second sponsors, the page might not be loaded yet)
-  //it looks for the view count div and sees if it is full yet
-  //querySelectorAll is being used like findElementById for multiple objects, because for
-  //some reason YouTube has put more than one object with one ID.
-  let viewCountNode = document.querySelectorAll("#count");
-  //check to see if the length is over zero, otherwise it's a different YouTube theme probably
-  if (viewCountNode.length > 0) {
-    //check if any of these have text
-    let viewCountVisible = false;
-    for (let i = 0; i < viewCountNode.length; i++) {
-      if (viewCountNode[i].innerText != null) {
-        viewCountVisible = true;
-        break;
-      }
-    }
-    if (!viewCountVisible) {
-      //this is the new YouTube layout and it is still loading
-      //wait a bit for opening the notice
-      setTimeout(() => openSkipNotice(UUID), 200);
-      return;
-    }
-  }
-
   let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
 
   if (amountOfPreviousNotices > 0) {
@@ -594,7 +651,7 @@ function openSkipNotice(UUID){
   noticeElement.id = "sponsorSkipNotice" + UUID;
   noticeElement.classList.add("sponsorSkipObject");
   noticeElement.classList.add("sponsorSkipNotice");
-  noticeElement.style.zIndex = 5 + amountOfPreviousNotices;
+  noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
 
   let logoElement = document.createElement("img");
   logoElement.id = "sponsorSkipLogo" + UUID;
@@ -664,11 +721,21 @@ function openSkipNotice(UUID){
   noticeElement.appendChild(voteButtonsContainer);
   noticeElement.appendChild(buttonContainer);
 
-  let referenceNode = document.getElementById("info");
+  let referenceNode = document.getElementById("movie_player");
   if (referenceNode == null) {
-    //old YouTube
+    //for embeds
-    referenceNode = document.getElementById("watch-header");
+    let player = document.getElementById("player");
+    referenceNode = player.firstChild;
+    let index = 1;
+
+    //find the child that is the video player (sometimes it is not the first)
+    while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
+      referenceNode = player.children[index];
+
+      index++;
+    }
   }
+
   referenceNode.prepend(noticeElement);
 }
 
@@ -850,8 +917,7 @@ function sendSubmitMessage(){
         submitButton.style.animation = "rotate 1s";
         //when the animation is over, hide the button
         submitButton.addEventListener("animationend", function() {
-          submitButton.style.animation = "unset";
+          changeStartSponsorButton(true, false);
-          submitButton.style.display = "none";
         });
 
         //clear the sponsor times
@@ -957,5 +1023,10 @@ function getYouTubeVideoID(url) { // Returns with video id else returns false
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);
   var id = new URL(url).searchParams.get("v");
+  if (url.includes("/embed/")) {
+    //it is an embed, don't search for v
+    id = match[7];
+  }
+
   return (match && match[7].length == 11) ? id : false;
 }

firefox_manifest.json

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

help/index.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; 
+}

manifest.json

@@ -1,13 +1,14 @@
 {
   "name": "SponsorBlock for YouTube - Skip Sponsorships",
   "short_name": "SponsorBlock",
-  "version": "1.0.22",
+  "version": "1.0.26",
   "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": [
         "config.js",
         "content.js",
@@ -31,7 +32,9 @@
     "icons/downvote.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",
-    "popup.html"
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
   ],
   "permissions": [
     "tabs",

popup.js

@@ -22,35 +22,45 @@ function runThePopup() {
       inPopup = false;
   }
   
-  // References
+  var SB = {};
-  let SB = {};
+
-  
+  ["sponsorStart",
-  SB.sponsorStart = document.getElementById("sponsorStart");
+  "clearTimes",
-  SB.clearTimes = document.getElementById("clearTimes");
+  "submitTimes",
-  SB.submitTimes = document.getElementById("submitTimes");
+  "showNoticeAgain",
-  SB.showNoticeAgain = document.getElementById("showNoticeAgain");
+  "hideVideoPlayerControls",
-  SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls");
+  "showVideoPlayerControls",
-  SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls");
+  "hideInfoButtonPlayerControls",
-  SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls");
+  "showInfoButtonPlayerControls",
-  SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls");
+  "hideDeleteButtonPlayerControls",
-  SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
+  "showDeleteButtonPlayerControls",
-  SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
+  "disableSponsorViewTracking",
-  SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
+  "enableSponsorViewTracking",
-  SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
+  "optionsButton",
-  SB.optionsButton = document.getElementById("optionsButton");
+  "reportAnIssue",
-  SB.reportAnIssue = document.getElementById("reportAnIssue");
   // sponsorTimesContributions
-  SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
+  "sponsorTimesContributionsContainer",
-  SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
+  "sponsorTimesContributionsDisplay",
-  SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
+  "sponsorTimesContributionsDisplayEndWord",
   // sponsorTimesViewsDisplay
-  SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
+  "sponsorTimesViewsContainer",
-  SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
+  "sponsorTimesViewsDisplay",
-  SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
+  "sponsorTimesViewsDisplayEndWord",
   // discordButtons
-  SB.discordButtonContainer = document.getElementById("discordButtonContainer");
+  "discordButtonContainer",
-  SB.hideDiscordButton = document.getElementById("hideDiscordButton");
+  "hideDiscordButton",
-  
+  // submitTimesInfoMessage
+  "submitTimesInfoMessageContainer",
+  "submitTimesInfoMessage",
+  // More
+  "submissionSection",
+  "mainControls",
+  "loadingIndicator",
+  "videoFound",
+  "sponsorMessageTimes",
+  "downloadedSponsorMessageTimes",
+  ].forEach(id => SB[id] = document.getElementById(id));
+
   //setup click listeners
   SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
   SB.clearTimes.addEventListener("click", clearTimes);
@@ -68,7 +78,15 @@ function runThePopup() {
   SB.reportAnIssue.addEventListener("click", reportAnIssue);
   SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
   
-  
+  //setup error message languages
+  var EN_US = new Map();
+
+  EN_US.set(400, 'Server said this request was invalid"')
+     .set(429, 'You have submitted too many sponsor times for this one video, are you sure there are this many?')
+     .set(409, 'This has already been submitted before')
+     .set(502, 'It seems the server is down. Contact the dev to inform them.')
+     .set('Unknown', 'There was an error submitting your sponsor times, please try again later.');
+
   //if true, the button now selects the end time
   let startTimeChosen = false;
   
@@ -168,6 +186,7 @@ function runThePopup() {
                 } else {
                   SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
                 }
+
                 SB.sponsorTimesViewsDisplay.innerText = viewCount;
                 SB.sponsorTimesViewsContainer.style.display = "unset";
               }
@@ -210,7 +229,7 @@ function runThePopup() {
         displaySponsorTimes();
   
         //show submission section
-        document.getElementById("submissionSection").style.display = "unset";
+        SB.submissionSection.style.display = "unset";
   
         showSubmitTimesIfNecessary();
       }
@@ -238,15 +257,15 @@ function runThePopup() {
       isYouTubeTab = true;
   
       //remove loading text
-      document.getElementById("mainControls").style.display = "unset"
+      SB.mainControls.style.display = "unset"
-      document.getElementById("loadingIndicator").innerHTML = "";
+      SB.loadingIndicator.innerHTML = "";
-  
+
       if (request.found) {
-        document.getElementById("videoFound").innerHTML = "This video's sponsors are in the database!"
+        SB.videoFound.innerHTML = "This video's sponsors are in the database!"
-  
+
         displayDownloadedSponsorTimes(request);
       } else {
-        document.getElementById("videoFound").innerHTML = "No sponsors found"
+        SB.videoFound.innerHTML = "No sponsors found"
       }
     }
   }
@@ -282,7 +301,21 @@ function runThePopup() {
     sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
   
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    let localStartTimeChosen = startTimeChosen;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      //send a message to the client script
+      if (localStartTimeChosen) {
+        chrome.tabs.query({
+          active: true,
+          currentWindow: true
+        }, tabs => {
+          chrome.tabs.sendMessage(
+            tabs[0].id,
+            {message: "sponsorDataChanged"}
+          );
+        });
+      }
+    });
   
     updateStartTimeChosen();
   
@@ -290,31 +323,28 @@ function runThePopup() {
     displaySponsorTimes();
   
     //show submission section
-    document.getElementById("submissionSection").style.display = "unset";
+    SB.submissionSection.style.display = "unset";
   
     showSubmitTimesIfNecessary();
   }
   
   //display the video times from the array
   function displaySponsorTimes() {
-    //set it to the message
-    let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
-  
     //remove all children
-    while (sponsorMessageTimes.firstChild) {
+    while (SB.sponsorMessageTimes.firstChild) {
-      sponsorMessageTimes.removeChild(sponsorMessageTimes.firstChild);
+      SB.sponsorMessageTimes.removeChild(SB.sponsorMessageTimes.firstChild);
     }
-  
+
     //add sponsor times
-    sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
+    SB.sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
   }
   
   //display the video times from the array at the top, in a different section
   function displayDownloadedSponsorTimes(request) {
     if (request.sponsorTimes != undefined) {
       //set it to the message
-      document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
+      SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
-  
+
       //add them as buttons to the issue reporting container
       let container = document.getElementById("issueReporterTimeButtons");
       for (let i = 0; i < request.sponsorTimes.length; i++) {
@@ -530,7 +560,17 @@ function runThePopup() {
   
     //save this
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
     displaySponsorTimes();
 
@@ -559,7 +599,17 @@ function runThePopup() {
   
     //save this
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
     //update display
     displaySponsorTimes();
@@ -602,7 +652,17 @@ function runThePopup() {
     sponsorTimes = [];
   
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {message: "sponsorDataChanged"}
+        );
+      });
+    });
   
     displaySponsorTimes();
   
@@ -612,10 +672,15 @@ function runThePopup() {
     resetStartTimeChosen();
   }
   
+  function getErrorMessage(lang, statusCode) {
+    if(lang.has(statusCode)) return lang.get(statusCode);
+    return lang.get('Unknown').concat(" Error code: ") + statusCode;
+  } 
+
   function submitTimes() {
     //make info message say loading
-    document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
+    SB.submitTimesInfoMessage.innerText = "Loading...";
-    document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+    SB.submitTimesInfoMessageContainer.style.display = "unset";
   
     if (sponsorTimes.length > 0) {
       chrome.runtime.sendMessage({
@@ -625,24 +690,16 @@ function runThePopup() {
         if (response != undefined) {
           if (response.statusCode == 200) {
             //hide loading message
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "none";
+            SB.submitTimesInfoMessageContainer.style.display = "none";
-    
+
             clearTimes();
-          } else if(response.statusCode == 400) {
-            document.getElementById("submitTimesInfoMessage").innerText = "Server said this request was invalid";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 429) {
-            document.getElementById("submitTimesInfoMessage").innerText = "You have submitted too many sponsor times for this one video, are you sure there are this many?";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 409) {
-            document.getElementById("submitTimesInfoMessage").innerText = "This has already been submitted before";
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
-          } else if(response.statusCode == 502) {
-            document.getElementById("submitTimesInfoMessage").innerText = "It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode;
-            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
           } else {
-            document.getElementById("submitTimesInfoMessage").innerText = "There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode;
+            let errorMessage = getErrorMessage(EN_US, response.statusCode);
+
+            document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
             document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+
+            SB.submitTimesInfoMessageContainer.style.display = "unset";
           }
         }
       });
@@ -963,5 +1020,4 @@ if (chrome.tabs != undefined) {
 
   //this means it is actually opened in the popup
   runThePopup();
-}
+}
-