Merge pull request #46 from ajayyy/experimental

Improved video controls

README.md

@@ -7,7 +7,7 @@ SponsorBlock is an extension that will skip over sponsored segments of YouTube v
 
 # Available for Chrome and Firefox
 
-Chrome: https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone/
+Chrome: https://chrome.google.com/webstore/detail/ajjollijmimolcncegpgkbilohbhjnhi
 
 Firefox: https://addons.mozilla.org/addon/sponsorblock/
 

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,7 +59,6 @@ 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);
@@ -63,7 +66,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
 
     //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,6 +296,7 @@ function removePlayerControlsButton() {
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
   addPlayerControlsButton();
+  addInfoButton();
   addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
@@ -293,6 +304,9 @@ function updateVisibilityOfPlayerControlsButton() {
 }
 
 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.13",
+  "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;
 }
 
@@ -25,6 +25,16 @@ body {
 	filter: brightness(80%);
 }
 
+#discordButtonContainer {
+	font-size: 12px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .greenButton {
 	background-color:#ec1c1c;
   -moz-border-radius:28px;

popup.html

@@ -100,6 +100,20 @@
     
           </div>
 
+          <div id="discordButtonContainer" style="display: none">
+            <br/>
+
+            <a href="https://discord.gg/QnmVMpU" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
+
+            <br/>
+
+            Come join the official discord server to give suggestions and feedback!
+
+            <br/>
+
+            <span id="hideDiscordButton" class="smallLink">Hide this</span>
+          </div>
+
           <div id="optionsButtonContainer">
               <br/>
               <br/>

popup.js

@@ -20,6 +20,9 @@ SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTim
 SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
 SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
 SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
+// discordButtons
+SB.discordButtonContainer = document.getElementById("discordButtonContainer");
+SB.hideDiscordButton = document.getElementById("hideDiscordButton");
 
 //setup click listeners
 SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
@@ -32,6 +35,8 @@ SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracki
 SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
 SB.optionsButton.addEventListener("click", openOptions);
 SB.reportAnIssue.addEventListener("click", reportAnIssue);
+SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
+
 
 //if true, the button now selects the end time
 var startTimeChosen = false;
@@ -45,6 +50,26 @@ var currentVideoID = null;
 //is this a YouTube tab?
 var isYouTubeTab = false;
 
+//see if discord link can be shown
+chrome.storage.sync.get(["hideDiscordLink"], function(result) {
+  let hideDiscordLink = result.hideDiscordLink;
+  if (hideDiscordLink == undefined || !hideDiscordLink) {
+    chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
+      let hideDiscordLaunches = result.hideDiscordLaunches;
+      //only if less than 5 launches
+      if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
+        SB.discordButtonContainer.style.display = null;
+        
+        if (hideDiscordLaunches == undefined) {
+          hideDiscordButton = 1;
+        }
+
+        chrome.storage.sync.set({"hideDiscordLaunches": hideDiscordButton + 1});
+      }
+    });
+  }
+});
+
 //if the don't show notice again variable is true, an option to 
 //  disable should be available
 chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
@@ -195,40 +220,47 @@ function sendSponsorStartMessage() {
     }, tabs => {
       chrome.tabs.sendMessage(
         tabs[0].id,
-        {from: 'popup', message: 'sponsorStart'}
+        {from: 'popup', message: 'sponsorStart'},
+        startSponsorCallback
       );
     });
 }
 
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "time") {
-    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
+function startSponsorCallback(response) {
+  let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
 
-    if (sponsorTimes[sponsorTimesIndex] == undefined) {
-      sponsorTimes[sponsorTimesIndex] = [];
-    }
-
-    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time;
-
-    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
-
-    updateStartTimeChosen();
-
-    //display video times on screen
-    displaySponsorTimes();
-
-    //show submission section
-    document.getElementById("submissionSection").style.display = "unset";
-
-    showSubmitTimesIfNecessary();
+  if (sponsorTimes[sponsorTimesIndex] == undefined) {
+    sponsorTimes[sponsorTimesIndex] = [];
   }
-});
+
+  sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
+
+  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+  chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+
+  updateStartTimeChosen();
+
+  //display video times on screen
+  displaySponsorTimes();
+
+  //show submission section
+  document.getElementById("submissionSection").style.display = "unset";
+
+  showSubmitTimesIfNecessary();
+}
 
 //display the video times from the array
 function displaySponsorTimes() {
   //set it to the message
-  document.getElementById("sponsorMessageTimes").innerHTML = getSponsorTimesMessage(sponsorTimes);
+  let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
+
+  //remove all children
+  while (sponsorMessageTimes.firstChild) {
+    sponsorMessageTimes.removeChild(sponsorMessageTimes.firstChild);
+  }
+
+  //add sponsor times
+  sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
 }
 
 //display the video times from the array at the top, in a different section
@@ -311,6 +343,185 @@ function getSponsorTimesMessage(sponsorTimes) {
   return sponsorTimesMessage;
 }
 
