Merge pull request #46 from ajayyy/experimental

Improved video controls

content.css

@@ -1,3 +1,15 @@
+.popup {
+    z-index: 10;
+    width: 100%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .playerButtonImage {
 	height: 60%;
 	top: 0;

content.js

@@ -32,6 +32,10 @@ var showingStartSponsor = true;
 //should the video controls buttons be added
 var hideVideoPlayerControls = false;
 
+//becomes true when isInfoFound is called
+//this is used to close the popup on YouTube when the other popup opens
+var popupInitialised = false;
+
 //should view counts be tracked
 var trackViewCount = false;
 chrome.storage.sync.get(["trackViewCount"], function(result) {
@@ -55,15 +59,14 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
 
 chrome.runtime.onMessage.addListener( // Detect URL Changes
   function(request, sender, sendResponse) {
-	  console.log(request.message)
     //message from background script
     if (request.message == "ytvideoid") { 
       videoIDChange(request.id);
     }
 
     //messages from popup script
     if (request.message == "sponsorStart") {
-      sponsorMessageStarted();
+      sponsorMessageStarted(sendResponse);
     }
 
     if (request.message == "isInfoFound") {
@@ -72,7 +75,14 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
         UUIDs: UUIDs
-      })
+      });
+
+      if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
+        //the popup should be closed now that another is opening
+        closeInfoMenu();
+      }
+
+      popupInitialised = true;
     }
 
     if (request.message == "getVideoID") {
@@ -286,13 +296,17 @@ function removePlayerControlsButton() {
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
   addPlayerControlsButton();
+  addInfoButton();
   addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
   }
 }
 
 function startSponsorClicked() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
   toggleStartSponsorButton();
 
   //send back current time with message
@@ -329,6 +343,32 @@ function toggleStartSponsorButton() {
   changeStartSponsorButton(!showingStartSponsor, true);
 }
 
+//shows the info button on the video player
+function addInfoButton() {
+  if (document.getElementById("infoButton") != null) {
+    //it's already added
+    return;
+  }
+
+  //make a submit button
+  let infoButton = document.createElement("button");
+  infoButton.id = "infoButton";
+  infoButton.className = "ytp-button playerButton";
+  infoButton.setAttribute("title", "Open SponsorBlock Popup");
+  infoButton.addEventListener("click", openInfoMenu);
+
+  let infoImage = document.createElement("img");
+  infoImage.id = "infoButtonImage";
+  infoImage.className = "playerButtonImage";
+  infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  infoButton.appendChild(infoImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(infoButton);
+}
+
 //shows the submit button on the video player
 function addSubmitButton() {
   if (document.getElementById("submitButton") != null) {
@@ -357,6 +397,50 @@ function addSubmitButton() {
   referenceNode.prepend(submitButton);
 }
 
+function openInfoMenu() {
+  if (document.getElementById("sponsorBlockPopupContainer") != null) {
+    //it's already added
+    return;
+  }
+
+  popupInitialised = false;
+
+  //hide info button
+  document.getElementById("infoButton").style.display = "none";
+
+  let popup = document.createElement("div");
+  popup.id = "sponsorBlockPopupContainer";
+
+  let popupFrame = document.createElement("iframe");
+  popupFrame.id = "sponsorBlockPopupFrame"
+  popupFrame.src = chrome.extension.getURL("popup.html");
+  popupFrame.className = "popup";
+
+  //close button
+  let closeButton = document.createElement("div");
+  closeButton.innerText = "Close Popup";
+  closeButton.classList = "smallLink";
+  closeButton.setAttribute("align", "center");
+  closeButton.addEventListener("click", closeInfoMenu);
+
+  popup.appendChild(closeButton);
+  popup.appendChild(popupFrame);
+
+  let parentNode = document.getElementById("secondary");
+
+  parentNode.prepend(popup);
+}
+
+function closeInfoMenu() {
+  let popup = document.getElementById("sponsorBlockPopupContainer");
+  if (popup != null) {
+    popup.remove();
+
+    //show info button
+    document.getElementById("infoButton").style.display = "unset";
+  }
+}
+
 //Opens the notice that tells the user that a sponsor was just skipped
 function openSkipNotice(UUID){
   if (dontShowNotice) {
@@ -593,27 +677,47 @@ function dontShowNoticeAgain() {
   closeAllSkipNotices();
 }
 
-function sponsorMessageStarted() {
+function sponsorMessageStarted(callback) {
     let v = document.querySelector('video');
 
     //send back current time
-    chrome.runtime.sendMessage({
-      message: "time",
+    callback({
       time: v.currentTime
-    });
+    })
 
     //update button
     toggleStartSponsorButton();
 }
 
 function submitSponsorTimes() {
-  if(!confirm("Are you sure you want to submit this?")) return;
-
   if (document.getElementById("submitButton").style.display == "none") {
     //don't submit, not ready
     return;
   }
 
+  //it can't update to this info yet
+  closeInfoMenu();
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      let confirmMessage = "Are you sure you want to submit this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += "\n\nTo see more information, open the popup by clicking the extensions icon in the top right corner."
+      if(!confirm(confirmMessage)) return;
+
+      sendSubmitMessage();
+    }
+  });
+
+}
+
+//send the message to the background js
+//called after all the checks have been made that it's okay to do so
+function sendSubmitMessage(){
   //add loading animation
   document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
   document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
@@ -649,6 +753,42 @@ function submitSponsorTimes() {
   });
 }
 
+//get the message that visually displays the video times
+function getSponsorTimesMessage(sponsorTimes) {
+  let sponsorTimesMessage = "";
+
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    for (let s = 0; s < sponsorTimes[i].length; s++) {
+      let timeMessage = getFormattedTime(sponsorTimes[i][s]);
+      //if this is an end time
+      if (s == 1) {
+        timeMessage = " to " + timeMessage;
+      } else if (i > 0) {
+        //add commas if necessary
+        timeMessage = ", " + timeMessage;
+      }
+
+      sponsorTimesMessage += timeMessage;
+    }
+  }
+
+  return sponsorTimesMessage;
+}
+
+//converts time in seconds to minutes:seconds
+function getFormattedTime(seconds) {
+  let minutes = Math.floor(seconds / 60);
+  let secondsDisplay = Math.round(seconds - minutes * 60);
+  if (secondsDisplay < 10) {
+    //add a zero
+    secondsDisplay = "0" + secondsDisplay;
+  }
+
+  let formatted = minutes+ ":" + secondsDisplay;
+
+  return formatted;
+}
+
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 

firefox_manifest.json

@@ -26,7 +26,8 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png"
   ],
   "permissions": [
     "tabs",

manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
   "short_name": "SponsorBlock",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
@@ -26,7 +26,9 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
     "tabs",

popup.css

@@ -8,7 +8,7 @@ h1 {
 
 body {
   font-size: 14px;
-  width: 300px;
+  min-width: 300px;
   background-color: #ffd9d9;
 }