Added submit button on the video player.

6 files changed, 137 insertions, 16 deletions

diff --git a/content.css b/content.css
index 6ff83351..6126768a 100644
--- a/content.css
+++ b/content.css
@@ -1,3 +1,11 @@
+.playerButton {
+	height: 60%;
+	top: 0;
+	bottom: 0;
+	display: block;
+	margin: auto;
+}
+
 .sponsorSkipObject {
     font-family: 'Source Sans Pro', sans-serif;
 }
@@ -84,6 +92,42 @@
 	filter: brightness(80%);
 }
 
+.submitButton {
+	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;
+}
+.submitButton:hover {
+	background-color:#bf2a2a;
+}
+
+.submitButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.submitButton:active {
+	position:relative;
+	top:1px;
+}
+
+@keyframes rotate {
+	from { transform: rotate(0deg); }
+	  to { transform: rotate(360deg); }
+}
+
 .sponsorSkipButton {
 	background-color:#ec1c1c;
 	-moz-border-radius:28px;
diff --git a/content.js b/content.js
index cafd9db7..f27120c5 100644
--- a/content.js
+++ b/content.js
@@ -74,8 +74,8 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
       dontShowNotice = false;
     }
 
-    if (request.message == "toggleStartSponsorButton") {
-      toggleStartSponsorButton();
+    if (request.message == "changeStartSponsorButton") {
+      changeStartSponsorButton(request.visibility, request.uploadButtonVisible);
     }
 
     if (request.message == "changeVideoPlayerControlsVisibility") {
@@ -97,7 +97,9 @@ function videoIDChange(id) {
   }, function(response) {
     if (response != undefined) {
       let sponsorTimes = response.sponsorTimes;
-      if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+      if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
+        document.getElementById("submitButton").style.display = "unset";
+      } else if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
         toggleStartSponsorButton();
       }
     }
@@ -184,11 +186,7 @@ function addPlayerControlsButton() {
 
   let startSponsorImage = document.createElement("img");
   startSponsorImage.id = "startSponsorImage";
-  startSponsorImage.style.height = "60%";
-  startSponsorImage.style.top = "0";
-  startSponsorImage.style.bottom = "0";
-  startSponsorImage.style.display = "block";
-  startSponsorImage.style.margin = "auto";
+  startSponsorImage.className = "playerButton";
   startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
 
   //add the image to the button
@@ -201,6 +199,7 @@ function addPlayerControlsButton() {
 
 function removePlayerControlsButton() {
   document.getElementById("startSponsorButton").style.display = "none";
+  document.getElementById("submitButton").style.display = "none";
 }
 
 //adds or removes the player controls button to what it should be
@@ -209,6 +208,7 @@ function updateVisibilityOfPlayerControlsButton() {
     removePlayerControlsButton();
   } else {
     addPlayerControlsButton();
+    addSubmitButton();
   }
 }
 
@@ -222,14 +222,56 @@ function startSponsorClicked() {
   });
 }
 
-function toggleStartSponsorButton() {
-  if (showingStartSponsor) {
-    showingStartSponsor = false;
-    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
-  } else {
+function changeStartSponsorButton(visibility, uploadButtonVisible) {
+  if (visibility) {
     showingStartSponsor = true;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
+
+    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible) {
+      document.getElementById("submitButton").style.display = "unset";
+    } else if (!uploadButtonVisible) {
+      //disable submit button
+      document.getElementById("submitButton").style.display = "none";
+    }
+  } else {
+    showingStartSponsor = false;
+    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
+
+    //disable submit button
+    document.getElementById("submitButton").style.display = "none";
+  }
+}
+
+function toggleStartSponsorButton() {
+  changeStartSponsorButton(!showingStartSponsor, true);
+}
+
+//shows the submit button on the video player
+function addSubmitButton() {
+  if (document.getElementById("submitButton") != null) {
+    //it's already added
+    return;
   }
+  
+  //make a submit button
+  let submitButton = document.createElement("button");
+  submitButton.id = "submitButton";
+  submitButton.className = "ytp-button";
+  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.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  submitButton.appendChild(submitImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(submitButton);
 }
 
 //Opens the notice that tells the user that a sponsor was just skipped
@@ -460,6 +502,36 @@ function sponsorMessageStarted() {
     toggleStartSponsorButton();
 }
 
+function submitSponsorTimes() {
+  //add loading animation
+  document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
+  document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  chrome.runtime.sendMessage({
+    message: "submitTimes",
+    videoID: currentVideoID
+  }, function(response) {
+    if (response != undefined) {
+      if (response.statusCode == 200) {
+        //hide loading message
+        document.getElementById("submitButton").style.animation = "unset";
+        document.getElementById("submitButton").style.display = "none";
+
+        //clear the sponsor times
+        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+        chrome.storage.local.set({[sponsorTimeKey]: []});
+      } else {
+        //for a more detailed error message, they should check the popup
+        //show that the upload failed
+        document.getElementById("submitButton").style.animation = "unset";
+        document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
+      }
+    }
+  });
+}
+
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 
diff --git a/icons/PlayerUploadFailedIconSponsorBlocker256px.png b/icons/PlayerUploadFailedIconSponsorBlocker256px.png
new file mode 100644
index 00000000..57c80838
--- /dev/null
+++ b/icons/PlayerUploadFailedIconSponsorBlocker256px.png
diff --git a/icons/PlayerUploadIconSponsorBlocker256px.png b/icons/PlayerUploadIconSponsorBlocker256px.png
new file mode 100644
index 00000000..5be42678
--- /dev/null
+++ b/icons/PlayerUploadIconSponsorBlocker256px.png
diff --git a/manifest.json b/manifest.json
index c742d16d..f0a4ba7b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,6 +22,8 @@
     "icons/IconSponsorBlocker256px.png",
     "icons/PlayerStartIconSponsorBlocker256px.png",
     "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/PlayerUploadIconSponsorBlocker256px.png",
+    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
     "icons/downvote.png"
   ],
diff --git a/popup.js b/popup.js
index d60bba61..3490297a 100644
--- a/popup.js
+++ b/popup.js
@@ -241,14 +241,17 @@ function getSponsorTimesMessage(sponsorTimes) {
 }
 
 function clearTimes() {
-  //check if the player controls should be toggled
-  if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+  //send new sponsor time state to tab
+  if (sponsorTimes.length > 0) {
+    let visibility = sponsorTimes[sponsorTimes.length - 1].length >= 2;
     chrome.tabs.query({
       active: true,
       currentWindow: true
     }, function(tabs) {
       chrome.tabs.sendMessage(tabs[0].id, {
-        message: "toggleStartSponsorButton"
+        message: "changeStartSponsorButton",
+        visibility: visibility,
+        uploadButtonVisible: false
       });
     });
   }