+//get the message that visually displays the video times
+//this version is a div that contains each with delete buttons
+function getSponsorTimesMessageDiv(sponsorTimes) {
+  // let sponsorTimesMessage = "";
+  let sponsorTimesContainer = document.createElement("div");
+  sponsorTimesContainer.id = "sponsorTimesContainer";
+
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    let currentSponsorTimeContainer = document.createElement("div");
+    currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
+    let currentSponsorTimeMessage = "";
+
+    let deleteButton = document.createElement("span");
+    deleteButton.id = "sponsorTimeDeleteButton" + i;
+    deleteButton.innerText = "Delete";
+    deleteButton.className = "smallLink";
+    let index = i;
+    deleteButton.addEventListener("click", () => deleteSponsorTime(index));
+
+    let spacer = document.createElement("span");
+    spacer.innerText = " ";
+
+    let editButton = document.createElement("span");
+    editButton.id = "sponsorTimeEditButton" + i;
+    editButton.innerText = "Edit";
+    editButton.className = "smallLink";
+    editButton.addEventListener("click", () => editSponsorTime(index));
+
+    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;
+      }
+
+      currentSponsorTimeMessage += timeMessage;
+    }
+
+    currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
+    sponsorTimesContainer.appendChild(currentSponsorTimeContainer);
+    sponsorTimesContainer.appendChild(deleteButton);
+
+    //only if it is a complete sponsor time
+    if (sponsorTimes[i].length > 1) {
+      sponsorTimesContainer.appendChild(spacer);
+      sponsorTimesContainer.appendChild(editButton);
+    }
+  }
+
+  return sponsorTimesContainer;
+}
+
+function editSponsorTime(index) {
+  let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
+
+  //get sponsor time minutes and seconds boxes
+  let startTimeMinutes = document.createElement("input");
+  startTimeMinutes.id = "startTimeMinutes" + index;
+  startTimeMinutes.type = "text";
+  startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
+  startTimeMinutes.style.width = "35";
+  
+  let startTimeSeconds = document.createElement("input");
+  startTimeSeconds.id = "startTimeSeconds" + index;
+  startTimeSeconds.type = "text";
+  startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
+  startTimeSeconds.style.width = "42";
+
+  let endTimeMinutes = document.createElement("input");
+  endTimeMinutes.id = "endTimeMinutes" + index;
+  endTimeMinutes.type = "text";
+  endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
+  endTimeMinutes.style.width = "35";
+  
+  let endTimeSeconds = document.createElement("input");
+  endTimeSeconds.id = "endTimeSeconds" + index;
+  endTimeSeconds.type = "text";
+  endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
+  endTimeSeconds.style.width = "42";
+
+  let colonText = document.createElement("span");
+  colonText.innerText = ":";
+
+  let toText = document.createElement("span");
+  toText.innerText = " to ";
+
+  //remove all children to replace
+  while (sponsorTimeContainer.firstChild) {
+    sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
+  }
+
+  sponsorTimeContainer.appendChild(startTimeMinutes);
+  sponsorTimeContainer.appendChild(colonText);
+  sponsorTimeContainer.appendChild(startTimeSeconds);
+  sponsorTimeContainer.appendChild(toText);
+  sponsorTimeContainer.appendChild(endTimeMinutes);
+  sponsorTimeContainer.appendChild(colonText);
+  sponsorTimeContainer.appendChild(endTimeSeconds);
+
+  //add save button and remove edit button
+  let saveButton = document.createElement("span");
+  saveButton.id = "sponsorTimeSaveButton" + index;
+  saveButton.innerText = "Save";
+  saveButton.className = "smallLink";
+  saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
+
+  let editButton = document.getElementById("sponsorTimeEditButton" + index);
+  let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
+
+  sponsorTimesContainer.removeChild(editButton);
+  sponsorTimesContainer.appendChild(saveButton);
+}
+
+function saveSponsorTimeEdit(index) {
+  let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
+  let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
+
+  let endTimeMinutes = document.getElementById("endTimeMinutes" + index);
+  let endTimeSeconds = document.getElementById("endTimeSeconds" + index);
+
+  sponsorTimes[index][0] = parseInt(startTimeMinutes.value) * 60 + parseFloat(startTimeSeconds.value);
+  sponsorTimes[index][1] = parseInt(endTimeMinutes.value) * 60 + parseFloat(endTimeSeconds.value);
+
+  //save this
+  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+  chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+
+  displaySponsorTimes();
+}
+
+//deletes the sponsor time submitted at an index
+function deleteSponsorTime(index) {
+  //if it is not a complete sponsor time
+  if (sponsorTimes[index].length < 2) {
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeStartSponsorButton",
+        showStartSponsor: true,
+        uploadButtonVisible: false
+      });
+    });
+
+    resetStartTimeChosen();
+  }
+
+  sponsorTimes.splice(index, 1);
+
+  //save this
+  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+  chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+
+  //update display
+  displaySponsorTimes();
+
+  //if they are all removed
+  if (sponsorTimes.length == 0) {
+    //update chrome tab
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeStartSponsorButton",
+        showStartSponsor: true,
+        uploadButtonVisible: false
+      });
+    });
+
+    //hide submission section
+    document.getElementById("submissionSection").style.display = "none";
+  }
+}
+
 function clearTimes() {
   //send new sponsor time state to tab
   if (sponsorTimes.length > 0) {
@@ -543,6 +754,12 @@ function vote(type, UUID) {
   });
 }
 
+function hideDiscordButton() {
+  chrome.storage.sync.set({"hideDiscordLink": false});
+
+  SB.discordButtonContainer.style.display = "none";
+}
+
 //converts time in seconds to minutes:seconds
 function getFormattedTime(seconds) {
   let minutes = Math.floor(seconds / 60);
@@ -557,6 +774,24 @@ function getFormattedTime(seconds) {
   return formatted;
 }
 
+//converts time in seconds to minutes
+function getTimeInMinutes(seconds) {
+  let minutes = Math.floor(seconds / 60);
+
+  return minutes;
+}
+
+//converts time in seconds to seconds past the last minute
+function getTimeInFormattedSeconds(seconds) {
+  let secondsFormatted = (seconds % 60).toFixed(3);
+
+  if (secondsFormatted < 10) {
+    secondsFormatted = "0" + secondsFormatted;
+  }
+
+  return secondsFormatted;
+}
+
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();