diff options
author | Ajay Ramachandran <[email protected]> | 2019-07-17 16:06:15 -0400 |
---|---|---|
committer | GitHub <[email protected]> | 2019-07-17 16:06:15 -0400 |
commit | 7bfc223cac322f08ae712b2a64975b1fe1b98d2e (patch) | |
tree | 5c05ecce780884ca70519132ef9fa3d640b6cf49 | |
parent | 0ef7795a60432c3126b161fe30e925a37a058e91 (diff) | |
parent | 255f049c9609e7c47b5bb32cf1dca36771baef0c (diff) | |
download | SponsorBlock-7bfc223cac322f08ae712b2a64975b1fe1b98d2e.tar.gz SponsorBlock-7bfc223cac322f08ae712b2a64975b1fe1b98d2e.zip |
Merge pull request #2 from ajayyy/experimentalv0.2
Added voting buttons
-rw-r--r-- | README.md | 6 | ||||
-rw-r--r-- | background.js | 18 | ||||
-rw-r--r-- | config.js (renamed from content-config.js.example) | 2 | ||||
-rw-r--r-- | config.js.example | 3 | ||||
-rw-r--r-- | content.css | 42 | ||||
-rw-r--r-- | content.js | 88 | ||||
-rw-r--r-- | icons/downvote.png | bin | 0 -> 6513 bytes | |||
-rw-r--r-- | icons/upvote.png | bin | 0 -> 6600 bytes | |||
-rw-r--r-- | icons/upvote.svg | 98 | ||||
-rw-r--r-- | manifest.json | 11 | ||||
-rw-r--r-- | popup.css | 16 |
11 files changed, 265 insertions, 19 deletions
@@ -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; @@ -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 Binary files differnew file mode 100644 index 00000000..1af50e78 --- /dev/null +++ b/icons/downvote.png diff --git a/icons/upvote.png b/icons/upvote.png Binary files differnew file mode 100644 index 00000000..56eb5c5b --- /dev/null +++ b/icons/upvote.png 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", @@ -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; |