aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2019-07-29 16:25:39 -0400
committerGitHub <[email protected]>2019-07-29 16:25:39 -0400
commite3e4121a21b98a839190b32fd994eec93890b21d (patch)
tree8620776200b4f67ab000c687bc17187985c3b209
parent6673272e14a5ad2c201733ffb6b581428084598b (diff)
parenta75ea5009807e1c2f1b418d382db42c94a1058b0 (diff)
downloadSponsorBlock-1.0.15.tar.gz
SponsorBlock-1.0.15.zip
Merge pull request #46 from ajayyy/experimentalv1.0.15
Improved video controls
-rw-r--r--content.css12
-rw-r--r--content.js158
-rw-r--r--firefox_manifest.json3
-rw-r--r--icons/PlayerInfoIconSponsorBlocker256px.pngbin0 -> 15797 bytes
-rw-r--r--manifest.json8
-rw-r--r--popup.css2
-rw-r--r--popup.js242
7 files changed, 392 insertions, 33 deletions
diff --git a/content.css b/content.css
index c4e8e7bf..933eb40f 100644
--- a/content.css
+++ b/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;
diff --git a/content.js b/content.js
index bc33e850..e41cefc8 100644
--- a/content.js
+++ b/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();
diff --git a/firefox_manifest.json b/firefox_manifest.json
index 4c2a0bad..0fb7e834 100644
--- a/firefox_manifest.json
+++ b/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",
diff --git a/icons/PlayerInfoIconSponsorBlocker256px.png b/icons/PlayerInfoIconSponsorBlocker256px.png
new file mode 100644
index 00000000..8a0e44a7
--- /dev/null
+++ b/icons/PlayerInfoIconSponsorBlocker256px.png
Binary files differ
diff --git a/manifest.json b/manifest.json
index c46fc801..c14a16aa 100644
--- a/manifest.json
+++ b/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",
diff --git a/popup.css b/popup.css
index fd3d33d3..d8053170 100644
--- a/popup.css
+++ b/popup.css
@@ -8,7 +8,7 @@ h1 {
body {
font-size: 14px;
- width: 300px;
+ min-width: 300px;
background-color: #ffd9d9;
}
diff --git a/popup.js b/popup.js
index eadd1b4e..98fb095d 100644
--- a/popup.js
+++ b/popup.js
@@ -220,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] = [];
- }
+ if (sponsorTimes[sponsorTimesIndex] == undefined) {
+ sponsorTimes[sponsorTimesIndex] = [];
+ }
- sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time;
+ sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
- let sponsorTimeKey = "sponsorTimes" + currentVideoID;
- chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+ let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+ chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
- updateStartTimeChosen();
+ updateStartTimeChosen();
- //display video times on screen
- displaySponsorTimes();
+ //display video times on screen
+ displaySponsorTimes();
- //show submission section
- document.getElementById("submissionSection").style.display = "unset";
+ //show submission section
+ document.getElementById("submissionSection").style.display = "unset";
- showSubmitTimesIfNecessary();
- }
-});
+ 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
@@ -336,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) {
@@ -588,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();