Merge pull request #2 from ajayyy/experimental

Added voting buttons

README.md

@@ -21,8 +21,12 @@ This project is partially based off of [this experimental extension](https://git
 
 # Chrome extension
 
-It will be on the chrome webstore soon once I get some more UI features in, such as an icon. For now, you can load this project as an unpacked extension. Make sure to rename the `content-config.js.example` file to `content-config.js` before installing.
+It will be on the chrome webstore soon once I get some more UI features in, such as an icon. For now, you can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
 
 # Firefox extension
 
 None at the moment
+
+# Credit
+
+Some i 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>

background.js

@@ -41,6 +41,8 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 
     //this allows the callback to be called later
     return true;
+  } else if (request.message == "submitVote") {
+    submitVote(request.type, request.UUID)
   }
 });
 
@@ -79,6 +81,19 @@ function addSponsorTime(time) {
   });
 }
 
+function submitVote(type, UUID) {
+  let xmlhttp = new XMLHttpRequest();
+
+  getUserID(function(userID) {
+    //publish this vote
+    console.log(serverAddress + "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type);
+    xmlhttp.open('GET', serverAddress + "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, true);
+
+    //submit this vote
+    xmlhttp.send();
+  })
+}
+
 function submitTimes(videoID) {
   //get the video times from storage
   let sponsorTimeKey = 'sponsorTimes' + videoID;
@@ -92,7 +107,7 @@ function submitTimes(videoID) {
 
         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]
+          xmlhttp.open('GET', serverAddress + "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
           + "&userID=" + userIDStorage, true);
           xmlhttp.send();
         });
@@ -130,6 +145,7 @@ function videoIDChange(currentVideoID) {
 function getUserID(callback) {
   if (userID != null) {
     callback(userID);
+    return;
   }
 
   //if it is not cached yet, grab it from storage

content-config.js.example → config.js

@@ -1,3 +1,3 @@
 //this file is loaded along iwth content.js
 //this file sets the server to connect to, and is gitignored
-var serverAddresss = "https://sponsor.ajay.app";
+var serverAddress = "http://localhost";

config.js.example

@@ -0,0 +1,3 @@
+//this file is loaded along iwth content.js
+//this file sets the server to connect to, and is gitignored
+var serverAddress = "https://sponsor.ajay.app";

content.css

@@ -12,12 +12,13 @@
 }
 
 #sponsorSkipNotice {
-    min-height: 125px;
+    min-height: 165px;
     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;
 }
 
 #sponsorSkipMessage {
@@ -26,12 +27,37 @@
     text-align: center;
     margin-top: 10px;
 	font-weight: bold;
+	margin-top: 4px;
 }
 
 #sponsorSkipInfo {
 	font-size: 10px;
     color: #000000;
