From edb577cf5bfabba77d24a2822f91f35098df70e4 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 14 Aug 2019 21:30:02 -0400 Subject: [PATCH] Changed popup to only use report button instead of upvote and downvote + improved popup. --- _locales/en/messages.json | 4 +- content.css | 26 +++--- content.js | 165 ++++++++++++++------------------------ icons/report.png | Bin 0 -> 2753 bytes manifest.json | 1 + popup.js | 2 +- 6 files changed, 79 insertions(+), 119 deletions(-) create mode 100644 icons/report.png 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 0000000000000000000000000000000000000000..2376d3e9cc9220ac0d0f76a039f3d0cce3646097 GIT binary patch literal 2753 zcmds({Xf(F9>+iXZfp@VH(Bncx>76231#lK7`cgroI1(+q9ZqU+}Lxb`CXX zZzK|us{A*K?W#iWu->pweu+OgWR=i;;YaJ}kC@qkP0evmqxf6xqg|~H?iUq)De__= zG3b(yC1WGKpEG5&%3n-YAhLm9mek|$^(RzGC6uTRa8;?j#U(^Kf*{w~Ix4z!z7)xA z5Ax&U@X4oDqa_sA`=IOK^dc(C(B*b&a&{1Q&j-28H*GZ-@SS(*|j6Q?|5{vEfq*V~!v#r37`#X&6i7)Ww zp2Ni60ycLX6A6_YxV@N2s`TSFV#2Y~ms^O5}k$TLJTMq_HX^6x8 z?}uMKYDd*}Z9|`hmUeB`xiKO1SgZG_+(2X7kRXt8@MdEDUwW|S)34kSci2?WmKQ4#ci4Z>mX{19`ls`Xjzs@- zUb`Wdm=pYB1!9Rg!7p8ry;!Gq`%Tdz*lF0aKm53R;DCFN7g3_9a5!nZ_7LO*n2p^= zML)wc5Z9HRk_Nzt>D@GnD@^F{jZwa!AkVZXi=p02bQRDg`bV;t4($-53Aq zAu6i20~=zwZux~7s&awyyY!;aJ%JesbVb>71RIScO~$D0?~*sG_vDPK!v zCk}h`b%5~?yOeyoc=W7B$xt6blW^CpR2mmgyduvW&8sdHtR3=Ak<$nQ!W-A2G-m_6 zBBvP5t11+@-MiRnH;U zLg=2HDO zA0Z&pFg(zl48j6AcS((d@HC=ColbkMcNF%_IHsEj(NF!6Q$WA9 zVjS1ldm&*qK8O=I6(~wS?bOpnwGQX`vn#%S ztgX8&UfcG%y-S{i8_L)uvKa8EXC3U)A1rMLnOR+Xc}v`H!#47PaDuSnTbA-|VUH+# zm#aF{>8qn)h;!`r_P@F<|NQdr34%mJS2i=$6Z5|d;V;tOp?S`&*K|l}15`Azb)nW* zJ}G0U-P5!3OUGgv>Xp)Nbe-WLw~<7Jrb7r{K6yywmJMv)@g8Jvq{l{&7o^CEQg`75 z?h<(G^>SX5T&c?W6#;&t9a|YwNOuC7{bcs_6KO_n`G=YG*-uW7v~l-<@RFfFo;rA7 zZcU{wI3sM#*(@WQ5HNM@DO5U`Iv&tTHu<@VK7@*hd3UQ+IS39cv0ddjsjUbFQj$Oa z^ck8S7GvMh_`Cx`N+{1)MmED>-YdKWHNOBZ!8FiJm2(;v#aa~MB&e~6R&SG}lWd0V zyBX21t?0ovZk1RuBdmZU^2xhNmGcM>^TAjCF|A<1_tXUR<W#d`jcv1B(#Z zIXek>7%ZZxx|3{x!6dzJv=vV=*p?D2rZWbUcsHnWIx(29i>F}N7R$58R5>A7Jq4e3 zOe;1+KF_%S49!g+^3O`HXnb-o{^rzmf?;Qvcdl`ek*%=_=sq3MR*XTuV*5=SCV>R= zBUL{%KJefvib(G>Gz6R7TI1c*Mp$8uVKo{bDYoYQu9LhTE8_V)hJb|Cg&=vfqmao; zu8@&+p|SorjY$=n_}QAunDJnUiW*tXS-}exWw=DeybtWTgqwp}b9m>XqIIsb@Xn>@ zC(_T&)`8bD3a>=P=>YqrB3m E0$xUlCIA2c literal 0 HcmV?d00001 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() {