Merge pull request #4 from ajayyy/experimental

View count additions and fixes

.gitignore

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

content.css

@@ -1,11 +1,15 @@
-.playerButton {
+.playerButtonImage {
 	height: 60%;
 	top: 0;
 	bottom: 0;
 	display: block;
 	margin: auto;
 }
 
+.playerButton {
+	vertical-align: top;
+}
+
 .sponsorSkipObject {
     font-family: 'Source Sans Pro', sans-serif;
 }

content.js

@@ -21,6 +21,9 @@ var v;
 //the last time looked at (used to see if this time is in the interval)
 var lastTime;
 
+//the last time skipped to
+var lastTimeSkippedTo = -1;
+
 //the last time in the video a sponsor was skipped
 //used for the go back button
 var lastSponsorTimeSkipped = null;
@@ -117,7 +120,6 @@ function videoIDChange(id) {
 
 function sponsorsLookup(id) {
     v = document.querySelector('video') // Youtube video player
-    let xmlhttp = new XMLHttpRequest();
 
     //check database for sponsor times
     sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
@@ -151,28 +153,34 @@ function sponsorsLookup(id) {
 }
 
 function sponsorCheck(sponsorTimes) { // Video skipping
-    //see if any sponsor start time was just passed
-    for (let i = 0; i < sponsorTimes.length; i++) {
-        //the sponsor time is in between these times, skip it
-        //if the time difference is more than 1 second, than the there was probably a skip in time, 
-        //  and it's not due to playback
-        if (Math.abs(v.currentTime - lastTime) < 1 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime) {
-          //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();
-
-          setTimeout(() => closeSkipNotice(currentUUID), 7000);
-        }
-
-        lastTime = v.currentTime;
+  //see if any sponsor start time was just passed
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    //the sponsor time is in between these times, skip it
+    //if the time difference is more than 1 second, than the there was probably a skip in time, 
+    //  and it's not due to playback
+    //also check 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)
+    if (Math.abs(v.currentTime - lastTime) < 1 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime &&
+        (lastTimeSkippedTo == -1 || Math.abs(v.currentTime - lastTimeSkippedTo) > 1)) {
+      //skip it
+      v.currentTime = sponsorTimes[i][1];
+      lastTimeSkippedTo = 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();
+
+      setTimeout(() => closeSkipNotice(currentUUID), 7000);
+
+      //send telemetry that a this sponsor was skipped happened
+      sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
     }
+  }
+  lastTime = v.currentTime;
 }
 
 function goBackToPreviousTime(UUID) {
@@ -193,13 +201,13 @@ function addPlayerControlsButton() {
 
   let startSponsorButton = document.createElement("button");
   startSponsorButton.id = "startSponsorButton";
-  startSponsorButton.className = "ytp-button";
+  startSponsorButton.className = "ytp-button playerButton";
   startSponsorButton.setAttribute("title", "Sponsor Starts Now");
   startSponsorButton.addEventListener("click", startSponsorClicked);
 
   let startSponsorImage = document.createElement("img");
   startSponsorImage.id = "startSponsorImage";
-  startSponsorImage.className = "playerButton";
+  startSponsorImage.className = "playerButtonImage";
   startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
 
   //add the image to the button
@@ -269,15 +277,15 @@ function addSubmitButton() {
   //make a submit button
   let submitButton = document.createElement("button");
   submitButton.id = "submitButton";
-  submitButton.className = "ytp-button";
+  submitButton.className = "ytp-button playerButton";
   submitButton.setAttribute("title", "Submit Sponsor Times");
   submitButton.addEventListener("click", submitSponsorTimes);
   //hide it at the start
   submitButton.style.display = "none";
 
   let submitImage = document.createElement("img");
   submitImage.id = "submitButtonImage";
-  submitImage.className = "playerButton";
+  submitImage.className = "playerButtonImage";
   submitImage.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
 
   //add the image to the button

firefox_manifest.json

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

manifest.json

@@ -1,7 +1,8 @@
 {
-  "name": "YTSponsorSkip",
-  "version": "1.0",
-  "description": "Skip youtube video sponsors.",
+  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "short_name": "SponsorBlock",
+  "version": "1.0.1",
+  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
       "matches": [
@@ -30,7 +31,8 @@
   "permissions": [
     "tabs",
     "storage",
-    "notifications"
+    "notifications",
+    "https://sponsor.ajay.app/*"
   ],
   "browser_action": {
     "default_title": "SponsorBlock",

popup.html

@@ -41,8 +41,26 @@ <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
 
           <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
 
-          <p id="sponsorTimesContributionsDisplay" style="display: none">
-            So far, you've submitted no sponsor times.
+          <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> 
@@ -103,5 +121,8 @@ <h3>Options</h3>
         </div>
       </div>
   </center>
+
+  <!-- Scripts that need to load after the html -->
+  <script src="config.js"></script>
   <script src="popup.js"></script>
 </html>

popup.js

@@ -41,17 +41,49 @@ chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
 //get the amount of times this user has contributed and display it to thank them
 chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
   if (result.sponsorTimesContributed != undefined) {
+    let sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
     let sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
+    let sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
 
     if (result.sponsorTimesContributed > 1) {
-      sponsorTimesContributionsDisplay.innerText = "So far, you've submitted " + result.sponsorTimesContributed + " sponsor times.";
+      sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
     } else {
-      sponsorTimesContributionsDisplay.innerText = "So far, you've submitted " + result.sponsorTimesContributed + " sponsor time.";
+      sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
     }
-    sponsorTimesContributionsDisplay.style.display = "unset";
+    sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
+    sponsorTimesContributionsContainer.style.display = "unset";
+
+    //get the userID
+    chrome.storage.sync.get(["userID"], function(result) {
+      let userID = result.userID;
+      if (userID != undefined) {
+        //there are probably some views on these submissions then
+        //get the amount of views from the sponsors submitted
+        sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
+          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+            let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
+
+            if (viewCount != 0) {
+              let sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsContainer");
+              let sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplay");
+              let sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayEndWord");
+
+              if (viewCount > 1) {
+                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+              } else {
+                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+              }
+              sponsorTimesViewsDisplay.innerText = viewCount;
+              sponsorTimesViewsContainer.style.display = "unset";
+            }
+          }
+        });
+      }
+    });
   }
 });
 
+
 chrome.tabs.query({
   active: true,
   currentWindow: true
@@ -466,6 +498,25 @@ function getFormattedTime(seconds) {
   return formatted;
 }
 
+function sendRequestToServer(type, address, callback) {
+  let xmlhttp = new XMLHttpRequest();
+
+  xmlhttp.open(type, serverAddress + address, true);
+
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
+  }
+
+  //submit this request
+  xmlhttp.send();
+}
+
 function getYouTubeVideoID(url) { // Return video id or false
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);