-    text-align: center;
+	text-align: center;
+	margin-top: 0px;
+}
+
+#sponsorTimesThanksForVotingText {
+	font-size: 20px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+}
+
+#sponsorTimesThanksForVotingInfoText {
+	font-size: 12px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
 }
 
 .sponsorSkipButton {
@@ -54,6 +80,12 @@
 .sponsorSkipButton:hover {
 	background-color:#bf2a2a;
 }
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
 .sponsorSkipButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +111,12 @@
 .sponsorSkipDontShowButton:hover {
 	background-color:#bc3315;
 }
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
 .sponsorSkipDontShowButton:active {
 	position:relative;
 	top:1px;

content.js

@@ -11,8 +11,9 @@ if(id = getYouTubeVideoID(document.URL)){ // Direct Links
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
 
-//the actual sponsorTimes if loaded
+//the actual sponsorTimes if loaded and UUIDs associated with them
 var sponsorTimes = undefined;
+var UUIDs = undefined;
 
 //the video
 var v;
@@ -23,6 +24,8 @@ var lastTime;
 //the last time in the video a sponsor was skipped
 //used for the go back button
 var lastSponsorTimeSkipped = null;
+//used for ratings
+var lastSponsorTimeSkippedUUID = null;
 
 //if showing the start sponsor button or the end sponsor button on the player
 var showingStartSponsor = true;
@@ -114,13 +117,14 @@ function sponsorsLookup(id) {
     let xmlhttp = new XMLHttpRequest();
 
     //check database for sponsor times
-    xmlhttp.open('GET', serverAddresss + "/api/getVideoSponsorTimes?videoID=" + id, true);
+    xmlhttp.open('GET', serverAddress + "/api/getVideoSponsorTimes?videoID=" + id, true);
 
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           sponsorDataFound = true;
 
           sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
+          UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
 
           // If the sponsor data exists, add the event to run on the videos "ontimeupdate"
           v.ontimeupdate = function () { 
@@ -135,15 +139,16 @@ function sponsorsLookup(id) {
 
 function sponsorCheck(sponsorTimes) { // Video skipping
     //see if any sponsor start time was just passed
-    sponsorTimes.forEach(function (sponsorTime, index) { // Foreach Sponsor in video
+    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 && sponsorTime[0] >= lastTime && sponsorTime[0] <= v.currentTime) {
+        if (Math.abs(v.currentTime - lastTime) < 1 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime) {
           //skip it
-          v.currentTime = sponsorTime[1];
+          v.currentTime = sponsorTimes[i][1];
 
-          lastSponsorTimeSkipped = sponsorTime[0];
+          lastSponsorTimeSkipped = sponsorTimes[i][0];
+          lastSponsorTimeSkippedUUID = UUIDs[i]; 
 
           //send out the message saying that a sponsor message was skipped
           openSkipNotice();
@@ -152,7 +157,7 @@ function sponsorCheck(sponsorTimes) { // Video skipping
         }
 
         lastTime = v.currentTime;
-    });
+    }
 }
 
 function goBackToPreviousTime() {
@@ -166,6 +171,11 @@ function goBackToPreviousTime() {
 
 //Adds a sponsorship starts button to the player controls
 function addPlayerControlsButton() {
+  if (document.getElementById("startSponsorButton") != null) {
+    //it's already added
+    return;
+  }
+
   let startSponsorButton = document.createElement("button");
   startSponsorButton.id = "startSponsorButton";
   startSponsorButton.className = "ytp-button";
@@ -245,26 +255,44 @@ function openSkipNotice(){
   let noticeInfo = document.createElement("p");
   noticeInfo.id = "sponsorSkipInfo";
   noticeInfo.className = "sponsorSkipObject";
-	noticeInfo.innerText = "This message will disapear in 7 seconds";
+  noticeInfo.innerText = "This message will disapear in 7 seconds";
+
+  //thumbs up and down buttons
+  let voteButtonsContainer = document.createElement("div");
+  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer";
+  voteButtonsContainer.setAttribute("align", "center");
+
+  let upvoteButton = document.createElement("img");
+  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer"
+  upvoteButton.className = "sponsorSkipObject voteButton";
+  upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+  upvoteButton.addEventListener("click", upvote);
+
+  let downvoteButton = document.createElement("img");
+  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer"
+  downvoteButton.className = "sponsorSkipObject voteButton";
+  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+  downvoteButton.addEventListener("click", downvote);
+
+  //add thumbs up and down buttons to the container
+  voteButtonsContainer.appendChild(upvoteButton);
+  voteButtonsContainer.appendChild(downvoteButton);
 
   let buttonContainer = document.createElement("div");
   buttonContainer.setAttribute("align", "center");
 
   let goBackButton = document.createElement("button");
   goBackButton.innerText = "Go back";
-  goBackButton.className = "sponsorSkipObject";
   goBackButton.className = "sponsorSkipButton";
   goBackButton.addEventListener("click", goBackToPreviousTime);
 
   let hideButton = document.createElement("button");
   hideButton.innerText = "Dismiss";
-  hideButton.className = "sponsorSkipObject";
   hideButton.className = "sponsorSkipButton";
   hideButton.addEventListener("click", closeSkipNotice);
 
   let dontShowAgainButton = document.createElement("button");
   dontShowAgainButton.innerText = "Don't Show This Again";
-  dontShowAgainButton.className = "sponsorSkipObject";
   dontShowAgainButton.className = "sponsorSkipDontShowButton";
   dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
@@ -277,6 +305,7 @@ function openSkipNotice(){
   noticeElement.appendChild(logoElement);
   noticeElement.appendChild(noticeMessage);
   noticeElement.appendChild(noticeInfo);
+  noticeElement.appendChild(voteButtonsContainer);
   noticeElement.appendChild(buttonContainer);
 
   let referenceNode = document.getElementById("info");
@@ -287,6 +316,43 @@ function openSkipNotice(){
   referenceNode.prepend(noticeElement);
 }
 
+function upvote() {
+  vote(1);
+
+  closeSkipNotice();
+}
+
+function downvote() {
+  vote(0);
+
+  //change text to say thanks for voting
+  //remove buttons
+  document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesUpvoteButtonsContainer"));
+  document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesDownvoteButtonsContainer"));
+
+  //add thanks for voting text
+  let thanksForVotingText = document.createElement("p");
+  thanksForVotingText.id = "sponsorTimesThanksForVotingText";
+  thanksForVotingText.innerText = "Thanks for voting!"
+
+  //add extra info for voting
+  let thanksForVotingInfoText = document.createElement("p");
+  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
+  thanksForVotingInfoText.innerText = "Hit go back to get to where you came from."
+
+  //add element to div
+  document.getElementById("sponsorTimesVoteButtonsContainer").appendChild(thanksForVotingText);
+  document.getElementById("sponsorTimesVoteButtonsContainer").appendChild(thanksForVotingInfoText);
+}
+
+function vote(type) {
+  chrome.runtime.sendMessage({
+    message: "submitVote",
+    type: type,
+    UUID: lastSponsorTimeSkippedUUID
+  });
+}
+
 //Closes the notice that tells the user that a sponsor was just skipped
 function closeSkipNotice(){
   let notice = document.getElementById("sponsorSkipNotice");