diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 07a5d180..2a50ab10 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -58,7 +58,7 @@ "message": "Never Show" }, "hitGoBack": { - "message": "Hit go back to get to where you came from." + "message": "Hit unskip to get to where you came from." }, "goBack": { "message": "Unskip" @@ -89,7 +89,7 @@ "message": "This probably isn't a YouTube tab, or you clicked too early. \n If you know this is a YouTube tab,\n close this popup and open it again." }, "Voted": { - "message": "Thanks for voting!" + "message": "Voted!" }, "voteFail": { "message": "You have already voted this way before." diff --git a/content.css b/content.css index 5cfeca6f..77d2657c 100644 --- a/content.css +++ b/content.css @@ -61,13 +61,15 @@ .sponsorBlockSpacer { background-color: rgb(100, 100, 100); border-color: rgb(100, 100, 100); + + margin-left: 5px; } .sponsorSkipNotice { - min-width: 270px; + min-width: 280px; background-color: rgba(28, 28, 28, 0.9); position: absolute; - right: 0; + right: 5px; bottom: 100px; right: 10px; @@ -75,7 +77,9 @@ animation: fadeIn 0.5s; - border-spacing: 10px 10px; + border-spacing: 5px 10px; + padding-left: 5px; + padding-right: 5px; } .sponsorSkipNoticeTimeLeft { @@ -90,7 +94,7 @@ /* if two are very close to eachother */ .secondSkipNotice { - bottom: 280px; + bottom: 250px; transition: bottom 0.2s; } @@ -106,6 +110,8 @@ position: absolute; float: right; + + margin-right: 5px; } .sponsorSkipNoticeRightButton { @@ -126,7 +132,6 @@ cursor: pointer; - margin-left: 10px; margin-right: 10px; } @@ -162,18 +167,19 @@ margin-top: 0px; } +.sponsorTimesVoteButtonMessage { + float: left; +} + .sponsorTimesInfoMessage { - font-size: 15px; - font-weight: bold; - color: #000000; + font-size: 13.3333px; + color: rgb(235, 235, 235); text-align: center; } .voteButton { height: 18px; cursor: pointer; - - margin-right: 10px; } .voteButton:hover { filter: brightness(80%); diff --git a/content.js b/content.js index 36aedca5..2470fe48 100644 --- a/content.js +++ b/content.js @@ -870,25 +870,9 @@ function openSkipNotice(UUID){ noticeElement.classList.add("sponsorSkipNotice"); noticeElement.style.zIndex = 50 + amountOfPreviousNotices; - // let logoElement = document.createElement("img"); - // logoElement.id = "sponsorSkipLogo" + UUID; - // logoElement.className = "sponsorSkipLogo"; - // logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png"); - - // let noticeMessage = document.createElement("div"); - // noticeMessage.id = "sponsorSkipMessage" + UUID; - // noticeMessage.classList.add("sponsorSkipMessage"); - // noticeMessage.classList.add("sponsorSkipObject"); - // noticeMessage.innerText = "Hey, you just skipped a sponsor!"; - - // let noticeInfo = document.createElement("p"); - // noticeInfo.id = "sponsorSkipInfo" + UUID; - // noticeInfo.classList.add("sponsorSkipInfo"); - // noticeInfo.classList.add("sponsorSkipObject"); - // noticeInfo.innerText = "This message will disapear in 7 seconds"; - //the row that will contain the info let firstRow = document.createElement("tr"); + firstRow.id = "sponsorSkipNoticeFirstRow" + UUID; let logoColumn = document.createElement("td"); @@ -913,7 +897,7 @@ function openSkipNotice(UUID){ closeButtonContainer.style.top = "11px"; let timeLeft = document.createElement("span"); - timeLeft.innerText = "closing in 7s"; + timeLeft.innerText = "closes in 7s"; timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft"; let hideButton = document.createElement("img"); @@ -929,29 +913,24 @@ function openSkipNotice(UUID){ firstRow.appendChild(closeButtonContainer); let spacer = document.createElement("hr"); + spacer.id = "sponsorSkipNoticeSpacer" + UUID; spacer.className = "sponsorBlockSpacer"; //the row that will contain the buttons let secondRow = document.createElement("tr"); + secondRow.id = "sponsorSkipNoticeSecondRow" + UUID; //thumbs up and down buttons let voteButtonsContainer = document.createElement("td"); voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID; - let upvoteButton = document.createElement("img"); - upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; - upvoteButton.className = "sponsorSkipObject voteButton"; - upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); - upvoteButton.addEventListener("click", () => vote(1, UUID)); - let downvoteButton = document.createElement("img"); downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID; downvoteButton.className = "sponsorSkipObject voteButton"; - downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); + downvoteButton.src = chrome.extension.getURL("icons/report.png"); downvoteButton.addEventListener("click", () => vote(0, UUID)); //add thumbs up and down buttons to the container - voteButtonsContainer.appendChild(upvoteButton); voteButtonsContainer.appendChild(downvoteButton); //add unskip button @@ -968,7 +947,6 @@ function openSkipNotice(UUID){ //add don't show again button let dontshowContainer = document.createElement("td"); dontshowContainer.className = "sponsorSkipNoticeRightSection"; - dontshowContainer.style.bottom = "14px"; let dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide"); @@ -982,34 +960,6 @@ function openSkipNotice(UUID){ secondRow.appendChild(unskipContainer); secondRow.appendChild(dontshowContainer); - // let buttonContainer = document.createElement("div"); - // buttonContainer.setAttribute("align", "center"); - - // let goBackButton = document.createElement("button"); - // goBackButton.innerText = chrome.i18n.getMessage("goBack"); - // goBackButton.className = "sponsorSkipButton"; - // goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID)); - - // let hideButton = document.createElement("button"); - // hideButton.innerText = chrome.i18n.getMessage("Dismiss"); - // hideButton.className = "sponsorSkipButton"; - // hideButton.addEventListener("click", () => closeSkipNotice(UUID)); - - // let dontShowAgainButton = document.createElement("button"); - // dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide"); - // dontShowAgainButton.className = "sponsorSkipDontShowButton"; - // dontShowAgainButton.addEventListener("click", dontShowNoticeAgain); - - // buttonContainer.appendChild(goBackButton); - // buttonContainer.appendChild(hideButton); - // buttonContainer.appendChild(document.createElement("br")); - // buttonContainer.appendChild(document.createElement("br")); - // buttonContainer.appendChild(dontShowAgainButton); - - // noticeElement.appendChild(logoElement); - // noticeElement.appendChild(noticeMessage); - // noticeElement.appendChild(noticeInfo); - noticeElement.appendChild(firstRow); noticeElement.appendChild(spacer); noticeElement.appendChild(secondRow); @@ -1033,36 +983,8 @@ function openSkipNotice(UUID){ } function afterDownvote(UUID) { - //change text to say thanks for voting - //remove buttons - let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID); - let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID); - if (upvoteButton != null) { - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton); - } - if (downvoteButton != null) { - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton); - } - - let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID); - if (previousInfoMessage != null) { - //remove it - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage); - } - - //add thanks for voting text - let thanksForVotingText = document.createElement("p"); - thanksForVotingText.id = "sponsorTimesThanksForVotingText"; - thanksForVotingText.innerText = chrome.i18n.getMessage("Voted"); - - //add extra info for voting - let thanksForVotingInfoText = document.createElement("p"); - thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText"; - thanksForVotingInfoText.innerText = chrome.i18n.getMessage("hitGoBack"); - - //add element to div - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText); - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText); + addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID); + addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID); //remove this sponsor from the sponsors looked up //find which one it is @@ -1081,41 +1003,71 @@ function afterDownvote(UUID) { //update the preview previewBar.set(sponsorTimesLeft, [], v.duration); + + break; } } } -function addLoadingInfo(message, UUID) { - //change text to say thanks for message - //remove buttons - let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID); - let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID); - if (upvoteButton != null) { - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton); - } - if (downvoteButton != null) { - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton); - } - +function addNoticeInfoMessage(message, UUID) { let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID); if (previousInfoMessage != null) { //remove it - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage); + document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage); } - //add thanks for voting text + //add info let thanksForVotingText = document.createElement("p"); thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID; thanksForVotingText.className = "sponsorTimesInfoMessage"; thanksForVotingText.innerText = message; //add element to div - document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText); + document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + UUID)); +} + +function resetNoticeInfoMessage(UUID) { + let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID); + if (previousInfoMessage != null) { + //remove it + document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage); + } +} + +function addVoteButtonInfo(message, UUID) { + resetVoteButtonInfo(UUID); + + //hide vote button + let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID); + if (downvoteButton != null) { + document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.display = "none"; + } + + //add info + let thanksForVotingText = document.createElement("td"); + thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + UUID; + thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"; + thanksForVotingText.innerText = message; + + //add element to div + document.getElementById("sponsorSkipNoticeSecondRow" + UUID).prepend(thanksForVotingText); +} + +function resetVoteButtonInfo(UUID) { + let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + UUID); + if (previousInfoMessage != null) { + //remove it + document.getElementById("sponsorSkipNoticeSecondRow" + UUID).removeChild(previousInfoMessage); + } + + //show button again + document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.removeProperty("display"); } function vote(type, UUID) { //add loading info - addLoadingInfo("Loading...", UUID) + addVoteButtonInfo("Loading...", UUID) + resetNoticeInfoMessage(UUID); chrome.runtime.sendMessage({ message: "submitVote", @@ -1128,18 +1080,19 @@ function vote(type, UUID) { //success if (type == 0) { afterDownvote(UUID); - } else if (type == 1) { - closeSkipNotice(UUID); } } else if (response.successType == 0) { //failure: duplicate vote - addLoadingInfo(chrome.i18n.getMessage("voteFAIL"), UUID) + addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID) + resetVoteButtonInfo(UUID); } else if (response.successType == -1) { if (response.statusCode == 502) { - addLoadingInfo(chrome.i18n.getMessage("serverDown"), UUID) + addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID) + resetVoteButtonInfo(UUID); } else { //failure: unknown error - addLoadingInfo(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID); + addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID); + resetVoteButtonInfo(UUID); } } } diff --git a/icons/report.png b/icons/report.png new file mode 100644 index 00000000..2376d3e9 Binary files /dev/null and b/icons/report.png differ diff --git a/manifest.json b/manifest.json index 91388a7d..e884af6f 100644 --- a/manifest.json +++ b/manifest.json @@ -33,6 +33,7 @@ "icons/PlayerUploadFailedIconSponsorBlocker256px.png", "icons/upvote.png", "icons/downvote.png", + "icons/report.png", "icons/close.png", "icons/PlayerInfoIconSponsorBlocker256px.png", "icons/PlayerDeleteIconSponsorBlocker256px.png", diff --git a/popup.js b/popup.js index 8bf8d020..5a826b0a 100644 --- a/popup.js +++ b/popup.js @@ -1051,7 +1051,7 @@ function runThePopup() { //this is not a YouTube video page function displayNoVideo() { - document.getElementById("loadingIndicator").innerHTML = chrome.i18n.getMessage("noVideoID"); + document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID"); } function reportAnIssue() {