Merge pull request #1 from ajayyy/experimental

Visual Upgrade and controls on the YouTube Player

.gitignore

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

README.md

@@ -1,3 +1,6 @@
+![Logo](icons/LogoSponsorBlocker256px.png)
+<br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
+
 # SponsorBlocker
 
 SponsorBlocker is an extension that will skip over sponsored segments of YouTube videos. SponsorBlocker is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.

background.js

@@ -1,5 +1,8 @@
 var previousVideoID = null
 
+//the id of this user, randomly generated once per install
+var userID = null;
+
 chrome.tabs.onUpdated.addListener( // On tab update
   function(tabId, changeInfo, tab) {
     if (changeInfo != undefined && changeInfo.url != undefined) {
@@ -16,22 +19,66 @@ chrome.tabs.onUpdated.addListener( // On tab update
   }
 );
 
-
-
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
   if (request.message == "submitTimes") {
     submitTimes(request.videoID);
 
     callback({
       success: true
     });
-  } else if(request.message == "ytvideoid") {
+  } else if (request.message == "ytvideoid") {
     if (previousVideoID != request.videoID) {
       videoIDChange(request.videoID);
     }
+  } else if (request.message == "addSponsorTime") {
+    addSponsorTime(request.time);
+  } else if (request.message == "getSponsorTimes") {
+    getSponsorTimes(request.videoID, function(sponsorTimes) {
+      callback({
+        sponsorTimes: sponsorTimes
+      })
+    });
+
+    //this allows the callback to be called later
+    return true;
   }
 });
 
+
+//gets the sponsor times from memory
+function getSponsorTimes(videoID, callback) {
+  let sponsorTimes = [];
+  let sponsorTimeKey = "sponsorTimes" + videoID;
+  chrome.storage.local.get([sponsorTimeKey], function(result) {
+    let sponsorTimesStorage = result[sponsorTimeKey];
+    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+      sponsorTimes = sponsorTimesStorage;
+    }
+
+    callback(sponsorTimes)
+  });
+}
+
+function addSponsorTime(time) {
+  getSponsorTimes(previousVideoID, 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);
+    } else {
+      //it is a start time
+      let sponsorTimesIndex = sponsorTimes.length;
+      sponsorTimes[sponsorTimesIndex] = [];
+
+      sponsorTimes[sponsorTimesIndex][0] = parseInt(time);
+    }
+
+    //save this info
+    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
+    chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+  });
+}
+
 function submitTimes(videoID) {
   //get the video times from storage
   let sponsorTimeKey = 'sponsorTimes' + videoID;
@@ -42,9 +89,13 @@ function submitTimes(videoID) {
       //submit these times
       for (let i = 0; i < sponsorTimes.length; i++) {
         let xmlhttp = new XMLHttpRequest();
-        //submit the sponsorTime
-        xmlhttp.open('GET', 'http://localhost/api/postVideoSponsorTimes?videoID=' + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1], true);
-        xmlhttp.send();
+
+        let userIDStorage = getUserID(function(userIDStorage) {
+          //submit the sponsorTime
+          xmlhttp.open('GET', 'http://localhost/api/postVideoSponsorTimes?videoID=' + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
+          + "&userID=" + userIDStorage, true);
+          xmlhttp.send();
+        });
       }
     }
   });
@@ -64,21 +115,46 @@ function videoIDChange(currentVideoID) {
           type: "basic",
           title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
           message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-          iconUrl: "icon.png"
+          iconUrl: "./icons/LogoSponsorBlocker256px.png"
         });
       }
 
       //set the previous video id to the currentID
       previousVideoID = currentVideoID;
     });
   } else {
-    console.log(currentVideoID)
     previousVideoID = currentVideoID;
   }
 }
 
+function getUserID(callback) {
+  if (userID != null) {
+    callback(userID);
+  }
+
+  //if it is not cached yet, grab it from storage
+  chrome.storage.local.get(["userID"], function(result) {
+    let userIDStorage = result.userID;
+    if (userIDStorage != undefined) {
+      userID = userIDStorage;
+      callback(userID);
+    } else {
+      //generate a userID
+      userID = generateUUID();
+
+      //save this UUID
+      chrome.storage.local.set({"userID": userID});
+
+      callback(userID);
+    }
+  });
+}
+
 function getYouTubeVideoID(url) { // Return video id or false
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);
   return (match && match[7].length == 11) ? match[7] : false;
-}
+}
+
+//uuid generator function from https://gist.github.com/jed/982883
+function generateUUID(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,generateUUID)}

content.css

@@ -0,0 +1,85 @@
+.sponsorSkipObject {
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+#sponsorSkipLogo {
+	height: 64px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	margin-left: 10px;
+}
+
+#sponsorSkipNotice {
+    min-height: 125px;
+    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);
+}
+
+#sponsorSkipMessage {
+    font-size: 18px;
+    color: #000000;
+    text-align: center;
+    margin-top: 10px;
+	font-weight: bold;
+}
+
+#sponsorSkipInfo {
+	font-size: 10px;
+    color: #000000;
+    text-align: center;
+}
+
+.sponsorSkipButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.sponsorSkipButton:hover {
+	background-color:#bf2a2a;
+}
+.sponsorSkipButton:active {
+	position:relative;
+	top:1px;
+}
+
+.sponsorSkipDontShowButton {
+	-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;
+	background-color:#d0451b;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #942911;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:13px;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #854629;
+}
+.sponsorSkipDontShowButton:hover {
+	background-color:#bc3315;
+}
+.sponsorSkipDontShowButton:active {
+	position:relative;
+	top:1px;
+}