aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2019-07-17 16:06:15 -0400
committerGitHub <[email protected]>2019-07-17 16:06:15 -0400
commit7bfc223cac322f08ae712b2a64975b1fe1b98d2e (patch)
tree5c05ecce780884ca70519132ef9fa3d640b6cf49
parent0ef7795a60432c3126b161fe30e925a37a058e91 (diff)
parent255f049c9609e7c47b5bb32cf1dca36771baef0c (diff)
downloadSponsorBlock-0.2.tar.gz
SponsorBlock-0.2.zip
Merge pull request #2 from ajayyy/experimentalv0.2
Added voting buttons
-rw-r--r--README.md6
-rw-r--r--background.js18
-rw-r--r--config.js (renamed from content-config.js.example)2
-rw-r--r--config.js.example3
-rw-r--r--content.css42
-rw-r--r--content.js88
-rw-r--r--icons/downvote.pngbin0 -> 6513 bytes
-rw-r--r--icons/upvote.pngbin0 -> 6600 bytes
-rw-r--r--icons/upvote.svg98
-rw-r--r--manifest.json11
-rw-r--r--popup.css16
11 files changed, 265 insertions, 19 deletions
diff --git a/README.md b/README.md
index 1a90287f..70756792 100644
--- a/README.md
+++ b/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> \ No newline at end of file
diff --git a/background.js b/background.js
index 3997e50e..c619bcbb 100644
--- a/background.js
+++ b/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
diff --git a/content-config.js.example b/config.js
index b7b454de..005793a7 100644
--- a/content-config.js.example
+++ b/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"; \ No newline at end of file
+var serverAddress = "http://localhost"; \ No newline at end of file
diff --git a/config.js.example b/config.js.example
new file mode 100644
index 00000000..23cc0be3
--- /dev/null
+++ b/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"; \ No newline at end of file
diff --git a/content.css b/content.css
index 89cfcdea..1a85c3ac 100644
--- a/content.css
+++ b/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;
diff --git a/content.js b/content.js
index a15885ae..91e217f6 100644
--- a/content.js
+++ b/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");
diff --git a/icons/downvote.png b/icons/downvote.png
new file mode 100644
index 00000000..1af50e78
--- /dev/null
+++ b/icons/downvote.png
Binary files differ
diff --git a/icons/upvote.png b/icons/upvote.png
new file mode 100644
index 00000000..56eb5c5b
--- /dev/null
+++ b/icons/upvote.png
Binary files differ
diff --git a/icons/upvote.svg b/icons/upvote.svg
new file mode 100644
index 00000000..15efeb81
--- /dev/null
+++ b/icons/upvote.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Capa_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 478.2 478.2"
+ style="enable-background:new 0 0 478.2 478.2;"
+ xml:space="preserve"
+ sodipodi:docname="upvote.svg"
+ inkscape:export-filename="C:\_Projects\_____SponsorSkip\icons\upvote.png"
+ inkscape:export-xdpi="52.797993"
+ inkscape:export-ydpi="52.797993"
+ inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+ id="metadata41"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs39" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1001"
+ id="namedview37"
+ showgrid="false"
+ inkscape:zoom="0.98703469"
+ inkscape:cx="264.34466"
+ inkscape:cy="180.78075"
+ inkscape:window-x="-9"
+ inkscape:window-y="-9"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Capa_1" />
+<g
+ id="g4">
+ <path
+ d="M457.575,325.1c9.8-12.5,14.5-25.9,13.9-39.7c-0.6-15.2-7.4-27.1-13-34.4c6.5-16.2,9-41.7-12.7-61.5 c-15.9-14.5-42.9-21-80.3-19.2c-26.3,1.2-48.3,6.1-49.2,6.3h-0.1c-5,0.9-10.3,2-15.7,3.2c-0.4-6.4,0.7-22.3,12.5-58.1 c14-42.6,13.2-75.2-2.6-97c-16.6-22.9-43.1-24.7-50.9-24.7c-7.5,0-14.4,3.1-19.3,8.8c-11.1,12.9-9.8,36.7-8.4,47.7 c-13.2,35.4-50.2,122.2-81.5,146.3c-0.6,0.4-1.1,0.9-1.6,1.4c-9.2,9.7-15.4,20.2-19.6,29.4c-5.9-3.2-12.6-5-19.8-5h-61 c-23,0-41.6,18.7-41.6,41.6v162.5c0,23,18.7,41.6,41.6,41.6h61c8.9,0,17.2-2.8,24-7.6l23.5,2.8c3.6,0.5,67.6,8.6,133.3,7.3 c11.9,0.9,23.1,1.4,33.5,1.4c17.9,0,33.5-1.4,46.5-4.2c30.6-6.5,51.5-19.5,62.1-38.6c8.1-14.6,8.1-29.1,6.8-38.3 c19.9-18,23.4-37.9,22.7-51.9C461.275,337.1,459.475,330.2,457.575,325.1z M48.275,447.3c-8.1,0-14.6-6.6-14.6-14.6V270.1 c0-8.1,6.6-14.6,14.6-14.6h61c8.1,0,14.6,6.6,14.6,14.6v162.5c0,8.1-6.6,14.6-14.6,14.6h-61V447.3z M431.975,313.4 c-4.2,4.4-5,11.1-1.8,16.3c0,0.1,4.1,7.1,4.6,16.7c0.7,13.1-5.6,24.7-18.8,34.6c-4.7,3.6-6.6,9.8-4.6,15.4c0,0.1,4.3,13.3-2.7,25.8 c-6.7,12-21.6,20.6-44.2,25.4c-18.1,3.9-42.7,4.6-72.9,2.2c-0.4,0-0.9,0-1.4,0c-64.3,1.4-129.3-7-130-7.1h-0.1l-10.1-1.2 c0.6-2.8,0.9-5.8,0.9-8.8V270.1c0-4.3-0.7-8.5-1.9-12.4c1.8-6.7,6.8-21.6,18.6-34.3c44.9-35.6,88.8-155.7,90.7-160.9 c0.8-2.1,1-4.4,0.6-6.7c-1.7-11.2-1.1-24.9,1.3-29c5.3,0.1,19.6,1.6,28.2,13.5c10.2,14.1,9.8,39.3-1.2,72.7 c-16.8,50.9-18.2,77.7-4.9,89.5c6.6,5.9,15.4,6.2,21.8,3.9c6.1-1.4,11.9-2.6,17.4-3.5c0.4-0.1,0.9-0.2,1.3-0.3 c30.7-6.7,85.7-10.8,104.8,6.6c16.2,14.8,4.7,34.4,3.4,36.5c-3.7,5.6-2.6,12.9,2.4,17.4c0.1,0.1,10.6,10,11.1,23.3 C444.875,295.3,440.675,304.4,431.975,313.4z"
+ id="path2" />
+</g>
+<g
+ id="g6">
+</g>
+<g
+ id="g8">
+</g>
+<g
+ id="g10">
+</g>
+<g
+ id="g12">
+</g>
+<g
+ id="g14">
+</g>
+<g
+ id="g16">
+</g>
+<g
+ id="g18">
+</g>
+<g
+ id="g20">
+</g>
+<g
+ id="g22">
+</g>
+<g
+ id="g24">
+</g>
+<g
+ id="g26">
+</g>
+<g
+ id="g28">
+</g>
+<g
+ id="g30">
+</g>
+<g
+ id="g32">
+</g>
+<g
+ id="g34">
+</g>
+</svg> \ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 9c7a7dd6..c742d16d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -8,7 +8,7 @@
"https://*.youtube.com/*"
],
"js": [
- "content-config.js",
+ "config.js",
"content.js"
],
"css": [
@@ -21,7 +21,9 @@
"icons/LogoSponsorBlocker256px.png",
"icons/IconSponsorBlocker256px.png",
"icons/PlayerStartIconSponsorBlocker256px.png",
- "icons/PlayerStopIconSponsorBlocker256px.png"
+ "icons/PlayerStopIconSponsorBlocker256px.png",
+ "icons/upvote.png",
+ "icons/downvote.png"
],
"permissions": [
"tabs",
@@ -33,7 +35,10 @@
"default_popup": "popup.html"
},
"background": {
- "scripts":["background.js"]
+ "scripts":[
+ "config.js",
+ "background.js"
+ ]
},
"icons": {
"16": "icons/IconSponsorBlocker16px.png",
diff --git a/popup.css b/popup.css
index 9c59f74f..64ae0a17 100644
--- a/popup.css
+++ b/popup.css
@@ -29,6 +29,10 @@ body {
.greenButton:hover {
background-color:#bf2a2a;
}
+.greenButton:focus {
+ outline: none;
+ background-color:#bf2a2a;
+}
.greenButton:active {
position:relative;
top:1px;
@@ -54,6 +58,10 @@ body {
.dangerButton:hover {
background-color:#bc3315;
}
+.dangerButton:focus {
+ outline: none;
+ background-color:#bc3315;
+}
.dangerButton:active {
position:relative;
top:1px;
@@ -79,6 +87,10 @@ body {
.warningButton:hover {
background-color:#bc8215;
}
+.warningButton:focus {
+ outline: none;
+ background-color:#bc8215;
+}
.warningButton:active {
position:relative;
top:1px;
@@ -100,6 +112,10 @@ body {
.smallButton:hover {
background-color:#fa9806;
}
+.smallButton:focus {
+ outline: none;
+ background-color:#fa9806;
+}
.smallButton:active {
position:relative;
top:1px;