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 Gregor Cresnar from www.flaticon.com and are licensed by CC 3.0 BY \ 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 similarity index 68% rename from content-config.js.example rename to 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 Binary files /dev/null and b/icons/downvote.png differ diff --git a/icons/upvote.png b/icons/upvote.png new file mode 100644 index 00000000..56eb5c5b Binary files /dev/null and b/icons/upvote.png 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 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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;