From 01b61f6192276f0bca3b175dd0109783fb73d8cb Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 17 Jul 2019 19:42:13 -0400 Subject: [PATCH] Made it possible for multiple notices to appear, added an animation for it. --- content.css | 22 +++++++++--- content.js | 97 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 80 insertions(+), 39 deletions(-) diff --git a/content.css b/content.css index 1a85c3ac..3c5bfbda 100644 --- a/content.css +++ b/content.css @@ -2,7 +2,7 @@ font-family: 'Source Sans Pro', sans-serif; } -#sponsorSkipLogo { +.sponsorSkipLogo { height: 64px; position: absolute; top: 0; @@ -11,7 +11,12 @@ margin-left: 10px; } -#sponsorSkipNotice { +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.sponsorSkipNotice { min-height: 165px; min-width: 400px; background-color: rgba(255, 217, 217, 0.8); @@ -19,9 +24,18 @@ z-index: 1; border: 3px solid rgba(0, 0, 0, 0.8); margin-top: -50px; + + animation: fadeIn 0.5s; } -#sponsorSkipMessage { +/* if two are very close to eachother */ +.secondSkipNotice { + margin-left: 500px; + + transition: margin-left 0.2s; +} + +.sponsorSkipMessage { font-size: 18px; color: #000000; text-align: center; @@ -30,7 +44,7 @@ margin-top: 4px; } -#sponsorSkipInfo { +.sponsorSkipInfo { font-size: 10px; color: #000000; text-align: center; diff --git a/content.js b/content.js index 91e217f6..b5e2fc4c 100644 --- a/content.js +++ b/content.js @@ -148,24 +148,26 @@ function sponsorCheck(sponsorTimes) { // Video skipping v.currentTime = sponsorTimes[i][1]; lastSponsorTimeSkipped = sponsorTimes[i][0]; - lastSponsorTimeSkippedUUID = UUIDs[i]; + + let currentUUID = UUIDs[i]; + lastSponsorTimeSkippedUUID = currentUUID; //send out the message saying that a sponsor message was skipped openSkipNotice(); - setTimeout(closeSkipNotice, 7000); + setTimeout(() => closeSkipNotice(currentUUID), 7000); } lastTime = v.currentTime; } } -function goBackToPreviousTime() { - if (lastSponsorTimeSkipped != null) { +function goBackToPreviousTime(UUID) { + if (sponsorTimes != undefined) { //add a tiny bit of time to make sure it is not skipped again - v.currentTime = lastSponsorTimeSkipped + 0.001; + v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001; - closeSkipNotice(); + closeSkipNotice(UUID); } } @@ -239,40 +241,57 @@ function openSkipNotice(){ return; } + let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length; + + if (amountOfPreviousNotices > 0) { + //already exists + + let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0]; + previousNotice.classList.add("secondSkipNotice") + } + + let UUID = lastSponsorTimeSkippedUUID; + let noticeElement = document.createElement("div"); - noticeElement.id = "sponsorSkipNotice"; - noticeElement.className = "sponsorSkipObject"; + //what sponsor time this is about + noticeElement.id = "sponsorSkipNotice" + lastSponsorTimeSkippedUUID; + noticeElement.classList.add("sponsorSkipObject"); + noticeElement.classList.add("sponsorSkipNotice"); + noticeElement.style.zIndex = 1 + amountOfPreviousNotices; let logoElement = document.createElement("img"); - logoElement.id = "sponsorSkipLogo"; + logoElement.id = "sponsorSkipLogo" + lastSponsorTimeSkippedUUID; + logoElement.className = "sponsorSkipLogo"; logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png"); let noticeMessage = document.createElement("div"); - noticeMessage.id = "sponsorSkipMessage"; - noticeMessage.className = "sponsorSkipObject"; + noticeMessage.id = "sponsorSkipMessage" + lastSponsorTimeSkippedUUID; + noticeMessage.classList.add("sponsorSkipMessage"); + noticeMessage.classList.add("sponsorSkipObject"); noticeMessage.innerText = "Hey, you just skipped a sponsor!"; let noticeInfo = document.createElement("p"); - noticeInfo.id = "sponsorSkipInfo"; - noticeInfo.className = "sponsorSkipObject"; + noticeInfo.id = "sponsorSkipInfo" + lastSponsorTimeSkippedUUID; + noticeInfo.classList.add("sponsorSkipInfo"); + noticeInfo.classList.add("sponsorSkipObject"); noticeInfo.innerText = "This message will disapear in 7 seconds"; //thumbs up and down buttons let voteButtonsContainer = document.createElement("div"); - voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer"; + voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + lastSponsorTimeSkippedUUID; voteButtonsContainer.setAttribute("align", "center"); let upvoteButton = document.createElement("img"); - upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + lastSponsorTimeSkippedUUID; upvoteButton.className = "sponsorSkipObject voteButton"; upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); - upvoteButton.addEventListener("click", upvote); + upvoteButton.addEventListener("click", () => upvote(UUID)); let downvoteButton = document.createElement("img"); - downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + lastSponsorTimeSkippedUUID; downvoteButton.className = "sponsorSkipObject voteButton"; downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); - downvoteButton.addEventListener("click", downvote); + downvoteButton.addEventListener("click", () => downvote(UUID)); //add thumbs up and down buttons to the container voteButtonsContainer.appendChild(upvoteButton); @@ -284,12 +303,12 @@ function openSkipNotice(){ let goBackButton = document.createElement("button"); goBackButton.innerText = "Go back"; goBackButton.className = "sponsorSkipButton"; - goBackButton.addEventListener("click", goBackToPreviousTime); + goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID)); let hideButton = document.createElement("button"); hideButton.innerText = "Dismiss"; hideButton.className = "sponsorSkipButton"; - hideButton.addEventListener("click", closeSkipNotice); + hideButton.addEventListener("click", () => closeSkipNotice(UUID)); let dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = "Don't Show This Again"; @@ -316,19 +335,19 @@ function openSkipNotice(){ referenceNode.prepend(noticeElement); } -function upvote() { - vote(1); +function upvote(UUID) { + vote(1, UUID); - closeSkipNotice(); + closeSkipNotice(UUID); } -function downvote() { - vote(0); +function downvote(UUID) { + vote(0, UUID); //change text to say thanks for voting //remove buttons - document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesUpvoteButtonsContainer")); - document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesDownvoteButtonsContainer")); + document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID)); + document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID)); //add thanks for voting text let thanksForVotingText = document.createElement("p"); @@ -341,32 +360,40 @@ function downvote() { 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); + document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText); + document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText); } -function vote(type) { +function vote(type, UUID) { chrome.runtime.sendMessage({ message: "submitVote", type: type, - UUID: lastSponsorTimeSkippedUUID + UUID: UUID }); } -//Closes the notice that tells the user that a sponsor was just skipped -function closeSkipNotice(){ - let notice = document.getElementById("sponsorSkipNotice"); +//Closes the notice that tells the user that a sponsor was just skipped for this UUID +function closeSkipNotice(UUID){ + let notice = document.getElementById("sponsorSkipNotice" + UUID); if (notice != null) { notice.remove(); } } +//Closes all notices that tell the user that a sponsor was just skipped +function closeAllSkipNotices(){ + let notices = document.getElementsByClassName("sponsorSkipNotice"); + for (let i = 0; i < notices.length; i++) { + notices[i].remove(); + } +} + function dontShowNoticeAgain() { chrome.storage.local.set({"dontShowNoticeAgain": true}); dontShowNotice = true; - closeSkipNotice(); + closeAllSkipNotices(); } function sponsorMessageStarted() {