Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 19:47:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from ajayyy/experimental

Browse Source 
Added voting buttons
This commit is contained in:
Ajay Ramachandran
2019-07-17 16:06:15 -04:00
committed by GitHub
parent 0ef7795a60 255f049c96
commit 7bfc223cac
11 changed files with 265 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -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>

18
background.js
View File

@@ -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

2
content-config.js.example → config.js
View File

@@ -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";
var serverAddress = "http://localhost";

3
config.js.example Normal file
View File

@@ -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";

42
content.css
View File

@@ -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;

88
content.js
View File

@@ -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");

BIN
icons/downvote.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
icons/upvote.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

98
icons/upvote.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

11
manifest.json
View File

@@ -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",

16
popup.css
View File

@@ -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;